@khanacademy/perseus 0.3.4 → 0.4.0

package/src/multi-items/__tests__/multi-renderer_test.js

@@ -136,7 +136,7 @@ describe("multi-item renderer", () => {
             // selected, a value is entered). You can see the result of this in the `choiceStates`
             // array in the captured state below where the choice at index 2 has
             // `"selected": true` (instead of false) and the input-number has a `currentValue`.
-            userEvent.click(screen.getAllByRole("radio")[2]); // Correct
+            userEvent.click(screen.getAllByRole("checkbox")[2]); // Correct
             userEvent.paste(screen.getByRole("textbox"), "+42"); // Correct
 
             // Act
@@ -268,7 +268,7 @@ describe("multi-item renderer", () => {
             // Arrange
             const {renderer} = renderSimpleQuestion(question1);
 
-            userEvent.click(screen.getAllByRole("radio")[2]);
+            userEvent.click(screen.getAllByRole("checkbox")[2]);
             userEvent.paste(screen.getByRole("textbox"), "99");
 
             // Act
@@ -525,11 +525,11 @@ describe("multi-item renderer", () => {
             renderer.restoreSerializedState(state);
 
             // Assert
-            expect(screen.getAllByRole("radio")[0]).not.toBeChecked();
-            expect(screen.getAllByRole("radio")[1]).not.toBeChecked();
-            expect(screen.getAllByRole("radio")[2]).toBeChecked();
-            expect(screen.getAllByRole("radio")[3]).not.toBeChecked();
-            expect(screen.getAllByRole("radio")[4]).not.toBeChecked();
+            expect(screen.getAllByRole("checkbox")[0]).not.toBeChecked();
+            expect(screen.getAllByRole("checkbox")[1]).not.toBeChecked();
+            expect(screen.getAllByRole("checkbox")[2]).toBeChecked();
+            expect(screen.getAllByRole("checkbox")[3]).not.toBeChecked();
+            expect(screen.getAllByRole("checkbox")[4]).not.toBeChecked();
             expect(screen.getByRole("textbox")).toHaveValue("+42");
         });
 
@@ -586,7 +586,7 @@ describe("multi-item renderer", () => {
         // Arrange
         const {renderer} = renderSimpleQuestion(question1);
 
-        userEvent.click(screen.getAllByRole("radio")[3]); // Correct
+        userEvent.click(screen.getAllByRole("checkbox")[3]); // Correct
         userEvent.paste(screen.getByRole("textbox"), "-42"); // Correct
 
         // Act
@@ -747,7 +747,7 @@ describe("multi-item renderer", () => {
         // Arrange
         const {renderer} = renderSimpleQuestion(question1);
 
-        userEvent.click(screen.getAllByRole("radio")[3]); // Correct
+        userEvent.click(screen.getAllByRole("checkbox")[3]); // Correct
         userEvent.paste(screen.getByRole("textbox"), "-42"); // Correct
 
         // Act

package/src/renderer.jsx

@@ -12,6 +12,7 @@ import SvgImage from "./components/svg-image.jsx";
 import TeX from "./components/tex.jsx";
 import ZoomableTeX from "./components/zoomable-tex.jsx";
 import Zoomable from "./components/zoomable.jsx";
+import {DefinitionProvider} from "./definition-context.js";
 import {getDependencies} from "./dependencies.js";
 import ErrorBoundary from "./error-boundary.jsx";
 import InteractionTracker from "./interaction-tracker.js";
@@ -1843,11 +1844,15 @@ class Renderer extends React.Component<Props, State> {
                 // this attribute and render the text with markdown.
                 return (
                     <KatexProvider>
-                        <div
-                            data-perseus-component-index={this.translationIndex}
-                        >
-                            {content}
-                        </div>
+                        <DefinitionProvider>
+                            <div
+                                data-perseus-component-index={
+                                    this.translationIndex
+                                }
+                            >
+                                {content}
+                            </div>
+                        </DefinitionProvider>
                     </KatexProvider>
                 );
             }
@@ -1907,7 +1912,9 @@ class Renderer extends React.Component<Props, State> {
 
         this.lastRenderedMarkdown = (
             <KatexProvider>
-                <div className={className}>{markdownContents}</div>
+                <DefinitionProvider>
+                    <div className={className}>{markdownContents}</div>
+                </DefinitionProvider>
             </KatexProvider>
         );
         return this.lastRenderedMarkdown;

package/src/types.js

@@ -262,6 +262,9 @@ export type APIOptions = $ReadOnly<{|
         //   callsites should have been switched to using the "final"
         //   designs.
         radioStyleVersion?: "intermediate" | "final",
+
+        // TODO(Nicole): Remove this after landing wonderblock-ifying
+        // the radio widget
         primaryProductColor?: string,
     |},
 
@@ -316,8 +319,6 @@ export type DomInsertCheckFn = (
 
 export type JIPT = {|
     useJIPT: boolean,
-    // eslint-disable-next-line ft-flow/no-mutable-array
-    domInsertChecks: Array<DomInsertCheckFn>,
 |};
 
 export type JiptLabelStore = {|
@@ -404,9 +405,7 @@ export type PerseusDependencies = {|
     // RequestInfo
     isDevServer: boolean,
     kaLocale: string,
-    isPhone: boolean,
     isMobile: boolean,
-    isTablet: boolean,
 |};
 
 export type APIOptionsWithDefaults = $ReadOnly<{|

package/src/widgets/__stories__/definition.stories.jsx

@@ -31,8 +31,52 @@ const question1 = {
     },
 };
 
+const question2 = {
+    content:
+        "Read the excerpt and answer the question below. \n\nThe [[\u2603 definition 2]] and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 definition 1]], upon these conditions.",
+    images: {},
+    widgets: {
+        "definition 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "definition",
+            options: {
+                definition:
+                    "A Native American people in Connecticut; white settlers in New England, the Pequots, and their respective allies were at war from 1636-1638.",
+                togglePrompt: "the Pequots",
+                static: false,
+            },
+            alignment: "default",
+        },
+        "definition 2": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "definition",
+            options: {
+                definition:
+                    "A governor is an administrative leader and head of a polity or political region, ranking under the head of state and in some cases, such as governors-general, as the head of state's official representative.",
+                togglePrompt: "Governor",
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+};
+
 type StoryArgs = {||};
 
 export const Question1 = (args: StoryArgs): React.Node => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const MultipleDefintions = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question2} />;
+};

package/src/widgets/__tests__/__snapshots__/categorizer_test.jsx.snap

@@ -375,8 +375,25 @@ exports[`categorizer widget should snapshot on mobile: first mobile render 1`] =
               style="padding-bottom: 101.36%;"
             />
             <span
-              style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
-            />
+              style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
+            >
+              <div
+                class="default_xu2jcg-o_O-spinnerContainer_agrn11"
+              >
+                <svg
+                  height="48"
+                  viewBox="0 0 48 48"
+                  width="48"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
+                    d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
+                    fill-rule="nonzero"
+                  />
+                </svg>
+              </div>
+            </span>
           </div>
         </div>
       </div>
@@ -407,8 +424,25 @@ exports[`categorizer widget should snapshot on mobile: first mobile render 1`] =
               style="padding-bottom: 91.39%;"
             />
             <span
-              style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
-            />
+              style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
+            >
+              <div
+                class="default_xu2jcg-o_O-spinnerContainer_agrn11"
+              >
+                <svg
+                  height="48"
+                  viewBox="0 0 48 48"
+                  width="48"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
+                    d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
+                    fill-rule="nonzero"
+                  />
+                </svg>
+              </div>
+            </span>
           </div>
             
         </div>
@@ -884,8 +918,25 @@ exports[`categorizer widget should snapshot: first render 1`] = `
               style="padding-bottom: 101.36%;"
             />
             <span
-              style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
-            />
+              style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
+            >
+              <div
+                class="default_xu2jcg-o_O-spinnerContainer_agrn11"
+              >
+                <svg
+                  height="48"
+                  viewBox="0 0 48 48"
+                  width="48"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
+                    d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
+                    fill-rule="nonzero"
+                  />
+                </svg>
+              </div>
+            </span>
           </div>
         </div>
       </div>
@@ -916,8 +967,25 @@ exports[`categorizer widget should snapshot: first render 1`] = `
               style="padding-bottom: 91.39%;"
             />
             <span
-              style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
-            />
+              style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
+            >
+              <div
+                class="default_xu2jcg-o_O-spinnerContainer_agrn11"
+              >
+                <svg
+                  height="48"
+                  viewBox="0 0 48 48"
+                  width="48"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
+                    d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
+                    fill-rule="nonzero"
+                  />
+                </svg>
+              </div>
+            </span>
           </div>
             
         </div>

package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap

@@ -69,13 +69,12 @@ exports[`graded-group-set should render all graded groups 1`] = `
                             <span>
                               <div>
                                 <input
-                                  aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   aria-label="Your answer:"
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="perseus-input perseus-interactive perseus-input-size-normal"
-                                  spellcheck="false"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
                                 />
@@ -304,13 +303,12 @@ exports[`graded-group-set should render all graded groups 1`] = `
                             <span>
                               <div>
                                 <input
-                                  aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   aria-label="Your answer:"
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="perseus-input perseus-interactive perseus-input-size-normal"
-                                  spellcheck="false"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
                                 />
@@ -539,13 +537,12 @@ exports[`graded-group-set should render all graded groups 1`] = `
                             <span>
                               <div>
                                 <input
-                                  aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   aria-label="Your answer:"
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="perseus-input perseus-interactive perseus-input-size-normal"
-                                  spellcheck="false"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
                                 />

package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap

@@ -95,13 +95,12 @@ exports[`graded group widget should snapshot 1`] = `
                             <span>
                               <div>
                                 <input
-                                  aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   aria-label="Your answer:"
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="perseus-input perseus-interactive perseus-input-size-normal"
-                                  spellcheck="false"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
                                 />

package/src/widgets/__tests__/__snapshots__/grapher_test.jsx.snap

@@ -1489,8 +1489,25 @@ exports[`grapher widget should snapshot question with multiple graph types: init
                       style="padding-bottom: 100%;"
                     />
                     <span
-                      style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
-                    />
+                      style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
+                    >
+                      <div
+                        class="default_xu2jcg-o_O-spinnerContainer_agrn11"
+                      >
+                        <svg
+                          height="48"
+                          viewBox="0 0 48 48"
+                          width="48"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
+                            d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </div>
+                    </span>
                   </div>
                   <div
                     class="graphie-container"