@khanacademy/perseus 1.4.1 → 2.0.1

package/src/widgets/definition.jsx

@@ -1,6 +1,6 @@
 // @flow
 
-import Button from "@khanacademy/wonder-blocks-button";
+import Clickable from "@khanacademy/wonder-blocks-clickable";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import * as React from "react";
@@ -25,8 +25,13 @@ type DefinitionProps = {|
     widgets: PerseusRenderer["widgets"],
 |};
 
+type DefaultProps = {|
+    togglePrompt: string,
+    definition: string,
+|};
+
 class Definition extends React.Component<DefinitionProps> {
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: DefaultProps = {
         togglePrompt: "define me",
         definition: "definition goes here",
     };
@@ -70,18 +75,26 @@ class Definition extends React.Component<DefinitionProps> {
                         onClose={() => setActiveDefinitionId(null)}
                         placement="top"
                     >
-                        <span className="perseus-widget-definition">
-                            <Button
-                                size="medium"
-                                kind="tertiary"
-                                onClick={() => {
-                                    this.props.trackInteraction();
-                                    setActiveDefinitionId(this.props.widgetId);
-                                }}
-                            >
-                                {this.props.togglePrompt}
-                            </Button>
-                        </span>
+                        <Clickable
+                            onClick={() => {
+                                this.props.trackInteraction();
+                                setActiveDefinitionId(this.props.widgetId);
+                            }}
+                        >
+                            {({hovered, focused, pressed}) => (
+                                <span
+                                    style={{
+                                        color: Color.blue,
+                                        borderBottom:
+                                            hovered || focused || pressed
+                                                ? `2px solid ${Color.blue}`
+                                                : "none",
+                                    }}
+                                >
+                                    {this.props.togglePrompt}
+                                </span>
+                            )}
+                        </Clickable>
                     </Popover>
                 )}
             </DefinitionConsumer>

package/src/widgets/input-number.jsx

@@ -9,17 +9,8 @@ import * as React from "react";
 import _ from "underscore";
 
 import InputWithExamples from "../components/input-with-examples.jsx";
-import PossibleAnswers from "../components/possible-answers.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import {ApiOptions} from "../perseus-api.jsx";
-import {
-    satCorrectBackgroundColor,
-    satCorrectBorderColor,
-    satCorrectColor,
-    satIncorrectBackgroundColor,
-    satIncorrectBorderColor,
-    satIncorrectColor,
-} from "../styles/constants.js";
 import TexWrangler from "../tex-wrangler.js";
 import KhanAnswerTypes from "../util/answer-types.js";
 
@@ -174,27 +165,8 @@ class InputNumber extends React.Component<Props> {
         }
         // HACK(johnsullivan): Create a function with shared logic between
         // this and NumericInput.
+        // TODO(jeremy): Deprecate this widget and prefer numeric-input.
         const rubric = this.props.reviewModeRubric;
-        let correct = null;
-        let answerBlurb = null;
-
-        // SAT is deprecated and not testable
-        /* c8 ignore if */
-        if (this.props.apiOptions.satStyling && rubric) {
-            const score = this.simpleValidate(rubric);
-            correct = score.type === "points" && score.earned === score.total;
-
-            if (!correct) {
-                // TODO(johnsullivan): Make this a little more
-                // human-friendly.
-                let answerString = String(rubric.value);
-                if (rubric.inexact && rubric.maxError) {
-                    answerString += " \u00B1 " + rubric.maxError;
-                }
-                const answerStrings = [answerString];
-                answerBlurb = <PossibleAnswers answers={answerStrings} />;
-            }
-        }
 
         // Note: This is _very_ similar to what `numeric-input.jsx` does. If
         // you modify this, double-check if you also need to modify that
@@ -204,20 +176,12 @@ class InputNumber extends React.Component<Props> {
             this.props.size === "small" ? styles.small : null,
             this.props.rightAlign ? styles.rightAlign : styles.leftAlign,
         ];
-        // Correct
-        if (rubric && correct === true && this.props.currentValue) {
-            inputStyles.push(styles.answerStateCorrect);
-        }
-        // Incorrect
-        if (rubric && correct === false && this.props.currentValue) {
-            inputStyles.push(styles.answerStateIncorrect);
-        }
         // Unanswered
         if (rubric && !this.props.currentValue) {
             inputStyles.push(styles.answerStateUnanswered);
         }
 
-        const input = (
+        return (
             <InputWithExamples
                 // eslint-disable-next-line react/no-string-refs
                 ref="input"
@@ -234,18 +198,6 @@ class InputNumber extends React.Component<Props> {
                 linterContext={this.props.linterContext}
             />
         );
-
-        // SAT is deprecated, answer blurb is an SAT feature
-        /* c8 ignore if */
-        if (answerBlurb) {
-            return (
-                <span className="perseus-input-with-answer-blurb">
-                    {input}
-                    {answerBlurb}
-                </span>
-            );
-        }
-        return input;
     }
 
     handleChange: (string, () => void) => void = (newValue, cb) => {
@@ -431,16 +383,6 @@ const styles = StyleSheet.create({
         paddingLeft: 0,
         paddingRight: Spacing.xxxSmall_4,
     },
-    answerStateCorrect: {
-        color: satCorrectColor,
-        backgroundColor: satCorrectBackgroundColor,
-        border: `solid 1px ${satCorrectBorderColor}`,
-    },
-    answerStateIncorrect: {
-        color: satIncorrectColor,
-        backgroundColor: satIncorrectBackgroundColor,
-        border: `solid 1px ${satIncorrectBorderColor}`,
-    },
     answerStateUnanswered: {
         backgroundColor: "#eee",
         border: "solid 1px #999",

package/src/widgets/numeric-input.jsx

@@ -8,7 +8,6 @@ import * as React from "react";
 import _ from "underscore";
 
 import InputWithExamples from "../components/input-with-examples.jsx";
-import PossibleAnswers from "../components/possible-answers.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import {ApiOptions} from "../perseus-api.jsx";
 import TexWrangler from "../tex-wrangler.js";
@@ -16,7 +15,6 @@ import KhanAnswerTypes from "../util/answer-types.js";
 import KhanMath from "../util/math.js";
 
 import type {
-    MathFormat,
     PerseusNumericInputAnswer,
     PerseusNumericInputWidgetOptions,
     PerseusNumericInputAnswerForm,
@@ -262,49 +260,6 @@ export class NumericInput extends React.Component<Props, State> {
         previousValues: [""],
     };
 
-    getAnswerBlurb: (Rubric) => [?React.Node, boolean] = (rubric) => {
-        let correct;
-        let answerBlurb;
-
-        /* Ignore this block because SAT is deprecated */
-        /* c8 ignore next */
-        if (this.props.apiOptions.satStyling && rubric) {
-            const score = this.simpleValidate(rubric);
-            correct = score.type === "points" && score.earned === score.total;
-
-            if (!correct) {
-                const correctAnswers = rubric.answers.filter(
-                    (answer) => answer.status === "correct",
-                );
-                const answerStrings = correctAnswers.map((answer) => {
-                    // Figure out how this answer is supposed to be
-                    // displayed
-                    let format: MathFormat = "decimal";
-                    if (answer.answerForms && answer.answerForms[0]) {
-                        // NOTE(johnsullivan): This isn't exactly ideal, but
-                        // it does behave well for all the currently known
-                        // problems. See D14742 for some discussion on
-                        // alternate strategies.
-                        format = answer.answerForms[0];
-                    }
-
-                    let answerString = KhanMath.toNumericString(
-                        answer.value,
-                        format,
-                    );
-                    if (answer.maxError) {
-                        answerString +=
-                            " \u00B1 " +
-                            KhanMath.toNumericString(answer.maxError, format);
-                    }
-                    return answerString;
-                });
-                answerBlurb = <PossibleAnswers answers={answerStrings} />;
-            }
-        }
-        return [answerBlurb, !!correct];
-    };
-
     // TODO(Nicole, Jeremy): This is maybe never used and should be removed
     examples: () => $ReadOnlyArray<string> = () => {
         // if the set of specified forms are empty, allow all forms
@@ -416,10 +371,6 @@ export class NumericInput extends React.Component<Props, State> {
     };
 
     render(): React.Node {
-        const rubric = this.props.reviewModeRubric;
-        const answers = this.getAnswerBlurb(rubric);
-        const answerBlurb = answers[0];
-
         let labelText = this.props.labelText;
         if (labelText == null || labelText === "") {
             labelText = i18n._("Your answer:");
@@ -460,47 +411,24 @@ export class NumericInput extends React.Component<Props, State> {
             },
         });
 
-        const input = (
-            <InputWithExamples
-                ref={(ref) => (this.inputRef = ref)}
-                value={this.props.currentValue}
-                onChange={this.handleChange}
-                labelText={labelText}
-                type={this._getInputType()}
-                examples={this.examples()}
-                shouldShowExamples={this.shouldShowExamples()}
-                onFocus={this._handleFocus}
-                onBlur={this._handleBlur}
-                id={this.props.widgetId}
-                disabled={this.props.apiOptions.readOnly}
-                style={styles.input}
-            />
+        return (
+            <div>
+                <InputWithExamples
+                    ref={(ref) => (this.inputRef = ref)}
+                    value={this.props.currentValue}
+                    onChange={this.handleChange}
+                    labelText={labelText}
+                    type={this._getInputType()}
+                    examples={this.examples()}
+                    shouldShowExamples={this.shouldShowExamples()}
+                    onFocus={this._handleFocus}
+                    onBlur={this._handleBlur}
+                    id={this.props.widgetId}
+                    disabled={this.props.apiOptions.readOnly}
+                    style={styles.input}
+                />
+            </div>
         );
-
-        /* This only gets used with SAT Content */
-        /* c8 ignore next if */
-        if (answerBlurb) {
-            return (
-                <span className="perseus-input-with-answer-blurb">
-                    {input}
-                    {answerBlurb}
-                </span>
-            );
-        }
-        if (this.props.apiOptions.satStyling) {
-            // NOTE(amy): the input widgets themselves already have
-            // a default aria label of "Your Answer", so we hide this
-            // redundant label from screen-readers.
-            return (
-                <label className="perseus-input-with-label">
-                    <span className="perseus-input-label" aria-hidden="true">
-                        {i18n.doNotTranslate("Answer:")}
-                    </span>
-                    {input}
-                </label>
-            );
-        }
-        return <div>{input}</div>;
     }
 }
 

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

@@ -26,9 +26,7 @@ export default ({
 }: Story);
 
 const defaultProps = {
-    apiOptions: {
-        satStyling: false,
-    },
+    apiOptions: {},
     choices: [
         generateChoice({
             content: "Content 1",

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

@@ -12,12 +12,9 @@ type StoryArgs = {|
     pressed: boolean,
     correct: boolean,
     showCorrectness: boolean,
-    product: "sat" | "library",
     multipleSelect: boolean,
     reviewMode: boolean,
     previouslyAnswered: boolean,
-    transparentBackground: boolean,
-    primaryProductColor?: string,
 |};
 
 const defaultProps = {
@@ -29,16 +26,9 @@ const defaultProps = {
     pressed: false,
     correct: false,
     showCorrectness: false,
-    product: "library",
     multipleSelect: false,
     reviewMode: false,
     previouslyAnswered: false,
-    transparentBackground: false,
-};
-
-const defaultSATProps = {
-    ...defaultProps,
-    product: "sat",
 };
 
 export default {
@@ -47,98 +37,73 @@ export default {
         pos: {
             control: {type: "number", min: 0, max: 25, step: 1},
         },
-        product: {
-            options: ["library", "sat"],
-            control: {type: "radio"},
-        },
     },
     args: defaultProps,
 };
 
+const Panel = (props: {|children: React.Node|}): React.Node => {
+    return <div style={{padding: "10px"}}>{props.children}</div>;
+};
+
 export const Interactive = (args: StoryArgs): React.Node => {
-    return <ChoiceIcon {...args} />;
+    return (
+        <Panel>
+            <ChoiceIcon {...args} />
+        </Panel>
+    );
 };
 
 export const Default = (args: StoryArgs): React.Node => {
     return (
-        <>
-            <p>Library</p>
+        <Panel>
             <ChoiceIcon {...defaultProps} />
             <ChoiceIcon {...defaultProps} multipleSelect={true} />
-            <p>SAT</p>
-            <ChoiceIcon {...defaultSATProps} />
-            <ChoiceIcon {...defaultSATProps} multipleSelect={true} />
-        </>
+        </Panel>
     );
 };
 
 export const Focused = (args: StoryArgs): React.Node => {
     return (
-        <>
-            <p>Library</p>
+        <Panel>
             <ChoiceIcon {...defaultProps} focused={true} />
             <ChoiceIcon
                 {...defaultProps}
                 focused={true}
                 multipleSelect={true}
             />
-            <p>SAT</p>
-            <ChoiceIcon {...defaultSATProps} focused={true} />
-            <ChoiceIcon
-                {...defaultSATProps}
-                focused={true}
-                multipleSelect={true}
-            />
-        </>
+        </Panel>
     );
 };
 
 export const Checked = (args: StoryArgs): React.Node => {
     return (
-        <>
-            <p>Library</p>
+        <Panel>
             <ChoiceIcon {...defaultProps} checked={true} />
             <ChoiceIcon
                 {...defaultProps}
                 checked={true}
                 multipleSelect={true}
             />
-            <p>SAT</p>
-            <ChoiceIcon {...defaultSATProps} checked={true} />
-            <ChoiceIcon
-                {...defaultSATProps}
-                checked={true}
-                multipleSelect={true}
-            />
-        </>
+        </Panel>
     );
 };
 
 export const CrossedOut = (args: StoryArgs): React.Node => {
     return (
-        <>
-            <p>Library</p>
+        <Panel>
             <ChoiceIcon {...defaultProps} crossedOut={true} />
             <ChoiceIcon
                 {...defaultProps}
                 crossedOut={true}
                 multipleSelect={true}
             />
-            <p>SAT</p>
-            <ChoiceIcon {...defaultSATProps} crossedOut={true} />
-            <ChoiceIcon
-                {...defaultSATProps}
-                crossedOut={true}
-                multipleSelect={true}
-            />
-        </>
+        </Panel>
     );
 };
 
 export const Correct = (args: StoryArgs): React.Node => {
     return (
-        <>
-            <p>Library</p>
+        <Panel>
             <ChoiceIcon
                 {...defaultProps}
                 checked={true}
@@ -154,30 +119,13 @@ export const Correct = (args: StoryArgs): React.Node => {
                 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}
-            />
-        </>
+        </Panel>
     );
 };
 
 export const Incorrect = (args: StoryArgs): React.Node => {
     return (
-        <>
-            <p>Library</p>
+        <Panel>
             <ChoiceIcon
                 {...defaultProps}
                 checked={true}
@@ -193,31 +141,14 @@ export const Incorrect = (args: StoryArgs): React.Node => {
                 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}
-            />
-        </>
+        </Panel>
     );
 };
 
 export const AllPositions = (args: StoryArgs): React.Node => {
     const allLetters = Array(26).fill();
     return (
-        <>
-            <p>Library</p>
+        <Panel>
             {allLetters.map((_, i: number) => (
                 <ChoiceIcon {...defaultProps} pos={i} key={"choice" + i} />
             ))}
@@ -230,19 +161,6 @@ export const AllPositions = (args: StoryArgs): React.Node => {
                     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}
-                />
-            ))}
-        </>
+        </Panel>
     );
 };

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

@@ -9,7 +9,6 @@ type StoryArgs = {|
     correct: boolean,
     previouslyAnswered: boolean,
     reviewMode: boolean,
-    satStyling: boolean,
 |};
 
 type Story = {|
@@ -25,7 +24,6 @@ export default ({
         correct: false,
         previouslyAnswered: false,
         reviewMode: true,
-        satStyling: false,
     },
 }: Story);
 
@@ -44,7 +42,6 @@ export const AllPossibleOutputs = (args: StoryArgs): React.Node => {
                     correct={true}
                     previouslyAnswered={true}
                     reviewMode={true}
-                    satStyling={false}
                 />
             </div>
             <hr />
@@ -56,7 +53,6 @@ export const AllPossibleOutputs = (args: StoryArgs): React.Node => {
                     correct={false}
                     previouslyAnswered={true}
                     reviewMode={true}
-                    satStyling={false}
                 />
             </div>
             <hr />
@@ -68,7 +64,6 @@ export const AllPossibleOutputs = (args: StoryArgs): React.Node => {
                     correct={true}
                     previouslyAnswered={true}
                     reviewMode={true}
-                    satStyling={false}
                 />
             </div>
             <hr />
@@ -80,7 +75,6 @@ export const AllPossibleOutputs = (args: StoryArgs): React.Node => {
                     correct={false}
                     previouslyAnswered={true}
                     reviewMode={true}
-                    satStyling={false}
                 />
             </div>
             <hr />
@@ -92,7 +86,6 @@ export const AllPossibleOutputs = (args: StoryArgs): React.Node => {
                     correct={false}
                     previouslyAnswered={false}
                     reviewMode={true}
-                    satStyling={false}
                 />
             </div>
             <hr />
@@ -104,7 +97,6 @@ export const AllPossibleOutputs = (args: StoryArgs): React.Node => {
                     correct={true}
                     previouslyAnswered={false}
                     reviewMode={true}
-                    satStyling={false}
                 />
             </div>
         </>