@khanacademy/perseus 0.4.3 → 1.0.0

package/src/widgets/radio/choice-icon/choice-icon.jsx

@@ -0,0 +1,155 @@
+// @flow
+/* Component for rendering a letter icon in radio choice */
+
+import Color from "@khanacademy/wonder-blocks-color";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import * as React from "react";
+
+import {getChoiceLetter} from "../util.js";
+
+import LibraryChoiceIcon from "./library-choice-icon.jsx";
+import SATChoiceIcon from "./sat-choice-icon.jsx";
+
+type ChoiceIconProps = {|
+    pos: number,
+    checked: boolean,
+    crossedOut: boolean,
+    focused: boolean,
+    hovered: boolean,
+    pressed: boolean,
+    correct: boolean,
+    showCorrectness: boolean,
+    // TODO(amy): if we go this "product" flag route, define this type
+    // somewhere shared
+    product: "sat" | "library",
+    multipleSelect: boolean,
+    reviewMode: boolean,
+    previouslyAnswered: boolean,
+    // TODO(mdr): The CrossOutButton needs a transparent-background ChoiceIcon,
+    //     so I've added this prop. I'm not sure why we have backgrounds in the
+    //     general case, though? When does the choice container have a
+    //     non-white background, aside from SAT, which uses a different icon?
+    transparentBackground?: boolean,
+
+    primaryProductColor?: string,
+|};
+
+function getA11yText(
+    letter: string,
+    checked: boolean,
+    correct: boolean,
+    crossedOut: boolean,
+    showCorrectness: boolean,
+): string {
+    // There are two pieces of metadata we want to add to each a11yText:
+    // whether the answer was checked/crossed-out/neither, and whether the
+    // answer is correct/incorrect/not-yet-revealed.
+    //
+    // Translation is tricky for cross-product situations like this, so
+    // we've just enumerated all 9 possibilities as separate strings.
+    if (showCorrectness && correct) {
+        if (checked) {
+            return i18n._("(Choice %(letter)s, Checked, Correct)", {
+                letter,
+            });
+        }
+        if (crossedOut) {
+            return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
+                letter,
+            });
+        }
+        return i18n._("(Choice %(letter)s, Correct)", {
+            letter,
+        });
+    }
+    if (showCorrectness && !correct) {
+        if (checked) {
+            return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
+                letter,
+            });
+        }
+        if (crossedOut) {
+            return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
+                letter,
+            });
+        }
+        return i18n._("(Choice %(letter)s, Incorrect)", {
+            letter,
+        });
+    }
+    if (checked) {
+        return i18n._("(Choice %(letter)s, Checked)", {
+            letter,
+        });
+    }
+    if (crossedOut) {
+        return i18n._("(Choice %(letter)s, Crossed out)", {
+            letter,
+        });
+    }
+    return i18n._("(Choice %(letter)s)", {
+        letter,
+    });
+}
+
+function ChoiceIcon(props: ChoiceIconProps): React.Node {
+    const {
+        pos,
+        reviewMode,
+        checked,
+        crossedOut,
+        correct,
+        product,
+        multipleSelect,
+        showCorrectness,
+        focused,
+        hovered,
+        pressed,
+        primaryProductColor = Color.blue,
+        previouslyAnswered,
+        transparentBackground,
+    } = props;
+
+    const letter = getChoiceLetter(pos);
+    const a11yText = getA11yText(
+        letter,
+        checked,
+        correct,
+        crossedOut,
+        showCorrectness,
+    );
+
+    if (product === "sat") {
+        return (
+            <SATChoiceIcon
+                letter={letter}
+                a11yText={a11yText}
+                reviewMode={reviewMode}
+                checked={checked}
+                correct={correct}
+                crossedOut={crossedOut}
+                multipleSelect={multipleSelect}
+            />
+        );
+    }
+    return (
+        <LibraryChoiceIcon
+            letter={letter}
+            a11yText={a11yText}
+            reviewMode={reviewMode}
+            checked={checked}
+            crossedOut={crossedOut}
+            focused={focused}
+            hovered={hovered}
+            pressed={pressed}
+            correct={correct}
+            showCorrectness={showCorrectness}
+            primaryProductColor={primaryProductColor}
+            previouslyAnswered={previouslyAnswered}
+            transparentBackground={transparentBackground}
+            multipleSelect={multipleSelect}
+        />
+    );
+}
+
+export default ChoiceIcon;

package/src/widgets/radio/choice-icon/cross-out-line.jsx

@@ -0,0 +1,55 @@
+// @flow
+/* Component for rendering a letter icon in radio choice */
+
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import {SAT_ICON_SIZE, LIBRARY_ICON_SIZE} from "./shared-styles.js";
+
+// The "cross-out line" SVG is a bit bigger than the library icon, to provide
+// extra space for the cute rounded line cap.
+const CROSS_OUT_LINE_PADDING = 2;
+const CROSS_OUT_LINE_SIZE = LIBRARY_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
+const SAT_CROSS_OUT_LINE_SIZE = SAT_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
+
+/**
+ * The "cross-out line" that appears over the icon when the choice has been
+ * `crossedOut`.
+ */
+function CrossOutLine(props: {color: string, sat?: boolean, ...}): React.Node {
+    const crossOutLineSize = props.sat
+        ? SAT_CROSS_OUT_LINE_SIZE
+        : CROSS_OUT_LINE_SIZE;
+    return (
+        <svg
+            width={crossOutLineSize}
+            height={crossOutLineSize}
+            viewBox={`0 0 ${crossOutLineSize} ${crossOutLineSize}`}
+            className={css(styles.crossOutLine)}
+        >
+            <line
+                // The line stretches from the bottom-left to top-right.
+                // We don't quite go to the _very_ corner, because the cute
+                // rounded line cap needs to bleed into our padding.
+                x1={CROSS_OUT_LINE_PADDING}
+                x2={crossOutLineSize - CROSS_OUT_LINE_PADDING}
+                y1={crossOutLineSize - CROSS_OUT_LINE_PADDING}
+                y2={CROSS_OUT_LINE_PADDING}
+                stroke={props.color}
+                strokeWidth="2"
+                strokeLinecap="round"
+            />
+        </svg>
+    );
+}
+
+const styles = StyleSheet.create({
+    crossOutLine: {
+        // Center the icon within the container.
+        position: "absolute",
+        top: `calc(50% - ${CROSS_OUT_LINE_SIZE / 2}px)`,
+        left: `calc(50% - ${CROSS_OUT_LINE_SIZE / 2}px)`,
+    },
+});
+
+export default CrossOutLine;

package/src/widgets/radio/choice-icon/library-choice-icon.jsx

@@ -0,0 +1,219 @@
+// @flow
+/* Component for rendering a letter icon in a library radio choice */
+
+import Color from "@khanacademy/wonder-blocks-color";
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import InlineIcon from "../../../components/inline-icon.jsx";
+import {iconCheck, iconMinus} from "../../../icon-paths.js";
+import * as styleConstants from "../../../styles/constants.js";
+import FocusRing from "../focus-ring.jsx";
+
+import CrossOutLine from "./cross-out-line.jsx";
+import sharedStyles, {LIBRARY_ICON_SIZE} from "./shared-styles.js";
+
+type LibraryChoiceIconProps = {
+    letter: string,
+    a11yText: string,
+    checked: boolean,
+    crossedOut: boolean,
+    focused: boolean,
+    hovered: boolean,
+    pressed: boolean,
+    multipleSelect: boolean,
+    correct: ?boolean,
+    reviewMode: boolean,
+    showCorrectness: boolean,
+    primaryProductColor: string,
+    previouslyAnswered: boolean,
+    transparentBackground?: boolean,
+};
+
+function ChoiceInner(props: {
+    letter: string,
+    showCorrectness: boolean,
+    correct: ?boolean,
+}) {
+    const {letter, showCorrectness, correct} = props;
+
+    if (!showCorrectness) {
+        return letter;
+    }
+    if (correct) {
+        return (
+            <InlineIcon
+                {...iconCheck}
+                style={{
+                    position: "relative",
+                    top: -1,
+                }}
+            />
+        );
+    }
+    return <InlineIcon {...iconMinus} />;
+}
+
+// Handle dynamic styling of the multiple choice icon. Most
+// MC icon styles are constant, but we do allow the caller
+// to specify the selected color, and thus must control styles
+// related to the selected state dynamically.
+function getDynamicStyles(
+    checked: boolean,
+    showCorrectness: boolean,
+    pressed: boolean,
+    multipleSelect: boolean,
+    primaryProductColor: string,
+    correct: ?boolean,
+    transparentBackground?: boolean,
+): {
+    backgroundColor: ?string,
+    borderColor: string,
+    color: string,
+    borderRadius: number,
+} {
+    let backgroundColor;
+    let borderColor;
+    let color;
+    if (!showCorrectness && pressed) {
+        borderColor = primaryProductColor;
+        color = primaryProductColor;
+        backgroundColor = transparentBackground
+            ? "transparent"
+            : styleConstants.white;
+    } else if (checked) {
+        // Note: kaGreen is not only the default product color,
+        // but also the "correctness" color
+        const bg =
+            showCorrectness && correct ? Color.green : primaryProductColor;
+        color = styleConstants.white;
+        backgroundColor = bg;
+        borderColor = bg;
+    } else {
+        borderColor = Color.offBlack64;
+        color = Color.offBlack64;
+    }
+
+    // define shape
+    let borderRadius;
+    if (multipleSelect) {
+        borderRadius = 3;
+    } else {
+        borderRadius = LIBRARY_ICON_SIZE;
+    }
+
+    return {backgroundColor, borderColor, color, borderRadius};
+}
+
+function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
+    const {
+        a11yText,
+        checked,
+        crossedOut,
+        showCorrectness,
+        correct,
+        focused,
+        hovered,
+        multipleSelect,
+        primaryProductColor,
+        previouslyAnswered,
+        letter,
+        pressed,
+        transparentBackground,
+    } = props;
+
+    const dynamicStyles = getDynamicStyles(
+        checked,
+        showCorrectness,
+        pressed,
+        multipleSelect,
+        primaryProductColor,
+        correct,
+        transparentBackground,
+    );
+
+    return (
+        <div className={css(sharedStyles.iconWrapper)}>
+            <FocusRing
+                color={primaryProductColor}
+                visible={focused || hovered}
+                multipleSelect={multipleSelect}
+            >
+                <div
+                    style={dynamicStyles}
+                    data-test-id="choice-icon__library-choice-icon"
+                    className={css(
+                        styles.circle,
+                        showCorrectness && correct && styles.circleCorrect,
+                        showCorrectness && !correct && styles.circleIncorrect,
+                        showCorrectness &&
+                            !correct &&
+                            (checked || previouslyAnswered) &&
+                            styles.circleIncorrectAnswered,
+                    )}
+                    // used in BaseRadio to check if we actually clicked on the
+                    // radio icon
+                    data-is-radio-icon={true}
+                >
+                    <div className="perseus-sr-only">{a11yText}</div>
+                    <div aria-hidden>
+                        <ChoiceInner
+                            letter={letter}
+                            showCorrectness={showCorrectness}
+                            correct={correct}
+                        />
+                    </div>
+                </div>
+            </FocusRing>
+            {crossedOut && <CrossOutLine color={dynamicStyles.borderColor} />}
+        </div>
+    );
+}
+
+const styles = StyleSheet.create({
+    circle: {
+        // Make the circle
+        width: LIBRARY_ICON_SIZE,
+        height: LIBRARY_ICON_SIZE,
+        boxSizing: "border-box",
+        borderStyle: "solid",
+        borderWidth: 2,
+
+        // The default icons have letters in them. Style those letters.
+        fontFamily: styleConstants.baseFontFamily,
+        // NOTE(emily): We explicitly set the font weight instead of using the
+        // "bold font family" so that characters which fall back to the default
+        // font get bolded too.
+        fontWeight: "bold",
+        fontSize: 12,
+
+        // Center the contents of the icon.
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        // HACK(emily): I don't know why adding this line height makes the text
+        // appear centered better than any other value, but it does. In
+        // particular, at large zoom levels this line height does almost
+        // nothing, but at the default size this shifts the letter down one
+        // pixel so it is much better centered.
+        lineHeight: "1px",
+    },
+
+    circleCorrect: {
+        fontSize: LIBRARY_ICON_SIZE,
+    },
+
+    circleIncorrect: {
+        fontSize: LIBRARY_ICON_SIZE,
+        borderColor: styleConstants.gray68,
+        color: styleConstants.gray68,
+    },
+
+    circleIncorrectAnswered: {
+        backgroundColor: Color.red,
+        borderColor: Color.red,
+        color: Color.white,
+    },
+});
+
+export default LibraryChoiceIcon;

package/src/widgets/radio/choice-icon/sat-choice-icon.jsx

@@ -0,0 +1,129 @@
+// @flow
+/* Component for rendering a letter icon in a SAT radio choice */
+
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+import * as styleConstants from "../../../styles/constants.js";
+
+import CrossOutLine from "./cross-out-line.jsx";
+import sharedStyles, {SAT_ICON_SIZE} from "./shared-styles.js";
+
+type SATChoiceIconProps = {
+    letter: string,
+    a11yText: string,
+    checked: boolean,
+    multipleSelect: boolean,
+    correct: boolean,
+    reviewMode: boolean,
+    crossedOut: boolean,
+};
+
+// TODO(amy): figure out a better scheme for specifying these
+// styles that isn't such a pain to grok. See some neat ideas
+// from MDR in https://phabricator.khanacademy.org/D35249.
+function constructSATStyles(
+    reviewMode: boolean,
+    correct: boolean,
+    checked: boolean,
+    multipleSelect: boolean,
+): {
+    color: string,
+    backgroundColor: ?string,
+    borderColor: string,
+    borderRadius: number,
+} {
+    let backgroundColor;
+    let borderColor = styleConstants.satBlue;
+    let color = styleConstants.satBlue;
+    if (reviewMode) {
+        if (correct) {
+            borderColor = styleConstants.satCorrectColor;
+            color = checked
+                ? styleConstants.white
+                : styleConstants.satCorrectColor;
+            backgroundColor = checked
+                ? styleConstants.satCorrectColor
+                : styleConstants.white;
+        } else if (checked) {
+            borderColor = styleConstants.satIncorrectColor;
+            color = styleConstants.white;
+            backgroundColor = styleConstants.satIncorrectColor;
+        }
+    } else if (checked) {
+        color = styleConstants.white;
+        backgroundColor = styleConstants.satBlue;
+    }
+
+    let borderRadius;
+    if (multipleSelect) {
+        borderRadius = 3;
+    } else {
+        borderRadius = SAT_ICON_SIZE;
+    }
+
+    return {color, backgroundColor, borderColor, borderRadius};
+}
+
+function SATChoiceIcon(props: SATChoiceIconProps): React.Node {
+    const {
+        letter,
+        a11yText,
+        crossedOut,
+        reviewMode,
+        correct,
+        checked,
+        multipleSelect,
+    } = props;
+
+    const {color, backgroundColor, borderColor, borderRadius} =
+        constructSATStyles(reviewMode, correct, checked, multipleSelect);
+
+    return (
+        <div className={css(sharedStyles.iconWrapper)}>
+            <div
+                className={css(styles.satCircle)}
+                data-test-id="choice-icon__sat-choice-icon"
+                style={{backgroundColor, borderColor, borderRadius}}
+            />
+            <div style={{color}} className={css(styles.letter)}>
+                <span className="perseus-sr-only">{a11yText}</span>
+                <span aria-hidden="true">{letter}</span>
+            </div>
+            {crossedOut && <CrossOutLine color={borderColor} sat={true} />}
+        </div>
+    );
+}
+
+const styles = StyleSheet.create({
+    satCircle: {
+        display: "block",
+        borderStyle: "solid",
+        borderWidth: 2,
+        content: `''`,
+        height: SAT_ICON_SIZE,
+        width: SAT_ICON_SIZE,
+        top: 1,
+        left: 1,
+    },
+    letter: {
+        // These properties make sure that this element has the exact
+        // same size as `circle` so that we can center things
+        // inside of it.
+        border: "2px solid transparent",
+        width: SAT_ICON_SIZE,
+        height: SAT_ICON_SIZE,
+        position: "absolute",
+        top: 1,
+
+        // Center contained items.
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+
+        fontFamily: styleConstants.boldFontFamily,
+        fontSize: 13,
+    },
+});
+
+export default SATChoiceIcon;

package/src/widgets/radio/choice-icon/shared-styles.js

@@ -0,0 +1,17 @@
+// @flow
+import {StyleSheet} from "aphrodite";
+
+import type {StyleDeclaration} from "aphrodite";
+
+const SAT_ICON_SIZE = 25;
+const LIBRARY_ICON_SIZE = 24;
+
+const styles: StyleDeclaration = StyleSheet.create({
+    iconWrapper: {
+        display: "inline-block",
+        position: "relative",
+    },
+});
+
+export {SAT_ICON_SIZE, LIBRARY_ICON_SIZE};
+export default styles;

package/src/widgets/radio/choice-none-above.jsx

@@ -1,54 +1,63 @@
 // @flow
 
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import classNames from "classnames";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import Renderer from "../../renderer.jsx";
 
 import Choice from "./choice.jsx";
 
-class ChoiceNoneAbove extends React.Component<$FlowFixMe> {
-    _choice: $FlowFixMe;
-    static propTypes = {
-        className: PropTypes.string,
-        content: PropTypes.node,
-        showContent: PropTypes.bool,
+import type {ChoiceProps} from "./choice.jsx";
+
+type Props = {|
+    ...ChoiceProps,
+    showContent: boolean,
+|};
+
+type WithForwardRef = {|forwardedRef: React.Ref<"button">|};
+
+type PropsWithForwardRef = {|
+    ...Props,
+    ...WithForwardRef,
+|};
+
+function ChoiceNoneAbove(props: PropsWithForwardRef): React.Node {
+    const {showContent, content, forwardedRef, ...rest} = props;
+
+    const choiceProps = {
+        ...rest,
+        content: showContent ? (
+            content
+        ) : (
+            // We use a Renderer here because that is how
+            // `this.props.content` is wrapped otherwise.
+            // We pass in a key here so that we avoid a semi-spurious
+            // react warning when we render this in the same place
+            // as the previous choice content renderer.
+            // Note this destroys state, but since all we're doing
+            // is outputting "None of the above", that is okay.
+            //
+            // todo(matthewc): this seems like way overkill
+            // just to render a string
+            <Renderer
+                key="noneOfTheAboveRenderer"
+                content={i18n._("None of the above")}
+            />
+        ),
     };
 
-    static defaultProps: $FlowFixMe = {
-        showContent: true,
-    };
+    return <Choice {...choiceProps} ref={forwardedRef} />;
+}
 
-    focusInput: () => void = () => {
-        this._choice.focusInput();
-    };
+ChoiceNoneAbove.defaultProps = {
+    showContent: true,
+};
 
-    render(): React.Node {
-        const choiceProps = {
-            ...this.props,
-            className: classNames(this.props.className, "none-of-above"),
-            content: this.props.showContent ? (
-                this.props.content
-            ) : (
-                // We use a Renderer here because that is how
-                // `this.props.content` is wrapped otherwise.
-                // We pass in a key here so that we avoid a semi-spurious
-                // react warning when we render this in the same place
-                // as the previous choice content renderer.
-                // Note this destroys state, but since all we're doing
-                // is outputting "None of the above", that is okay.
-                <Renderer
-                    key="noneOfTheAboveRenderer"
-                    content={i18n._("None of the above")}
-                />
-            ),
-            ref: (el) => (this._choice = el),
-        };
-
-        return <Choice {...choiceProps} />;
-    }
-}
+type ExportProps = $Diff<
+    React.ElementConfig<typeof ChoiceNoneAbove>,
+    WithForwardRef,
+>;
 
-export default ChoiceNoneAbove;
+export default (React.forwardRef<ExportProps, HTMLButtonElement>(
+    (props, ref) => <ChoiceNoneAbove {...props} forwardedRef={ref} />,
+): React.AbstractComponent<ExportProps, HTMLButtonElement>);