@khanacademy/perseus 1.3.3 → 1.3.5

package/src/widgets/__tests__/group_test.jsx

@@ -169,10 +169,10 @@ describe("group widget", () => {
 
         // Assert
         expect(userInput).toMatchInlineSnapshot(`
-            Array [
-              Array [
-                Object {
-                  "choicesSelected": Array [
+            [
+              [
+                {
+                  "choicesSelected": [
                     false,
                     false,
                     false,
@@ -181,11 +181,11 @@ describe("group widget", () => {
                   ],
                 },
               ],
-              Array [
-                Object {
+              [
+                {
                   "currentValue": "99",
                 },
-                Object {
+                {
                   "currentValue": "",
                 },
                 null,
@@ -204,32 +204,32 @@ describe("group widget", () => {
 
         // Assert
         expect(state).toMatchInlineSnapshot(`
-            Object {
-              "group 1": Object {
-                "radio 1": Object {
-                  "choices": Array [
-                    Object {
+            {
+              "group 1": {
+                "radio 1": {
+                  "choices": [
+                    {
                       "content": "$45$",
                       "correct": false,
                       "originalIndex": 0,
                     },
-                    Object {
+                    {
                       "content": "$42$",
                       "correct": false,
                       "originalIndex": 1,
                     },
-                    Object {
+                    {
                       "clue": "Here's a clue, this isn't the correct answer!",
                       "content": "$30$",
                       "correct": false,
                       "originalIndex": 2,
                     },
-                    Object {
+                    {
                       "content": "$18$",
                       "correct": false,
                       "originalIndex": 3,
                     },
-                    Object {
+                    {
                       "content": "$15$",
                       "correct": true,
                       "originalIndex": 4,
@@ -240,7 +240,7 @@ describe("group widget", () => {
                   "hasNoneOfTheAbove": false,
                   "multipleSelect": false,
                   "numCorrect": 1,
-                  "selectedChoices": Array [
+                  "selectedChoices": [
                     false,
                     false,
                     false,
@@ -249,26 +249,26 @@ describe("group widget", () => {
                   ],
                 },
               },
-              "group 2": Object {
-                "image 1": Object {
+              "group 2": {
+                "image 1": {
                   "alt": "A number line labeled 200 to 300 with tick marks at every 5 units. The tick marks at 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, and 300 are labeled. A red circle labeled A is between 220 tick mark and 230 tick mark.",
-                  "backgroundImage": Object {
+                  "backgroundImage": {
                     "height": 80,
                     "url": "web+graphie://ka-perseus-graphie.s3.amazonaws.com/3351ccf19e60c28a1d08664f5c16defa76ed0348",
                     "width": 380,
                   },
-                  "box": Array [
+                  "box": [
                     380,
                     80,
                   ],
                   "caption": "",
-                  "labels": Array [],
-                  "range": Array [
-                    Array [
+                  "labels": [],
+                  "range": [
+                    [
                       0,
                       10,
                     ],
-                    Array [
+                    [
                       0,
                       10,
                     ],
@@ -276,8 +276,8 @@ describe("group widget", () => {
                   "static": false,
                   "title": "",
                 },
-                "numeric-input 1": Object {
-                  "answerForms": Array [],
+                "numeric-input 1": {
+                  "answerForms": [],
                   "coefficient": false,
                   "currentValue": "99",
                   "labelText": "value rounded to the nearest ten",
@@ -286,8 +286,8 @@ describe("group widget", () => {
                   "size": "normal",
                   "static": false,
                 },
-                "numeric-input 2": Object {
-                  "answerForms": Array [],
+                "numeric-input 2": {
+                  "answerForms": [],
                   "coefficient": false,
                   "labelText": "value rounded to the nearest hundred",
                   "multipleNumberInput": false,
@@ -296,29 +296,29 @@ describe("group widget", () => {
                   "static": false,
                 },
               },
-              "radio 1": Object {
-                "choices": Array [
-                  Object {
+              "radio 1": {
+                "choices": [
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 0,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 1,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 2,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": false,
                     "originalIndex": 3,
                   },
-                  Object {
+                  {
                     "content": "",
                     "correct": true,
                     "originalIndex": 4,
@@ -329,7 +329,7 @@ describe("group widget", () => {
                 "hasNoneOfTheAbove": false,
                 "multipleSelect": false,
                 "numCorrect": 1,
-                "selectedChoices": Array [
+                "selectedChoices": [
                   false,
                   false,
                   false,
@@ -377,11 +377,11 @@ describe("group widget", () => {
 
         // Assert
         expect(guessAndScore).toMatchInlineSnapshot(`
-            Array [
-              Array [
-                Array [
-                  Object {
-                    "choicesSelected": Array [
+            [
+              [
+                [
+                  {
+                    "choicesSelected": [
                       false,
                       false,
                       false,
@@ -394,17 +394,17 @@ describe("group widget", () => {
                     "numCorrect": 1,
                   },
                 ],
-                Array [
-                  Object {
+                [
+                  {
                     "currentValue": "230",
                   },
-                  Object {
+                  {
                     "currentValue": "200",
                   },
                   null,
                 ],
               ],
-              Object {
+              {
                 "earned": 3,
                 "message": null,
                 "total": 3,
@@ -423,12 +423,12 @@ describe("group widget", () => {
 
         // Assert
         expect(paths).toMatchInlineSnapshot(`
-            Array [
-              Array [
+            [
+              [
                 "group 2",
                 "numeric-input 1",
               ],
-              Array [
+              [
                 "group 2",
                 "numeric-input 2",
               ],

package/src/widgets/__tests__/numeric-input_test.jsx

@@ -218,7 +218,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 1,
               "message": null,
               "total": 1,
@@ -252,7 +252,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "message": "We could not understand your answer. Please check your answer for extra text or symbols.",
               "type": "invalid",
             }
@@ -284,7 +284,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 1,
               "message": null,
               "total": 1,
@@ -318,7 +318,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 0,
               "message": null,
               "total": 1,
@@ -352,7 +352,7 @@ describe("static function validate", () => {
         const score = NumericInput.validate(useInput, rubric);
 
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 1,
               "message": null,
               "total": 1,

package/src/widgets/__tests__/passage_test.jsx

@@ -116,7 +116,7 @@ describe("passage widget", () => {
 
         // Assert
         expect(score).toMatchInlineSnapshot(`
-            Object {
+            {
               "earned": 0,
               "message": null,
               "total": 0,

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

@@ -132,7 +132,7 @@ describe("base-radio", () => {
             expect(screen.getAllByRole("listitem")).toHaveLength(4);
         });
 
-        it("should toggle choice when inner element clicked", () => {
+        it("should not toggle choice when inner element clicked", () => {
             // Arrange
             let updatedValues = null;
             const onChangeHandler = (newValues) => {
@@ -155,6 +155,33 @@ describe("base-radio", () => {
                 screen.getByRole("radio", {name: "(Choice C) Option Gamma"}),
             );
 
+            // Assert
+            expect(updatedValues).toBeNull();
+        });
+
+        it("should toggle choice when choice icon clicked", () => {
+            // Arrange
+            let updatedValues = null;
+            const onChangeHandler = (newValues) => {
+                updatedValues = newValues;
+            };
+
+            renderBaseRadio({
+                editMode: true,
+                choices: [
+                    generateChoice({content: "Option 1", correct: false}),
+                    generateChoice({content: "Option B", correct: false}),
+                    generateChoice({content: "Option Gamma", correct: true}),
+                    generateChoice({content: "Option Delta", correct: false}),
+                ],
+                onChange: onChangeHandler,
+            });
+
+            // Act
+            userEvent.click(
+                screen.getAllByTestId("choice-icon__library-choice-icon")[2],
+            );
+
             // Assert
             expect(updatedValues).toMatchObject({
                 checked: [false, false, true, false],

package/src/widgets/categorizer.jsx

@@ -257,7 +257,7 @@ export class Categorizer extends React.Component<Props, State> {
 const pageMargin = 16;
 
 // Stylesheets aren't directly testable
-/* istanbul ignore next */
+/* c8 ignore next */
 const styles = StyleSheet.create({
     mobileTable: {
         [mediaQueries.smOrSmaller]: {

package/src/widgets/expression.jsx

@@ -122,7 +122,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
             // incorrectly. For example if the answer is using a symbol defined
             // in the function variables list for the expression.
             if (!expression.parsed) {
-                /* istanbul ignore next */
+                /* c8 ignore next */
                 Log.error(
                     "Unable to parse solution answer for expression",
                     PerseusErrors.InvalidInput,
@@ -365,12 +365,12 @@ export class Expression extends React.Component<Props, ExpressionState> {
     };
 
     _handleFocus: () => void = () => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         this.props.onFocus([]);
     };
 
     _handleBlur: () => void = () => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         this.props.onBlur([]);
     };
 
@@ -407,7 +407,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<any>> = () => {
         // The widget itself is an input, so we return a single empty list to
         // indicate this.
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return [[]];
     };
 
@@ -415,7 +415,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
     getGrammarTypeForPath: (inputPath: string) => string = (
         inputPath: string,
     ) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return "expression";
     };
 
@@ -600,7 +600,7 @@ const keypadConfigurationForProps = (
 };
 
 const propUpgrades = {
-    /* istanbul ignore next */
+    /* c8 ignore next */
     "1": (v0props: $FlowFixMe): PerseusExpressionWidgetOptions => ({
         times: v0props.times,
         buttonSets: v0props.buttonSets,

package/src/widgets/input-number.jsx

@@ -3,14 +3,23 @@
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import classNames from "classnames";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {StyleSheet} from "aphrodite";
 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 {ClassNames as ApiClassNames, ApiOptions} from "../perseus-api.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";
 
@@ -170,7 +179,7 @@ class InputNumber extends React.Component<Props> {
         let answerBlurb = null;
 
         // SAT is deprecated and not testable
-        /* istanbul ignore if */
+        /* c8 ignore if */
         if (this.props.apiOptions.satStyling && rubric) {
             const score = this.simpleValidate(rubric);
             correct = score.type === "points" && score.earned === score.total;
@@ -187,14 +196,26 @@ class InputNumber extends React.Component<Props> {
             }
         }
 
-        const classes = {};
-        classes["perseus-input-size-" + this.props.size] = true;
-        classes["perseus-input-right-align"] = this.props.rightAlign;
-        classes[ApiClassNames.CORRECT] =
-            rubric && correct && this.props.currentValue;
-        classes[ApiClassNames.INCORRECT] =
-            rubric && !correct && this.props.currentValue;
-        classes[ApiClassNames.UNANSWERED] = rubric && !this.props.currentValue;
+        // Note: This is _very_ similar to what `numeric-input.jsx` does. If
+        // you modify this, double-check if you also need to modify that
+        // component.
+        const inputStyles = [
+            styles.default,
+            this.props.size === "small" ? styles.small : null,
+            this.props.rightAlign ? styles.rightAlign : styles.leftAlign,
+        ];
+        // Correct
+        if (rubric && correct && this.props.currentValue) {
+            inputStyles.push(styles.answerStateCorrect);
+        }
+        // Incorrect
+        if (rubric && !correct && this.props.currentValue) {
+            inputStyles.push(styles.answerStateIncorrect);
+        }
+        // Unanswered
+        if (rubric && !this.props.currentValue) {
+            inputStyles.push(styles.answerStateUnanswered);
+        }
 
         const input = (
             <InputWithExamples
@@ -202,7 +223,7 @@ class InputNumber extends React.Component<Props> {
                 ref="input"
                 value={this.props.currentValue}
                 onChange={this.handleChange}
-                className={classNames(classes)}
+                style={inputStyles}
                 type={this._getInputType()}
                 examples={this.examples()}
                 shouldShowExamples={this.shouldShowExamples()}
@@ -215,7 +236,7 @@ class InputNumber extends React.Component<Props> {
         );
 
         // SAT is deprecated, answer blurb is an SAT feature
-        /* istanbul ignore if */
+        /* c8 ignore if */
         if (answerBlurb) {
             return (
                 <span className="perseus-input-with-answer-blurb">
@@ -272,14 +293,14 @@ class InputNumber extends React.Component<Props> {
     getInputPaths: () => $ReadOnlyArray<Path> = () => {
         // The widget itself is an input, so we return a single empty list to
         // indicate this.
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return [[]];
     };
 
     // Note: We believe that this isn't used anywhere but are leaving it during
     // the initial refactor
     getGrammarTypeForPath: (Path) => string = (path) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return "number";
     };
 
@@ -393,6 +414,39 @@ class InputNumber extends React.Component<Props> {
     }
 }
 
+const styles = StyleSheet.create({
+    default: {
+        width: 80,
+        height: "auto",
+    },
+    small: {
+        width: 40,
+    },
+    leftAlign: {
+        paddingLeft: Spacing.xxxSmall_4,
+        paddingRight: 0,
+    },
+    rightAlign: {
+        textAlign: "right",
+        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",
+    },
+});
+
 const propTransform = (
     widgetOptions: PerseusInputNumberWidgetOptions,
 ): RenderProps => {

package/src/widgets/numeric-input.jsx

@@ -267,7 +267,7 @@ export class NumericInput extends React.Component<Props, State> {
         let answerBlurb;
 
         /* Ignore this block because SAT is deprecated */
-        /* istanbul ignore next */
+        /* c8 ignore next */
         if (this.props.apiOptions.satStyling && rubric) {
             const score = this.simpleValidate(rubric);
             correct = score.type === "points" && score.earned === score.total;
@@ -361,12 +361,12 @@ export class NumericInput extends React.Component<Props, State> {
     getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<string>> = () => {
         // The widget itself is an input, so we return a single empty list to
         // indicate this.
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return [[]];
     };
 
     getGrammarTypeForPath: (FocusPath) => string = (inputPath) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         return "number";
     };
 
@@ -375,7 +375,7 @@ export class NumericInput extends React.Component<Props, State> {
         newValue,
         cb,
     ) => {
-        /* istanbul ignore next */
+        /* c8 ignore next */
         this.props.onChange(
             {
                 currentValue: newValue,
@@ -448,6 +448,9 @@ export class NumericInput extends React.Component<Props, State> {
             );
         }
 
+        // Note: This is _very_ similar to what `input-number.jsx` does. If
+        // you modify this, double-check if you also need to modify that
+        // component.
         const styles = StyleSheet.create({
             input: {
                 textAlign: this.props.rightAlign ? "right" : "left",
@@ -475,7 +478,7 @@ export class NumericInput extends React.Component<Props, State> {
         );
 
         /* This only gets used with SAT Content */
-        /* istanbul ignore next if */
+        /* c8 ignore next if */
         if (answerBlurb) {
             return (
                 <span className="perseus-input-with-answer-blurb">

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

@@ -256,7 +256,7 @@ function BaseRadio(props: Props): React.Node {
                 </div>
             )}
             <ul className={className} style={{listStyle: "none"}}>
-                {choices.map(function (choice, i) {
+                {choices.map((choice, i) => {
                     let Element = Choice;
                     const ref = React.createRef();
                     choiceRefs.current[i] = ref;
@@ -277,6 +277,11 @@ function BaseRadio(props: Props): React.Node {
                             (reviewMode || choice.showRationale),
                         pos: i,
                         onChange: (newValues) => {
+                            // editMode selection is handled in clickHandler
+                            if (editMode) {
+                                return;
+                            }
+
                             updateChoice(i, newValues);
                         },
                         ref,
@@ -379,7 +384,7 @@ function BaseRadio(props: Props): React.Node {
                                 // radio icon, then we want to trigger the
                                 // check by flipping the choice of the icon.
                                 if (elem.getAttribute("data-is-radio-icon")) {
-                                    this.updateChoice(i, {
+                                    updateChoice(i, {
                                         checked: !choice.checked,
                                         crossedOut: choice.crossedOut,
                                     });
@@ -408,7 +413,7 @@ function BaseRadio(props: Props): React.Node {
                             <Element {...elementProps} />
                         </li>
                     );
-                }, this)}
+                })}
             </ul>
         </fieldset>
     );

package/src/widgets/radio/choice-icon/library-choice-icon.jsx

@@ -149,8 +149,8 @@ function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
                             (checked || previouslyAnswered) &&
                             styles.circleIncorrectAnswered,
                     )}
-                    // used in BaseRadio to check if we actually clicked on the
-                    // radio icon
+                    // used in BaseRadio editMode to check
+                    // if we actually clicked on the radio icon
                     data-is-radio-icon={true}
                 >
                     <div className={css(styles.innerWrapper)}>

package/src/widgets/radio/choice.jsx

@@ -228,7 +228,7 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                         apiOptions.staticRender ||
                         apiOptions.readOnly
                     }
-                    style={{flex: 1, color: Color.offBlack}}
+                    style={{flex: 1, color: Color.offBlack, userSelect: "text"}}
                     ref={(forwardedRef: any)}
                     aria-hidden="true"
                 >

package/src/widgets/radio/widget.jsx

@@ -157,7 +157,7 @@ class Radio extends React.Component<Props> {
             };
             // Support legacy choiceState implementation
         }
-        /* istanbul ignore if - props.values is deprecated */
+        /* c8 ignore if - props.values is deprecated */
         const {values} = props;
         if (values) {
             let noneOfTheAboveIndex = null;
@@ -414,7 +414,7 @@ class Radio extends React.Component<Props> {
             choiceStates = this.props.choiceStates;
         } else if (this.props.values) {
             // Support legacy choiceStates implementation
-            /* istanbul ignore next - props.values is deprecated */
+            /* c8 ignore next - props.values is deprecated */
             choiceStates = this.props.values.map((val) => ({
                 selected: val,
                 crossedOut: false,