@khanacademy/perseus 0.4.3 → 1.1.0

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/types.js

@@ -9,7 +9,7 @@ import * as React from "react";
 import type {SerializedHighlightSet} from "./components/highlighting/types.js";
 import type {ILogger} from "./logging/log.js";
 import type {Item} from "./multi-items/item-types.js";
-import type {PerseusWidget} from "./perseus-types.js";
+import type {PerseusWidget, PerseusRadioChoice} from "./perseus-types.js";
 import type {SizeClass} from "./util/sizing-utils.js";
 import type {Result} from "@khanacademy/wonder-blocks-data";
 
@@ -75,6 +75,22 @@ export type Version = {|
 
 export type EditorMode = "edit" | "preview" | "json";
 
+export type ChoiceState = {|
+    selected: boolean,
+    crossedOut: boolean,
+    highlighted: boolean,
+    rationaleShown: boolean,
+    correctnessShown: boolean,
+    previouslyAnswered: boolean,
+    readOnly: boolean,
+|};
+
+export type RadioChoiceWithMetadata = {|
+    ...PerseusRadioChoice,
+    originalIndex: number,
+    correct: boolean,
+|};
+
 export type ChangeHandler = (
     {|
         hints?: $ReadOnlyArray<Hint>,
@@ -97,7 +113,7 @@ export type ChangeHandler = (
         value?: $FlowFixMe,
 
         // widgets/radio/widget.jsx
-        choiceStates?: $ReadOnlyArray<$FlowFixMe>,
+        choiceStates?: $ReadOnlyArray<ChoiceState>,
 
         // widgets/numeric-input.jsx
         currentValue?: string,
@@ -230,39 +246,6 @@ export type APIOptions = $ReadOnly<{|
     //     values. For now, though, you must either specify all fields
     //     of `styling`, or omit the `styling` option entirely.
     styling?: {|
-        // Which version of radio widget styles to use in non-SAT
-        // contexts.
-        //
-        // "legacy" was the version of the widget display after XOM but
-        // before we started adding MCR styles. It doesn't have support
-        // for rationales. It has since been removed.
-        //
-        // "intermediate" is a design which adds several new additions
-        // to the "legacy" styles such as:
-        //  1. Using the XOM "desktop" styles (with a visible check icon
-        //     and lines in between choices) on mobile devices.
-        //  2. Designs for rationales
-        //  3. Using the single-select styles for multi-select styles
-        //
-        // "final" is a design which will build off of the
-        // "intermediate" designs and adds some improved designs as well
-        // as:
-        //  1. a/b/c/d/etc. letters inside of the prompt check box
-        //  2. New iconography and styles to indicate choice correctness
-        //
-        // The "legacy" and "intermediate" designs will be A/B tested
-        // against each other to ensure that its changes don't cause
-        // problems due to the new designs. Once the "intermediate"
-        // designs are finished, they will be A/B tested against the
-        // "final" designs.
-        //
-        // If no flag is provided, "legacy" styles will be shown.
-        //
-        // TODO(emily): Remove this by Aug 1, 2017, at which point all
-        //   callsites should have been switched to using the "final"
-        //   designs.
-        radioStyleVersion?: "intermediate" | "final",
-
         // TODO(Nicole): Remove this after landing wonderblock-ifying
         // the radio widget
         primaryProductColor?: string,

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/util.js

@@ -92,14 +92,8 @@ function inputPathsEqual(
     );
 }
 
-// Keep `rWidgetRule` in sync with `WIDGET_RE`
-// in content_internal/perseus_traversal.py
-// sync-start:widget-id-regex 1271666319 services/content-editing/perseus/translation/content_traversal.go
-// sync-start:widget-id-regex 680240484 services/static/javascript/perseus-merged-editor-package/editor.jsx
-// sync-start:widget-id-regex 1400368396 content_internal/perseus_traversal.py
 const rWidgetRule: RegExp = /^\[\[\u2603 (([a-z-]+) ([0-9]+))\]\]/;
 const rTypeFromWidgetId: RegExp = /^([a-z-]+) ([0-9]+)$/;
-// sync-end:widget-id-regex
 
 const rWidgetParts: RegExp = new RegExp(rWidgetRule.source + "$");
 const snowman = "\u2603";

package/src/version.js

@@ -1,7 +1,7 @@
 // @flow
 export default {
     apiVersion: {
-        major: 11,
+        major: 12,
         minor: 0,
     },
     itemDataVersion: {

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/__testdata__/base-radio_testdata.js

@@ -0,0 +1,22 @@
+// @flow
+import type {ChoiceType} from "../radio/base-radio.jsx";
+
+export function generateChoice(options: $Partial<ChoiceType>): ChoiceType {
+    const base = {
+        checked: false,
+        crossedOut: false,
+        content: "",
+        rationale: "",
+        hasRationale: false,
+        showRationale: false,
+        showCorrectness: false,
+        correct: false,
+        isNoneOfTheAbove: false,
+        highlighted: false,
+        previouslyAnswered: false,
+        revealNoneOfTheAbove: false,
+        disabled: false,
+    };
+
+    return {...base, ...options};
+}

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>