@khanacademy/perseus 12.2.0 → 12.4.0

package/src/styles/variables.less

@@ -1,6 +1,6 @@
 // Steal from webapp/stylesheets/shared-package/variables.less
-@baseFontFamily: "Proxima Nova", sans-serif;
-@boldFontFamily: "Proxima Nova Semibold", sans-serif;
+@baseFontFamily: "Lato", sans-serif;
+@boldFontFamily: "Lato-Bold", "Lato", sans-serif;
 @green: #76a005;
 @kaGreen: #71b307;
 @blue: #1c758a;

package/src/styles/variables.shared.less

@@ -86,8 +86,8 @@
 
 // Typography
 @baseFontSize: 14px;
-// The body of the page is setup to use 'Helvetica' by default and 'Proxima
-// Nova' (or 'Lato' if you're testing our new typography) if/once it downloads.
+// The body of the page is setup to use 'Helvetica' by default and
+// 'Lato' if/once it downloads.
 // For your elements to follow this pattern, all you need is to make the text
 // in your element inherit from the body using the "inherit" value.
 @baseFontFamily: inherit;

package/src/styles/widgets/expression.less

@@ -63,80 +63,3 @@
         }
     }
 }
-
-// Old expression widget
-.perseus-widget-expression-old {
-    &,
-    > .output,
-    > .output > .tex,
-    > .output > .placeholder {
-        display: block;
-    }
-}
-
-.perseus-widget-expression-old input,
-#answer_area .perseus-widget-expression-old input {
-    direction: ltr;
-    border: 1px solid #a4a4a4;
-    border-radius: 5px;
-    box-sizing: border-box;
-    font-size: 14px;
-    margin-bottom: 5px;
-    max-width: 240px;
-    padding: 6px;
-    width: 100%;
-}
-
-.perseus-widget-expression-old > .output {
-    background: #f2f2f2;
-    border-radius: 5px;
-    padding: 10px;
-    margin: 10px 0;
-}
-
-#answer_area .perseus-widget-expression-old > .output {
-    background: #f7f7f7;
-}
-
-.perseus-widget-expression-old > .output > .tex {
-    overflow-x: auto;
-    padding: 5px;
-}
-
-.perseus-widget-expression-old > .output > .placeholder {
-    position: relative;
-    height: 40px;
-    overflow-y: hidden;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error {
-    border-radius: 10px;
-    background: #f7f7f7;
-    border: 1px solid #ddd;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-    color: #000;
-    display: none;
-    font-weight: normal;
-    min-height: 22px;
-    width: 168px;
-    position: absolute;
-    top: 0px;
-    left: 40px;
-    margin: auto;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error > .buddy {
-    background-image: url(/images/perseus/error-buddy.png);
-    background-size: 100%;
-    height: 36px;
-    width: 40px;
-    position: absolute;
-    top: -3px;
-    left: -42px;
-}
-
-.perseus-widget-expression-old > .output > .placeholder > .error > .message {
-    font: 12px @baseFontFamily;
-    line-height: 1.4em;
-    margin: 0px 4px;
-}

package/src/styles/widgets/passage.less

@@ -17,26 +17,8 @@
         margin: 22px;
         position: relative;
 
-        // Use the "Minion Pro" font, if available. If not, fall back to
-        // KaTeX_Main or another serif font.
-        //
-        // NOTE(mdr): Minion Pro is only loaded on SAT and GTP pages, because
-        //     those are the main call sites for the passage widget. We
-        //     considered inserting the relevant stylesheet whenever the
-        //     passage widget loads, but this approach produced a "flash of
-        //     unstyled text", so we decided to embed the stylesheet into the
-        //     relevant page templates instead.
-        //
-        // NOTE(mdr): Minion Pro will not be available on ZNDs, due to
-        //     restrictions in our Adobe TypeKit configuration.
-        //
-        // TODO(mdr): The BodySerif component will hopefully soon use Minion
-        //     Pro by default (WB-399). Once that happens, we should be able to
-        //     switch to the BodySerif component (TP-3112), and remove this
-        //     special font-family rule.
         div.paragraph {
-            font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman",
-                serif;
+            font-family: KaTeX_Main, Times, "Times New Roman", serif;
         }
 
         .passage-title div.paragraph {

package/src/widget-container.tsx

@@ -4,6 +4,8 @@ import classNames from "classnames";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
+import {DependenciesContext} from "./dependencies";
+import ErrorBoundary from "./error-boundary";
 import {zIndexInteractiveComponent} from "./styles/constants";
 import {containerSizeClass, getClassFromWidth} from "./util/sizing-utils";
 import * as Widgets from "./widgets";
@@ -15,6 +17,7 @@ import type {LinterContextProps} from "@khanacademy/perseus-linter";
 type Props = {
     shouldHighlight: boolean;
     type: string; // widget type/name,
+    id: string; // widget id
     initialProps: WidgetProps<any, PerseusWidgetOptions>;
     linterContext: LinterContextProps;
 };
@@ -29,6 +32,8 @@ type State = {
 };
 
 class WidgetContainer extends React.Component<Props, State> {
+    widgetRef = React.createRef<React.ComponentType<any>>();
+
     static defaultProps: DefaultProps = {
         linterContext: linterContextDefault,
     };
@@ -132,14 +137,33 @@ class WidgetContainer extends React.Component<Props, State> {
                 className={className}
                 style={isStatic ? staticContainerStyles : {}}
             >
-                <WidgetType
-                    {...this.state.widgetProps}
-                    linterContext={linterContext}
-                    containerSizeClass={this.state.sizeClass}
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="widget"
-                />
-                {isStatic && <div style={staticOverlayStyles} />}
+                <DependenciesContext.Consumer>
+                    {({analytics}) => (
+                        <ErrorBoundary
+                            metadata={{
+                                widget_type: type,
+                                widget_id: this.props.id,
+                            }}
+                            onError={() => {
+                                analytics.onAnalyticsEvent({
+                                    type: "perseus:widget-rendering-error",
+                                    payload: {
+                                        widgetType: type,
+                                        widgetId: this.props.id,
+                                    },
+                                });
+                            }}
+                        >
+                            <WidgetType
+                                {...this.state.widgetProps}
+                                linterContext={linterContext}
+                                containerSizeClass={this.state.sizeClass}
+                                ref={this.widgetRef}
+                            />
+                            {isStatic && <div style={staticOverlayStyles} />}
+                        </ErrorBoundary>
+                    )}
+                </DependenciesContext.Consumer>
             </div>
         );
     }
@@ -163,8 +187,7 @@ class WidgetContainer extends React.Component<Props, State> {
     }
 
     getWidget: () => any = () => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs.widget;
+        return this.widgetRef.current;
     };
 
     replaceWidgetProps: (arg1: WidgetProps<any, PerseusWidgetOptions>) => void =

package/src/widgets/__stories__/label-image.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {question} from "../__testdata__/label-image.testdata";
+
+import type {APIOptions} from "../../types";
+
+type StoryArgs = {
+    isMobile: boolean;
+};
+
+type ImageStory = {
+    title: string;
+    args: StoryArgs;
+};
+
+export const Question1 = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return <RendererWithDebugUI question={question} apiOptions={apiOptions} />;
+};
+
+export default {
+    title: "Perseus/Widgets/Label Image",
+    args: {
+        isMobile: false,
+    },
+} as ImageStory;

package/src/widgets/__testdata__/label-image.testdata.ts

@@ -0,0 +1,63 @@
+import type {PerseusRenderer} from "../../perseus-types";
+
+export const question: PerseusRenderer = {
+    content:
+        "Carol created a chart and a bar graph to show how many of each type of vehicle were in her supermarket parking lot.\n\nVehicle Type | Number in the parking lot\n:- | :-: \nTrucks| $25$ \nVans | $5$ \nCars| $40$ \nSUVs | $10$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n",
+    images: {
+        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1e28332fd2321975639ab50c9ce442e568c18421":
+            {
+                width: 341,
+                height: 310,
+            },
+    },
+    widgets: {
+        "label-image 1": {
+            type: "label-image",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                choices: ["Trucks", "Vans", "Cars", "SUVs"],
+                imageAlt:
+                    "A bar graph with four bar lines that shows the horizontal axis labeled Number in the parking lot and the vertical axis labeled Vehicle Type. The horizontal axis is labeled, from left to right: 0, 10, 20, 30, 40, and 50. The vertical axis has, from the bottom to the top, four unlabeled bar lines as follows: the first unlabeled bar line extends to the middle of 0 and 10, the second unlabeled bar line extends to 40, the third unlabeled bar line extends to the middle of 20 and 30, and fourth unlabeled bar line extends to 10.",
+                imageUrl:
+                    "web+graphie://ka-perseus-graphie.s3.amazonaws.com/56c60c72e96cd353e4a8b5434506cd3a21e717af",
+                imageWidth: 415,
+                imageHeight: 314,
+                markers: [
+                    {
+                        answers: ["SUVs"],
+                        label: "The fourth unlabeled bar line.",
+                        x: 25,
+                        y: 17.7,
+                    },
+                    {
+                        answers: ["Trucks"],
+                        label: "The third unlabeled bar line.",
+                        x: 25,
+                        y: 35.3,
+                    },
+                    {
+                        answers: ["Cars"],
+                        label: "The second unlabeled bar line.",
+                        x: 25,
+                        y: 53,
+                    },
+                    {
+                        answers: ["Vans"],
+                        label: "The first unlabeled bar line.",
+                        x: 25,
+                        y: 70.3,
+                    },
+                ],
+                multipleAnswers: false,
+                hideChoicesFromInstructions: true,
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap

@@ -38,32 +38,63 @@ exports[`graded group widget should snapshot 1`] = `
                 class="spacer_bc4egv"
               />
               <ul
-                class="indicatorContainer_rjg7c2"
+                class="indicatorContainer_2pd7o4 indicatorContainer"
               >
                 <li
-                  aria-label="Skip to Problem 1a"
-                  class="indicator_qk5jgn-o_O-selectedIndicator_14jsc6v"
-                  role="button"
-                  tabindex="0"
+                  class="indicator_7k5kza"
                 >
-                  <span
-                    class="srOnly_19bpjuy"
+                  <button
+                    aria-disabled="false"
+                    aria-label="Skip to Problem 1a"
+                    class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-indicatorButton_8uaklu"
+                    role="button"
+                    type="button"
                   >
-                    Current
-                  </span>
+                    <div
+                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                    >
+                      <div
+                        class="default_xu2jcg-o_O-indicatorDotActive_1pky1a"
+                      >
+                        <span
+                          class="srOnly_19bpjuy"
+                        >
+                          Current
+                        </span>
+                      </div>
+                    </div>
+                  </button>
                 </li>
                 <li
-                  aria-label="Skip to Problem 1b"
-                  class="indicator_qk5jgn"
-                  role="button"
-                  tabindex="0"
-                />
+                  class="indicator_7k5kza"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Skip to Problem 1b"
+                    class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-indicatorButton_8uaklu"
+                    role="button"
+                    type="button"
+                  >
+                    <div
+                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                    />
+                  </button>
+                </li>
                 <li
-                  aria-label="Skip to Problem 1c"
-                  class="indicator_qk5jgn"
-                  role="button"
-                  tabindex="0"
-                />
+                  class="indicator_7k5kza"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Skip to Problem 1c"
+                    class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-indicatorButton_8uaklu"
+                    role="button"
+                    type="button"
+                  >
+                    <div
+                      class="default_xu2jcg-o_O-indicatorDot_yy8ygm"
+                    />
+                  </button>
+                </li>
               </ul>
             </div>
             <div

package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap

@@ -192,7 +192,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                                               style="border-color: transparent; border-radius: 50%;"
                                             >
                                               <div
-                                                class="circle_1tys2th"
+                                                class="circle_1w6i3h1"
                                                 data-is-radio-icon="true"
                                                 data-test-id="choice-icon__library-choice-icon"
                                                 style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -307,7 +307,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                                               style="border-color: transparent; border-radius: 50%;"
                                             >
                                               <div
-                                                class="circle_1tys2th"
+                                                class="circle_1w6i3h1"
                                                 data-is-radio-icon="true"
                                                 data-test-id="choice-icon__library-choice-icon"
                                                 style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -422,7 +422,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                                               style="border-color: transparent; border-radius: 50%;"
                                             >
                                               <div
-                                                class="circle_1tys2th"
+                                                class="circle_1w6i3h1"
                                                 data-is-radio-icon="true"
                                                 data-test-id="choice-icon__library-choice-icon"
                                                 style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -537,7 +537,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                                               style="border-color: transparent; border-radius: 50%;"
                                             >
                                               <div
-                                                class="circle_1tys2th"
+                                                class="circle_1w6i3h1"
                                                 data-is-radio-icon="true"
                                                 data-test-id="choice-icon__library-choice-icon"
                                                 style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
@@ -652,7 +652,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                                               style="border-color: transparent; border-radius: 50%;"
                                             >
                                               <div
-                                                class="circle_1tys2th"
+                                                class="circle_1w6i3h1"
                                                 data-is-radio-icon="true"
                                                 data-test-id="choice-icon__library-choice-icon"
                                                 style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"