@khanacademy/perseus 0.3.3 → 0.4.0

package/src/widgets/radio/cross-out-button.jsx

@@ -3,14 +3,12 @@
  * The button that appears when you open the `CrossOutMenu`, enabling the user
  * to toggle a choice's `crossedOut` state.
  */
-import colors from "@khanacademy/wonder-blocks-color";
+import Color from "@khanacademy/wonder-blocks-color";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import {colors as oldColors} from "../../styles/global-styles.js";
-
 import ChoiceIcon from "./choice-icon.jsx";
 import {getChoiceLetter} from "./util.js";
 
@@ -37,7 +35,7 @@ export type CrossOutButtonProps = {
 
 export default class CrossOutButton extends React.PureComponent<CrossOutButtonProps> {
     static defaultProps: {|primaryProductColor: string|} = {
-        primaryProductColor: oldColors.kaGreen,
+        primaryProductColor: Color.blue,
     };
 
     /**
@@ -67,7 +65,7 @@ export default class CrossOutButton extends React.PureComponent<CrossOutButtonPr
         const {crossedOut, pos, primaryProductColor, theme} = this.props;
 
         const buttonAndTextColor =
-            theme === "day" ? primaryProductColor : colors.white;
+            theme === "day" ? primaryProductColor : Color.white;
 
         return (
             <button

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

@@ -7,12 +7,11 @@
  * between the states more immediately clear to users.
  */
 
+import Color from "@khanacademy/wonder-blocks-color";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import * as styleConstants from "../../styles/constants.js";
-
 class OptionStatus extends React.Component<{
     // Was this option the correct answer?
     correct: boolean,
@@ -76,13 +75,13 @@ const styles = StyleSheet.create({
         textTransform: "uppercase",
     },
     correct: {
-        color: styleConstants.kaGreen,
+        color: Color.green,
     },
     incorrectAnswered: {
-        color: styleConstants.warning1,
+        color: Color.red,
     },
     incorrect: {
-        color: styleConstants.gray68,
+        color: Color.offBlack64,
     },
 });
 

package/src/widgets/radio/__stories__/cross-out-menu.stories.jsx

@@ -1,59 +0,0 @@
-// @flow
-import colors from "@khanacademy/wonder-blocks-color";
-import * as React from "react";
-
-import CrossOutMenuWrapper from "../cross-out-menu-wrapper.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-export default ({
-    title: "Perseus/Widgets/Radio/Cross Out Menu",
-}: Story);
-
-export const CrossOutMenuForChoiceAColoredDefaultKaGreen = (
-    args: StoryArgs,
-): React.Node => {
-    return (
-        <CrossOutMenuWrapper
-            enabled={true}
-            pos={0}
-            crossedOut={false}
-            onCrossedOutChange={() => {}}
-        >
-            <div>Hello, world!</div>
-        </CrossOutMenuWrapper>
-    );
-};
-
-export const ReEnableMenuForChoiceCColoredWonderBlocksBlue = (
-    args: StoryArgs,
-): React.Node => {
-    return (
-        <CrossOutMenuWrapper
-            enabled={true}
-            pos={0}
-            primaryProductColor={colors.blue}
-            crossedOut={true}
-            onCrossedOutChange={() => {}}
-        >
-            <div>Hello, world!</div>
-        </CrossOutMenuWrapper>
-    );
-};
-
-export const NoCrossOutMenu = (args: StoryArgs): React.Node => {
-    return (
-        <CrossOutMenuWrapper
-            enabled={true}
-            pos={0}
-            crossedOut={false}
-            onCrossedOutChange={() => {}}
-        >
-            <div>Hello, world!</div>
-        </CrossOutMenuWrapper>
-    );
-};

package/src/widgets/radio/__stories__/cross-out-tooltip.stories.jsx

@@ -1,59 +0,0 @@
-// @flow
-import colors from "@khanacademy/wonder-blocks-color";
-import * as React from "react";
-
-import {colors as oldColors} from "../../../styles/global-styles.js";
-import CrossOutTooltip from "../cross-out-tooltip.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-export default ({
-    title: "Perseus/Widgets/Radio/Cross Out Tooltip",
-}: Story);
-
-export const TooltipToCrossOutChoiceAGreen = (args: StoryArgs): React.Node => {
-    return (
-        <CrossOutTooltip
-            dismissed={false}
-            onDismiss={() => {}}
-            buttonProps={{
-                onClick: () => {},
-                onFocus: () => {},
-                onBlur: () => {},
-
-                pos: 0,
-                primaryProductColor: oldColors.kaGreen,
-                crossedOut: false,
-                usingKeyboardFocus: false,
-                theme: "day",
-            }}
-        >
-            <div style={{textAlign: "center"}}>Tooltip target!</div>
-        </CrossOutTooltip>
-    );
-};
-export const TooltipToCrossOutChoiceBBlue = (args: StoryArgs): React.Node => {
-    return (
-        <CrossOutTooltip
-            dismissed={false}
-            onDismiss={() => {}}
-            buttonProps={{
-                onClick: () => {},
-                onFocus: () => {},
-                onBlur: () => {},
-
-                pos: 1,
-                primaryProductColor: colors.blue,
-                crossedOut: false,
-                usingKeyboardFocus: false,
-                theme: "day",
-            }}
-        >
-            <div style={{textAlign: "center"}}>Tooltip target!</div>
-        </CrossOutTooltip>
-    );
-};

package/src/widgets/radio/__stories__/toggleable-radio-button.stories.jsx

@@ -1,28 +0,0 @@
-// @flow
-import * as React from "react";
-
-import ToggleableRadioWidget from "../toggleable-radio-button.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-const defaultObject = {
-    onChecked: () => {},
-    goToPrevChoice: () => {},
-    goToNextChoice: () => {},
-};
-
-export default ({
-    title: "Perseus/Widgets/Radio/Toggleable Radio Button",
-}: Story);
-
-export const Checked = (args: StoryArgs): React.Node => {
-    return <ToggleableRadioWidget {...defaultObject} checked={true} />;
-};
-
-export const Unchecked = (args: StoryArgs): React.Node => {
-    return <ToggleableRadioWidget {...defaultObject} checked={false} />;
-};