@khanacademy/perseus 1.3.0 → 1.3.2

package/src/widgets/radio/__stories__/sat-styles.stories.jsx

@@ -0,0 +1,191 @@
+// @flow
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import {generateChoice} from "../../__testdata__/base-radio_testdata.js";
+import BaseRadio from "../base-radio.jsx";
+
+type StoryArgs = {|
+    multipleSelect: boolean,
+    editMode: boolean,
+    countChoices: boolean,
+|};
+
+type Story = {|
+    title: string,
+    args: StoryArgs,
+|};
+
+export default ({
+    title: "Perseus/Widgets/Radio/SAT Base Radio",
+    args: {
+        multipleSelect: false,
+        editMode: false,
+        countChoices: false,
+    },
+}: Story);
+
+const defaultProps = {
+    apiOptions: {
+        satStyling: true,
+    },
+    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,
+};
+
+export const Interactive = (args: StoryArgs): React.Node => {
+    const overwrittenProps = {...defaultProps, ...args};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const SingleSelectWithNothingSelected = (
+    args: StoryArgs,
+): React.Node => {
+    const overwrittenProps = {...defaultProps, multipleSelect: false};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleSelectWithNothingSelected = (
+    args: StoryArgs,
+): React.Node => {
+    const overwrittenProps = {...defaultProps, multipleSelect: true};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleSelectWithCountChoicesLabel = (
+    args: StoryArgs,
+): React.Node => {
+    const overwrittenProps = {
+        ...defaultProps,
+        multipleSelect: true,
+        numCorrect: 2,
+        countChoices: true,
+    };
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const SingleSelected = (args: StoryArgs): React.Node => {
+    const choices = Array(4)
+        .fill(null)
+        .map((_, i) => generateChoice({content: `Choice ${i + 1}`}));
+    choices[1].checked = true;
+
+    const overwrittenProps = {...defaultProps, multipleSelect: false, choices};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleSelected = (args: StoryArgs): React.Node => {
+    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};
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const SingleKitchenSink = (args: StoryArgs): React.Node => {
+    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 Flow 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,
+    };
+    return <BaseRadio {...overwrittenProps} />;
+};
+
+export const MultipleKitchenSink = (args: StoryArgs): React.Node => {
+    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 Flow 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,
+    };
+    return <BaseRadio {...overwrittenProps} />;
+};

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

@@ -454,8 +454,7 @@ const styles: StyleDeclaration = StyleSheet.create({
     },
 
     radio: {
-        // Avoid centering
-        width: "100%",
+        padding: 0,
     },
 
     responsiveRadioContainer: {

package/src/widgets/radio/choice.jsx

@@ -14,7 +14,7 @@ import {useState, useEffect} from "react";
 import _ from "underscore";
 
 import Icon from "../../components/icon.jsx";
-import {ApiOptions} from "../../perseus-api.jsx";
+import {ApiOptions, ClassNames} from "../../perseus-api.jsx";
 import * as styleConstants from "../../styles/constants.js";
 import mediaQueries from "../../styles/media-queries.js";
 
@@ -140,7 +140,6 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
         css(
             !apiOptions.satStyling && styles.description,
             apiOptions.satStyling && styles.satDescription,
-            satCorrectChoice && styles.satDescriptionCorrect,
             satCorrectChoice && checked && styles.satDescriptionCorrectChecked,
             satIncorrectChecked && styles.satDescriptionIncorrectChecked,
         ),
@@ -178,13 +177,14 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
             style={{
                 dispay: "flex",
                 flexDirection: "column",
+                color: Color.offBlack,
             }}
+            className={descriptionClassName}
         >
             <div
                 style={{
                     display: "flex",
                     flexDirection: "row",
-                    width: "100%",
                     opacity: showDimmed ? 0.5 : 1.0,
                 }}
             >
@@ -208,6 +208,7 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                             apiOptions.readOnly
                         }
                         tabIndex={-1}
+                        className={ClassNames.RADIO.OPTION_CONTENT}
                     />
                     <label htmlFor={choiceId}>
                         {a11yText} &nbsp; {content}
@@ -222,7 +223,6 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                             crossedOut: false,
                         });
                     }}
-                    className={descriptionClassName}
                     disabled={
                         disabled ||
                         apiOptions.staticRender ||
@@ -341,6 +341,14 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                                     pos,
                                 )}`}
                                 disabled={apiOptions.staticRender}
+                                style={{
+                                    alignSelf: "center",
+                                    padding: "5px",
+                                    display: "flex",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    marginLeft: "10px",
+                                }}
                             >
                                 {({hovered, focused, pressed}) => (
                                     <Icon
@@ -390,11 +398,7 @@ const styles = StyleSheet.create({
         boxSizing: "border-box",
         cursor: "pointer",
         marginLeft: 0,
-        padding: "17px 14px",
-    },
-
-    satDescriptionCorrect: {
-        color: styleConstants.satCorrectColor,
+        padding: "17px 14px 17px 0",
     },
 
     satDescriptionCorrectChecked: {
@@ -402,7 +406,6 @@ const styles = StyleSheet.create({
     },
 
     satDescriptionIncorrectChecked: {
-        color: styleConstants.satIncorrectColor,
         backgroundColor: styleConstants.satIncorrectBackgroundColor,
     },