@khanacademy/perseus 12.3.0 → 12.4.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "12.3.0",
+    "version": "12.4.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,13 +22,13 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.4",
-        "@khanacademy/kmath": "^0.1.5",
-        "@khanacademy/math-input": "^14.2.1",
-        "@khanacademy/perseus-core": "1.2.0",
-        "@khanacademy/perseus-linter": "^0.3.7",
-        "@khanacademy/pure-markdown": "^0.2.9",
-        "@khanacademy/simple-markdown": "^0.10.3"
+        "@khanacademy/kas": "^0.3.5",
+        "@khanacademy/kmath": "^0.1.6",
+        "@khanacademy/math-input": "^14.2.2",
+        "@khanacademy/perseus-core": "1.3.0",
+        "@khanacademy/perseus-linter": "^0.3.8",
+        "@khanacademy/pure-markdown": "^0.2.10",
+        "@khanacademy/simple-markdown": "^0.10.4"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.1.3",

package/src/__tests__/widget-container.test.tsx

@@ -0,0 +1,126 @@
+import "@testing-library/jest-dom"; // Joyous side-effects
+import {render, screen} from "@testing-library/react";
+import * as React from "react";
+
+import {testDependencies} from "../../../../testing/test-dependencies";
+import * as Dependencies from "../dependencies";
+import WidgetContainer from "../widget-container";
+import {registerWidget} from "../widgets";
+import PassageWidget from "../widgets/passage";
+
+import type {WidgetExports} from "../types";
+
+const MockWidgetComponent = ({
+    text,
+    fail = false,
+}: {
+    text: string;
+    fail: boolean;
+}) => {
+    if (fail) {
+        throw new Error("MockWidget failed to render");
+    }
+
+    return <div>{text}</div>;
+};
+
+const MockWidget: WidgetExports<typeof MockWidgetComponent> = {
+    name: "mock-widget",
+    displayName: "Mock Widget",
+    widget: MockWidgetComponent,
+};
+
+describe("widget-container", () => {
+    it("should render nothing when requested widget not registered", () => {
+        // Arrange
+        const warnMock = jest.spyOn(console, "warn").mockImplementation();
+
+        // Act
+        render(
+            <WidgetContainer
+                type="invalid-widget"
+                id="invalid-widget 1"
+                shouldHighlight={false}
+                initialProps={{apiOptions: {isMobile: false}}}
+            />,
+        );
+
+        // Assert
+        expect(warnMock).toHaveBeenCalledWith(
+            "Widget type 'invalid-widget' not found!",
+        );
+    });
+
+    it("should render the requested widget", async () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+
+        registerWidget("passage", PassageWidget);
+
+        // Act
+        render(
+            <WidgetContainer
+                type="passage"
+                id="passage 1"
+                shouldHighlight={false}
+                initialProps={{
+                    passageTitle: "Greeting",
+                    passageText: "Hello world!",
+                    footnotes: null,
+                    showLineNumbers: true,
+
+                    findWidgets: () => [],
+
+                    apiOptions: {isMobile: false},
+                }}
+            />,
+        );
+
+        // Assert
+        expect(await screen.findByText("Greeting")).toBeInTheDocument();
+        expect(await screen.findByText("Hello world")).toBeInTheDocument();
+    });
+
+    it("should send analytics even when widget rendering errors", () => {
+        // Arrange
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+        jest.spyOn(console, "error").mockImplementation(() => {});
+
+        const onAnalyticsEventSpy = jest.fn();
+        const depsV2 = {analytics: {onAnalyticsEvent: onAnalyticsEventSpy}};
+
+        registerWidget("mock-widget", MockWidget);
+
+        // Act
+        render(
+            <Dependencies.DependenciesContext.Provider value={depsV2}>
+                <WidgetContainer
+                    type="mock-widget"
+                    id="mock-widget 1"
+                    shouldHighlight={false}
+                    initialProps={{
+                        text: "Hello world!",
+                        fail: true,
+
+                        findWidgets: () => [],
+
+                        apiOptions: {isMobile: false},
+                    }}
+                />
+            </Dependencies.DependenciesContext.Provider>,
+        );
+
+        // Assert
+        expect(onAnalyticsEventSpy).toHaveBeenCalledWith({
+            type: "perseus:widget-rendering-error",
+            payload: {
+                widgetType: "mock-widget",
+                widgetId: "mock-widget 1",
+            },
+        });
+    });
+});

package/src/error-boundary.tsx

@@ -21,6 +21,7 @@ class ErrorBoundary extends React.Component<Props, State> {
 
     componentDidCatch(error: Error, info: any) {
         this.setState({error: error.toString()});
+        this.props.onError?.(error, info);
         Log.error("Perseus error boundary caught error", Errors.Internal, {
             cause: error,
             loggedMetadata: {

package/src/styles/articles.less

@@ -498,7 +498,9 @@
         margin-bottom: 2 * @baseUnit;
     }
 
-    .perseus-renderer > .paragraph ul:not(.perseus-widget-radio) {
+    .perseus-renderer
+        > .paragraph
+        ul:not(.perseus-widget-radio, .indicatorContainer) {
         margin: 0 0 0 1em;
         padding: 0;
 

package/src/styles/perseus-renderer.less

@@ -133,7 +133,7 @@
         margin: -11px 0px 22px 0px; // first-level lists need padding
     }
 
-    .paragraph ul:not(.perseus-widget-radio) {
+    .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
         padding-left: 35px;
         list-style-type: disc;
     }

package/src/widget-container.tsx

@@ -144,11 +144,12 @@ class WidgetContainer extends React.Component<Props, State> {
                                 widget_type: type,
                                 widget_id: this.props.id,
                             }}
-                            onError={(error) => {
+                            onError={() => {
                                 analytics.onAnalyticsEvent({
                                     type: "perseus:widget-rendering-error",
                                     payload: {
                                         widgetType: type,
+                                        widgetId: this.props.id,
                                     },
                                 });
                             }}

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/graded-group-set.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {linterContextDefault} from "@khanacademy/perseus-linter";
+import Clickable from "@khanacademy/wonder-blocks-clickable";
 import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
+import classNames from "classnames";
 import * as React from "react";
 
 import {getDependencies} from "../dependencies";
@@ -38,28 +41,43 @@ class Indicators extends React.Component<IndicatorsProps> {
 
     render(): React.ReactNode {
         return (
-            <ul className={css(styles.indicatorContainer)}>
+            <ul
+                // reduntantly add class name for use in .less files--
+                //   the styles object key gets hashed
+                className={classNames(
+                    css(styles.indicatorContainer),
+                    "indicatorContainer",
+                )}
+            >
                 {this.props.gradedGroups.map(({title}, i) => (
-                    <li
-                        role="button"
-                        aria-label={i18n._("Skip to %(title)s", {
-                            title,
-                        })}
-                        key={title}
-                        className={css(
-                            styles.indicator,
-                            i === this.props.currentGroup &&
-                                styles.selectedIndicator,
-                        )}
-                        tabIndex={0}
-                        onClick={() => this.props.onChangeCurrentGroup(i)}
-                        onKeyDown={(e) => this.handleKeyDown(e, i)}
-                    >
-                        {i === this.props.currentGroup && (
-                            <span className={css(a11y.srOnly)}>
-                                {i18n._("Current")}
-                            </span>
-                        )}
+                    <li className={css(styles.indicator)} key={title}>
+                        <Clickable
+                            role="button"
+                            aria-label={i18n._("Skip to %(title)s", {
+                                title,
+                            })}
+                            style={styles.indicatorButton}
+                            onClick={() => this.props.onChangeCurrentGroup(i)}
+                            onKeyDown={(e) => this.handleKeyDown(e, i)}
+                        >
+                            {({hovered, focused, pressed}) => (
+                                <View
+                                    style={[
+                                        styles.indicatorDot,
+                                        (hovered || focused || pressed) &&
+                                            styles.indicatorDotFocused,
+                                    ]}
+                                >
+                                    {i === this.props.currentGroup && (
+                                        <View style={styles.indicatorDotActive}>
+                                            <span className={css(a11y.srOnly)}>
+                                                {i18n._("Current")}
+                                            </span>
+                                        </View>
+                                    )}
+                                </View>
+                            )}
+                        </Clickable>
                     </li>
                 ))}
             </ul>
@@ -262,20 +280,47 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         listStyle: "none",
         margin: "unset",
+        paddingInlineStart: "unset",
+        flexWrap: "wrap",
     },
 
     indicator: {
+        width: 24,
+        height: 24,
+    },
+
+    indicatorButton: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexWrap: "wrap",
+        placeContent: "center",
+        cursor: "pointer",
+
+        ":focus": {
+            outline: "none",
+        },
+    },
+
+    indicatorDot: {
+        boxSizing: "content-box",
         width: 10,
         height: 10,
         borderRadius: "100%",
-        border: "3px solid",
+        borderWidth: 2,
         borderColor: Color.blue,
-        marginLeft: 5,
-        cursor: "pointer",
+        borderStyle: "solid",
+    },
+
+    indicatorDotFocused: {
+        borderWidth: 5,
+        borderStyle: "double",
     },
 
-    selectedIndicator: {
+    indicatorDotActive: {
         backgroundColor: Color.blue,
+        width: "100%",
+        height: "100%",
     },
 
     container: {