@khanacademy/perseus 0.4.3 → 1.1.0

package/src/widgets/radio/choice.jsx.fixture.js

@@ -3,35 +3,25 @@ export const instances: $ReadOnlyArray<mixed> = [
     ({}: {...}),
     {
         content: "Plain Content",
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
     {
         content: "Correct Content (Review)",
         correct: true,
         reviewMode: true,
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
     {
         content: "Incorrect Content (Review)",
         correct: false,
         reviewMode: true,
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
     {
         content: "Content (Review, correctness not specified)",
         reviewMode: true,
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
     {
         content: "Content with Rationale",
         rationale: "This is some additional information",
         showRationale: true,
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
     {
         content: "Correct Content with Rationale (Review)",
@@ -39,8 +29,6 @@ export const instances: $ReadOnlyArray<mixed> = [
         rationale: "This is some additional information",
         reviewMode: true,
         showRationale: true,
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
     {
         content: "Incorrect Content with Rationale (Review)",
@@ -48,17 +36,11 @@ export const instances: $ReadOnlyArray<mixed> = [
         rationale: "This is some additional information",
         reviewMode: true,
         showRationale: true,
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
     {
         content: "Content with Rationale (Review, correctness not specified)",
         rationale: "This is some additional information",
         reviewMode: true,
         showRationale: true,
-        goToPrevChoice: () => {},
-        goToNextChoice: () => {},
     },
 ];
-
-export const log = ["goToPrevChoice", "goToNextChoice"];

package/src/widgets/radio/focus-ring.jsx

@@ -8,40 +8,47 @@ import * as React from "react";
 
 import * as styleConstants from "../../styles/constants.js";
 
-class FocusRing extends React.Component<{
-    children?: any,
+type Props = {|
+    children?: React.Node,
     // Whether the focus ring is visible. Allows for positioning
     // the child identically regardless of whether the ring is visible.
     visible: boolean,
     // Color of the focus ring
     color: string,
-    ...
-}> {
-    static defaultProps: {|color: string, visible: boolean|} = {
-        visible: true,
-        color: styleConstants.kaGreen,
-    };
+    // Whether a user can select multiple options or not
+    multipleSelect: boolean,
+|};
+
+function FocusRing(props: Props): React.Node {
+    const {visible, color, children, multipleSelect} = props;
 
-    render(): React.Element<"span"> {
-        const borderColor = this.props.visible
-            ? this.props.color
-            : "transparent";
-        const style = {
-            borderColor: borderColor,
-        };
-        return (
-            <span className={css(styles.ring)} style={style}>
-                {this.props.children}
-            </span>
-        );
-    }
+    const borderColor = visible ? color : "transparent";
+    const borderRadius = multipleSelect ? 5 : "50%";
+    const style = {
+        borderColor,
+        borderRadius,
+    };
+    return (
+        <span
+            data-test-id="focus-ring"
+            className={css(styles.ring)}
+            style={style}
+        >
+            {children}
+        </span>
+    );
 }
 
+FocusRing.defaultProps = {
+    visible: true,
+    color: styleConstants.kaGreen,
+    multipleSelect: false,
+};
+
 const styles = StyleSheet.create({
     ring: {
         margin: "auto",
         display: "inline-block",
-        borderRadius: "50%",
         borderWidth: 2,
         padding: 2,
         borderStyle: "solid",

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

@@ -12,7 +12,7 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-class OptionStatus extends React.Component<{
+type OptionStatusProps = {|
     // Was this option the correct answer?
     correct: boolean,
     // Did the user select this option as the answer?
@@ -21,49 +21,71 @@ class OptionStatus extends React.Component<{
     crossedOut: boolean,
     // Did the user select this option as the answer earlier?
     previouslyAnswered: boolean,
-    ...
-}> {
-    _renderText(): string {
-        const {checked, correct, crossedOut} = this.props;
-        if (correct) {
-            // For correct answers, we surface checked _or_ crossedOut state,
-            // because any interaction with the correct answer is noteworthy!
-            if (checked) {
-                return i18n._("Correct (selected)");
-            }
-            if (crossedOut) {
-                return i18n._("Correct (but you crossed it out)");
-            }
-            return i18n._("Correct");
-        }
-        // But, for incorrect answers, we only surface checked state,
-        // because crossing out an incorrect answer is not noteworthy.
+    reviewMode: boolean,
+    satStyling?: boolean,
+|};
+
+function renderText(
+    checked: boolean,
+    correct: boolean,
+    crossedOut: boolean,
+): string {
+    if (correct) {
+        // For correct answers, we surface checked _or_ crossedOut state,
+        // because any interaction with the correct answer is noteworthy!
         if (checked) {
-            return i18n._("Incorrect (selected)");
+            return i18n._("Correct (selected)");
+        }
+        if (crossedOut) {
+            return i18n._("Correct (but you crossed it out)");
         }
-        return i18n._("Incorrect");
+        return i18n._("Correct");
+    }
+    // But, for incorrect answers, we only surface checked state,
+    // because crossing out an incorrect answer is not noteworthy.
+    if (checked) {
+        return i18n._("Incorrect (selected)");
     }
+    return i18n._("Incorrect");
+}
+
+function OptionStatus(props: OptionStatusProps): React.Node {
+    const {
+        checked,
+        correct,
+        crossedOut,
+        previouslyAnswered,
+        reviewMode,
+        satStyling,
+    } = props;
 
-    render(): React.Element<"div"> {
-        const {checked, correct, previouslyAnswered} = this.props;
+    // Option status is exclued for SAT
+    if (satStyling) {
+        return null;
+    }
 
-        let textStyle;
-        if (correct) {
-            textStyle = styles.correct;
+    // Option status is shown only in review mode, or for incorrectly
+    // answered items.
+    if (!reviewMode && !previouslyAnswered) {
+        return null;
+    }
+
+    let textStyle;
+    if (correct) {
+        textStyle = styles.correct;
+    } else {
+        if (checked || previouslyAnswered) {
+            textStyle = styles.incorrectAnswered;
         } else {
-            if (checked || previouslyAnswered) {
-                textStyle = styles.incorrectAnswered;
-            } else {
-                textStyle = styles.incorrect;
-            }
+            textStyle = styles.incorrect;
         }
-
-        return (
-            <div className={css(styles.text, textStyle)}>
-                {this._renderText()}
-            </div>
-        );
     }
+
+    return (
+        <div className={css(styles.text, textStyle)}>
+            {renderText(checked, correct, crossedOut)}
+        </div>
+    );
 }
 
 const styles = StyleSheet.create({