@khanacademy/perseus 19.1.5 → 19.1.6

package/src/widgets/radio/__stories__/base-radio.stories.tsx

@@ -1,196 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import {generateChoice} from "../../__testdata__/base-radio.testdata";
-import BaseRadio from "../base-radio";
-
-type StoryArgs = {
-    multipleSelect: boolean;
-    editMode: boolean;
-    countChoices: boolean;
-};
-
-type Story = {
-    title: string;
-    args: StoryArgs;
-};
-
-export default {
-    title: "Perseus/Widgets/Radio/Base Radio",
-    args: {
-        multipleSelect: false,
-        editMode: false,
-        countChoices: false,
-    },
-} as Story;
-
-const defaultProps = {
-    apiOptions: {},
-    choices: [
-        generateChoice({
-            content: "Content 1",
-        }),
-        generateChoice({
-            content: "Content 2",
-        }),
-        generateChoice({
-            content: "Content 3",
-            correct: true,
-        }),
-        generateChoice({
-            isNoneOfTheAbove: true,
-        }),
-    ],
-    deselectEnabled: false,
-    editMode: false,
-    labelWrap: false,
-    countChoices: false,
-    numCorrect: 1,
-    multipleSelect: false,
-
-    // A callback indicating that this choice has changed. Its argument is
-    // an object with two keys: `checked` and `crossedOut`. Each contains
-    // an array of boolean values, specifying the new checked and
-    // crossed-out value of each choice.
-    onChange: action("changed"),
-
-    // Whether this widget was the most recently used widget in this
-    // Renderer. Determines whether we'll auto-scroll the page upon
-    // entering review mode.
-    isLastUsedWidget: false,
-} as const;
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    const overwrittenProps = {...defaultProps, ...args} as const;
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const SingleSelectWithNothingSelected = (
-    args: StoryArgs,
-): React.ReactElement => {
-    const overwrittenProps = {...defaultProps, multipleSelect: false} as const;
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleSelectWithNothingSelected = (
-    args: StoryArgs,
-): React.ReactElement => {
-    const overwrittenProps = {...defaultProps, multipleSelect: true} as const;
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleSelectWithCountChoicesLabel = (
-    args: StoryArgs,
-): React.ReactElement => {
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: true,
-        numCorrect: 2,
-        countChoices: true,
-    } as const;
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const SingleSelected = (args: StoryArgs): React.ReactElement => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
-    choices[1].checked = true;
-
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: false,
-        choices,
-    } as const;
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleSelected = (args: StoryArgs): React.ReactElement => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
-    choices[1].checked = true;
-    choices[2].checked = true;
-
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: true,
-        choices,
-    } as const;
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const SingleKitchenSink = (args: StoryArgs): React.ReactElement => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => {
-            const choice = generateChoice({
-                content: `Choice ${i + 1}`,
-                rationale: "This is a neat rationale",
-                hasRationale: true,
-                showRationale: true,
-                correct: false,
-                showCorrectness: true,
-            });
-
-            return choice;
-        });
-    choices[1].checked = true;
-    choices[2].correct = true;
-
-    const rubricChoices = choices.map(({correct}) => ({
-        // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and TypeScript gets mad
-        // when I use choice.content because it's not a string.
-        // reviewModeRubric could probably use a look over.
-        content: "",
-        correct,
-    }));
-
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: false,
-        reviewModeRubric: {choices: rubricChoices},
-        choices,
-    } as const;
-    return <BaseRadio {...overwrittenProps} />;
-};
-
-export const MultipleKitchenSink = (args: StoryArgs): React.ReactElement => {
-    const choices = Array(4)
-        .fill(null)
-        .map((_, i) => {
-            const choice = generateChoice({
-                content: `Choice ${i + 1}`,
-                rationale: "This is a neat rationale",
-                hasRationale: true,
-                showRationale: true,
-                correct: false,
-                showCorrectness: true,
-            });
-
-            return choice;
-        });
-    choices[1].checked = true;
-    choices[2].checked = true;
-    choices[2].correct = true;
-    choices[3].correct = true;
-
-    const rubricChoices = choices.map((c) => ({
-        // note(matthew): reviewModeRubric.choices requires content,
-        // but I don't see how it's getting used and TypeScript gets mad
-        // when I use choice.content because it's not a string.
-        // reviewModeRubric could probably use a look over.
-        content: "",
-        correct: c.correct,
-    }));
-
-    const overwrittenProps = {
-        ...defaultProps,
-        multipleSelect: true,
-        numCorrect: 2,
-        reviewModeRubric: {choices: rubricChoices},
-        choices,
-    } as const;
-    return <BaseRadio {...overwrittenProps} />;
-};

package/src/widgets/radio/__stories__/choice-icon.stories.tsx

@@ -1,166 +0,0 @@
-import * as React from "react";
-
-import ChoiceIcon from "../choice-icon/choice-icon";
-
-type StoryArgs = {
-    pos: number;
-    checked: boolean;
-    crossedOut: boolean;
-    focused: boolean;
-    hovered: boolean;
-    pressed: boolean;
-    correct: boolean;
-    showCorrectness: boolean;
-    multipleSelect: boolean;
-    reviewMode: boolean;
-    previouslyAnswered: boolean;
-};
-
-const defaultProps = {
-    pos: 0,
-    checked: false,
-    crossedOut: false,
-    focused: false,
-    hovered: false,
-    pressed: false,
-    correct: false,
-    showCorrectness: false,
-    multipleSelect: false,
-    reviewMode: false,
-    previouslyAnswered: false,
-} as const;
-
-export default {
-    title: "Perseus/Widgets/Radio/Choice Icon",
-    argTypes: {
-        pos: {
-            control: {type: "number", min: 0, max: 25, step: 1},
-        },
-    },
-    args: defaultProps,
-};
-
-const Panel = (props: {children: React.ReactNode}): React.ReactElement => {
-    return <div style={{padding: "10px"}}>{props.children}</div>;
-};
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Panel>
-            <ChoiceIcon {...args} />
-        </Panel>
-    );
-};
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Panel>
-            <ChoiceIcon {...defaultProps} />
-            <ChoiceIcon {...defaultProps} multipleSelect={true} />
-        </Panel>
-    );
-};
-
-export const Focused = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Panel>
-            <ChoiceIcon {...defaultProps} focused={true} />
-            <ChoiceIcon
-                {...defaultProps}
-                focused={true}
-                multipleSelect={true}
-            />
-        </Panel>
-    );
-};
-
-export const Checked = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Panel>
-            <ChoiceIcon {...defaultProps} checked={true} />
-            <ChoiceIcon
-                {...defaultProps}
-                checked={true}
-                multipleSelect={true}
-            />
-        </Panel>
-    );
-};
-
-export const CrossedOut = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Panel>
-            <ChoiceIcon {...defaultProps} crossedOut={true} />
-            <ChoiceIcon
-                {...defaultProps}
-                crossedOut={true}
-                multipleSelect={true}
-            />
-        </Panel>
-    );
-};
-
-export const Correct = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Panel>
-            <ChoiceIcon
-                {...defaultProps}
-                checked={true}
-                correct={true}
-                showCorrectness={true}
-                reviewMode={true}
-            />
-            <ChoiceIcon
-                {...defaultProps}
-                checked={true}
-                correct={true}
-                showCorrectness={true}
-                reviewMode={true}
-                multipleSelect={true}
-            />
-        </Panel>
-    );
-};
-
-export const Incorrect = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Panel>
-            <ChoiceIcon
-                {...defaultProps}
-                checked={true}
-                correct={false}
-                showCorrectness={true}
-                reviewMode={true}
-            />
-            <ChoiceIcon
-                {...defaultProps}
-                checked={true}
-                correct={false}
-                showCorrectness={true}
-                reviewMode={true}
-                multipleSelect={true}
-            />
-        </Panel>
-    );
-};
-
-export const AllPositions = (args: StoryArgs): React.ReactElement => {
-    // @ts-expect-error [FEI-5003] - TS2554 - Expected 1-3 arguments, but got 0.
-    const allLetters = Array(26).fill();
-    return (
-        <Panel>
-            {allLetters.map((_, i: number) => (
-                <ChoiceIcon {...defaultProps} pos={i} key={"choice" + i} />
-            ))}
-            <br />
-            {allLetters.map((_, i: number) => (
-                <ChoiceIcon
-                    {...defaultProps}
-                    pos={i}
-                    multipleSelect={true}
-                    key={"choice" + i}
-                />
-            ))}
-        </Panel>
-    );
-};

package/src/widgets/radio/__stories__/choice-none-above.stories.tsx

@@ -1,40 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import ChoiceNoneAbove from "../choice-none-above";
-
-type StoryArgs = {
-    content: React.ReactNode;
-    showContent?: boolean;
-};
-
-type ChoiceNoneAboveStory = {
-    title: string;
-    args: StoryArgs;
-};
-
-export default {
-    title: "Perseus/Widgets/Radio/Choice None of the Above",
-    args: {showContent: false, content: "This is a possible choice"},
-} as ChoiceNoneAboveStory;
-
-const ChoiceDefaults = {
-    checked: false,
-    rationale: "This is a good rational",
-    correct: true,
-    disabled: false,
-    pos: 0,
-    reviewMode: false,
-    showRationale: false,
-    showCorrectness: false,
-    multipleSelect: false,
-    crossedOut: false,
-    previouslyAnswered: false,
-    apiOptions: {},
-    onChange: action("changed"),
-} as const;
-
-export const Example = (args: StoryArgs): React.ReactElement => {
-    const combineProps = {...ChoiceDefaults, ...args} as const;
-    return <ChoiceNoneAbove {...combineProps} />;
-};

package/src/widgets/radio/__stories__/choice.stories.tsx

@@ -1,137 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import Choice from "../choice";
-
-type StoryArgs = {
-    checked: boolean;
-    rationale: React.ReactNode;
-    content: React.ReactNode;
-    correct: boolean;
-    disabled: boolean;
-    pos: number;
-    reviewMode: boolean;
-    showRationale: boolean;
-    showCorrectness: boolean;
-    multipleSelect: boolean;
-    crossedOut: boolean;
-    previouslyAnswered: boolean;
-    onChange: (newValues: {checked: boolean; crossedOut: boolean}) => void;
-};
-
-type Story = {
-    title: string;
-    args: StoryArgs;
-};
-
-const defaultProps = {
-    checked: false,
-    rationale: "This is a good rationale",
-    content: "This is a possible choice",
-    correct: true,
-    disabled: false,
-    pos: 0,
-    reviewMode: false,
-    showRationale: false,
-    showCorrectness: false,
-    multipleSelect: false,
-    crossedOut: false,
-    previouslyAnswered: false,
-    onChange: action("changed"),
-} as const;
-
-export default {
-    title: "Perseus/Widgets/Radio/Choice",
-    args: defaultProps,
-} as Story;
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    return <Choice {...args} />;
-};
-
-export const Checked = (args: StoryArgs): React.ReactElement => {
-    const sharedProps = {
-        ...defaultProps,
-        checked: true,
-        showCorrectness: true,
-    } as const;
-    const correctProps = {
-        ...sharedProps,
-        correct: true,
-        content: "This choice is correct",
-    } as const;
-    const incorrectProps = {
-        ...sharedProps,
-        correct: false,
-        content: "This choice is incorrect",
-    } as const;
-    return (
-        <>
-            <Choice {...correctProps} />
-            <Choice {...incorrectProps} />
-        </>
-    );
-};
-
-export const ReviewMode = (args: StoryArgs): React.ReactElement => {
-    const sharedProps = {
-        ...defaultProps,
-        showCorrectness: true,
-        reviewMode: true,
-        multipleSelect: true,
-    } as const;
-    return (
-        <>
-            <Choice
-                {...sharedProps}
-                correct={true}
-                checked={true}
-                content="This choice was correct and checked"
-            />
-            <Choice
-                {...sharedProps}
-                correct={true}
-                content="This choice was also correct and not checked"
-            />
-            <Choice
-                {...sharedProps}
-                correct={false}
-                checked={true}
-                content="This choice was incorrect and checked"
-            />
-            <Choice
-                {...sharedProps}
-                correct={false}
-                content="This choice was also incorrect and not checked"
-            />
-        </>
-    );
-};
-
-export const Rationale = (args: StoryArgs): React.ReactElement => {
-    const sharedProps = {
-        ...defaultProps,
-        checked: true,
-        showCorrectness: true,
-        showRationale: true,
-        reviewMode: true,
-    } as const;
-    const correctProps = {
-        ...sharedProps,
-        correct: true,
-        content: "This choice is correct",
-        rationale: "It was correct because of the way it is",
-    } as const;
-    const incorrectProps = {
-        ...sharedProps,
-        correct: false,
-        content: "This choice is incorrect",
-        rationale: "It was incorrect because of the way it is",
-    } as const;
-    return (
-        <>
-            <Choice {...correctProps} />
-            <Choice {...incorrectProps} />
-        </>
-    );
-};

package/src/widgets/radio/__stories__/focus-ring.stories.tsx

@@ -1,43 +0,0 @@
-import * as React from "react";
-
-import * as styleConstants from "../../../styles/constants";
-import FocusRing from "../focus-ring";
-
-type StoryArgs = {
-    children: React.ReactNode;
-    color: string;
-    visible: boolean;
-    multipleSelect: boolean;
-};
-
-type Story = {
-    title: string;
-    args: StoryArgs;
-};
-
-export default {
-    title: "Perseus/Widgets/Radio/Focus Ring",
-    args: {
-        children: "",
-        color: styleConstants.kaGreen,
-        visible: true,
-        multipleSelect: false,
-    },
-} as Story;
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    // faux choice is just for demonstration
-    const fauxChoiceStyles = {
-        height: "20px",
-        width: "20px",
-        background: args.color,
-        borderRadius: args.multipleSelect ? "3px" : "50%",
-    } as const;
-
-    const customArgs = {
-        ...args,
-        children: args.children || <div style={fauxChoiceStyles} />,
-    } as const;
-
-    return <FocusRing {...customArgs} />;
-};

package/src/widgets/radio/__stories__/option-status.stories.tsx

@@ -1,103 +0,0 @@
-import * as React from "react";
-
-import OptionStatus from "../option-status";
-
-type StoryArgs = {
-    crossedOut: boolean;
-    checked: boolean;
-    correct: boolean;
-    previouslyAnswered: boolean;
-    reviewMode: boolean;
-};
-
-type Story = {
-    title: string;
-    args: StoryArgs;
-};
-
-export default {
-    title: "Perseus/Widgets/Radio/Option Status",
-    args: {
-        crossedOut: false,
-        checked: false,
-        correct: false,
-        previouslyAnswered: false,
-        reviewMode: true,
-    },
-} as Story;
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    return <OptionStatus {...args} />;
-};
-
-export const AllPossibleOutputs = (args: StoryArgs): React.ReactElement => {
-    return (
-        <>
-            <div>
-                Checked Correct:
-                <OptionStatus
-                    crossedOut={false}
-                    checked={true}
-                    correct={true}
-                    previouslyAnswered={true}
-                    reviewMode={true}
-                />
-            </div>
-            <hr />
-            <div>
-                Checked Not Correct:
-                <OptionStatus
-                    crossedOut={false}
-                    checked={true}
-                    correct={false}
-                    previouslyAnswered={true}
-                    reviewMode={true}
-                />
-            </div>
-            <hr />
-            <div>
-                Not Checked Correct:
-                <OptionStatus
-                    crossedOut={false}
-                    checked={false}
-                    correct={true}
-                    previouslyAnswered={true}
-                    reviewMode={true}
-                />
-            </div>
-            <hr />
-            <div>
-                Not Checked Not Correct Previously Answered:
-                <OptionStatus
-                    crossedOut={false}
-                    checked={false}
-                    correct={false}
-                    previouslyAnswered={true}
-                    reviewMode={true}
-                />
-            </div>
-            <hr />
-            <div>
-                Not Checked Not Correct Not Previously Answered:
-                <OptionStatus
-                    crossedOut={false}
-                    checked={false}
-                    correct={false}
-                    previouslyAnswered={false}
-                    reviewMode={true}
-                />
-            </div>
-            <hr />
-            <div>
-                Crossed Out Correct:
-                <OptionStatus
-                    crossedOut={true}
-                    checked={false}
-                    correct={true}
-                    previouslyAnswered={false}
-                    reviewMode={true}
-                />
-            </div>
-        </>
-    );
-};