@khanacademy/perseus 17.6.0 → 17.6.2

package/dist/perseus-types.d.ts

@@ -81,7 +81,8 @@ export type ReactionDiagramWidget = Widget<'reaction-diagtram', PerseusReactionD
 export type SimpleMarkdownTesterWidget = Widget<'simple-markdown-tester', PerseusSimpleMarkdownTesterWidgetOptions>;
 export type UnitInputWidget = Widget<'unit-input', PerseusUnitInputWidgetOptions>;
 export type VideoWidget = Widget<'video', PerseusVideoWidgetOptions>;
-export type PerseusWidget = CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ExampleGraphieWidget | ExampleWidget | ExplanationWidget | ExpressionWidget | GradedGroupSetWidget | GradedGroupWidget | GrapherWidget | GroupWidget | IFrameWidget | ImageWidget | InputNumberWidget | InteractionWidget | InteractiveGraphWidget | LabelImageWidget | LightsPuzzleWidget | MatcherWidget | MatrixWidget | MeasurerWidget | MoleculeRendererWidget | NumberLineWidget | NumericInputWidget | OrdererWidget | PassageRefWidget | PassageWidget | PlotterWidget | RadioWidget | ReactionDiagramWidget | RefTargetWidget | SequenceWidget | SimpleMarkdownTesterWidget | SimulatorWidget | SorterWidget | TableWidget | TransformerWidget | UnitInputWidget | VideoWidget;
+export type AutoCorrectWidget = Widget<'deprecated-standin', PerseusWidgetOptions>;
+export type PerseusWidget = CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ExampleGraphieWidget | ExampleWidget | ExplanationWidget | ExpressionWidget | GradedGroupSetWidget | GradedGroupWidget | GrapherWidget | GroupWidget | IFrameWidget | ImageWidget | InputNumberWidget | InteractionWidget | InteractiveGraphWidget | LabelImageWidget | LightsPuzzleWidget | MatcherWidget | MatrixWidget | MeasurerWidget | MoleculeRendererWidget | NumberLineWidget | NumericInputWidget | OrdererWidget | PassageRefWidget | PassageWidget | PlotterWidget | RadioWidget | ReactionDiagramWidget | RefTargetWidget | SequenceWidget | SimpleMarkdownTesterWidget | SimulatorWidget | SorterWidget | TableWidget | TransformerWidget | UnitInputWidget | VideoWidget | AutoCorrectWidget;
 export type PerseusImageBackground = {
     url: string | null | undefined;
     width?: number;

package/dist/strings.js

@@ -130,6 +130,7 @@ module.exports = [
     i18n._("This controls the proportion or percentage that will be used in your simulation.", {}),
     i18n._("This controls the sample size that will be used in your simulation. For example, if you set this to 100, then for each trial, responses from 100 participants will be simulated.", {}),
     i18n._("This is the number of trials used in the simulation. For example, if set to 50, then the survey will be conducted 50 times.", {}),
+    i18n._("This part of the question is no-longer available. You will not be graded on this part.", {}),
     // I18N: As in the command, "Translate the polygon"
     i18n._("Translate", {}),
     i18n._("translation", {}),

package/dist/widgets/deprecated-standin/index.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { PerseusScore } from "../../types";
+type AutoCorrectProps = any;
+type Rubric = any;
+type UserInput = Empty;
+declare class AutoCorrect extends React.Component<AutoCorrectProps> {
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore;
+    getUserInput: () => UserInput;
+    simpleValidate: (arg1: Rubric) => PerseusScore;
+    render(): JSX.Element;
+}
+declare const _default: Readonly<{
+    name: string;
+    displayName: string;
+    getWidget?: (() => typeof AutoCorrect) | undefined;
+    accessible?: boolean | ((props: any) => boolean) | undefined;
+    hidden?: boolean | undefined;
+    version?: import("../../types").Version | undefined;
+    supportedAlignments?: readonly import("../../types").Alignment[] | undefined;
+    defaultAlignment?: import("../../types").Alignment | undefined;
+    getDefaultAlignment?: (() => import("../../types").Alignment) | undefined;
+    isLintable?: boolean | undefined;
+    tracking?: import("../../types").Tracking | undefined;
+    traverseChildWidgets?: any;
+    transform?: import("../../types").WidgetTransform | undefined;
+    staticTransform?: import("../../types").WidgetTransform | undefined;
+    propUpgrades?: {
+        [key: string]: (arg1: any) => any;
+    } | undefined;
+    widget: typeof AutoCorrect;
+}>;
+export default _default;

package/dist/widgets/label-image/answer-choices.d.ts

@@ -1,51 +1,19 @@
 /**
- * Controlled list of answer choices, supports arrow key navigation.
- *
- * Enables single or multiple answers selection, using radio or checkbox input
- * types, respectively.
+ * Enables single or multiple answers selection using WonderBlocks dropdowns.
  */
-import * as React from "react";
+/// <reference types="react" />
+import { SingleSelect } from "@khanacademy/wonder-blocks-dropdown";
 export type AnswerType = {
     content: string;
     checked: boolean;
 };
-type AnswerProps = AnswerType & {
-    inputType: "checkbox" | "radio";
-    groupName: string;
-    index: number;
-    onChange: (checked: boolean) => void;
-    onFocusPrevAnswer: () => void;
-    onFocusNextAnswer: () => void;
-};
-type AnswerState = {
-    isInputFocused: boolean;
-};
 type AnswerChoicesProps = {
     choices: ReadonlyArray<AnswerType>;
     multipleSelect: boolean;
     onChange: (selection: ReadonlyArray<boolean>) => void;
+    opener: SingleSelect["props"]["opener"];
+    onToggle: (opened: boolean) => unknown;
+    disabled: boolean;
 };
-type AnswerChoicesState = {
-    groupName: string;
-};
-declare class AnswerChoice extends React.Component<AnswerProps, AnswerState> {
-    _input: HTMLInputElement | null | undefined;
-    state: AnswerState;
-    focusInput(): void;
-    handleClick(e: React.MouseEvent<HTMLDivElement>): void;
-    handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>): void;
-    handleInputChange(e: React.SyntheticEvent<HTMLInputElement>): void;
-    handleInputFocus(): void;
-    handleInputBlur(): void;
-    renderCheckmark(): React.ReactNode;
-    render(): React.ReactNode;
-}
-export default class AnswerChoices extends React.Component<AnswerChoicesProps, AnswerChoicesState> {
-    _choices: Array<AnswerChoice | null | undefined>;
-    constructor(props: AnswerChoicesProps);
-    focusAnswer(index?: number): void;
-    onAnswerChange(index: number, checked: boolean): void;
-    onFocusAnswer(index: number): void;
-    render(): React.ReactNode;
-}
-export {};
+declare const AnswerChoices: (props: AnswerChoicesProps) => JSX.Element;
+export default AnswerChoices;

package/dist/widgets/label-image/answer-pill.d.ts

@@ -5,6 +5,8 @@ export declare const AnswerPill: (props: {
     showCorrectness?: "correct" | "incorrect";
     markerRef?: HTMLElement;
     side: "top" | "bottom" | "left" | "right";
-    onClick: () => void;
     style?: CSSProperties;
+    hovered?: boolean;
+    focused?: boolean;
+    onClick?: () => void;
 }) => JSX.Element;

package/dist/widgets/label-image/marker.d.ts

@@ -5,21 +5,26 @@
  */
 import * as React from "react";
 import type { InteractiveMarkerType } from "./types";
+import type { AnalyticsEventHandlerFn } from "@khanacademy/perseus-core";
+import type { CSSProperties } from "aphrodite";
 type Props = InteractiveMarkerType & {
     showSelected: boolean;
     showPulsate: boolean;
-    onClick: (e: React.MouseEvent) => void;
-    onKeyDown: (e: React.KeyboardEvent) => void;
-    onFocus: () => void;
-    onBlur: () => void;
+    answerSide: "top" | "bottom" | "left" | "right";
+    answerStyles?: CSSProperties;
+    showAnswer?: boolean;
+    analytics?: {
+        onAnalyticsEvent: AnalyticsEventHandlerFn;
+    };
     focused: boolean;
+    hovered: boolean;
 };
 export default class Marker extends React.Component<Props> {
     _icon: HTMLElement | null | undefined;
     static defaultProps: {
         selected: ReadonlyArray<any>;
     };
-    renderIcon(): React.ReactElement<React.ComponentProps<"div">>;
+    renderIcon(): JSX.Element;
     render(): React.ReactNode;
 }
 export {};

package/dist/widgets/label-image.d.ts

@@ -5,9 +5,7 @@
  * that involve the use of images, and enable learners to demonstrate their
  * knowledge by directly interacting with the image.
  */
-import { Popover } from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
-import AnswerChoices from "./label-image/answer-choices";
 import Marker from "./label-image/marker";
 import type { InteractiveMarkerType, InteractiveMarkerScore } from "./label-image/types";
 import type { DependencyProps } from "../dependencies";
@@ -51,13 +49,10 @@ type LabelImageProps = ChangeableProps & DependencyProps & {
 type LabelImageState = {
     activeMarkerIndex: number;
     markersInteracted: boolean;
-    focusedMarkerIndex: number;
     hideAnswers: boolean;
 };
 export declare class LabelImage extends React.Component<LabelImageProps, LabelImageState> {
     _markers: Array<Marker | null | undefined>;
-    _selectedMarkerPopup: Popover | null | undefined;
-    _answerChoices: AnswerChoices | null | undefined;
     static gradeMarker(marker: InteractiveMarkerType): InteractiveMarkerScore;
     static validate(state: MarkersState, rubric?: LabelImageProps): PerseusScore;
     /**
@@ -81,12 +76,10 @@ export declare class LabelImage extends React.Component<LabelImageProps, LabelIm
     simpleValidate(rubric: LabelImageProps): PerseusScore;
     getUserInput(): MarkersState;
     showRationalesForCurrentlySelectedChoices(rubric: LabelImageProps): void;
-    dismissMarkerPopup(): void;
     handleMarkerChange(index: number, marker: InteractiveMarkerType): void;
-    activateMarker(index: number): void;
+    activateMarker(index: number, opened: boolean): void;
     handleMarkerKeyDown(index: number, e: React.KeyboardEvent): void;
     handleAnswerChoicesChangeForMarker(index: number, selection: ReadonlyArray<boolean>): void;
-    renderAnswerChoicesForMarker(index: number, marker: InteractiveMarkerType): React.ReactElement<React.ComponentProps<"div">>;
     renderMarkers(): ReadonlyArray<React.ReactNode>;
     renderInstructions(): React.ReactNode;
     render(): React.ReactNode;

package/dist/widgets.d.ts

@@ -3,6 +3,15 @@ import type * as React from "react";
 type Editor = any;
 export declare const registerWidget: (name: string, widget: WidgetExports) => void;
 export declare const registerWidgets: (widgets: ReadonlyArray<WidgetExports>) => void;
+/**
+ *
+ * @param name - the widget that you are trying to replace
+ * @param replacementName - the name of the widget that takes its place
+ *
+ * e.g. replaceWidget("transformer", "always-correct") will make it so the
+ * transformer widget is replaced by the always correct widget
+ */
+export declare const replaceWidget: (name: string, replacementName: string) => void;
 export declare const registerEditors: (editorsToRegister: ReadonlyArray<Editor>) => void;
 export declare const getWidget: (name: string) => React.ComponentType<any> | null | undefined;
 export declare const getEditor: (name: string) => Editor | null | undefined;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "17.6.0",
+    "version": "17.6.2",
     "publishConfig": {
         "access": "public"
     },
@@ -24,31 +24,32 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/math-input": "^16.4.0",
+        "@khanacademy/math-input": "^16.4.1",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",
-        "@khanacademy/simple-markdown": "^0.11.2"
+        "@khanacademy/simple-markdown": "^0.11.2",
+        "@khanacademy/wonder-blocks-banner": "^3.0.33"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
-        "@khanacademy/wonder-blocks-form": "^4.3.18",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
+        "@khanacademy/wonder-blocks-data": "^13.0.6",
+        "@khanacademy/wonder-blocks-dropdown": "^5.1.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.19",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.4",
-        "@khanacademy/wonder-blocks-modal": "^4.0.38",
-        "@khanacademy/wonder-blocks-pill": "^1.0.14",
-        "@khanacademy/wonder-blocks-popover": "^3.0.19",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-layout": "^2.0.25",
+        "@khanacademy/wonder-blocks-link": "^6.0.5",
+        "@khanacademy/wonder-blocks-modal": "^4.2.0",
+        "@khanacademy/wonder-blocks-pill": "^1.0.15",
+        "@khanacademy/wonder-blocks-popover": "^3.0.22",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.25",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-switch": "^1.1.8",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-switch": "^1.1.9",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.24",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "@popperjs/core": "^2.10.1",
@@ -70,24 +71,24 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.4",
-        "@khanacademy/wonder-blocks-clickable": "^4.0.11",
+        "@khanacademy/wonder-blocks-button": "^6.2.5",
+        "@khanacademy/wonder-blocks-clickable": "^4.0.12",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
-        "@khanacademy/wonder-blocks-form": "^4.3.18",
+        "@khanacademy/wonder-blocks-core": "^6.3.1",
+        "@khanacademy/wonder-blocks-data": "^13.0.6",
+        "@khanacademy/wonder-blocks-dropdown": "^5.1.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.19",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
-        "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.4",
-        "@khanacademy/wonder-blocks-modal": "^4.0.38",
-        "@khanacademy/wonder-blocks-pill": "^1.0.14",
-        "@khanacademy/wonder-blocks-popover": "^3.0.19",
-        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
+        "@khanacademy/wonder-blocks-layout": "^2.0.25",
+        "@khanacademy/wonder-blocks-link": "^6.0.5",
+        "@khanacademy/wonder-blocks-modal": "^4.2.0",
+        "@khanacademy/wonder-blocks-pill": "^1.0.15",
+        "@khanacademy/wonder-blocks-popover": "^3.0.22",
+        "@khanacademy/wonder-blocks-progress-spinner": "^2.0.25",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-switch": "^1.1.8",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
-        "@khanacademy/wonder-blocks-typography": "^2.1.9",
+        "@khanacademy/wonder-blocks-switch": "^1.1.9",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.24",
+        "@khanacademy/wonder-blocks-typography": "^2.1.10",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
         "@popperjs/core": "^2.10.1",

package/src/__tests__/widgets.test.ts

@@ -1,3 +1,5 @@
+import {testDependencies} from "../../../../testing/test-dependencies";
+import {setDependencies} from "../dependencies";
 import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
 import * as Widgets from "../widgets";
 
@@ -10,6 +12,7 @@ describe("Widget API support", () => {
     // validate function. Not all widgets support this function so even though
     // this list looks exhaustive, it's not!
     it.each([
+        "deprecated-standin",
         "radio",
         "input-number",
         "numeric-input",
@@ -71,3 +74,20 @@ describe("Widget API support", () => {
         },
     );
 });
+
+describe("replaceWidget", () => {
+    beforeEach(() => {
+        setDependencies(testDependencies);
+        registerAllWidgetsForTesting();
+    });
+
+    it("replaces an existing widget", () => {
+        Widgets.replaceWidget("transformer", "radio");
+        expect(Widgets.getWidget("transformer")?.name).toBe("Radio");
+    });
+
+    it("Does nothing when the replacement isn't available", () => {
+        Widgets.replaceWidget("radio", "dog-cat");
+        expect(Widgets.getWidget("radio")?.name).toBe("Radio");
+    });
+});

package/src/extra-widgets.ts

@@ -5,6 +5,7 @@
 import Categorizer from "./widgets/categorizer";
 import CSProgram from "./widgets/cs-program";
 import Definition from "./widgets/definition";
+import DeprecatedStandin from "./widgets/deprecated-standin";
 import Dropdown from "./widgets/dropdown";
 import Explanation from "./widgets/explanation";
 import GradedGroup from "./widgets/graded-group";
@@ -72,4 +73,5 @@ export default [
     Transformer,
     Unit,
     Video,
+    DeprecatedStandin,
 ] as ReadonlyArray<WidgetExports>;

package/src/init.ts

@@ -21,6 +21,11 @@ const init = function (options: PerseusOptions): Promise<undefined> {
     Widgets.registerWidgets(basicWidgets);
     Widgets.registerWidgets(extraWidgets);
 
+    // This section replaces widgets
+    // When it's time to replace the transformer widget
+    // uncomment this line
+    // Widgets.replaceWidget("transformer", "always-correct");
+
     // Pass skipMathJax: true if MathJax is already loaded and configured.
     const skipMathJax = options.skipMathJax;
 

package/src/perseus-types.ts

@@ -187,6 +187,8 @@ export type SimpleMarkdownTesterWidget = Widget<'simple-markdown-tester', Perseu
 export type UnitInputWidget = Widget<'unit-input', PerseusUnitInputWidgetOptions>;
 // prettier-ignore
 export type VideoWidget = Widget<'video', PerseusVideoWidgetOptions>;
+//prettier-ignore
+export type AutoCorrectWidget = Widget<'deprecated-standin', PerseusWidgetOptions>;
 
 export type PerseusWidget =
     | CategorizerWidget
@@ -228,7 +230,8 @@ export type PerseusWidget =
     | TableWidget
     | TransformerWidget
     | UnitInputWidget
-    | VideoWidget;
+    | VideoWidget
+    | AutoCorrectWidget;
 
 // A background image applied to various widgets.
 export type PerseusImageBackground = {

package/src/util/register-all-widgets-for-testing.ts

@@ -8,4 +8,8 @@ import * as Widgets from "../widgets";
 
 export const registerAllWidgetsForTesting = () => {
     Widgets.registerWidgets(allWidgets);
+
+    // When it's time to replace the transformer widget
+    // uncomment this line
+    // Widgets.replaceWidget("transformer", "deprecated-standin");
 };

package/src/widgets/__stories__/orderer.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/orderer.testdata";
+import {question1, questionWithImages} from "../__testdata__/orderer.testdata";
 
 export default {
     title: "Perseus/Widgets/Orderer",
@@ -12,3 +12,7 @@ type StoryArgs = Record<any, any>;
 export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const QuestionWithImages = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={questionWithImages} />;
+};

package/src/widgets/__testdata__/orderer.testdata.ts

@@ -55,3 +55,69 @@ export const question2: PerseusRenderer = {
         },
     },
 };
+
+export const questionWithImages: PerseusRenderer = {
+    content: "**Put $6$ flowers in the box.**\n\n[[☃ orderer 1]]",
+    images: {},
+    widgets: {
+        "orderer 1": {
+            graded: true,
+            options: {
+                correctOptions: [
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                ],
+                height: "auto",
+                layout: "horizontal",
+                options: [
+                    {
+                        content:
+                            "![](https://ka-perseus-graphie.s3.amazonaws.com/b7a6f30d245d186cf42961677ddafa118fef5fdd.png)",
+                        widgets: {},
+                        images: {},
+                    },
+                ],
+                otherOptions: [],
+            },
+            type: "orderer",
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};

package/src/widgets/deprecated-standin/__stories__/deprecated-standin.stories.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../../testing/renderer-with-debug-ui";
+
+export default {
+    title: "Perseus/Widgets/Deprecated Standin",
+};
+
+const question1 = {
+    content:
+        "Read the excerpt and answer the question below. \n\nThe Governor 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: "deprecated-standin",
+            options: {
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+} as const;
+
+type StoryArgs = Record<any, any>;
+
+export const Question1 = (args: StoryArgs): React.ReactElement => {
+    return <RendererWithDebugUI question={question1} />;
+};

package/src/widgets/deprecated-standin/__tests__/__snapshots__/deprecated-standin.test.ts.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Deprecated Standin widget should have a default snapshot: first render 1`] = `
+<div>
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
+  >
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="0"
+    >
+      <div
+        class="paragraph"
+      >
+        Read the excerpt and answer the question below. 
+      </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
+      <div
+        class="paragraph"
+      >
+        The Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with 
+        <div
+          class="perseus-widget-container widget-nohighlight widget-block"
+        >
+          <div
+            style="padding-top: 8px; padding-bottom: 8px;"
+          >
+            <div
+              aria-live="polite"
+              class="default_xu2jcg-o_O-containerOuter_xu9ezy-o_O-inlineStyles_1ozd0sx"
+              role="alert"
+            >
+              <div
+                class="default_xu2jcg-o_O-backgroundColor_10s9e9d-o_O-inlineStyles_tkl0uy"
+              />
+              <div
+                class="default_xu2jcg-o_O-containerInner_mm2xcu"
+              >
+                <span
+                  aria-label="warning"
+                  class="svg_1q6jc65-o_O-icon_1521uiv-o_O-icon_16tp01m-o_O-inlineStyles_g0hdza"
+                  data-test-id="banner-kind-icon"
+                  role="img"
+                />
+                <div
+                  class="default_xu2jcg-o_O-labelAndButtonsContainer_14rogkt"
+                >
+                  <div
+                    class="default_xu2jcg-o_O-labelContainer_1fjq5ke"
+                  >
+                    <span
+                      class="text_f1191h-o_O-LabelSmall_hl4zs1"
+                    >
+                      This part of the question is no-longer available. You will not be graded on this part.
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        , upon these conditions.
+      </div>
+    </div>
+  </div>
+</div>
+`;