@khanacademy/perseus 19.1.5 → 19.1.7

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

@@ -1,91 +0,0 @@
-import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
-import * as React from "react";
-
-import AnswerChoices from "../answer-choices";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Widgets/Label Image/Answer Choices",
-} as Story;
-
-const defaultChoices = [
-    {
-        content: "Lamborghini",
-        checked: false,
-    },
-    {
-        content: "BMW",
-        checked: false,
-    },
-    {
-        content: "Volkswagen",
-        checked: false,
-    },
-    {
-        content: "Fiat",
-        checked: false,
-    },
-    {
-        content: "$\\displaystyle f(x)=\\frac{1}{x}$",
-        checked: false,
-    },
-    {
-        content: "Porsche",
-        checked: false,
-    },
-    {
-        content: "Ferrari",
-        checked: false,
-    },
-];
-
-const WithState = ({multipleSelect}) => {
-    const [choices, setChoices] = React.useState([...defaultChoices]);
-    const [isOpened, setIsOpened] = React.useState(false);
-
-    const handleChange = (selection) => {
-        setChoices([
-            ...choices.map((choice, index) => ({
-                ...choice,
-                checked: selection[index],
-            })),
-        ]);
-    };
-
-    return (
-        <>
-            <AnswerChoices
-                choices={choices}
-                multipleSelect={multipleSelect}
-                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 />;
-};
-
-export const MultipleSelect = (args: StoryArgs): React.ReactElement => {
-    return <WithState multipleSelect={true} />;
-};

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

@@ -1,62 +0,0 @@
-import * as React from "react";
-
-import {AnswerPill} from "../answer-pill";
-
-import type {Meta} from "@storybook/react";
-
-const story: Meta<React.ComponentProps<typeof AnswerPill>> = {
-    title: "Perseus/Widgets/Label Image/Answer Pill",
-    component: AnswerPill,
-    render: (args) => <AnswerPill {...args} />,
-    argTypes: {
-        showCorrectness: {
-            options: ["not answered", "correct", "incorrect"],
-            control: {
-                type: "radio",
-            },
-        },
-    },
-};
-export default story;
-
-export const SingleAnswer = {
-    args: {
-        id: "1",
-        selectedAnswers: ["Answer Pill"],
-        markerRef: null,
-        side: "top",
-        onClick: () => {},
-    },
-};
-
-export const MultipleAnswers = {
-    args: {
-        id: "1",
-        selectedAnswers: ["Answer 1", "Answer 2"],
-        markerRef: null,
-        side: "top",
-        onClick: () => {},
-    },
-};
-
-export const Correct = {
-    args: {
-        id: "1",
-        selectedAnswers: ["Right Answer"],
-        showCorrectness: "correct",
-        markerRef: null,
-        side: "top",
-        onClick: () => {},
-    },
-};
-
-export const Incorrect = {
-    args: {
-        id: "1",
-        selectedAnswers: ["Wrong Answer"],
-        showCorrectness: "incorrect",
-        markerRef: null,
-        side: "top",
-        onClick: () => {},
-    },
-};

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

@@ -1,171 +0,0 @@
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import Marker from "../marker";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Widgets/Label Image/Marker",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        position: "relative",
-
-        width: 32,
-        height: 32,
-    },
-});
-
-const Wrapper = (props) => (
-    <div className={css(styles.wrapper)}>
-        <Marker {...props} />
-    </div>
-);
-
-// TODO(jeremy): There are a bunch of props that we have to pass to the Marker
-// that are not used by it, but required because we share a props type.
-
-export const Unfilled = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: [],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showSelected: false,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const UnfilledPulsate = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: [],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showSelected: false,
-        showPulsate: true,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const UnfilledSelected = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: [],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showSelected: true,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const Filled = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: ["Fiat"],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showSelected: false,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const FilledSelected = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: ["Fiat"],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showSelected: true,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const Incorrect = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: ["Fiat"],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showCorrectness: "incorrect",
-        showSelected: false,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const IncorrectSelected = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: ["Fiat"],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showCorrectness: "incorrect",
-        showSelected: true,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const Correct = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: ["BMW", "Ferrari"],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showCorrectness: "correct",
-        showSelected: false,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const CorrectSelected = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        selected: ["BMW", "Ferrari"],
-        label: "Automotive",
-        x: 50,
-        y: 50,
-        showCorrectness: "correct",
-        showSelected: true,
-        showPulsate: false,
-        onClick: () => {},
-        onKeyDown: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};

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

@@ -1,75 +0,0 @@
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {render} from "@testing-library/react";
-import "@testing-library/jest-dom";
-import * as React from "react";
-
-import {testDependencies} from "../../../../../../testing/test-dependencies";
-import * as Dependencies from "../../../dependencies";
-import {AnswerPill} from "../answer-pill";
-
-describe("AnswerPill", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-    });
-
-    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"} />,
-            {wrapper: RenderStateRoot},
-        );
-        expect(screen.getByText("Answer 1")).toBeInTheDocument();
-    });
-
-    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"} />,
-            {wrapper: RenderStateRoot},
-        );
-        expect(screen.getByText("3 answers")).toBeInTheDocument();
-    });
-
-    it("should be interactable when no right answer has been chosen", () => {
-        // arrange
-        const clickSpy = jest.fn();
-        const selectedAnswers = ["Answer 1", "Answer 2", "Answer 3"];
-        const screen = render(
-            <AnswerPill
-                selectedAnswers={selectedAnswers}
-                side={"top"}
-                onClick={clickSpy}
-            />,
-            {wrapper: RenderStateRoot},
-        );
-
-        // act
-        screen.getByText("3 answers").click();
-
-        // assert
-        expect(clickSpy).toHaveBeenCalled();
-    });
-
-    it("should not be interactable when a correct answer has been chosen", () => {
-        // arrange
-        const clickSpy = jest.fn();
-        const selectedAnswers = ["Answer 1", "Answer 2", "Answer 3"];
-        const screen = render(
-            <AnswerPill
-                selectedAnswers={selectedAnswers}
-                side={"top"}
-                onClick={clickSpy}
-                showCorrectness="correct"
-            />,
-            {wrapper: RenderStateRoot},
-        );
-
-        // act
-        screen.getByText("3 answers").click();
-
-        // assert
-        expect(clickSpy).not.toHaveBeenCalled();
-    });
-});

package/src/widgets/label-image/__tests__/hide-answers-toggle.test.tsx

@@ -1,39 +0,0 @@
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-import {render} from "@testing-library/react";
-import "@testing-library/jest-dom";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-
-import {HideAnswersToggle} from "../hide-answers-toggle";
-import {strings} from "../strings";
-
-const labelText = strings.hideAnswersToggleLabel;
-
-describe("HideAnswersToggle", () => {
-    it("should render the toggle switch", () => {
-        const screen = render(
-            <HideAnswersToggle areAnswersHidden={false} onChange={undefined} />,
-            {
-                wrapper: RenderStateRoot,
-            },
-        );
-        const toggleSwitch = screen.getByLabelText(
-            labelText,
-        ) as HTMLInputElement;
-        expect(toggleSwitch).toBeInTheDocument();
-        expect(toggleSwitch.checked).toBe(false);
-    });
-
-    it("should call the onChange callback when the toggle switch is clicked", async () => {
-        const onChange = jest.fn((checked) => expect(checked).toBe(true));
-        const screen = render(
-            <HideAnswersToggle areAnswersHidden={false} onChange={onChange} />,
-            {wrapper: RenderStateRoot},
-        );
-        const toggleSwitchBefore = screen.getByLabelText(
-            labelText,
-        ) as HTMLInputElement;
-        userEvent.click(toggleSwitchBefore);
-        expect(onChange).toHaveBeenCalledTimes(1);
-    });
-});

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

@@ -1,88 +0,0 @@
-/**
- * Enables single or multiple answers selection using WonderBlocks dropdowns.
- */
-
-import {
-    MultiSelect,
-    SingleSelect,
-    OptionItem,
-} from "@khanacademy/wonder-blocks-dropdown";
-import * as React from "react";
-import _ from "underscore";
-
-import Renderer from "../../renderer";
-
-export type AnswerType = {
-    // The answer string, can be plain text or a KaTeX expression.
-    content: string;
-    // Whether the answer is selected.
-    checked: boolean;
-};
-
-type AnswerChoicesProps = {
-    // The list of possible answers in a specific order.
-    choices: ReadonlyArray<AnswerType>;
-    // Whether multiple answers may be chosen.
-    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;
-};
-
-const AnswerChoices = (props: AnswerChoicesProps) => {
-    const onAnswerChange = (selected: string[]) => {
-        const {choices, onChange} = props;
-        onChange(choices.map((choice) => selected.includes(choice.content)));
-    };
-
-    // 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,
-    };
-
-    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
-        />
-    );
-};
-
-export default AnswerChoices;

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

@@ -1,103 +0,0 @@
-import Color from "@khanacademy/wonder-blocks-color";
-import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import Pill from "@khanacademy/wonder-blocks-pill";
-import {StyleSheet, type CSSProperties} from "aphrodite";
-import * as React from "react";
-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";
-    style?: CSSProperties;
-    hovered?: boolean;
-    focused?: boolean;
-    onClick?: () => void;
-}) => {
-    const {
-        selectedAnswers,
-        showCorrectness,
-        markerRef,
-        side,
-        onClick,
-        style,
-        focused,
-        hovered,
-    } = props;
-
-    const idFactory = useUniqueIdWithMock();
-
-    const answerString =
-        selectedAnswers.length > 1
-            ? // always need `ngettext` for variable numbers even if we don't use the singular, see https://khanacademy.slack.com/archives/C0918TZ5G/p1700163024293079
-              i18n.ngettext(
-                  "%(num)s answer",
-                  "%(num)s answers",
-                  selectedAnswers.length,
-              )
-            : selectedAnswers[0];
-
-    // It should no longer be possible to interact with an answer after it
-    // has been labeled (answered) correctly.
-    const correct = showCorrectness === "correct";
-    const incorrect = showCorrectness === "incorrect";
-
-    return (
-        <Popper
-            placement={side}
-            referenceElement={markerRef}
-            modifiers={[
-                {
-                    name: "preventOverflow",
-                    options: {
-                        rootBoundary: "viewport",
-                    },
-                },
-            ]}
-        >
-            {({ref, style: popperStyle}) => (
-                <Pill
-                    size="large"
-                    kind="accent"
-                    id={idFactory.get("perseus-label-image-widget-answer-pill")}
-                    onClick={correct ? undefined : onClick}
-                    ref={ref}
-                    style={[
-                        style,
-                        popperStyle,
-                        styles.pill,
-                        correct && styles.correct,
-                        incorrect && styles.incorrect,
-                        (focused || hovered) && BringToFront,
-                    ]}
-                >
-                    <Renderer content={answerString} inline />
-                </Pill>
-            )}
-        </Popper>
-    );
-};
-
-const styles = StyleSheet.create({
-    correct: {
-        // WB green darkened by 18%
-        backgroundColor: "#00880b",
-    },
-    incorrect: {
-        backgroundColor: Color.offBlack64,
-    },
-    pill: {
-        // Reset the Pill's default height in order to account
-        // for multi-line pills.
-        height: "auto",
-    },
-});

package/src/widgets/label-image/hide-answers-toggle.tsx

@@ -1,40 +0,0 @@
-import {View, useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
-import Switch from "@khanacademy/wonder-blocks-switch";
-import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import {strings} from "./strings";
-
-export const HideAnswersToggle = (props: {
-    areAnswersHidden: boolean;
-    onChange: React.ComponentPropsWithoutRef<typeof Switch>["onChange"];
-}) => {
-    const idFactory = useUniqueIdWithMock();
-    const switchId = idFactory.get("hide-answers-toggle");
-    const labelId = idFactory.get("hide-answers-label");
-    return (
-        <View style={styles.switchWrapper}>
-            <Switch
-                id={switchId}
-                checked={props.areAnswersHidden}
-                onChange={props.onChange}
-                aria-labelledby={labelId}
-            />
-            <LabelMedium id={labelId} htmlFor={switchId} tag="label">
-                {strings.hideAnswersToggleLabel}
-            </LabelMedium>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    switchWrapper: {
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap-reverse",
-        alignItems: "center",
-        gap: "0.5em",
-        marginTop: "1em",
-    },
-});