Design updates

.changeset/chilled-moose-design.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Design update for PhET widget

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

@@ -55,10 +55,9 @@ describe("phet-sim widget", () => {
 
         // Assert
         await waitFor(() => {
-            expect(screen.queryByTitle("Google")).toHaveAttribute(
-                "srcDoc",
-                "Sorry, this simulation cannot load.",
-            );
+            expect(
+                screen.getByText("Sorry, this simulation cannot load."),
+            ).toBeDefined();
         });
     });
 

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

@@ -8,11 +8,14 @@
 import {View} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import cornersOutIcon from "@phosphor-icons/core/regular/corners-out.svg";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import {PerseusI18nContext} from "../components/i18n-context";
 import {getDependencies} from "../dependencies";
 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 {WidgetExports, WidgetProps} from "../types";
@@ -25,7 +28,10 @@
 type UserInput = null;
 
 type State = {
-    bannerMessage: string | null;
+    banner: {
+        message: string;
+        kind: "warning" | "critical";
+    } | null;
     url: URL | null;
 };
 
@@ -39,7 +45,7 @@
 
     state: State = {
         url: null,
-        bannerMessage: null,
+        banner: null,
     };
 
     constructor(props) {
@@ -69,29 +75,32 @@
         // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
         const sandboxProperties = "allow-same-origin allow-scripts";
         return (
-            <View>
-                {this.state.bannerMessage && (
+            <View style={styles.container}>
+                {this.state.banner !== null && (
                     // TODO(anna): Make this banner focusable
-                    <Banner
-                        kind="warning"
-                        layout="floating"
-                        text={this.state.bannerMessage}
-                    />
+                    <View
+                        style={{
+                            marginBottom: phoneMargin,
+                        }}
+                    >
+                        <Banner
+                            layout="floating"
+                            kind={this.state.banner.kind}
+                            text={this.state.banner.message}
+                        />
+                    </View>
                 )}
                 <iframe
                     ref={this.iframeRef}
                     title={this.props.description}
                     sandbox={sandboxProperties}
                     style={{
-                        width: 400,
-                        height: 400,
+                        minWidth: 400,
+                        height: 360,
+                        width: "100%",
+                        borderWidth: 0,
                     }}
                     src={this.state.url?.toString()}
-                    srcDoc={
-                        this.state.url !== null
-                            ? undefined
-                            : this.context.strings.simulationLoadFail
-                    }
                     allow="fullscreen"
                 />
                 <IconButton
@@ -106,6 +115,7 @@
                         marginBottom: 5,
                         alignSelf: "flex-end",
                     }}
+                    disabled={this.state.url === null}
                 />
             </View>
         );
@@ -140,22 +150,35 @@
         }
     };
 
+    displayLoadFailure: () => void = () => {
+        this.setState({
+            url: null,
+            banner: {
+                message: this.context.strings.simulationLoadFail,
+                kind: "critical",
+            },
+        });
+    };
+
     async updateSimState(urlString: string) {
         const url = makeSafeUrl(urlString, this.locale);
         if (url === null) {
-            this.setState({url: null, bannerMessage: null});
+            this.displayLoadFailure();
             return;
         }
         const response = await fetch(url);
         if (!response.ok) {
-            this.setState({url: null, bannerMessage: null});
+            this.displayLoadFailure();
             return;
         }
         const showLocaleWarning = await this.showLocaleWarning(url);
         this.setState({
             url: url,
-            bannerMessage: showLocaleWarning
-                ? this.context.strings.simulationLocaleWarning
+            banner: showLocaleWarning
+                ? {
+                      message: this.context.strings.simulationLocaleWarning,
+                      kind: "warning",
+                  }
                 : null,
         });
     }
@@ -170,7 +193,7 @@
             /https:\/\/phet\.colorado\.edu\/sims\/html\/([a-zA-Z0-9-]+)\/.*/g;
         const match: RegExpExecArray | null = phetRegex.exec(url.toString());
         // Do not show a locale warning on a non-simulation URL
-        if (!match) {
+        if (match === null) {
             return false;
         }
         const simName = match[1];
@@ -180,14 +203,19 @@
         if (!response.ok) {
             return false;
         }
-        const responseJson = await response.json();
-        if (!responseJson) {
+
+        let responseJson: any;
+        try {
+            responseJson = await response.json();
+        } catch {
+            // If the file exists but there is no content to parse into a JSON,
+            // response.json() will throw an error that we want to catch.
             return false;
         }
-        const locales = Object.keys(responseJson);
+        const locales: string[] = Object.keys(responseJson);
 
         // Only display a locale warning if there is no fallback language
-        const baseLocale = this.locale.split("_")[0];
+        const baseLocale: string = this.locale.split("_")[0];
         for (const l of locales) {
             if (baseLocale === l.split("_")[0]) {
                 return false;
@@ -218,3 +246,14 @@
     hidden: true,
     isLintable: true,
 } as WidgetExports<typeof PhetSim>;
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: borderRadiusLarge,
+        borderWidth: 1,
+        borderColor: basicBorderColor,
+        padding: phoneMargin,
+        paddingBottom: 0,
+        width: 650,
+    },
+});