@khanacademy/perseus-editor 4.1.5 → 4.1.7

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

@@ -1,82 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import AnswerChoices from "../answer-choices";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Label Image/Answer Choices",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        // The maximum width of a widget in the editor.
-        width: 338,
-    },
-});
-
-const Wrapper = (props: any) => {
-    return (
-        <div className={css(styles.wrapper)}>
-            <AnswerChoices
-                {...props}
-                onChange={(...args) => {
-                    action("onChange")(...args);
-                    props.onChange(...args);
-                }}
-            />
-        </div>
-    );
-};
-
-class WithState extends React.Component<
-    Record<any, any>,
-    {
-        choices: ReadonlyArray<string>;
-    }
-> {
-    state = {
-        choices: [],
-    };
-
-    render(): React.ReactNode {
-        const {choices} = this.state;
-
-        return (
-            <Wrapper
-                choices={choices}
-                onChange={(choices) => this.setState({choices})}
-            />
-        );
-    }
-}
-
-export const EmptyNonInteractive = (args: StoryArgs): React.ReactElement => {
-    const props = {choices: [], onChange: (...args) => {}} as const;
-    return <Wrapper {...props} />;
-};
-
-export const FilledNonInteractive = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        choices: [
-            "Lamborghini",
-            "BMW",
-            "Volkswagen",
-            "Fiat",
-            "Porsche",
-            "Ferrari",
-        ],
-        onChange: (...args) => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    return <WithState />;
-};

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

@@ -1,31 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import Behavior from "../behavior";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Label Image/Behavior",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    const [state, setState] = React.useState({
-        multipleAnswers: false,
-        hideChoicesFromInstructions: false,
-    });
-
-    const props = {
-        multipleAnswers: state.multipleAnswers,
-        hideChoicesFromInstructions: state.hideChoicesFromInstructions,
-        onChange: (newState) => {
-            action("onChange")(newState);
-            setState({...state, ...newState});
-        },
-    } as const;
-    return <Behavior preferredPopoverDirection="NONE" {...props} />;
-};

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

@@ -1,75 +0,0 @@
-import {action} from "@storybook/addon-actions";
-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/Editor/Widgets/Label Image/Marker",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        // Push the component down as the popover that displays the choices
-        // doesn't properly pop over everything.
-        marginTop: 150,
-
-        position: "relative",
-
-        width: 32,
-        height: 32,
-    },
-});
-
-const Wrapper = (props) => (
-    <div className={css(styles.wrapper)}>
-        <Marker {...props} />
-    </div>
-);
-
-export const Empty = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: [],
-        choices: [],
-        label: "",
-        onChange: (...args) => {
-            action("onChange")(...args);
-        },
-        onRemove: (...args) => {
-            action("onRemove")(...args);
-        },
-        x: 50,
-        y: 50,
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const WithAnswers = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        answers: ["BMW", "Ferrari"],
-        choices: [
-            "Lamborghini",
-            "BMW",
-            "Volkswagen",
-            "Fiat",
-            "Porsche",
-            "Ferrari",
-        ],
-        label: "Automotive",
-        onChange: (...args) => {
-            action("onChange")(...args);
-        },
-        onRemove: (...args) => {
-            action("onRemove")(...args);
-        },
-        x: 50,
-        y: 50,
-    } as const;
-    return <Wrapper {...props} />;
-};

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

@@ -1,107 +0,0 @@
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import QuestionMarkers from "../question-markers";
-
-import type {MarkerType} from "@khanacademy/perseus";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Label Image/Question Markers",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        // The maximum width of a widget in the editor.
-        width: 338,
-    },
-});
-
-const Wrapper = (props) => (
-    <div className={css(styles.wrapper)}>
-        <QuestionMarkers {...props} />
-    </div>
-);
-
-class WithState extends React.Component<
-    Record<any, any>,
-    {
-        markers: ReadonlyArray<MarkerType>;
-    }
-> {
-    state = {
-        markers: [
-            {
-                answers: [],
-                label: "",
-                x: 50,
-                y: 50,
-            },
-        ],
-    };
-
-    render(): React.ReactNode {
-        const {markers} = this.state;
-
-        return (
-            <div className={css(styles.wrapper)}>
-                <QuestionMarkers
-                    choices={[
-                        "Lamborghini",
-                        "BMW",
-                        "Volkswagen",
-                        "Fiat",
-                        "Porsche",
-                        "Ferrari",
-                    ]}
-                    imageUrl="https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png"
-                    imageWidth={1280}
-                    imageHeight={1024}
-                    markers={markers}
-                    onChange={(markers) => this.setState({markers})}
-                />
-            </div>
-        );
-    }
-}
-
-export const Empty = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        choices: [],
-        imageUrl: "",
-        imageWidth: 0,
-        imageHeight: 0,
-        markers: [],
-        onChange: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const Filled = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        choices: [],
-        imageUrl:
-            "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
-        imageWidth: 1280,
-        imageHeight: 1024,
-        markers: [
-            {
-                answers: [],
-                label: "",
-                x: 50,
-                y: 50,
-            },
-        ],
-        onChange: () => {},
-    } as const;
-    return <Wrapper {...props} />;
-};
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    return <WithState />;
-};

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

@@ -1,59 +0,0 @@
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import SelectImage from "../select-image";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Label Image/Select Image",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        // The maximum width of a widget in the editor.
-        width: 338,
-    },
-});
-
-const Wrapper = (props) => (
-    <div className={css(styles.wrapper)}>
-        <SelectImage {...props} />
-    </div>
-);
-
-const WithState = () => {
-    const [url, setUrl] = React.useState("");
-
-    return (
-        <div className={css(styles.wrapper)}>
-            <SelectImage onChange={(url) => setUrl(url)} url={url} />
-        </div>
-    );
-};
-
-export const Empty = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        url: "",
-        onChange: () => {},
-    } as const;
-
-    return <Wrapper {...props} />;
-};
-
-export const Filled = (args: StoryArgs): React.ReactElement => {
-    const props = {
-        url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
-        onChange: () => {},
-    } as const;
-
-    return <Wrapper {...props} />;
-};
-
-export const Interactive = (args: StoryArgs): React.ReactElement => {
-    return <WithState />;
-};

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

@@ -1,231 +0,0 @@
-/**
- * Controlled list of answer choices, handles adding and removing answers.
- */
-
-import {components, globalStyles} from "@khanacademy/perseus";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import FormWrappedTextField from "../../components/form-wrapped-text-field";
-import Link from "../../components/link";
-
-const {colors, typography} = globalStyles;
-const {Icon} = components;
-
-type AddAnswerProps = {
-    // Callback to add new answer choice.
-    onClick: () => void;
-};
-
-type AnswerProps = {
-    // The answer string, can be plain text or a KaTeX expression.
-    answer: string;
-    // Callback for when an answer is changed.
-    onChange: (answer: string) => void;
-    // Callback to remove answer from list of choices.
-    onRemove: () => void;
-};
-
-type AnswerChoicesProps = {
-    // The list of possible answers in a specific order.
-    choices: ReadonlyArray<string>;
-    // Callback for when answers change.
-    onChange: (choices: ReadonlyArray<string>) => void;
-};
-
-const addIcon = {
-    path: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
-    width: 24,
-    height: 24,
-} as const;
-
-const removeIcon = {
-    path: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z",
-    width: 24,
-    height: 24,
-} as const;
-
-const DraggableGripIcon = () => (
-    <svg width="16" height="16" viewBox="0 0 16 16">
-        <filter
-            id="draggable-grip-shadow"
-            width="112.5%"
-            height="116.7%"
-            x="-6.2%"
-            y="-8.3%"
-            filterUnits="objectBoundingBox"
-        >
-            <feGaussianBlur
-                in="SourceAlpha"
-                stdDeviation=".5"
-                result="shadowBlurInner"
-            />
-
-            <feOffset in="shadowBlurInner" dy="1" result="shadowOffsetInner" />
-
-            <feComposite
-                in="shadowOffsetInner"
-                in2="SourceAlpha"
-                k2="-1"
-                k3="1"
-                operator="arithmetic"
-                result="shadowInnerInner"
-            />
-
-            <feColorMatrix
-                in="shadowInnerInner"
-                values="0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0 0.17254902 0 0 0 0.2 0"
-            />
-        </filter>
-
-        <path
-            d="M1 4a1 1 0 1 1 0-2h14a1 1 0 0 1 0 2H1zm0 10a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2H1zm0-5a1 1 0 1 1 0-2h14a1 1 0 0 1 0 2H1z"
-            fill={colors.gray17}
-            filter="url(#draggable-grip-shadow)"
-        />
-    </svg>
-);
-
-/**
- * A button link to add a new answer.
- */
-const AddAnswer = ({onClick}: AddAnswerProps): React.ReactElement => (
-    <Link
-        className={css(styles.addAnswer, editorStyles.addAnswer)}
-        onClick={onClick}
-    >
-        <Icon icon={addIcon} size={24} />
-        <div className={css(styles.spacer)} />
-        Add an answer choice
-    </Link>
-);
-
-/**
- * An answer item in the choices list.
- *
- * TODO(michaelpolyak): Implement answer reordering, CP-117
- */
-const Answer = ({
-    answer,
-    onChange,
-    onRemove,
-}: AnswerProps): React.ReactElement => (
-    <li className={css(styles.answer)}>
-        <Link onClick={onRemove}>
-            <Icon icon={removeIcon} size={24} color="#D92916" />
-        </Link>
-
-        <div className={css(styles.spacer)} />
-
-        <FormWrappedTextField
-            grow={1}
-            onChange={(e) => onChange(e.target.value)}
-            value={answer}
-        />
-
-        <div className={css(styles.spacer)} />
-
-        <Link
-            style={[styles.disabled]}
-            title="Answer reordering is not implemented."
-        >
-            <DraggableGripIcon />
-        </Link>
-    </li>
-);
-
-/**
- * The list of choices, handles adding, removing and reording of answers.
- */
-const AnswerChoices = ({
-    choices,
-    onChange,
-}: AnswerChoicesProps): React.ReactElement => (
-    <div>
-        <div className={css(styles.title)}>Answer Choices</div>
-
-        <ul className={css(styles.answers)}>
-            {choices.map((answer, index) => (
-                <Answer
-                    answer={answer}
-                    // TODO(michaelpolyak): When answer reording is implemented,
-                    // key by index may not re-render correctly, CP-117
-                    key={index}
-                    // Update answer for choice.
-                    onChange={(answer) =>
-                        onChange([
-                            ...choices.slice(0, index),
-                            answer,
-                            ...choices.slice(index + 1),
-                        ])
-                    }
-                    // Remove answer from choices.
-                    onRemove={() =>
-                        onChange([
-                            ...choices.slice(0, index),
-                            ...choices.slice(index + 1),
-                        ])
-                    }
-                />
-            ))}
-        </ul>
-
-        <AddAnswer
-            // Append a new empty answer to choices.
-            onClick={() => onChange([...choices, ""])}
-        />
-    </div>
-);
-
-const styles = StyleSheet.create({
-    title: {
-        ...typography.bodyXsmallBold,
-
-        marginBottom: 6,
-
-        color: colors.gray17,
-    },
-
-    answers: {
-        marginTop: 12,
-        marginBottom: 12,
-    },
-
-    answer: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-
-        ":not(:first-child)": {
-            marginTop: 12,
-        },
-    },
-
-    addAnswer: {
-        ...typography.bodyXsmallBold,
-
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-
-        color: "#1865f2",
-    },
-
-    spacer: {
-        width: 16,
-    },
-
-    disabled: {
-        cursor: "not-allowed",
-    },
-});
-
-const editorStyles = StyleSheet.create({
-    addAnswer: {
-        ":link": {
-            color: "#1865f2",
-        },
-    },
-});
-
-export default AnswerChoices;

package/src/widgets/label-image/behavior.tsx

@@ -1,122 +0,0 @@
-/**
- * Controlled component to display and change widget options.
- */
-
-import {globalStyles} from "@khanacademy/perseus";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import Checkbox from "../../components/checkbox";
-
-const {colors, typography} = globalStyles;
-
-export type PreferredPopoverDirection =
-    | "NONE"
-    | "UP"
-    | "DOWN"
-    | "LEFT"
-    | "RIGHT";
-
-type Props = {
-    // Whether multiple answer choices may be selected for markers.
-    multipleAnswers: boolean;
-    // Whether to hide answer choices from user instructions.
-    hideChoicesFromInstructions: boolean;
-
-    preferredPopoverDirection: PreferredPopoverDirection;
-    // Callback for when widget options change.
-    onChange: (options: {
-        multipleAnswers?: boolean;
-        hideChoicesFromInstructions?: boolean;
-        preferredPopoverDirection?: PreferredPopoverDirection;
-    }) => void;
-};
-
-const Behavior = ({
-    multipleAnswers,
-    hideChoicesFromInstructions,
-    preferredPopoverDirection,
-    onChange,
-}: Props): React.ReactElement => (
-    <div>
-        <div className={css(styles.title)}>Behavior</div>
-
-        <ul>
-            <li className={css(styles.option)}>
-                <Checkbox
-                    checked={multipleAnswers}
-                    onChange={() =>
-                        onChange({multipleAnswers: !multipleAnswers})
-                    }
-                />
-
-                <span className={css(styles.label)}>
-                    Allow multiple answers per marker
-                </span>
-            </li>
-
-            <li className={css(styles.option)}>
-                <Checkbox
-                    checked={hideChoicesFromInstructions}
-                    onChange={() =>
-                        onChange({
-                            hideChoicesFromInstructions:
-                                !hideChoicesFromInstructions,
-                        })
-                    }
-                />
-
-                <span className={css(styles.label)}>
-                    Do not display answer choices in instructions
-                </span>
-            </li>
-
-            <li className={css(styles.option)}>
-                <span className={css(styles.label)}>
-                    Preferred pop-over direction
-                </span>
-                <select
-                    value={preferredPopoverDirection}
-                    onChange={(e) => {
-                        onChange({
-                            preferredPopoverDirection: e.target
-                                .value as PreferredPopoverDirection,
-                        });
-                    }}
-                >
-                    <option value="NONE"> No Preference </option>
-                    <option value="UP"> Up </option>
-                    <option value="DOWN"> Down </option>
-                    <option value="LEFT"> Left </option>
-                    <option value="RIGHT"> Right </option>
-                </select>
-            </li>
-        </ul>
-    </div>
-);
-
-const styles = StyleSheet.create({
-    title: {
-        ...typography.bodyXsmallBold,
-
-        marginBottom: 6,
-
-        color: colors.gray17,
-    },
-
-    option: {
-        display: "flex",
-
-        padding: "6px 0",
-    },
-
-    label: {
-        ...typography.smallSubheadingMobile,
-
-        marginLeft: 16,
-
-        color: colors.gray17,
-    },
-});
-
-export default Behavior;