@khanacademy/perseus 1.0.0 → 1.1.1

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,106 @@
 // @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 Story = {|
-    title: string,
+type StoryArgs = {|
+    coefficient: boolean,
+    currentValue: string,
+    rightAlign: boolean,
+    size: "normal" | "small",
 |};
 
-export default ({
+function generateProps(overwrite) {
+    const base = {
+        alignment: "",
+        answers: [],
+        containerSizeClass: "medium",
+        isLastUsedWidget: true,
+        coefficient: false,
+        currentValue: "",
+        problemNum: 0,
+        reviewModeRubric: {
+            answers: [],
+            labelText: "",
+            size: "medium",
+            coefficient: false,
+            static: false,
+        },
+        rightAlign: false,
+        size: "normal",
+        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",
-}: Story);
+    args: {
+        coefficient: false,
+        currentValue: "8675309",
+        rightAlign: false,
+    },
+    argTypes: {
+        size: {
+            options: ["normal", "small"],
+            control: {type: "radio"},
+            defaultValue: "normal",
+        },
+    },
+};
 
-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} />;
+};
+
+export const Sizes = (args: StoryArgs): React.Node => {
+    const smallProps = generateProps({...args, size: "small"});
+    const normalProps = generateProps({...args, size: "normal"});
+
+    return (
+        <div>
+            <label>
+                Small:
+                <NumericInput {...smallProps} />
+            </label>
+            <label>
+                Normal:
+                <NumericInput {...normalProps} />
+            </label>
+        </div>
+    );
+};
+
+export const TextAlignment = (args: StoryArgs): React.Node => {
+    const leftProps = generateProps({...args, rightAlign: false});
+    const rightProps = generateProps({...args, rightAlign: true});
+
+    return (
+        <div>
+            <label>
+                Left:
+                <NumericInput {...leftProps} />
+            </label>
+            <label>
+                Right:
+                <NumericInput {...rightProps} />
+            </label>
+        </div>
+    );
+};

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>

package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap

@@ -73,7 +73,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
                                   id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
@@ -242,7 +242,10 @@ exports[`graded-group-set should render all graded groups 1`] = `
                     </div>
                   </div>
                 </span>
-                <p />
+                <p
+                  aria-live="polite"
+                  role="status"
+                />
                 <button
                   aria-disabled="false"
                   class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
@@ -307,7 +310,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
                                   id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
@@ -476,7 +479,10 @@ exports[`graded-group-set should render all graded groups 1`] = `
                     </div>
                   </div>
                 </span>
-                <p />
+                <p
+                  aria-live="polite"
+                  role="status"
+                />
                 <button
                   aria-disabled="false"
                   class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
@@ -541,7 +547,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
                                   id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
@@ -710,7 +716,10 @@ exports[`graded-group-set should render all graded groups 1`] = `
                     </div>
                   </div>
                 </span>
-                <p />
+                <p
+                  aria-live="polite"
+                  role="status"
+                />
                 <button
                   aria-disabled="false"
                   class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"

package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap

@@ -99,7 +99,7 @@ exports[`graded group widget should snapshot 1`] = `
                                   autocapitalize="off"
                                   autocomplete="off"
                                   autocorrect="off"
-                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                                  class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
                                   id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
                                   type="text"
                                   value=""
@@ -268,7 +268,10 @@ exports[`graded group widget should snapshot 1`] = `
                     </div>
                   </div>
                 </span>
-                <p />
+                <p
+                  aria-live="polite"
+                  role="status"
+                />
                 <button
                   aria-disabled="false"
                   class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"

package/src/widgets/__tests__/__snapshots__/graded-group_test.jsx.snap

@@ -463,7 +463,10 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
                   </div>
                 </div>
               </span>
-              <p />
+              <p
+                aria-live="polite"
+                role="status"
+              />
               <button
                 aria-disabled="false"
                 class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"