@khanacademy/perseus 17.6.0 → 17.6.2

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

@@ -0,0 +1,93 @@
+import "@testing-library/jest-dom"; // Imports custom matchers
+
+import {testDependencies} from "../../../../../../testing/test-dependencies";
+import * as Dependencies from "../../../dependencies";
+import {renderQuestion} from "../../__tests__/renderQuestion";
+
+const question = {
+    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 widget 1]], upon these conditions.",
+    images: {},
+    widgets: {
+        "widget 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "deprecated-standin",
+            options: {
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+} as const;
+
+describe("Deprecated Standin widget", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should have a default snapshot", () => {
+        // Arrange & Act
+        const {container} = renderQuestion(question);
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should be scorable and always give points", () => {
+        // Arrange and act
+        const {renderer} = renderQuestion(question);
+        const result = renderer.scoreWidgets();
+
+        // Assert
+        expect(result["widget 1"]).toMatchObject({
+            type: "points",
+            earned: 1,
+            total: 1,
+            message: null,
+        });
+    });
+
+    it("should return an empty object for getUserInput()", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question);
+
+        // Act
+        const userInput = renderer.getUserInput();
+
+        // Assert
+        expect(userInput).toMatchInlineSnapshot(`
+            [
+              {},
+            ]
+        `);
+    });
+
+    it("should return a correct answer score for simpleValidate()", () => {
+        // Arrange
+        const {renderer} = renderQuestion(question);
+
+        // Act
+        const score = renderer.scoreWidgets();
+
+        // Assert
+        expect(score).toMatchInlineSnapshot(`
+            {
+              "widget 1": {
+                "earned": 1,
+                "message": null,
+                "total": 1,
+                "type": "points",
+              },
+            }
+        `);
+    });
+});

package/src/widgets/deprecated-standin/index.tsx

@@ -0,0 +1,57 @@
+import Banner from "@khanacademy/wonder-blocks-banner";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import React from "react";
+
+import type {PerseusScore, WidgetExports} from "../../types";
+
+// The props are type `any` on purpose so that this can receive props
+// from any deprecated widget
+type AutoCorrectProps = any;
+type Rubric = any;
+type UserInput = Empty;
+
+class AutoCorrect extends React.Component<AutoCorrectProps> {
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        // Since this mean to replace an existing widget the learner
+        // WILL earn points for this widget
+        return {
+            type: "points",
+            earned: 1,
+            total: 1,
+            message: null,
+        };
+    }
+
+    getUserInput: () => UserInput = () => {
+        return {};
+    };
+
+    simpleValidate: (arg1: Rubric) => PerseusScore = (rubric) => {
+        return AutoCorrect.validate(this.getUserInput(), rubric);
+    };
+
+    render() {
+        return (
+            <div
+                style={{
+                    paddingTop: 8,
+                    paddingBottom: 8,
+                }}
+            >
+                <Banner
+                    text={i18n._(
+                        "This part of the question is no-longer available. You will not be graded on this part.",
+                    )}
+                    kind="warning"
+                    layout="full-width"
+                />
+            </div>
+        );
+    }
+}
+
+export default {
+    name: "deprecated-standin",
+    displayName: "Deprecated Standin",
+    widget: AutoCorrect,
+} as WidgetExports<typeof AutoCorrect>;

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

@@ -1,9 +1,8 @@
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
 
 import AnswerChoices from "../answer-choices";
 
-import type {AnswerType} from "../answer-choices";
-
 type StoryArgs = Record<any, any>;
 
 type Story = {
@@ -45,47 +44,43 @@ const defaultChoices = [
     },
 ];
 
-class WithState extends React.Component<
-    {
-        multipleSelect: boolean;
-    },
-    {
-        choices: ReadonlyArray<AnswerType>;
-    }
-> {
-    static defaultProps = {
-        multipleSelect: false,
-    };
-
-    state = {
-        choices: [...defaultChoices],
-    };
-
-    handleChange(selection) {
-        const {choices} = this.state;
+const WithState = ({multipleSelect}) => {
+    const [choices, setChoices] = React.useState([...defaultChoices]);
+    const [isOpened, setIsOpened] = React.useState(false);
 
-        this.setState({
-            choices: choices.map((choice, index) => ({
+    const handleChange = (selection) => {
+        setChoices([
+            ...choices.map((choice, index) => ({
                 ...choice,
                 checked: selection[index],
             })),
-        });
-    }
-
-    render(): React.ReactNode {
-        const {multipleSelect} = this.props;
-
-        const {choices} = this.state;
+        ]);
+    };
 
-        return (
+    return (
+        <>
             <AnswerChoices
                 choices={choices}
                 multipleSelect={multipleSelect}
-                onChange={(selection) => this.handleChange(selection)}
+                onChange={(selection) => handleChange(selection)}
+                opener={() => <button>{isOpened ? "Close" : "Open"}</button>}
+                onToggle={(opened) => setIsOpened(opened)}
+                disabled={false}
             />
-        );
-    }
-}
+            <>
+                {choices
+                    .filter(({checked}) => checked)
+                    .map(({content}) => (
+                        <LabelLarge key={content}>{content}</LabelLarge>
+                    ))}
+            </>
+        </>
+    );
+};
+
+WithState.defaultProps = {
+    multipleSelect: false,
+};
 
 export const SingleSelect = (args: StoryArgs): React.ReactElement => {
     return <WithState />;

package/src/widgets/label-image/__tests__/answer-pill.test.tsx

@@ -17,11 +17,7 @@ describe("AnswerPill", () => {
     it("should display the correct answer string when there is only one selected answer", () => {
         const selectedAnswers = ["Answer 1"];
         const screen = render(
-            <AnswerPill
-                selectedAnswers={selectedAnswers}
-                side={"top"}
-                onClick={() => {}}
-            />,
+            <AnswerPill selectedAnswers={selectedAnswers} side={"top"} />,
             {wrapper: RenderStateRoot},
         );
         expect(screen.getByText("Answer 1")).toBeInTheDocument();
@@ -30,11 +26,7 @@ describe("AnswerPill", () => {
     it("should display the correct answer string when there are multiple selected answers", () => {
         const selectedAnswers = ["Answer 1", "Answer 2", "Answer 3"];
         const screen = render(
-            <AnswerPill
-                selectedAnswers={selectedAnswers}
-                side={"top"}
-                onClick={() => {}}
-            />,
+            <AnswerPill selectedAnswers={selectedAnswers} side={"top"} />,
             {wrapper: RenderStateRoot},
         );
         expect(screen.getByText("3 answers")).toBeInTheDocument();

package/src/widgets/label-image/answer-choices.tsx

@@ -1,19 +1,16 @@
 /**
- * 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 Color from "@khanacademy/wonder-blocks-color";
-import {StyleSheet, css} from "aphrodite";
+import {
+    MultiSelect,
+    SingleSelect,
+    OptionItem,
+} from "@khanacademy/wonder-blocks-dropdown";
 import * as React from "react";
 import _ from "underscore";
 
-import Icon from "../../components/icon";
-import {iconCheckMedium} from "../../icon-paths";
 import Renderer from "../../renderer";
-import sharedStyles from "../../styles/shared";
 
 export type AnswerType = {
     // The answer string, can be plain text or a KaTeX expression.
@@ -22,25 +19,6 @@ export type AnswerType = {
     checked: boolean;
 };
 
-type AnswerProps = AnswerType & {
-    // The input control type to use.
-    inputType: "checkbox" | "radio";
-    // The radio group name.
-    groupName: string;
-    // The answer position within choices.
-    index: number;
-    // Callback to handle change to answer selection.
-    onChange: (checked: boolean) => void;
-    // Callbacks to handle navigating between adjacent answers.
-    onFocusPrevAnswer: () => void;
-    onFocusNextAnswer: () => void;
-};
-
-type AnswerState = {
-    // Whether answer is currently focused.
-    isInputFocused: boolean;
-};
-
 type AnswerChoicesProps = {
     // The list of possible answers in a specific order.
     choices: ReadonlyArray<AnswerType>;
@@ -48,259 +26,63 @@ type AnswerChoicesProps = {
     multipleSelect: boolean;
     // Callback to handle change to answer choices selection.
     onChange: (selection: ReadonlyArray<boolean>) => void;
+    // Callback to define custom opener.
+    opener: SingleSelect["props"]["opener"];
+    // Callback to handle toggle of dropdown.
+    onToggle: (opened: boolean) => unknown;
+    // Whether the answer choices are disabled.
+    disabled: boolean;
 };
 
-type AnswerChoicesState = {
-    // Globally unique radio group name.
-    groupName: string;
-};
-
-class AnswerChoice extends React.Component<AnswerProps, AnswerState> {
-    // The radio button or checkbox input control.
-    _input: HTMLInputElement | null | undefined;
-
-    state: AnswerState = {
-        isInputFocused: false,
+const AnswerChoices = (props: AnswerChoicesProps) => {
+    const onAnswerChange = (selected: string[]) => {
+        const {choices, onChange} = props;
+        onChange(choices.map((choice) => selected.includes(choice.content)));
     };
 
-    focusInput() {
-        if (this._input) {
-            this._input.focus();
-        }
-    }
-
-    handleClick(e: React.MouseEvent<HTMLDivElement>) {
-        const {checked, onChange} = this.props;
-
-        e.preventDefault();
-
-        // We manually handle clicks, setting focus on the input control.
-        this.focusInput();
-
-        // And toggling the answer selection state.
-        onChange(!checked);
-    }
-
-    handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
-        const {onFocusPrevAnswer, onFocusNextAnswer} = this.props;
-
-        // This may override built-in browser arrow key navigation for radio
-        // group. Checkbox fieldset does not have such built-in capability,
-        // thus we do this manually for both input types.
-        switch (e.key) {
-            case "ArrowUp":
-                e.preventDefault();
-                onFocusPrevAnswer();
-                break;
-
-            case "ArrowDown":
-                e.preventDefault();
-                onFocusNextAnswer();
-                break;
-        }
-    }
-
-    handleInputChange(e: React.SyntheticEvent<HTMLInputElement>) {
-        // Prevent answer selection from double-toggling, as `handleClick` is
-        // handling changes to selection state.
-        e.preventDefault();
-    }
-
-    handleInputFocus() {
-        this.setState({isInputFocused: true});
-    }
-
-    handleInputBlur() {
-        this.setState({isInputFocused: false});
-    }
-
-    renderCheckmark(): React.ReactNode {
-        const {checked} = this.props;
-
-        return (
-            <span className={css(styles.checkmarkContainer)}>
-                {checked && (
-                    <Icon
-                        icon={iconCheckMedium}
-                        size={16}
-                        color={Color.offBlack}
-                    />
-                )}
-            </span>
-        );
-    }
-
-    render(): React.ReactNode {
-        const {content, checked, groupName, index, inputType} = this.props;
-
-        const {isInputFocused} = this.state;
-
-        const answerId = `${groupName}-${index}`;
-
-        return (
-            <div
-                className={css(
-                    styles.answerChoice,
-                    isInputFocused && styles.answerFocused,
-                )}
-                onClick={(e) => this.handleClick(e)}
-                onKeyDown={(e) => this.handleKeyDown(e)}
-            >
-                <span className={css(styles.answerInputWrapper)}>
-                    <input
-                        className={css(sharedStyles.perseusSrOnly)}
-                        checked={checked}
-                        name={groupName}
-                        id={answerId}
-                        type={inputType}
-                        onChange={(e) => this.handleInputChange(e)}
-                        onFocus={() => this.handleInputFocus()}
-                        onBlur={() => this.handleInputBlur()}
-                        ref={(node) => (this._input = node)}
-                    />
-
-                    {this.renderCheckmark()}
-                </span>
-
-                <label htmlFor={answerId}>
-                    <Renderer content={content} />
-                </label>
-            </div>
-        );
-    }
-}
-
-export default class AnswerChoices extends React.Component<
-    AnswerChoicesProps,
-    AnswerChoicesState
-> {
-    // The rendered answers elements.
-    _choices: Array<AnswerChoice | null | undefined>;
-
-    constructor(props: AnswerChoicesProps) {
-        super(props);
-
-        this._choices = [];
-
-        this.state = {
-            groupName: _.uniqueId("answer_choices_"),
-        };
-    }
-
-    focusAnswer(index = 0) {
-        const numChoices = this.props.choices.length;
-
-        // Wrap the index if necessary.
-        if (index < 0) {
-            index += numChoices;
-        } else if (index >= numChoices) {
-            index -= numChoices;
-        }
-
-        const choice = this._choices[index];
-
-        if (choice) {
-            choice.focusInput();
-        }
-    }
-
-    onAnswerChange(index: number, checked: boolean) {
-        const {choices, multipleSelect, onChange} = this.props;
-
-        const selection: Array<boolean> = [];
-
-        // Compile the selection state of answer choices. In single selection
-        // mode (radio input type), only 0 or 1 answer may be chosen.
-        for (let i = 0; i < choices.length; i++) {
-            selection.push(
-                multipleSelect
-                    ? i === index
-                        ? checked
-                        : choices[i].checked
-                    : i === index
-                    ? checked
-                    : false,
-            );
-        }
-
-        onChange(selection);
-    }
-
-    onFocusAnswer(index: number) {
-        this.focusAnswer(index);
-    }
-
-    render(): React.ReactNode {
-        const {choices, multipleSelect} = this.props;
-
-        const {groupName} = this.state;
-
-        return (
-            <fieldset
-                style={{
-                    border: "none",
-                    margin: 0,
-                    padding: 0,
-                }}
-            >
-                {choices.map((choice, index) => (
-                    <AnswerChoice
-                        {...choice}
-                        key={choice.content}
-                        groupName={groupName}
-                        index={index}
-                        inputType={multipleSelect ? "checkbox" : "radio"}
-                        onChange={(checked) =>
-                            this.onAnswerChange(index, checked)
-                        }
-                        onFocusPrevAnswer={() => this.onFocusAnswer(index - 1)}
-                        onFocusNextAnswer={() => this.onFocusAnswer(index + 1)}
-                        ref={(node) => (this._choices[index] = node)}
-                    />
-                ))}
-            </fieldset>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    answerChoice: {
-        display: "flex",
-        alignItems: "center",
-
-        userSelect: "none",
-
-        padding: "10px 16px 10px 0px",
-
-        fontWeight: "bold",
-
-        border: "solid 2px transparent",
-        borderRadius: 2,
-
-        ":active": {
-            backgroundColor: "rgba(33, 36, 44, 0.08)",
-        },
-    },
-
-    answerFocused: {
-        borderColor: "#1865f2",
-
-        ":active": {
-            borderColor: "transparent",
-        },
-    },
-
-    answerInputWrapper: {
-        marginRight: 8,
-    },
-
-    checkmarkContainer: {
-        display: "flex",
-        position: "relative",
+    // WB Dropdown types only take an array of nodes, so we can't use a
+    // functional component, which can only return a single node.
+    const AnswerItems = (choices: readonly AnswerType[]) =>
+        choices.map(({content}) => (
+            <OptionItem
+                key={content}
+                value={content}
+                label={<Renderer content={content} inline />}
+            />
+        ));
+
+    const selectedValues = props.choices
+        .filter((choice) => choice.checked)
+        .map((choice) => choice.content);
+
+    const {opener, onToggle, disabled} = props;
+
+    const args: Partial<
+        React.ComponentProps<typeof MultiSelect> &
+            React.ComponentProps<typeof SingleSelect>
+    > = {
+        // reset to allow child (answer pill) to control z-index
+        style: {zIndex: "unset"},
+        children: AnswerItems(props.choices),
+        opener,
+        onToggle,
+        disabled,
+    };
 
-        width: 16,
-        height: 16,
+    return props.multipleSelect ? (
+        <MultiSelect
+            {...args}
+            selectedValues={selectedValues}
+            onChange={(selected) => onAnswerChange(selected)}
+        />
+    ) : (
+        <SingleSelect
+            {...args}
+            selectedValue={selectedValues[0]}
+            onChange={(selected) => onAnswerChange([selected])}
+            placeholder={props.choices[0].content} // not visible, but required
+        />
+    );
+};
 
-        marginLeft: 8,
-    },
-});
+export default AnswerChoices;

package/src/widgets/label-image/answer-pill.tsx

@@ -8,16 +8,31 @@ import {Popper} from "react-popper";
 
 import Renderer from "../../renderer";
 
+const BringToFront: CSSProperties = {
+    boxShadow: `0 8px 8px ${Color.offBlack64}`,
+    zIndex: 1000,
+};
+
 export const AnswerPill = (props: {
     selectedAnswers: readonly string[];
     showCorrectness?: "correct" | "incorrect";
     markerRef?: HTMLElement;
     side: "top" | "bottom" | "left" | "right";
-    onClick: () => void;
     style?: CSSProperties;
+    hovered?: boolean;
+    focused?: boolean;
+    onClick?: () => void;
 }) => {
-    const {selectedAnswers, showCorrectness, markerRef, side, onClick, style} =
-        props;
+    const {
+        selectedAnswers,
+        showCorrectness,
+        markerRef,
+        side,
+        onClick,
+        style,
+        focused,
+        hovered,
+    } = props;
 
     const idFactory = useUniqueIdWithMock();
 
@@ -36,11 +51,6 @@ export const AnswerPill = (props: {
     const correct = showCorrectness === "correct";
     const incorrect = showCorrectness === "incorrect";
 
-    const bringToFront = {
-        boxShadow: `0 8px 8px ${Color.offBlack64}`,
-        zIndex: 1000,
-    };
-
     return (
         <Popper
             placement={side}
@@ -64,12 +74,10 @@ export const AnswerPill = (props: {
                     style={[
                         style,
                         popperStyle,
-                        {
-                            ":hover": bringToFront,
-                            ":focus": bringToFront,
-                        },
+                        styles.relative,
                         correct && styles.correct,
                         incorrect && styles.incorrect,
+                        (focused || hovered) && BringToFront,
                     ]}
                 >
                     <Renderer content={answerString} inline />
@@ -81,7 +89,8 @@ export const AnswerPill = (props: {
 
 const styles = StyleSheet.create({
     correct: {
-        backgroundColor: "#00880b", // WB green darkened by 18%
+        // WB green darkened by 18%
+        backgroundColor: "#00880b",
     },
     incorrect: {
         backgroundColor: Color.offBlack64,