@khanacademy/perseus 1.4.1 → 2.0.0

package/src/widgets/radio/base-radio.jsx

@@ -205,7 +205,6 @@ function BaseRadio(props: Props): React.Node {
 
     // some commonly used shorthands
     const reviewMode = !!reviewModeRubric;
-    const sat = apiOptions.satStyling;
     const isMobile = apiOptions.isMobile;
 
     const firstChoiceHighlighted = choices[0].highlighted;
@@ -216,18 +215,13 @@ function BaseRadio(props: Props): React.Node {
         !editMode && "perseus-rendered-radio",
         css(
             styles.radio,
-            // SAT doesn't use the "responsive styling" as it conflicts
-            // with their custom theming.
-            !sat && styles.responsiveRadioContainer,
-            !sat &&
-                firstChoiceHighlighted &&
+            styles.responsiveRadioContainer,
+            firstChoiceHighlighted &&
                 isMobile &&
                 styles.radioContainerFirstHighlighted,
-            !sat &&
-                lastChoiceHighlighted &&
+            lastChoiceHighlighted &&
                 isMobile &&
                 styles.radioContainerLastHighlighted,
-            sat && styles.satRadio,
         ),
     );
 
@@ -240,21 +234,16 @@ function BaseRadio(props: Props): React.Node {
         countChoices,
         numCorrect,
     );
-    const shouldShowInstructions = !sat;
 
     const responsiveClassName = css(styles.responsiveFieldset);
     const fieldset = (
         <fieldset
             className={`perseus-widget-radio-fieldset ${responsiveClassName}`}
         >
-            {shouldShowInstructions && (
-                <legend className="perseus-sr-only">{instructions}</legend>
-            )}
-            {shouldShowInstructions && (
-                <div className={instructionsClassName} aria-hidden="true">
-                    {instructions}
-                </div>
-            )}
+            <legend className="perseus-sr-only">{instructions}</legend>
+            <div className={instructionsClassName} aria-hidden="true">
+                {instructions}
+            </div>
             <ul className={className} style={{listStyle: "none"}}>
                 {choices.map((choice, i) => {
                     let Element = Choice;
@@ -301,47 +290,21 @@ function BaseRadio(props: Props): React.Node {
                     const aphroditeClassName = (checked) => {
                         // Whether or not to show correctness borders
                         // for this choice and the next choice.
-                        const satShowCorrectness = sat && reviewMode && checked;
-                        const satShowCorrectnessNext =
-                            sat &&
-                            reviewMode &&
-                            nextChoice &&
-                            nextChoice.checked;
-
                         return css(
                             sharedStyles.aboveScratchpad,
                             styles.item,
-                            !sat && styles.responsiveItem,
-                            !sat && checked && styles.selectedItem,
-                            !sat &&
-                                checked &&
+                            styles.responsiveItem,
+                            checked && styles.selectedItem,
+                            checked &&
                                 choice.highlighted &&
                                 styles.aboveBackdrop,
-                            !sat &&
-                                checked &&
+                            checked &&
                                 choice.highlighted &&
                                 apiOptions.isMobile &&
                                 styles.aboveBackdropMobile,
-                            !sat &&
-                                nextChoiceHighlighted &&
+                            nextChoiceHighlighted &&
                                 apiOptions.isMobile &&
                                 styles.nextHighlighted,
-                            sat && styles.satRadioOption,
-                            satShowCorrectness &&
-                                !choice.correct &&
-                                styles.satRadioOptionIncorrect,
-                            satShowCorrectness &&
-                                choice.correct &&
-                                styles.satRadioOptionCorrect,
-                            satShowCorrectnessNext &&
-                                !nextChoice.correct &&
-                                styles.satRadioOptionNextIncorrect,
-                            satShowCorrectnessNext &&
-                                nextChoice.correct &&
-                                styles.satRadioOptionNextCorrect,
-                            sat &&
-                                reviewModeRubric &&
-                                styles.satReviewRadioOption,
                         );
                     };
 
@@ -420,12 +383,7 @@ function BaseRadio(props: Props): React.Node {
 
     // Allow for horizontal scrolling if content is too wide, which may be
     // an issue especially on phones.
-    // This is disabled in SAT, since it conflicts with their theming.
-    return (
-        <div className={css(!sat && styles.responsiveContainer)}>
-            {fieldset}
-        </div>
-    );
+    return <div className={css(styles.responsiveContainer)}>{fieldset}</div>;
 }
 
 BaseRadio.defaultProps = {
@@ -480,47 +438,6 @@ const styles: StyleDeclaration = StyleSheet.create({
         borderBottom: `1px solid rgba(0, 0, 0, 0)`,
     },
 
-    satRadio: {
-        background: "none",
-        marginLeft: 0,
-        userSelect: "none",
-    },
-
-    satRadioOption: {
-        margin: 0,
-        padding: 0,
-        borderBottom: `1px solid #ccc`,
-        ":first-child": {
-            borderTop: `1px solid #ccc`,
-        },
-    },
-
-    satRadioOptionCorrect: {
-        borderBottomColor: styleConstants.satCorrectBorderColor,
-        ":first-child": {
-            borderTopColor: styleConstants.satCorrectBorderColor,
-        },
-    },
-
-    satRadioOptionIncorrect: {
-        borderBottomColor: styleConstants.satIncorrectBorderColor,
-        ":first-child": {
-            borderTopColor: styleConstants.satIncorrectBorderColor,
-        },
-    },
-
-    satRadioOptionNextCorrect: {
-        borderBottomColor: styleConstants.satCorrectBorderColor,
-    },
-
-    satRadioOptionNextIncorrect: {
-        borderBottomColor: styleConstants.satIncorrectBorderColor,
-    },
-
-    satReviewRadioOption: {
-        pointerEvents: "none",
-    },
-
     item: {
         marginLeft: 20,
     },

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

@@ -1,15 +1,20 @@
 // @flow
-/* Component for rendering a letter icon in radio choice */
+/* 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 {getChoiceLetter} from "../util.js";
 
-import LibraryChoiceIcon from "./library-choice-icon.jsx";
-import SATChoiceIcon from "./sat-choice-icon.jsx";
+import CrossOutLine from "./cross-out-line.jsx";
+import sharedStyles, {CHOICE_ICON_SIZE} from "./shared-styles.js";
 
-type ChoiceIconProps = {|
+type ChoiceIconProps = {
     pos: number,
     checked: boolean,
     crossedOut: boolean,
@@ -18,70 +23,192 @@ type ChoiceIconProps = {|
     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 ChoiceInner(props: {
+    pos: number,
+    showCorrectness: boolean,
+    correct: ?boolean,
+}) {
+    const {pos, showCorrectness, correct} = props;
+    const letter = getChoiceLetter(pos);
+
+    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,
+    correct: ?boolean,
+): {
+    backgroundColor: ?string,
+    borderColor: string,
+    color: string,
+    borderRadius: number,
+} {
+    let backgroundColor;
+    let borderColor;
+    let color;
+    if (!showCorrectness && pressed) {
+        borderColor = Color.blue;
+        color = Color.blue;
+        backgroundColor = "transparent";
+    } else if (checked) {
+        const bg = showCorrectness && correct ? Color.green : Color.blue;
+        color = styleConstants.white;
+        backgroundColor = bg;
+        borderColor = bg;
+    } else {
+        borderColor = Color.offBlack64;
+        color = Color.offBlack64;
+    }
+
+    // define shape
+    let borderRadius;
+    if (multipleSelect) {
+        borderRadius = 3;
+    } else {
+        borderRadius = CHOICE_ICON_SIZE;
+    }
+
+    return {backgroundColor, borderColor, color, borderRadius};
+}
 
 function ChoiceIcon(props: ChoiceIconProps): React.Node {
     const {
-        pos,
-        reviewMode,
         checked,
         crossedOut,
-        correct,
-        product,
-        multipleSelect,
         showCorrectness,
+        correct,
         focused,
         hovered,
-        pressed,
-        primaryProductColor = Color.blue,
+        multipleSelect,
+        pos,
         previouslyAnswered,
-        transparentBackground,
+        pressed,
     } = props;
 
-    const letter = getChoiceLetter(pos);
+    const dynamicStyles = getDynamicStyles(
+        checked,
+        showCorrectness,
+        pressed,
+        multipleSelect,
+        correct,
+    );
 
-    if (product === "sat") {
-        return (
-            <SATChoiceIcon
-                letter={letter}
-                reviewMode={reviewMode}
-                checked={checked}
-                correct={correct}
-                crossedOut={crossedOut}
-                multipleSelect={multipleSelect}
-            />
-        );
-    }
     return (
-        <LibraryChoiceIcon
-            letter={letter}
-            reviewMode={reviewMode}
-            checked={checked}
-            crossedOut={crossedOut}
-            focused={focused}
-            hovered={hovered}
-            pressed={pressed}
-            correct={correct}
-            showCorrectness={showCorrectness}
-            primaryProductColor={primaryProductColor}
-            previouslyAnswered={previouslyAnswered}
-            transparentBackground={transparentBackground}
-            multipleSelect={multipleSelect}
-        />
+        <div className={css(sharedStyles.iconWrapper)}>
+            <FocusRing
+                color={Color.blue}
+                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 editMode to check
+                    // if we actually clicked on the radio icon
+                    data-is-radio-icon={true}
+                >
+                    <div className={css(styles.innerWrapper)}>
+                        <ChoiceInner
+                            pos={pos}
+                            showCorrectness={showCorrectness}
+                            correct={correct}
+                        />
+                    </div>
+                </div>
+            </FocusRing>
+            {crossedOut && <CrossOutLine color={dynamicStyles.borderColor} />}
+        </div>
     );
 }
 
+const styles = StyleSheet.create({
+    innerWrapper: {
+        width: CHOICE_ICON_SIZE,
+        height: CHOICE_ICON_SIZE,
+
+        // Center the contents of the icon.
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    circle: {
+        // Make the circle
+        width: CHOICE_ICON_SIZE,
+        height: CHOICE_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 icon wrapper.
+        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: CHOICE_ICON_SIZE,
+    },
+
+    circleIncorrect: {
+        fontSize: CHOICE_ICON_SIZE,
+        borderColor: styleConstants.gray68,
+        color: styleConstants.gray68,
+    },
+
+    circleIncorrectAnswered: {
+        backgroundColor: Color.red,
+        borderColor: Color.red,
+        color: Color.white,
+    },
+});
+
 export default ChoiceIcon;

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

@@ -4,27 +4,23 @@
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import {SAT_ICON_SIZE, LIBRARY_ICON_SIZE} from "./shared-styles.js";
+import {CHOICE_ICON_SIZE} from "./shared-styles.js";
 
-// The "cross-out line" SVG is a bit bigger than the library icon, to provide
+// The "cross-out line" SVG is a bit bigger than the choice 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;
+const CROSS_OUT_LINE_SIZE = CHOICE_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;
+function CrossOutLine(props: {color: string, ...}): React.Node {
     return (
         <svg
-            width={crossOutLineSize}
-            height={crossOutLineSize}
-            viewBox={`0 0 ${crossOutLineSize} ${crossOutLineSize}`}
+            width={CROSS_OUT_LINE_SIZE}
+            height={CROSS_OUT_LINE_SIZE}
+            viewBox={`0 0 ${CROSS_OUT_LINE_SIZE} ${CROSS_OUT_LINE_SIZE}`}
             className={css(styles.crossOutLine)}
             data-test-id="choice-icon__cross-out-line"
         >
@@ -33,8 +29,8 @@ function CrossOutLine(props: {color: string, sat?: boolean, ...}): React.Node {
                 // 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}
+                x2={CROSS_OUT_LINE_SIZE - CROSS_OUT_LINE_PADDING}
+                y1={CROSS_OUT_LINE_SIZE - CROSS_OUT_LINE_PADDING}
                 y2={CROSS_OUT_LINE_PADDING}
                 stroke={props.color}
                 strokeWidth="2"

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

@@ -3,8 +3,7 @@ import {StyleSheet} from "aphrodite";
 
 import type {StyleDeclaration} from "aphrodite";
 
-const SAT_ICON_SIZE = 25;
-const LIBRARY_ICON_SIZE = 24;
+const CHOICE_ICON_SIZE = 24;
 
 const styles: StyleDeclaration = StyleSheet.create({
     iconWrapper: {
@@ -13,5 +12,5 @@ const styles: StyleDeclaration = StyleSheet.create({
     },
 });
 
-export {SAT_ICON_SIZE, LIBRARY_ICON_SIZE};
+export {CHOICE_ICON_SIZE};
 export default styles;

package/src/widgets/radio/choice.jsx

@@ -15,7 +15,6 @@ import _ from "underscore";
 
 import Icon from "../../components/icon.jsx";
 import {ApiOptions, ClassNames} from "../../perseus-api.jsx";
-import * as styleConstants from "../../styles/constants.js";
 import mediaQueries from "../../styles/media-queries.js";
 
 import getA11yText from "./choice-a11y-text.js";
@@ -126,41 +125,20 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
         onChange({checked: updatedChecked, crossedOut: updatedCrossedOut});
     }
 
-    // HACK: while most of the styling for rendering SAT items is handled
-    // via aphrodite, we also need to assign normal CSS classnames here to
-    // special-case the coloring of MathJax formulas (see .MathJax .math in
-    // stylesheets/task-package/tasks.less)
-    const satCorrectChoice = apiOptions.satStyling && reviewMode && correct;
-    const satIncorrectChecked =
-        apiOptions.satStyling && reviewMode && !correct && checked;
     const descriptionClassName = classNames(
         "description",
-        satCorrectChoice && "sat-correct",
-        satIncorrectChecked && "sat-incorrect",
-        css(
-            !apiOptions.satStyling && styles.description,
-            apiOptions.satStyling && styles.satDescription,
-            satCorrectChoice && checked && styles.satDescriptionCorrectChecked,
-            satIncorrectChecked && styles.satDescriptionIncorrectChecked,
-        ),
+        css(styles.description),
     );
 
     const rationaleClassName = classNames(
         "perseus-radio-rationale-content",
-        css(
-            styles.rationale,
-            !apiOptions.satStyling && styles.nonSatRationale,
-            apiOptions.satStyling && styles.satReviewRationale,
-        ),
+        css(styles.rationale),
     );
 
-    // We want to show the choices as dimmed out when the choices are
-    // disabled. However, we don't want to do this in the SAT product and
-    // we also don't want to do this when we're in review mode in the
+    // We want to show the choices as dimmed out when the choices are disabled.
+    // However, we don't want to do this when we're in review mode in the
     // content library.
-    const showDimmed =
-        (!apiOptions.satStyling && !reviewMode && apiOptions.readOnly) ||
-        crossedOut;
+    const showDimmed = (!reviewMode && apiOptions.readOnly) || crossedOut;
 
     const letter = getChoiceLetter(pos);
     const a11yText = getA11yText(
@@ -255,12 +233,6 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                                 showCorrectness={showCorrectness}
                                 multipleSelect={multipleSelect}
                                 reviewMode={reviewMode}
-                                product={
-                                    apiOptions.satStyling ? "sat" : "library"
-                                }
-                                primaryProductColor={
-                                    apiOptions.styling?.primaryProductColor
-                                }
                                 previouslyAnswered={previouslyAnswered}
                             />
                             <span
@@ -278,7 +250,6 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                                         crossedOut={crossedOut}
                                         previouslyAnswered={previouslyAnswered}
                                         reviewMode={reviewMode}
-                                        satStyling={apiOptions.satStyling}
                                     />
                                 </div>
                                 <div>{content}</div>
@@ -392,28 +363,8 @@ const styles = StyleSheet.create({
         width: "100%",
     },
 
-    satDescription: {
-        display: "block",
-        position: "relative",
-        boxSizing: "border-box",
-        cursor: "pointer",
-        marginLeft: 0,
-        padding: "17px 14px 17px 0",
-    },
-
-    satDescriptionCorrectChecked: {
-        backgroundColor: styleConstants.satCorrectBackgroundColor,
-    },
-
-    satDescriptionIncorrectChecked: {
-        backgroundColor: styleConstants.satIncorrectBackgroundColor,
-    },
-
     rationale: {
         display: "block",
-    },
-
-    nonSatRationale: {
         padding: intermediateCheckboxPadding,
         paddingTop: 0,
         marginLeft: 54,
@@ -422,11 +373,6 @@ const styles = StyleSheet.create({
             paddingTop: 0,
         },
     },
-
-    satReviewRationale: {
-        marginTop: 13,
-        marginLeft: 45,
-    },
 });
 
 type ExportProps = $Diff<React.ElementConfig<typeof Choice>, WithForwardRef>;

package/src/widgets/radio/option-status.jsx

@@ -22,7 +22,6 @@ type OptionStatusProps = {|
     // Did the user select this option as the answer earlier?
     previouslyAnswered: boolean,
     reviewMode: boolean,
-    satStyling?: boolean,
 |};
 
 function renderText(
@@ -50,19 +49,8 @@ function renderText(
 }
 
 function OptionStatus(props: OptionStatusProps): React.Node {
-    const {
-        checked,
-        correct,
-        crossedOut,
-        previouslyAnswered,
-        reviewMode,
-        satStyling,
-    } = props;
-
-    // Option status is exclued for SAT
-    if (satStyling) {
-        return null;
-    }
+    const {checked, correct, crossedOut, previouslyAnswered, reviewMode} =
+        props;
 
     // Option status is shown only in review mode, or for incorrectly
     // answered items.

package/src/components/__stories__/possible-answers.stories.jsx

@@ -1,22 +0,0 @@
-// @flow
-import * as React from "react";
-
-import PossibleAnswers from "../possible-answers.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-export default ({
-    title: "Perseus/Components/Possible Answers",
-}: Story);
-
-export const EmptyPropsObject = (args: StoryArgs): React.Node => {
-    return <PossibleAnswers />;
-};
-
-export const ThreeSampleAnswers = (args: StoryArgs): React.Node => {
-    return <PossibleAnswers answers={["Answer 1", "Answer 2", "Answer 3"]} />;
-};