Design updates

[aemandine]

Summary:

Update PhET widget design:

• Draws an outline around the entire widget, connecting the iframe and fullscreen button into a cohesive unit
• Displays simulation load error message as a banner
• Displays empty iframe if the simulation did not load
• Disables fullscreen button if the simulation did not load
• Adds space between the banner and iframe
• Removes iframe outline
• Makes iframe larger and closer to 16:9 ratio instead of square

Issue: LEMS-2279

Test plan:

• Verify that the widget shows up appropriately in Storybook
  • Set URL to a valid PhET simulation (like https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html) and verify that the simulation appears correctly
  • Change URL to a non-PhET origin and verify that the error shows up and matches the appropriate PR screenshot
  • Click the fullscreen button and verify that the iframe goes into fullscreen mode
• yarn jest packages/perseus/src/widgets/__tests__/phet-sim.test.ts

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to packages/perseus/src/widgets/phet-sim.tsx, packages/perseus/src/widgets/__tests__/phet-sim.test.ts

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/chilled-moose-design.md, packages/perseus/src/widgets/phet-sim.tsx, packages/perseus/src/widgets/__tests__/phet-sim.test.ts

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (54539b3) and published it to npm. You
can install it using the tag PR1542.

Example:

yarn add @khanacademy/perseus@PR1542

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1542

[github-actions]

Size Change: +224 B (+0.03%)

Total Size: 877 kB

Filename	Size	Change
packages/perseus/dist/es/index.js	435 kB	+224 B (+0.05%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	77.7 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-editor/dist/es/index.js	277 kB
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/perseus/dist/es/strings.js	3.34 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[codecov]

Codecov Report

Attention: Patch coverage is 84.37500% with 10 lines in your changes missing coverage. Please review.

Please upload report for BASE (phet-widget@6e102f9). Learn more about missing BASE report.

Files	Patch %	Lines
packages/perseus/src/widgets/phet-sim.tsx	84.37%	10 Missing ⚠️

Additional details and impacted files

@@              Coverage Diff               @@
##             phet-widget    #1542   +/-   ##
==============================================
  Coverage               ?   70.60%           
==============================================
  Files                  ?      520           
  Lines                  ?   106657           
  Branches               ?    10919           
==============================================
  Hits                   ?    75309           
  Misses                 ?    31348           
  Partials               ?        0           

Files	Coverage Δ
packages/perseus/src/widgets/phet-sim.tsx	75.67% <84.37%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6e102f9...54539b3. Read the comment docs.

[SonicScrewdriver]

We worked through this together! We'll focus on tidying up the widths in a later PR.