@khanacademy/perseus 1.0.0 → 1.1.0

package/src/multi-items/__tests__/multi-renderer_test.js

@@ -136,7 +136,7 @@ describe("multi-item renderer", () => {
             // selected, a value is entered). You can see the result of this in the `choiceStates`
             // array in the captured state below where the choice at index 2 has
             // `"selected": true` (instead of false) and the input-number has a `currentValue`.
-            userEvent.click(screen.getAllByRole("checkbox")[2]); // Correct
+            userEvent.click(screen.getAllByRole("radio")[2]); // Correct
             userEvent.paste(screen.getByRole("textbox"), "+42"); // Correct
 
             // Act
@@ -268,7 +268,7 @@ describe("multi-item renderer", () => {
             // Arrange
             const {renderer} = renderSimpleQuestion(question1);
 
-            userEvent.click(screen.getAllByRole("checkbox")[2]);
+            userEvent.click(screen.getAllByRole("radio")[2]);
             userEvent.paste(screen.getByRole("textbox"), "99");
 
             // Act
@@ -525,11 +525,11 @@ describe("multi-item renderer", () => {
             renderer.restoreSerializedState(state);
 
             // Assert
-            expect(screen.getAllByRole("checkbox")[0]).not.toBeChecked();
-            expect(screen.getAllByRole("checkbox")[1]).not.toBeChecked();
-            expect(screen.getAllByRole("checkbox")[2]).toBeChecked();
-            expect(screen.getAllByRole("checkbox")[3]).not.toBeChecked();
-            expect(screen.getAllByRole("checkbox")[4]).not.toBeChecked();
+            expect(screen.getAllByRole("radio")[0]).not.toBeChecked();
+            expect(screen.getAllByRole("radio")[1]).not.toBeChecked();
+            expect(screen.getAllByRole("radio")[2]).toBeChecked();
+            expect(screen.getAllByRole("radio")[3]).not.toBeChecked();
+            expect(screen.getAllByRole("radio")[4]).not.toBeChecked();
             expect(screen.getByRole("textbox")).toHaveValue("+42");
         });
 
@@ -586,7 +586,7 @@ describe("multi-item renderer", () => {
         // Arrange
         const {renderer} = renderSimpleQuestion(question1);
 
-        userEvent.click(screen.getAllByRole("checkbox")[3]); // Correct
+        userEvent.click(screen.getAllByRole("radio")[3]); // Correct
         userEvent.paste(screen.getByRole("textbox"), "-42"); // Correct
 
         // Act
@@ -747,7 +747,7 @@ describe("multi-item renderer", () => {
         // Arrange
         const {renderer} = renderSimpleQuestion(question1);
 
-        userEvent.click(screen.getAllByRole("checkbox")[3]); // Correct
+        userEvent.click(screen.getAllByRole("radio")[3]); // Correct
         userEvent.paste(screen.getByRole("textbox"), "-42"); // Correct
 
         // Act

package/src/perseus-types.js

@@ -706,6 +706,20 @@ export type PerseusMeasurerWidgetOptions = {|
     static: boolean,
 |};
 
+export type MathFormat =
+    | "integer"
+    | "mixed"
+    | "improper"
+    | "proper"
+    | "decimal"
+    | "percent"
+    | "pi";
+
+export type PerseusNumericInputAnswerForm = {|
+    simplify: ?("required" | "correct" | "enforced" | "optional"),
+    name: MathFormat,
+|};
+
 export type PerseusNumericInputWidgetOptions = {|
     // A list of all the possible correct and incorrect answers
     answers: $ReadOnlyArray<PerseusNumericInputAnswer>,
@@ -726,22 +740,19 @@ export type PerseusNumericInputWidgetOptions = {|
 
     // Used by examples, maybe not used and should be removed in the future
     // see TODO in numeric-input
-    answerForms?: $ReadOnlyArray<{|
-        simplify: ?("required" | "correct" | "enforced"),
-        name: "integer" | "decimal" | "proper" | "improper" | "mixed" | "pi",
-    |}>,
+    answerForms?: $ReadOnlyArray<PerseusNumericInputAnswerForm>,
 |};
 
 export type PerseusNumericInputAnswer = {|
     // Translatable Display; A description for why this answer is correct, wrong, or ungraded
     message: string,
     // The expected answer
-    value: ?number,
+    value: number,
     // Whether this answer is "correct", "wrong", or "ungraded"
     status: string,
     // The forms available for this answer.  Options: "integer, ""decimal", "proper", "improper", "mixed", or "pi"
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
-    answerForms?: $ReadOnlyArray<string>,
+    answerForms?: $ReadOnlyArray<MathFormat>,
     // Whether the answerForms should be strictly matched
     strict: boolean,
     // A range of error +/- the value
@@ -1404,7 +1415,7 @@ export type PerseusInputNumberWidgetOptions = {|
     rightAlign?: boolean,
     simplify: "required" | "optional" | "enforced",
     size: "normal" | "small",
-    value: string | number | boolean,
+    value: string | number,
     customKeypad?: boolean,
 |};
 

package/src/styles/perseus-renderer.less

@@ -107,7 +107,10 @@
     }
 
     div.paragraph {
-        .legacy-typography;
+        font-family: "Noto Serif", serif;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 22px;
         margin: 22px 0px;
     }
 
@@ -131,8 +134,11 @@
 
     div.instructions {
         display: block;
+        font-family: "Noto Serif", serif;
+        font-weight: 800;
+        font-size: 18px;
+        line-height: 22px;
         font-style: italic;
-        font-weight: bold;
     }
 
     .perseus-renderer > .paragraph > ul:not(.perseus-widget-radio),

package/src/styles/widgets/passage.less

@@ -38,15 +38,19 @@
         line-height: @line-height - 2;
     }
     .passage-title div.paragraph {
-        font-size: @font-size;
+        font-family: "Noto Serif", serif;
         font-weight: 700;
+        font-size: 20px;
+        line-height: 22px;
+
         margin: 0 0 10px;
     }
     .passage-text div.paragraph {
-        font-size: @font-size;
-        line-height: @line-height;
-        margin: 0;
-        text-indent: 20px;
+        font-family: "Noto Serif", serif;
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 24px;
+
         span {
             text-indent: 0;
         }

package/src/util/answer-types.js

@@ -106,7 +106,7 @@ export const errors = {
  *
  */
 
-const KhanAnswerTypes: $FlowFixMe = {
+const KhanAnswerTypes = {
     /*
      * predicate answer type
      *
@@ -653,8 +653,7 @@ const KhanAnswerTypes: $FlowFixMe = {
             correctAnswer: string,
             options: $FlowFixMe,
         ): Predicate {
-            // TODO(alpert): Don't think this $.trim is necessary
-            const correctFloat = parseFloat($.trim(correctAnswer));
+            const correctFloat = parseFloat(correctAnswer);
 
             return [
                 function (guess, maxError) {

package/src/util/math.js

@@ -4,14 +4,7 @@ import {number as knumber} from "@khanacademy/kmath";
 import $ from "jquery";
 import _ from "underscore";
 
-export type Format =
-    | "integer"
-    | "mixed"
-    | "improper"
-    | "proper"
-    | "decimal"
-    | "percent"
-    | "pi";
+import type {MathFormat} from "../perseus-types";
 
 const KhanMath = {
     // Simplify formulas before display
@@ -213,7 +206,7 @@ const KhanMath = {
     // Returns the format (string) of a given numeric string
     // Note: purposively more inclusive than answer-types' predicate.forms
     // That is, it is not necessarily true that interpreted input are numeric
-    getNumericFormat: function (text: string): ?Format {
+    getNumericFormat: function (text: string): ?MathFormat {
         text = $.trim(text);
         text = text.replace(/\u2212/, "-").replace(/([+-])\s+/g, "$1");
         if (text.match(/^[+-]?\d+$/)) {
@@ -238,7 +231,7 @@ const KhanMath = {
     },
 
     // Returns a string of the number in a specified format
-    toNumericString: function (number: number, format?: Format): string {
+    toNumericString: function (number: number, format?: MathFormat): string {
         if (number == null) {
             return "";
         }

package/src/widgets/__stories__/numeric-input.stories.jsx

@@ -1,19 +1,60 @@
 // @flow
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
 import {question1} from "../__testdata__/numeric-input_testdata.js";
+import {NumericInput} from "../numeric-input.jsx";
 
-type StoryArgs = {||};
+type StoryArgs = {|
+    currentValue: string,
+|};
 
 type Story = {|
     title: string,
+    args: StoryArgs,
 |};
 
+function generateProps(overwrite) {
+    const base = {
+        alignment: "",
+        answers: [],
+        containerSizeClass: "medium",
+        isLastUsedWidget: true,
+        currentValue: "",
+        problemNum: 0,
+        reviewModeRubric: {
+            answers: [],
+            labelText: "",
+            size: "medium",
+            coefficient: false,
+            static: false,
+        },
+        static: false,
+        widgetId: "widgetId",
+        findWidgets: action("findWidgets"),
+        onBlur: action("onBlur"),
+        onChange: action("onChange"),
+        onFocus: action("onFocus"),
+        trackInteraction: action("trackInteraction"),
+    };
+
+    return {...base, ...overwrite};
+}
+
 export default ({
     title: "Perseus/Widgets/NumericInput",
+    args: {
+        currentValue: "8675309",
+    },
 }: Story);
 
-export const Question1 = (args: StoryArgs): React.Node => {
+export const Question1 = (): React.Node => {
     return <RendererWithDebugUI question={question1} />;
 };
+
+export const Interactive = (args: StoryArgs): React.Node => {
+    const props = generateProps(args);
+
+    return <NumericInput {...props} />;
+};

package/src/widgets/__tests__/__snapshots__/definition_test.js.snap

@@ -37,13 +37,13 @@ exports[`Definition widget should have a default snapshot: first render 1`] = `
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_xwkmkn"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
                 role="button"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelSmall_hl4zs1-o_O-text_m8a8ki-o_O-textWithFocus_e296pg"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki-o_O-textWithFocus_e296pg"
                 >
                   the Pequots
                 </span>
@@ -95,13 +95,13 @@ exports[`Definition widget should have an open state snapshot: open state 1`] =
             >
               <button
                 aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_xwkmkn"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
                 role="button"
                 tabindex="0"
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelSmall_hl4zs1-o_O-text_m8a8ki-o_O-textWithFocus_e296pg-o_O-focus_15mc0l2"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki-o_O-textWithFocus_e296pg-o_O-focus_15mc0l2"
                 >
                   the Pequots
                 </span>