Refactor PhET Sim widget to be called PhET Simulation (#1549)

## Summary:
* Refactors PhET Simulation widget to include full word "simulation" instead of abbreviation "sim"
* Adds a missing peer dependency for Wonder Blocks Icon Button

Issue: LEMS-2284

## Test plan:
* Verify that the PhET widget and content editor work on Storybook
* `yarn jest packages/perseus/src/widgets/__tests__/phet-simulation.test.ts`
* `yarn jest packages/perseus-editor/src/widgets/__tests__/phet-simulation-editor.test.tsx`

Author: aemandine

Reviewers: Myranae, SonicScrewdriver

Required Reviewers:

Approved By: Myranae, SonicScrewdriver

Checks: ✅ gerald, ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, ⏭️  Publish npm snapshot, 🚫 Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), 🚫 Jest Coverage (ubuntu-latest, 20.x), 🚫 Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, ⏭️  Publish npm snapshot, ✅ Cypress (ubuntu-latest, 20.x), 🚫 Jest Coverage (ubuntu-latest, 20.x), 🚫 Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1549

.changeset/shy-jeans-reply.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Refactor PhET Sim widget name to PhET Simulation

packages/perseus-editor/src/all-editors.ts

@@ -27,7 +27,7 @@ import OrdererEditor from "./widgets/orderer-editor";
 import PassageEditor from "./widgets/passage-editor";
 import PassageRefEditor from "./widgets/passage-ref-editor";
 import PassageRefTargetEditor from "./widgets/passage-ref-target-editor";
-import PhetSimEditor from "./widgets/phet-sim-editor";
+import PhetSimulationEditor from "./widgets/phet-simulation-editor";
 import PlotterEditor from "./widgets/plotter-editor";
 import PythonProgramEditor from "./widgets/python-program-editor";
 import RadioEditor from "./widgets/radio/editor";
@@ -65,7 +65,7 @@ export default [
     PassageEditor,
     PassageRefEditor,
     PassageRefTargetEditor,
-    PhetSimEditor,
+    PhetSimulationEditor,
     PlotterEditor,
     PythonProgramEditor,
     SimpleMarkdownTesterEditor,

packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx → packages/perseus-editor/src/widgets/__stories__/phet-simulation-editor.stories.tsx

@@ -1,16 +1,16 @@
 import {action} from "@storybook/addon-actions";
 
-import PhetSimEditor from "../phet-sim-editor";
+import PhetSimulationEditor from "../phet-simulation-editor";
 
 import type {Meta, StoryObj} from "@storybook/react";
 
-const meta: Meta<typeof PhetSimEditor> = {
-    component: PhetSimEditor,
+const meta: Meta<typeof PhetSimulationEditor> = {
+    component: PhetSimulationEditor,
     title: "PerseusEditor/Widgets/PhET Simulation Editor",
 };
 
 export default meta;
-type Story = StoryObj<typeof PhetSimEditor>;
+type Story = StoryObj<typeof PhetSimulationEditor>;
 
 export const Primary: Story = {
     args: {

packages/perseus-editor/src/widgets/__tests__/phet-sim-editor.test.tsx → packages/perseus-editor/src/widgets/__tests__/phet-simulation-editor.test.tsx

@@ -4,11 +4,11 @@ import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
-import PhetSimEditor from "../phet-sim-editor";
+import PhetSimulationEditor from "../phet-simulation-editor";
 
 import type {UserEvent} from "@testing-library/user-event";
 
-describe("phet-sim editor", () => {
+describe("phet-simulation editor", () => {
     let userEvent: UserEvent;
     beforeEach(() => {
         userEvent = userEventLib.setup({
@@ -22,7 +22,7 @@ describe("phet-sim editor", () => {
 
     it("renders", async () => {
         // Act
-        render(<PhetSimEditor onChange={() => {}} />);
+        render(<PhetSimulationEditor onChange={() => {}} />);
 
         // Assert
         expect(screen.getByLabelText("URL")).toBeInTheDocument();
@@ -34,7 +34,7 @@ describe("phet-sim editor", () => {
         const onChangeMock = jest.fn();
 
         // Act
-        render(<PhetSimEditor onChange={onChangeMock} />);
+        render(<PhetSimulationEditor onChange={onChangeMock} />);
         await userEvent.type(screen.getByLabelText("URL"), "h");
 
         // Assert
@@ -46,7 +46,7 @@ describe("phet-sim editor", () => {
         const onChangeMock = jest.fn();
 
         // Act
-        render(<PhetSimEditor onChange={onChangeMock} />);
+        render(<PhetSimulationEditor onChange={onChangeMock} />);
         await userEvent.type(screen.getByLabelText("Description"), "P");
 
         // Assert

packages/perseus-editor/src/widgets/phet-sim-editor.tsx → packages/perseus-editor/src/widgets/phet-simulation-editor.tsx

@@ -3,11 +3,11 @@
 import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 
-import type {PerseusPhetSimWidgetOptions} from "@khanacademy/perseus";
+import type {PerseusPhetSimulationWidgetOptions} from "@khanacademy/perseus";
 
 type DefaultProps = {
-    url: PerseusPhetSimWidgetOptions["url"];
-    description: PerseusPhetSimWidgetOptions["description"];
+    url: PerseusPhetSimulationWidgetOptions["url"];
+    description: PerseusPhetSimulationWidgetOptions["description"];
 };
 
 type Props = DefaultProps & {
@@ -17,13 +17,13 @@ type Props = DefaultProps & {
     }) => void;
 };
 
-class PhetSimEditor extends React.Component<Props> {
+class PhetSimulationEditor extends React.Component<Props> {
     static defaultProps: DefaultProps = {
         url: "",
         description: "",
     };
 
-    static widgetName = "phet-sim" as const;
+    static widgetName = "phet-simulation" as const;
 
     render(): React.ReactNode {
         return (
@@ -45,12 +45,12 @@ class PhetSimEditor extends React.Component<Props> {
         );
     }
 
-    serialize(): PerseusPhetSimWidgetOptions {
+    serialize(): PerseusPhetSimulationWidgetOptions {
         return {
             url: this.props.url,
             description: this.props.description,
         };
     }
 }
 
-export default PhetSimEditor;
+export default PhetSimulationEditor;

packages/perseus/package.json

@@ -96,6 +96,7 @@
         "@khanacademy/wonder-blocks-dropdown": "5.3.0",
         "@khanacademy/wonder-blocks-form": "^4.7.1",
         "@khanacademy/wonder-blocks-icon": "4.1.0",
+        "@khanacademy/wonder-blocks-icon-button": "5.2.1",
         "@khanacademy/wonder-blocks-layout": "2.0.32",
         "@khanacademy/wonder-blocks-link": "6.1.1",
         "@khanacademy/wonder-blocks-pill": "2.2.1",

packages/perseus/src/extra-widgets.ts

@@ -26,7 +26,7 @@ import Orderer from "./widgets/orderer";
 import Passage from "./widgets/passage";
 import PassageRef from "./widgets/passage-ref";
 import PassageRefTarget from "./widgets/passage-ref-target";
-import PhetSim from "./widgets/phet-sim";
+import PhetSimulation from "./widgets/phet-simulation";
 import Plotter from "./widgets/plotter";
 import PythonProgram from "./widgets/python-program";
 import Sorter from "./widgets/sorter";
@@ -59,7 +59,7 @@ export default [
     Passage,
     PassageRef,
     PassageRefTarget,
-    PhetSim,
+    PhetSimulation,
     Plotter,
     PythonProgram,
     Sorter,

packages/perseus/src/index.ts

@@ -195,7 +195,7 @@ export type {
     PerseusInputNumberWidgetOptions,
     PerseusInteractiveGraphWidgetOptions,
     PerseusItem,
-    PerseusPhetSimWidgetOptions,
+    PerseusPhetSimulationWidgetOptions,
     PerseusPlotterWidgetOptions,
     PerseusPythonProgramWidgetOptions,
     PerseusRadioWidgetOptions,

packages/perseus/src/perseus-types.ts

@@ -68,7 +68,7 @@ export type PerseusWidgetsMap = {
 } & {
     [key in `passage-ref-target ${number}`]: PassageRefWidget;
 } & {
-    [key in `phet-sim ${number}`]: PhetSimWidget;
+    [key in `phet-simulation ${number}`]: PhetSimulationWidget;
 } & {
     [key in `plotter ${number}`]: PlotterWidget;
 } & {
@@ -249,7 +249,7 @@ export type PassageRefWidget = Widget<'passage-ref', PerseusPassageRefWidgetOpti
 // prettier-ignore
 export type PassageWidget = Widget<'passage', PerseusPassageWidgetOptions>;
 // prettier-ignore
-export type PhetSimWidget = Widget<'phet-sim', PerseusPhetSimWidgetOptions>;
+export type PhetSimulationWidget = Widget<'phet-simulation', PerseusPhetSimulationWidgetOptions>;
 // prettier-ignore
 export type PlotterWidget = Widget<'plotter', PerseusPlotterWidgetOptions>;
 // prettier-ignore
@@ -305,7 +305,7 @@ export type PerseusWidget =
     | OrdererWidget
     | PassageRefWidget
     | PassageWidget
-    | PhetSimWidget
+    | PhetSimulationWidget
     | PlotterWidget
     | PythonProgramWidget
     | RadioWidget
@@ -1567,7 +1567,7 @@ export type PerseusIFrameWidgetOptions = {
     static: boolean;
 };
 
-export type PerseusPhetSimWidgetOptions = {
+export type PerseusPhetSimulationWidgetOptions = {
     // A URL to display, must start with https://phet.colorado.edu/
     url: string;
     // Translatable Text; Description of the sim for Khanmigo and alt text
@@ -1642,7 +1642,7 @@ export type PerseusWidgetOptions =
     | PerseusPassageRefTargetWidgetOptions
     | PerseusPassageRefWidgetOptions
     | PerseusPassageWidgetOptions
-    | PerseusPhetSimWidgetOptions
+    | PerseusPhetSimulationWidgetOptions
     | PerseusPlotterWidgetOptions
     | PerseusRadioWidgetOptions
     | PerseusSimpleMarkdownTesterWidgetOptions

packages/perseus/src/util/widget-enum-utils.ts

@@ -34,7 +34,7 @@ type WidgetName =
     | "passage"
     | "passage-ref"
     | "passage-ref-target"
-    | "phet-sim"
+    | "phet-simulation"
     | "plotter"
     | "python-program"
     | "reaction-diagram"
@@ -74,7 +74,7 @@ type WidgetEnum =
     | "PASSAGE"
     | "PASSAGE_REF"
     | "PASSAGE_REF_TARGET"
-    | "PHET_SIM"
+    | "PHET_SIMULATION"
     | "PLOTTER"
     | "PYTHON_PROGRAM"
     | "REACTION_DIAGRAM"
@@ -115,7 +115,7 @@ const widgetNameToEnum: Record<WidgetName, WidgetEnum> = {
     passage: "PASSAGE",
     "passage-ref": "PASSAGE_REF",
     "passage-ref-target": "PASSAGE_REF_TARGET",
-    "phet-sim": "PHET_SIM",
+    "phet-simulation": "PHET_SIMULATION",
     plotter: "PLOTTER",
     "python-program": "PYTHON_PROGRAM",
     "reaction-diagram": "REACTION_DIAGRAM",

packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx → packages/perseus/src/widgets/__stories__/phet-simulation.stories.tsx

@@ -1,14 +1,14 @@
-import {PhetSim} from "../phet-sim";
+import {PhetSimulation} from "../phet-simulation";
 
 import type {Meta, StoryObj} from "@storybook/react";
 
-const meta: Meta<typeof PhetSim> = {
-    component: PhetSim,
+const meta: Meta<typeof PhetSimulation> = {
+    component: PhetSimulation,
     title: "Perseus/Widgets/PhET Simulation",
 };
 
 export default meta;
-type Story = StoryObj<typeof PhetSim>;
+type Story = StoryObj<typeof PhetSimulation>;
 
 export const Primary: Story = {
     args: {

packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts → packages/perseus/src/widgets/__testdata__/phet-simulation.testdata.ts

@@ -2,14 +2,14 @@ import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
     content:
-        "Do this fun PhET simulation! A projectile data lab!\n[[\u2603 phet-sim 1]]\n",
+        "Do this fun PhET simulation! A projectile data lab!\n[[\u2603 phet-simulation 1]]\n",
     images: {},
     widgets: {
-        "phet-sim 1": {
+        "phet-simulation 1": {
             graded: false,
             version: {major: 0, minor: 0},
             static: false,
-            type: "phet-sim",
+            type: "phet-simulation",
             options: {
                 url: "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html",
                 description: "Projectile Data Lab",
@@ -20,14 +20,14 @@ export const question1: PerseusRenderer = {
 };
 
 export const nonPhetUrl: PerseusRenderer = {
-    content: "This should display an error!\n[[\u2603 phet-sim 2]]\n",
+    content: "This should display an error!\n[[\u2603 phet-simulation 2]]\n",
     images: {},
     widgets: {
-        "phet-sim 2": {
+        "phet-simulation 2": {
             graded: false,
             version: {major: 0, minor: 0},
             static: false,
-            type: "phet-sim",
+            type: "phet-simulation",
             options: {
                 url: "https://google.com/",
                 description: "Google",

packages/perseus/src/widgets/__tests__/phet-sim.test.ts → packages/perseus/src/widgets/__tests__/phet-simulation.test.ts

@@ -2,14 +2,14 @@ import {screen, waitFor} from "@testing-library/react";
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import {nonPhetUrl, question1} from "../__testdata__/phet-sim.testdata";
-import {makeSafeUrl} from "../phet-sim";
+import {nonPhetUrl, question1} from "../__testdata__/phet-simulation.testdata";
+import {makeSafeUrl} from "../phet-simulation";
 
 import {renderQuestion} from "./renderQuestion";
 
 import type {APIOptions} from "../../types";
 
-describe("phet-sim widget", () => {
+describe("phet-simulation widget", () => {
     beforeEach(() => {
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,

packages/perseus/src/widgets/phet-sim.tsx → packages/perseus/src/widgets/phet-simulation.tsx

@@ -17,11 +17,11 @@ import * as Changeable from "../mixins/changeable";
 import {phoneMargin} from "../styles/constants";
 import {basicBorderColor, borderRadiusLarge} from "../styles/global-constants";
 
-import type {PerseusPhetSimWidgetOptions} from "../perseus-types";
+import type {PerseusPhetSimulationWidgetOptions} from "../perseus-types";
 import type {WidgetExports, WidgetProps} from "../types";
 
-type RenderProps = PerseusPhetSimWidgetOptions;
-type Props = WidgetProps<RenderProps, PerseusPhetSimWidgetOptions>;
+type RenderProps = PerseusPhetSimulationWidgetOptions;
+type Props = WidgetProps<RenderProps, PerseusPhetSimulationWidgetOptions>;
 
 // For returning user input, but currently the PhET widget
 // does not support accessing user input
@@ -36,7 +36,7 @@ type State = {
 };
 
 // This renders the PhET sim
-export class PhetSim extends React.Component<Props, State> {
+export class PhetSimulation extends React.Component<Props, State> {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
     private readonly iframeRef: React.RefObject<HTMLIFrameElement> =
@@ -127,8 +127,8 @@ export class PhetSim extends React.Component<Props, State> {
     };
 
     simpleValidate: (arg1: any) => any = (rubric) => {
-        // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSim'.
-        return PhetSim.validate(this.getUserInput(), rubric);
+        // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSimulation'.
+        return PhetSimulation.validate(this.getUserInput(), rubric);
     };
 
     // kaLocales and PhET locales use different formats and abbreviations.
@@ -239,13 +239,13 @@ export const makeSafeUrl = (urlString: string, locale: string): URL | null => {
 };
 
 export default {
-    name: "phet-sim",
+    name: "phet-simulation",
     displayName: "PhET Simulation",
-    widget: PhetSim,
+    widget: PhetSimulation,
     // Hides widget from content creators until full release
     hidden: true,
     isLintable: true,
-} as WidgetExports<typeof PhetSim>;
+} as WidgetExports<typeof PhetSimulation>;
 
 const styles = StyleSheet.create({
     container: {