@khanacademy/perseus 0.0.1 → 0.2.1

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

@@ -0,0 +1,93 @@
+// @flow
+import * as React from "react";
+
+import AnswerChoices from "../answer-choices.jsx";
+
+import type {AnswerType} from "../answer-choices.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Widgets/Label Image/Answer Choices",
+}: 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,
+    },
+];
+
+class WithState extends React.Component<
+    {multipleSelect: boolean, ...},
+    {choices: $ReadOnlyArray<AnswerType>, ...},
+> {
+    static defaultProps = {
+        multipleSelect: false,
+    };
+
+    state = {
+        choices: [...defaultChoices],
+    };
+
+    handleChange(selection) {
+        const {choices} = this.state;
+
+        this.setState({
+            choices: choices.map((choice, index) => ({
+                ...choice,
+                checked: selection[index],
+            })),
+        });
+    }
+
+    render(): React.Node {
+        const {multipleSelect} = this.props;
+
+        const {choices} = this.state;
+
+        return (
+            <AnswerChoices
+                choices={choices}
+                multipleSelect={multipleSelect}
+                onChange={(selection) => this.handleChange(selection)}
+            />
+        );
+    }
+}
+
+export const SingleSelect = (args: StoryArgs): React.Node => {
+    return <WithState />;
+};
+
+export const MultipleSelect = (args: StoryArgs): React.Node => {
+    return <WithState multipleSelect={true} />;
+};

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

@@ -0,0 +1,172 @@
+// @flow
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import Marker from "../marker.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Widgets/Label Image/Marker",
+}: 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.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: [],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showSelected: false,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const UnfilledPulsate = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: [],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showSelected: false,
+        showPulsate: true,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const UnfilledSelected = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: [],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showSelected: true,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const Filled = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: ["Fiat"],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showSelected: false,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const FilledSelected = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: ["Fiat"],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showSelected: true,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const Incorrect = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: ["Fiat"],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showCorrectness: "incorrect",
+        showSelected: false,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const IncorrectSelected = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: ["Fiat"],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showCorrectness: "incorrect",
+        showSelected: true,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const Correct = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: ["BMW", "Ferrari"],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showCorrectness: "correct",
+        showSelected: false,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};
+
+export const CorrectSelected = (args: StoryArgs): React.Node => {
+    const props = {
+        answers: ["BMW", "Ferrari"],
+        selected: ["BMW", "Ferrari"],
+        label: "Automotive",
+        x: 50,
+        y: 50,
+        showCorrectness: "correct",
+        showSelected: true,
+        showPulsate: false,
+        onClick: () => {},
+        onKeyDown: () => {},
+    };
+    return <Wrapper {...props} />;
+};

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

@@ -0,0 +1,311 @@
+// @flow
+/**
+ * Controlled list of answer choices, supports arrow key navigation.
+ *
+ * Enables single or multiple answers selection, using radio or checkbox input
+ * types, respectively.
+ */
+
+import Color from "@khanacademy/wonder-blocks-color";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+import _ from "underscore";
+
+import Icon from "../../components/icon.jsx";
+import {iconCheckMedium} from "../../icon-paths.js";
+import Renderer from "../../renderer.jsx";
+import sharedStyles from "../../styles/shared.js";
+
+export type AnswerType = {|
+    // The answer string, can be plain text or a KaTeX expression.
+    content: string,
+
+    // Whether the answer is selected.
+    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>,
+
+    // Whether multiple answers may be chosen.
+    multipleSelect: boolean,
+
+    // Callback to handle change to answer choices selection.
+    onChange: (selection: $ReadOnlyArray<boolean>) => void,
+|};
+
+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;
+
+    state: AnswerState = {
+        isInputFocused: false,
+    };
+
+    focusInput() {
+        if (this._input) {
+            this._input.focus();
+        }
+    }
+
+    handleClick(e: SyntheticMouseEvent<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: SyntheticKeyboardEvent<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: 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.Node {
+        const {checked} = this.props;
+
+        return (
+            <span className={css(styles.checkmarkContainer)}>
+                {checked && (
+                    <Icon
+                        icon={iconCheckMedium}
+                        size={16}
+                        color={Color.offBlack}
+                    />
+                )}
+            </span>
+        );
+    }
+
+    render(): React.Node {
+        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.
+    // eslint-disable-next-line flowtype/no-mutable-array
+    _choices: Array<?AnswerChoice>;
+
+    constructor(props: AnswerChoicesProps) {
+        super(props);
+
+        this._choices = [];
+
+        this.state = {
+            groupName: _.uniqueId("answer_choices_"),
+        };
+    }
+
+    focusAnswer(index: number = 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 = [];
+
+        // 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.Element<"fieldset"> {
+        const {choices, multipleSelect} = this.props;
+
+        const {groupName} = this.state;
+
+        return (
+            <fieldset>
+                {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",
+
+        width: 16,
+        height: 16,
+
+        marginLeft: 8,
+    },
+});