@khanacademy/perseus 0.4.3 → 1.1.0

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

@@ -1,157 +1,248 @@
 // @flow
 import * as React from "react";
 
-import ChoiceIcon from "../choice-icon.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
+import ChoiceIcon from "../choice-icon/choice-icon.jsx";
+
+type StoryArgs = {|
+    pos: number,
+    checked: boolean,
+    crossedOut: boolean,
+    focused: boolean,
+    hovered: boolean,
+    pressed: boolean,
+    correct: boolean,
+    showCorrectness: boolean,
+    product: "sat" | "library",
+    multipleSelect: boolean,
+    reviewMode: boolean,
+    previouslyAnswered: boolean,
+    transparentBackground: boolean,
+    primaryProductColor?: string,
 |};
 
-export default ({
-    title: "Perseus/Widgets/Radio/Choice Icon",
-}: Story);
-
-const defaultObject = {
-    crossedOut: false,
+const defaultProps = {
+    pos: 0,
     checked: false,
-    correct: true,
+    crossedOut: false,
+    focused: false,
+    hovered: false,
     pressed: false,
-    previouslyAnswered: false,
+    correct: false,
+    showCorrectness: false,
     product: "library",
-    focused: false,
+    multipleSelect: false,
     reviewMode: false,
-    showCorrectness: false,
-};
-
-// Note: the SAT icon is different from the general library
-// icon displayed on KA. Therefore props like pressed,
-// previouslyAnswered and focused do not apply here.
-// That said, the props of the component still want them as they are
-// currently defined, so we give them values anyway.
-const satObject = {
-    crossedOut: false,
-    pressed: false,
-    checked: false,
-    focused: false,
-    correct: true,
     previouslyAnswered: false,
-    product: "sat",
-    reviewMode: false,
-    showCorrectness: false,
+    transparentBackground: false,
 };
 
-export const Position0Sat = (args: StoryArgs): React.Node => {
-    return <ChoiceIcon {...satObject} pos={0} />;
+const defaultSATProps = {
+    ...defaultProps,
+    product: "sat",
 };
 
-export const Position1CrossedOutSat = (args: StoryArgs): React.Node => {
-    return <ChoiceIcon {...satObject} pos={1} crossedOut={true} />;
+export default {
+    title: "Perseus/Widgets/Radio/Choice Icon",
+    argTypes: {
+        pos: {
+            control: {type: "number", min: 0, max: 25, step: 1},
+        },
+        product: {
+            options: ["library", "sat"],
+            control: {type: "radio"},
+        },
+    },
+    args: defaultProps,
 };
 
-export const Position2SelectedSat = (args: StoryArgs): React.Node => {
-    return (
-        <ChoiceIcon {...satObject} pos={2} checked={true} crossedOut={false} />
-    );
+export const Interactive = (args: StoryArgs): React.Node => {
+    return <ChoiceIcon {...args} />;
 };
 
-export const Position2SelectedReviewModeSat = (args: StoryArgs): React.Node => {
+export const Default = (args: StoryArgs): React.Node => {
     return (
-        <ChoiceIcon
-            {...satObject}
-            pos={2}
-            checked={true}
-            crossedOut={false}
-            reviewMode={true}
-        />
+        <>
+            <p>Library</p>
+            <ChoiceIcon {...defaultProps} />
+            <ChoiceIcon {...defaultProps} multipleSelect={true} />
+            <p>SAT</p>
+            <ChoiceIcon {...defaultSATProps} />
+            <ChoiceIcon {...defaultSATProps} multipleSelect={true} />
+        </>
     );
 };
 
-export const Position2SelectedReviewModeCrossedOutSat = (
-    args: StoryArgs,
-): React.Node => {
+export const Focused = (args: StoryArgs): React.Node => {
     return (
-        <ChoiceIcon
-            {...satObject}
-            pos={2}
-            checked={false}
-            crossedOut={true}
-            reviewMode={true}
-        />
+        <>
+            <p>Library</p>
+            <ChoiceIcon {...defaultProps} focused={true} />
+            <ChoiceIcon
+                {...defaultProps}
+                focused={true}
+                multipleSelect={true}
+            />
+            <p>SAT</p>
+            <ChoiceIcon {...defaultSATProps} focused={true} />
+            <ChoiceIcon
+                {...defaultSATProps}
+                focused={true}
+                multipleSelect={true}
+            />
+        </>
     );
 };
 
-export const Position0 = (args: StoryArgs): React.Node => {
-    return <ChoiceIcon {...defaultObject} pos={0} reviewMode={false} />;
-};
-
-export const Position1 = (args: StoryArgs): React.Node => {
-    return <ChoiceIcon {...defaultObject} pos={1} reviewMode={false} />;
-};
-
-export const Position2 = (args: StoryArgs): React.Node => {
-    return <ChoiceIcon {...defaultObject} pos={2} reviewMode={false} />;
-};
-
 export const Checked = (args: StoryArgs): React.Node => {
     return (
-        <ChoiceIcon
-            {...defaultObject}
-            pos={0}
-            checked={true}
-            reviewMode={false}
-        />
+        <>
+            <p>Library</p>
+            <ChoiceIcon {...defaultProps} checked={true} />
+            <ChoiceIcon
+                {...defaultProps}
+                checked={true}
+                multipleSelect={true}
+            />
+            <p>SAT</p>
+            <ChoiceIcon {...defaultSATProps} checked={true} />
+            <ChoiceIcon
+                {...defaultSATProps}
+                checked={true}
+                multipleSelect={true}
+            />
+        </>
     );
 };
 
-export const Focused = (args: StoryArgs): React.Node => {
+export const CrossedOut = (args: StoryArgs): React.Node => {
     return (
-        <ChoiceIcon
-            {...defaultObject}
-            focused={true}
-            pos={0}
-            checked={true}
-            reviewMode={false}
-        />
+        <>
+            <p>Library</p>
+            <ChoiceIcon {...defaultProps} crossedOut={true} />
+            <ChoiceIcon
+                {...defaultProps}
+                crossedOut={true}
+                multipleSelect={true}
+            />
+            <p>SAT</p>
+            <ChoiceIcon {...defaultSATProps} crossedOut={true} />
+            <ChoiceIcon
+                {...defaultSATProps}
+                crossedOut={true}
+                multipleSelect={true}
+            />
+        </>
     );
 };
 
-export const ShowCorrectnessCorrect = (args: StoryArgs): React.Node => {
+export const Correct = (args: StoryArgs): React.Node => {
     return (
-        <ChoiceIcon
-            {...defaultObject}
-            pos={0}
-            showCorrectness={true}
-            checked={true}
-            reviewMode={false}
-        />
+        <>
+            <p>Library</p>
+            <ChoiceIcon
+                {...defaultProps}
+                checked={true}
+                correct={true}
+                showCorrectness={true}
+                reviewMode={true}
+            />
+            <ChoiceIcon
+                {...defaultProps}
+                checked={true}
+                correct={true}
+                showCorrectness={true}
+                reviewMode={true}
+                multipleSelect={true}
+            />
+            <p>SAT</p>
+            <ChoiceIcon
+                {...defaultSATProps}
+                checked={true}
+                correct={true}
+                showCorrectness={true}
+                reviewMode={true}
+            />
+            <ChoiceIcon
+                {...defaultSATProps}
+                checked={true}
+                correct={true}
+                showCorrectness={true}
+                reviewMode={true}
+                multipleSelect={true}
+            />
+        </>
     );
 };
 
-export const ShowCorrectnessIncorrect = (args: StoryArgs): React.Node => {
+export const Incorrect = (args: StoryArgs): React.Node => {
     return (
-        <ChoiceIcon
-            {...defaultObject}
-            pos={0}
-            correct={false}
-            showCorrectness={true}
-            reviewMode={false}
-        />
+        <>
+            <p>Library</p>
+            <ChoiceIcon
+                {...defaultProps}
+                checked={true}
+                correct={false}
+                showCorrectness={true}
+                reviewMode={true}
+            />
+            <ChoiceIcon
+                {...defaultProps}
+                checked={true}
+                correct={false}
+                showCorrectness={true}
+                reviewMode={true}
+                multipleSelect={true}
+            />
+            <p>SAT</p>
+            <ChoiceIcon
+                {...defaultSATProps}
+                checked={true}
+                correct={false}
+                showCorrectness={true}
+                reviewMode={true}
+            />
+            <ChoiceIcon
+                {...defaultSATProps}
+                checked={true}
+                correct={false}
+                showCorrectness={true}
+                reviewMode={true}
+                multipleSelect={true}
+            />
+        </>
     );
 };
 
-export const CrossedOut = (args: StoryArgs): React.Node => {
-    return <ChoiceIcon {...defaultObject} pos={0} crossedOut={true} />;
-};
-
-export const CrossedOutPressed = (args: StoryArgs): React.Node => {
+export const AllPositions = (args: StoryArgs): React.Node => {
+    const allLetters = Array(26).fill();
     return (
-        <ChoiceIcon
-            {...defaultObject}
-            pos={0}
-            crossedOut={true}
-            pressed={true}
-        />
+        <>
+            <p>Library</p>
+            {allLetters.map((_, i: number) => (
+                <ChoiceIcon {...defaultProps} pos={i} key={"choice" + i} />
+            ))}
+            <br />
+            {allLetters.map((_, i: number) => (
+                <ChoiceIcon
+                    {...defaultProps}
+                    pos={i}
+                    multipleSelect={true}
+                    key={"choice" + i}
+                />
+            ))}
+            <p>SAT</p>
+            {allLetters.map((_, i: number) => (
+                <ChoiceIcon {...defaultSATProps} pos={i} key={"choice" + i} />
+            ))}
+            <br />
+            {allLetters.map((_, i: number) => (
+                <ChoiceIcon
+                    {...defaultSATProps}
+                    pos={i}
+                    multipleSelect={true}
+                    key={"choice" + i}
+                />
+            ))}
+        </>
     );
 };

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

@@ -1,12 +1,10 @@
 // @flow
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import ChoiceNoneAbove from "../choice-none-above.jsx";
 
 type StoryArgs = {|
-    // Eventually this?
-    // ...React.ElementConfig<ChoiceNoneAbove>,
-    className: string,
     content: React.Node,
     showContent?: boolean,
 |};
@@ -17,10 +15,27 @@ type ChoiceNoneAboveStory = {|
 |};
 
 export default ({
-    title: "Perseus/Widgets/Radio/None of the Above",
-    args: {className: "", showContent: false, content: ""},
+    title: "Perseus/Widgets/Radio/Choice None of the Above",
+    args: {showContent: false, content: "This is a possible choice"},
 }: ChoiceNoneAboveStory);
 
+const ChoiceDefaults = {
+    checked: false,
+    rationale: "This is a good rational",
+    correct: true,
+    disabled: false,
+    pos: 0,
+    reviewMode: false,
+    showRationale: false,
+    showCorrectness: false,
+    multipleSelect: false,
+    crossedOut: false,
+    previouslyAnswered: false,
+    apiOptions: {},
+    onChange: action("changed"),
+};
+
 export const Example = (args: StoryArgs): React.Node => {
-    return <ChoiceNoneAbove {...args} />;
+    const combineProps = {...ChoiceDefaults, ...args};
+    return <ChoiceNoneAbove {...combineProps} />;
 };

package/src/widgets/radio/__stories__/choice.stories.jsx

@@ -0,0 +1,138 @@
+// @flow
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import Choice from "../choice.jsx";
+
+type StoryArgs = {|
+    checked: boolean,
+    rationale: React.Node,
+    content: React.Node,
+    correct: boolean,
+    disabled: boolean,
+    pos: number,
+    reviewMode: boolean,
+    showRationale: boolean,
+    showCorrectness: boolean,
+    multipleSelect: boolean,
+    crossedOut: boolean,
+    previouslyAnswered: boolean,
+    onChange: (newValues: {checked: boolean, crossedOut: boolean}) => void,
+|};
+
+type Story = {|
+    title: string,
+    args: StoryArgs,
+|};
+
+const defaultProps = {
+    checked: false,
+    rationale: "This is a good rationale",
+    content: "This is a possible choice",
+    correct: true,
+    disabled: false,
+    pos: 0,
+    reviewMode: false,
+    showRationale: false,
+    showCorrectness: false,
+    multipleSelect: false,
+    crossedOut: false,
+    previouslyAnswered: false,
+    onChange: action("changed"),
+};
+
+export default ({
+    title: "Perseus/Widgets/Radio/Choice",
+    args: defaultProps,
+}: Story);
+
+export const Interactive = (args: StoryArgs): React.Node => {
+    return <Choice {...args} />;
+};
+
+export const Checked = (args: StoryArgs): React.Node => {
+    const sharedProps = {
+        ...defaultProps,
+        checked: true,
+        showCorrectness: true,
+    };
+    const correctProps = {
+        ...sharedProps,
+        correct: true,
+        content: "This choice is correct",
+    };
+    const incorrectProps = {
+        ...sharedProps,
+        correct: false,
+        content: "This choice is incorrect",
+    };
+    return (
+        <>
+            <Choice {...correctProps} />
+            <Choice {...incorrectProps} />
+        </>
+    );
+};
+
+export const ReviewMode = (args: StoryArgs): React.Node => {
+    const sharedProps = {
+        ...defaultProps,
+        showCorrectness: true,
+        reviewMode: true,
+        multipleSelect: true,
+    };
+    return (
+        <>
+            <Choice
+                {...sharedProps}
+                correct={true}
+                checked={true}
+                content="This choice was correct and checked"
+            />
+            <Choice
+                {...sharedProps}
+                correct={true}
+                content="This choice was also correct and not checked"
+            />
+            <Choice
+                {...sharedProps}
+                correct={false}
+                checked={true}
+                content="This choice was incorrect and checked"
+            />
+            <Choice
+                {...sharedProps}
+                correct={false}
+                content="This choice was also incorrect and not checked"
+            />
+        </>
+    );
+};
+
+export const Rationale = (args: StoryArgs): React.Node => {
+    const sharedProps = {
+        ...defaultProps,
+        checked: true,
+        showCorrectness: true,
+        showRationale: true,
+        reviewMode: true,
+    };
+    const correctProps = {
+        ...sharedProps,
+        correct: true,
+        content: "This choice is correct",
+        rationale: "It was correct because of the way it is",
+    };
+    const incorrectProps = {
+        ...sharedProps,
+        correct: false,
+        content: "This choice is incorrect",
+        rationale: "It was incorrect because of the way it is",
+    };
+    return (
+        <>
+            <Choice {...correctProps} />
+            <Choice {...incorrectProps} />
+        </>
+    );
+};

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

@@ -1,38 +1,44 @@
 // @flow
 import * as React from "react";
 
+import * as styleConstants from "../../../styles/constants.js";
 import FocusRing from "../focus-ring.jsx";
 
-type StoryArgs = {||};
+type StoryArgs = {|
+    children: React.Node,
+    color: string,
+    visible: boolean,
+    multipleSelect: boolean,
+|};
 
 type Story = {|
     title: string,
+    args: StoryArgs,
 |};
 
 export default ({
     title: "Perseus/Widgets/Radio/Focus Ring",
+    args: {
+        children: "",
+        color: styleConstants.kaGreen,
+        visible: true,
+        multipleSelect: false,
+    },
 }: Story);
 
-export const EmptyPropsObject = (args: StoryArgs): React.Node => {
-    return <FocusRing />;
-};
-
-export const VisibleSetToTrue = (args: StoryArgs): React.Node => {
-    return <FocusRing visible={true} />;
-};
-
-export const VisibleSetToFalse = (args: StoryArgs): React.Node => {
-    return <FocusRing visible={false} />;
-};
-
-export const ColorRed = (args: StoryArgs): React.Node => {
-    return <FocusRing color="red" />;
-};
-
-export const SingleSpanChild = (args: StoryArgs): React.Node => {
-    return (
-        <FocusRing>
-            <span>test</span>
-        </FocusRing>
-    );
+export const Interactive = (args: StoryArgs): React.Node => {
+    // faux choice is just for demonstration
+    const fauxChoiceStyles = {
+        height: "20px",
+        width: "20px",
+        background: args.color,
+        borderRadius: args.multipleSelect ? "3px" : "50%",
+    };
+
+    const customArgs = {
+        ...args,
+        children: args.children || <div style={fauxChoiceStyles} />,
+    };
+
+    return <FocusRing {...customArgs} />;
 };