@khanacademy/perseus 16.0.0 → 17.1.0

package/src/__testdata__/server-item-renderer.testdata.ts

@@ -0,0 +1,173 @@
+import type {
+    InputNumberWidget,
+    LabelImageWidget,
+    PerseusItem,
+    PerseusRenderer,
+} from "../perseus-types";
+
+export const itemWithInput: PerseusItem = {
+    question: {
+        content:
+            "Enter the number $$-42$$ in the box: [[\u2603 input-number 1]]",
+        images: {},
+        widgets: {
+            "input-number 1": {
+                type: "input-number",
+                graded: true,
+                options: {
+                    answerType: "number",
+                    value: "-42",
+                    simplify: "required",
+                    size: "normal",
+                    inexact: false,
+                    maxError: 0.1,
+                },
+            } as InputNumberWidget,
+        },
+    },
+    hints: [
+        {content: "Hint #1", images: {}, widgets: {}},
+        {content: "Hint #2", images: {}, widgets: {}},
+        {content: "Hint #3", images: {}, widgets: {}},
+    ],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};
+
+export const labelImageItem: PerseusItem = {
+    answerArea: {
+        calculator: false,
+        chi2Table: false,
+        periodicTable: false,
+        tTable: false,
+        zTable: false,
+    },
+    _multi: null,
+    answer: null,
+    hints: [],
+    itemDataVersion: {major: 0, minor: 1},
+    question: {
+        content:
+            "Catherine created a chart and a bar graph to show how many dogs of each breed the animal shelter placed into good homes last year. \n\nDog breed  | Number of dogs \n:- | :-: \nBulldog | $32$ \nGreyhound | $72$ \nMastiff | $56$ \nCollie | $40$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n\n\n",
+        images: {
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/2f60b533892fe6cb9351f704ffdada8ae4bc655c":
+                {height: 365, width: 503},
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/75f937c6ea133d655dd9f698a58182efd6cc85d4":
+                {height: 293, width: 331},
+        },
+        widgets: {
+            "label-image 1": {
+                alignment: "default",
+                graded: true,
+                static: false,
+                type: "label-image",
+                version: {major: 0, minor: 0},
+                options: {
+                    choices: ["Bulldog", "Greyhound", "Mastiff", "Collie"],
+                    hideChoicesFromInstructions: true,
+                    imageAlt:
+                        "A bar graph with four bar lines shows the horizontal axis labeled Dog breed and the vertical axis labeled Number of dogs. The vertical axis is labeled from the bottom of the axis to the top of the axis as follows: 0, 8, 16, 24, 32, 40, 48, 56, 64, 72, and 80. The horizontal axis has, from left to right, four unlabeled bar lines as follows: the first unlabeled bar line extends to 56, the second unlabeled bar line extends to 72, the third unlabeled bar line extends to 40, and the fourth unlabeled bar line extends to 32.",
+                    imageHeight: 293,
+                    imageUrl:
+                        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/64ace45942546183c3dc842cb0e9e4f64a312727",
+                    imageWidth: 331,
+                    markers: [
+                        {
+                            answers: ["Bulldog"],
+                            label: "The fourth unlabeled bar line.",
+                            x: 87.3,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Collie"],
+                            label: "The third unlabeled bar line.",
+                            x: 67.7,
+                            y: 90.5,
+                        },
+                        {
+                            answers: ["Greyhound"],
+                            label: "The second unlabeled bar line.",
+                            x: 47.7,
+                            y: 90.2,
+                        },
+                        {
+                            answers: ["Mastiff"],
+                            label: "The first unlabeled bar line.",
+                            x: 27.8,
+                            y: 90.5,
+                        },
+                    ],
+                    multipleAnswers: false,
+                    static: false,
+                },
+            } as LabelImageWidget,
+        },
+    },
+};
+
+// Note that if this item is used, you _must_ first register the MockWidget
+export const mockedItem: PerseusItem = {
+    // The mock widget type is not part of the PerseusWidget type union (and
+    // we don't want to make it such to avoid polluting our production types
+    // for test purposes) so we force TypeScript to accept it here.
+    // @ts-expect-error - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; "mock-widget 4": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+    question: {
+        content:
+            "Mock widget ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]] [[\u2603 mock-widget 4]]",
+        images: {},
+        widgets: {
+            "mock-widget 1": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 2": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+            "mock-widget 3": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: true},
+                alignment: "default",
+            },
+            "mock-widget 4": {
+                graded: true,
+                version: {major: 0, minor: 0},
+                static: false,
+                type: "mock-widget",
+                options: {static: false, smiling: false},
+                alignment: "default",
+            },
+        },
+    } as PerseusRenderer,
+    hints: [],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};
+
+export const itemWithLintingError: PerseusItem = {
+    question: {
+        content: "# h1s aren't allowed",
+        images: {},
+        widgets: {},
+    },
+    hints: [],
+    answerArea: null,
+    _multi: null,
+    itemDataVersion: {major: 0, minor: 0},
+    answer: null,
+};

package/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -369,7 +369,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>
@@ -434,7 +434,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>
@@ -499,7 +499,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>

package/src/__tests__/server-item-renderer.test.tsx

@@ -10,8 +10,9 @@ import {
 } from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
+    itemWithLintingError,
     mockedItem,
-} from "../__testdata__/item-renderer.testdata";
+} from "../__testdata__/server-item-renderer.testdata";
 import * as Dependencies from "../dependencies";
 import WrappedServerItemRenderer, {
     ServerItemRenderer,
@@ -529,4 +530,40 @@ describe("server item renderer", () => {
             expect(screen.getByRole("textbox")).toHaveValue("-42");
         });
     });
+
+    describe("content editing", () => {
+        it("shouldn't show linting errors when highlightLint is false", () => {
+            // Arrange and Act
+            renderQuestion(itemWithLintingError, undefined, {
+                linterContext: {
+                    contentType: "exercise",
+                    highlightLint: false,
+                    paths: [],
+                    stack: [],
+                },
+            });
+
+            expect(
+                screen.queryByText("Don't use level-1 headings", {
+                    exact: false,
+                }),
+            ).not.toBeInTheDocument();
+        });
+
+        it("should show linting errors when highlightLint is true", () => {
+            // Arrange and Act
+            renderQuestion(itemWithLintingError, undefined, {
+                linterContext: {
+                    contentType: "exercise",
+                    highlightLint: true,
+                    paths: [],
+                    stack: [],
+                },
+            });
+
+            expect(
+                screen.getByText("Don't use level-1 headings", {exact: false}),
+            ).toBeInTheDocument();
+        });
+    });
 });

package/src/article-renderer.tsx

@@ -12,27 +12,25 @@ import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
 
-import type {KeypadProps} from "./mixins/provide-keypad";
 import type {PerseusRenderer} from "./perseus-types";
 import type {APIOptions, PerseusDependenciesV2} from "./types";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
-type Props = Partial<React.ContextType<typeof DependenciesContext>> &
-    KeypadProps & {
-        apiOptions: APIOptions;
-        json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
-        // Whether to use the new Bibliotron styles for articles
-        /**
-         * @deprecated Does nothing
-         */
-        useNewStyles: boolean;
-        linterContext: LinterContextProps;
-        legacyPerseusLint?: ReadonlyArray<string>;
-        keypadElement?: KeypadAPI | null | undefined;
-        dependencies: PerseusDependenciesV2;
-    };
+type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
+    apiOptions: APIOptions;
+    json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
+    // Whether to use the new Bibliotron styles for articles
+    /**
+     * @deprecated Does nothing
+     */
+    useNewStyles: boolean;
+    linterContext: LinterContextProps;
+    legacyPerseusLint?: ReadonlyArray<string>;
+    keypadElement?: KeypadAPI | null | undefined;
+    dependencies: PerseusDependenciesV2;
+};
 
 type DefaultProps = {
     apiOptions: Props["apiOptions"];

package/src/components.ts

@@ -12,5 +12,4 @@ export {default as PropCheckBox} from "./components/prop-check-box";
 export {default as RangeInput} from "./components/range-input";
 export {default as SvgImage} from "./components/svg-image";
 export {default as TextInput} from "./components/text-input";
-export {default as TexButtons} from "./components/tex-buttons";
 export {default as TextListEditor} from "./components/text-list-editor";

package/src/dependencies.ts

@@ -22,6 +22,10 @@ export const getDependencies = (): PerseusDependencies => {
     );
 };
 
+export type DependencyProps = Partial<
+    React.ContextType<typeof DependenciesContext>
+>;
+
 export const DependenciesContext = React.createContext<PerseusDependenciesV2>({
     analytics: {onAnalyticsEvent: async () => {}},
 });

package/src/index.ts

@@ -14,7 +14,6 @@ export {default as itemVersion} from "./item-version";
  * Renderers
  */
 export {default as ArticleRenderer} from "./article-renderer";
-export {default as ItemRenderer} from "./item-renderer";
 export {default as ServerItemRenderer} from "./server-item-renderer";
 export {default as HintsRenderer} from "./hints-renderer";
 export {default as HintRenderer} from "./hint-renderer";

package/src/perseus-types.ts

@@ -73,6 +73,8 @@ export type PerseusAnswerArea = {
     calculator: boolean;
     // The user might benefit from using a Periodic Table of Elements.  Provided on Khan Academy when true
     periodicTable: boolean;
+    // The user might benefit from using a Periodic Table of Elements with key.  Provided on Khan Academy when true
+    periodicTableWithKey?: boolean;
 };
 
 type Widget<Type extends string, Options> = {

package/src/server-item-renderer.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
+import * as PerseusLinter from "@khanacademy/perseus-linter";
 import {StyleSheet, css} from "aphrodite";
 /**
  * A copy of the ItemRenderer which renders its question renderer and hints
@@ -20,7 +21,6 @@ import {ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
 
-import type {KeypadProps} from "./mixins/provide-keypad";
 import type {APIOptions, FocusPath, PerseusDependenciesV2} from "./types";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {
@@ -28,22 +28,24 @@ import type {
     RendererInterface,
     KEScore,
 } from "@khanacademy/perseus-core";
+import type {LinterContextProps} from "@khanacademy/perseus-linter";
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 const {mapObject} = Objective;
 
-type OwnProps = // These props are used by the ProvideKeypad mixin.
-    KeypadProps & {
-        apiOptions: APIOptions;
-        hintsVisible?: number;
-        item: {
-            hints: ReadonlyArray<any>;
-            question: any;
-        };
-        problemNum?: number;
-        reviewMode?: boolean;
-        keypadElement?: KeypadAPI | null | undefined;
-        dependencies: PerseusDependenciesV2;
+type OwnProps = {
+    apiOptions: APIOptions;
+    hintsVisible?: number;
+    item: {
+        hints: ReadonlyArray<any>;
+        question: any;
     };
+    linterContext: LinterContextProps;
+    problemNum?: number;
+    reviewMode?: boolean;
+    keypadElement?: KeypadAPI | null | undefined;
+    dependencies: PerseusDependenciesV2;
+};
 
 type HOCProps = {
     onRendered: (isRendered: boolean) => void;
@@ -54,6 +56,7 @@ type Props = OwnProps & HOCProps;
 type DefaultProps = {
     apiOptions: Props["apiOptions"];
     onRendered: Props["onRendered"];
+    linterContext: Props["linterContext"];
 };
 
 type State = {
@@ -85,6 +88,7 @@ export class ServerItemRenderer
 
     static defaultProps: DefaultProps = {
         apiOptions: {} as any, // a deep default is done in `this.update()`
+        linterContext: PerseusLinter.linterContextDefault,
         onRendered: (isRendered: boolean) => {},
     };
 
@@ -417,6 +421,10 @@ export class ServerItemRenderer
                     content={this.props.item.question.content}
                     widgets={this.props.item.question.widgets}
                     images={this.props.item.question.images}
+                    linterContext={PerseusLinter.pushContextStack(
+                        this.props.linterContext,
+                        "question",
+                    )}
                     {...this.props.dependencies}
                 />
             </AssetContext.Provider>
@@ -428,6 +436,10 @@ export class ServerItemRenderer
                 hintsVisible={this.props.hintsVisible}
                 apiOptions={apiOptions}
                 ref={(elem) => (this.hintsRenderer = elem)}
+                linterContext={PerseusLinter.pushContextStack(
+                    this.props.linterContext,
+                    "hints",
+                )}
             />
         );
 
@@ -462,7 +474,7 @@ const styles = StyleSheet.create({
 
 const ref = React.forwardRef<
     ServerItemRenderer,
-    Omit<React.ComponentProps<typeof ServerItemRenderer>, "onRendered">
+    Omit<PropsFor<typeof ServerItemRenderer>, "onRendered">
 >((props, ref) => (
     <LoadingContext.Consumer>
         {({onRendered}) => (

package/src/styles/khan-exercise.css

@@ -675,30 +675,6 @@ div.timeline-total {
     width: 100px;
 }
 
-#previous-step {
-    margin: 5px;
-    cursor: pointer;
-    float: left;
-    width: 100px;
-}
-
-#next-step {
-    margin: 5px;
-    cursor: pointer;
-    float: right;
-    width: 80px;
-}
-
-#previous-step span {
-    background: url(/images/previous-step.png) no-repeat 0 50% transparent;
-    padding: 4px 0 4px 25px;
-}
-
-#next-step span {
-    background: url(/images/next-step.png) no-repeat 100% 50% transparent;
-    padding: 4px 25px 4px 0;
-}
-
 #next-problem {
     margin: 5px;
     cursor: pointer;

package/src/styles/widgets/label-image.less

@@ -5,6 +5,38 @@
             margin: 0;
         }
     }
+    button[id*="perseus-label-image-widget-answer-pill"],
+    div[id*="perseus-label-image-widget-answer-pill"] {
+        // Reset text content.
+        div.paragraph {
+            all: revert;
+        }
+        // Allow for padding around math content. Accounting for the negative margin here:
+        // https://github.com/Khan/perseus/blob/bafd35daee723456bf259a39b88e7638d91c8c3b/packages/perseus/src/renderer.tsx#L1176
+        div.perseus-block-math-inner {
+            margin: -5px 0 !important;
+        }
+    }
+}
+
+// Reset mobile text content for answer pills.
+@media (max-width: 767px) {
+    [id*="perseus-label-image-widget-answer-pill"] {
+        div.paragraph {
+            all: revert;
+        }
+        > div.perseus-renderer-responsive {
+            all: revert;
+        }
+    }
+
+    .framework-perseus.perseus-mobile
+        [id*="perseus-label-image-widget-answer-pill"] {
+        .perseus-renderer > .paragraph,
+        .perseus-renderer > .paragraph .paragraph {
+            all: revert;
+        }
+    }
 }
 
 .framework-perseus:not(.perseus-article).perseus-mobile {

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

@@ -1,12 +1,44 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question} from "../__testdata__/label-image.testdata";
+import {
+    textQuestion,
+    mathQuestion,
+    numberline,
+} from "../__testdata__/label-image.testdata";
 
+import type {PerseusRenderer} from "../../perseus-types";
 import type {APIOptions} from "../../types";
 
+const applyStoryArgs = (
+    question: PerseusRenderer,
+    args: StoryArgs,
+): PerseusRenderer => {
+    const q = {
+        ...question,
+        widgets: {},
+    } as const;
+
+    for (const [widgetId, widget] of Object.entries(question.widgets)) {
+        const modified = {
+            ...widget,
+            options: {
+                ...widget.options,
+                preferredPopoverDirection: args.preferredPopoverDirection,
+            },
+        };
+
+        q.widgets[widgetId] = {
+            ...modified,
+        };
+    }
+
+    return q;
+};
+
 type StoryArgs = {
     isMobile: boolean;
+    preferredPopoverDirection: string;
 };
 
 type ImageStory = {
@@ -14,17 +46,55 @@ type ImageStory = {
     args: StoryArgs;
 };
 
-export const Question1 = (args: StoryArgs): React.ReactElement => {
+export const LabelWidgetWithText = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(textQuestion, args)}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
+export const LabelWidgetWithMath = (args: StoryArgs): React.ReactElement => {
     const apiOptions: APIOptions = {
         isMobile: args.isMobile,
     };
 
-    return <RendererWithDebugUI question={question} apiOptions={apiOptions} />;
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(mathQuestion, args)}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
+export const LabelImageNumberline = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(numberline, args)}
+            apiOptions={apiOptions}
+        />
+    );
 };
 
 export default {
     title: "Perseus/Widgets/Label Image",
     args: {
         isMobile: false,
+        preferredPopoverDirection: "NONE",
+    },
+    argTypes: {
+        preferredPopoverDirection: {
+            control: "select",
+            options: ["NONE", "UP", "DOWN", "LEFT", "RIGHT"],
+        },
     },
 } as ImageStory;