@khanacademy/perseus 1.1.0 → 1.1.2

package/dist/strings.js

@@ -52,6 +52,7 @@ module.exports = [
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),
     i18n._("Correct!", {}),
+    i18n._("Current", {}),
     // I18N: As in the command, "Dilate the polygon"
     i18n._("Dilate", {}),
     i18n._("dilation", {}),

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "publishConfig": {
         "access": "public"
     },

package/src/__stories__/hints-renderer.stories.jsx

@@ -0,0 +1,52 @@
+// @flow
+
+import React from "react";
+
+import HintsRenderer from "../hints-renderer.jsx";
+
+type StoryArgs = {|
+    hints: $ReadOnlyArray<$FlowFixMe>,
+    hintsVisible: number,
+|};
+
+type Story = {|
+    title: string,
+    argTypes: $FlowFixMe,
+|};
+
+export default ({
+    title: "Perseus/Renderers/Hints Renderer",
+    argTypes: {
+        hints: {
+            control: "object",
+            defaultValue: [
+                {
+                    content: "this is hint 1",
+                    images: {},
+                    replace: false,
+                    widgets: {},
+                },
+                {
+                    content: "this is hint 2",
+                    images: {},
+                    replace: false,
+                    widgets: {},
+                },
+                {
+                    content: "this is hint 3",
+                    images: {},
+                    replace: false,
+                    widgets: {},
+                },
+            ],
+        },
+        hintsVisible: {
+            control: {type: "number", min: 0},
+            defaultValue: 3,
+        },
+    },
+}: Story);
+
+export const Interactive = (args: StoryArgs): $FlowFixMe => {
+    return <HintsRenderer {...args} />;
+};

package/src/components/__stories__/input-with-examples.stories.jsx

@@ -17,6 +17,7 @@ const defaultObject = {
     examples: [],
     id: "",
     onChange: () => {},
+    value: "",
 };
 const testExamples = ["Sample 1", "Sample 2", "Sample 3"];
 

package/src/components/input-with-examples.jsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/sort-comp */
 // @flow
 import * as PerseusLinter from "@khanacademy/perseus-linter";
-import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
@@ -14,42 +13,59 @@ import MathOutput from "./math-output.jsx";
 import TextInput from "./text-input.jsx";
 import Tooltip from "./tooltip.jsx";
 
+import type {LinterContextProps} from "../types.js";
+
 const {captureScratchpadTouchStart} = Util;
 const MATH = "math";
 const TEXT = "text";
 const TEX = "tex";
 
-class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
-    static propTypes = {
-        type: PropTypes.oneOf([MATH, TEXT, TEX]),
-        value: PropTypes.string,
-        onChange: PropTypes.func.isRequired,
-        className: PropTypes.string,
-        examples: PropTypes.arrayOf(PropTypes.string).isRequired,
-        shouldShowExamples: PropTypes.bool,
-        convertDotToTimes: PropTypes.bool,
-        buttonSet: PropTypes.string,
-        buttonsVisible: PropTypes.oneOf(["always", "never", "focused"]),
-        labelText: PropTypes.string,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        disabled: PropTypes.bool,
-
-        // A unique string identifying this InputWithExamples
-        id: PropTypes.string.isRequired,
-        linterContext: PerseusLinter.linterContextProps,
-    };
-
-    static defaultProps: $FlowFixMe = {
+type Props = {|
+    type: "math" | "text" | "tex",
+    value: string,
+    onChange: $FlowFixMe,
+    className: string,
+    examples: $ReadOnlyArray<string>,
+    shouldShowExamples: boolean,
+    convertDotToTimes?: boolean,
+    buttonSet?: string,
+    buttonsVisible?: "always" | "never" | "focused",
+    labelText?: string,
+    onFocus: () => void,
+    onBlur: () => void,
+    disabled: boolean,
+    style?: $FlowFixMe,
+    id: string,
+    linterContext: LinterContextProps,
+|};
+
+type DefaultProps = {|
+    type: Props["type"],
+    shouldShowExamples: Props["shouldShowExamples"],
+    onFocus: Props["onFocus"],
+    onBlur: Props["onBlur"],
+    disabled: Props["disabled"],
+    linterContext: Props["linterContext"],
+    className: Props["className"],
+|};
+
+type State = {|
+    focused: boolean,
+    showExamples: boolean,
+|};
+
+class InputWithExamples extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
         type: TEXT,
         shouldShowExamples: true,
         onFocus: function () {},
         onBlur: function () {},
         disabled: false,
         linterContext: PerseusLinter.linterContextDefault,
+        className: "",
     };
 
-    state: $FlowFixMe = {
+    state: State = {
         focused: false,
         showExamples: false,
     };
@@ -89,6 +105,7 @@ class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
             onFocus: this._handleFocus,
             onBlur: this._handleBlur,
             disabled: this.props.disabled,
+            style: this.props.style,
         };
 
         if (this.props.type === TEX) {

package/src/components/text-input.jsx

@@ -4,6 +4,8 @@ import {TextField} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 type Props = {|
     value: string | number | null,
     onChange: (any) => void,
@@ -15,9 +17,7 @@ type Props = {|
     id?: string,
     placeholder?: string,
     onKeyDown?: () => void,
-
-    // TODO: Remove this
-    style?: $FlowFixMe,
+    style?: StyleType,
 |};
 
 type DefaultProps = {|
@@ -57,6 +57,7 @@ class TextInput extends React.Component<Props> {
             disabled,
             placeholder,
             onKeyDown,
+            style,
         } = this.props;
 
         const formattedValue = value === null ? "" : value.toString();
@@ -64,6 +65,7 @@ class TextInput extends React.Component<Props> {
         return (
             // $FlowIgnore
             <TextField
+                style={style}
                 disabled={disabled}
                 id={this.id}
                 value={formattedValue}

package/src/hints-renderer.jsx

@@ -26,6 +26,8 @@ import type {APIOptionsWithDefaults} from "./types.js";
 type Props = {|
     ...React.ElementConfig<Renderer>,
     className?: string,
+    // note (mcurtis): I think this should be $ReadOnlyArray<PerseusRenderer>,
+    // but things spiraled out of control when I tried to change it
     hints: $ReadOnlyArray<$FlowFixMe>,
     hintsVisible?: number,
 |};
@@ -72,11 +74,18 @@ class HintsRenderer extends React.Component<Props, State> {
             this._cacheHintImages();
         }
 
+        // Force number to make Flow happy
+        const prevHintsVisible = prevProps.hintsVisible || 0;
+        const nextHintsVisible = this.props.hintsVisible || 0;
+
         // When a new hint is displayed we immediately focus it
-        // $FlowFixMe[invalid-compare]
-        if (prevProps.hintsVisible < this.props.hintsVisible) {
-            // $FlowFixMe[unsafe-addition]
-            const pos = this.props.hintsVisible - 1;
+        // (keeping within the boundaries of hint count)
+        if (
+            prevHintsVisible < nextHintsVisible &&
+            nextHintsVisible <= this.props.hints.length &&
+            nextHintsVisible >= 0
+        ) {
+            const pos = nextHintsVisible - 1;
             // $FlowFixMe[prop-missing]
             // $FlowFixMe[incompatible-use]
             ReactDOM.findDOMNode(this.refs["hintRenderer" + pos]).focus(); // eslint-disable-line react/no-string-refs

package/src/mixins/__tests__/widget-prop-blacklist_test.js

@@ -0,0 +1,23 @@
+// @flow
+
+import {removeDenylistProps} from "../widget-prop-blacklist.js";
+
+describe("removeDenylistProps", () => {
+    it("removes props that are in denylist from input", () => {
+        // Arrange
+        const props = {
+            // These props are not on the denylist
+            foo: "bar",
+            gandalf: "awesome",
+            // These props are on the denylist
+            key: "f-sharp",
+            id: 42,
+        };
+
+        // Act
+        const result = removeDenylistProps(props);
+
+        // Assert
+        expect(result).toStrictEqual({foo: "bar", gandalf: "awesome"});
+    });
+});

package/src/mixins/widget-prop-blacklist.js

@@ -9,8 +9,10 @@
  * circular JSON structures sometimes).
  *
  * This blacklists things that we know don't need to be serialized.
+ *
+ * TODO(TB): Go through and update usage of BLACKLIST to DENYLIST: https://khanacademy.atlassian.net/browse/LP-13149?atlOrigin=eyJpIjoiNTI0Y2UwNzQ0MzA4NDYzOGI1YWRmNjEwY2E5YzZlZWUiLCJwIjoiaiJ9
  */
-export default [
+const denylist = [
     // standard props "added" by react
     // (technically the renderer still adds them)
     "key",
@@ -34,3 +36,15 @@ export default [
     "trackInteraction",
     "keypadElement",
 ];
+
+export const removeDenylistProps = (props: Object): Object => {
+    const newProps = {...props};
+    for (const prop of denylist) {
+        if (prop in newProps) {
+            delete newProps[prop];
+        }
+    }
+    return newProps;
+};
+
+export default denylist;

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

@@ -218,7 +218,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -234,7 +234,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      A
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        A
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -389,7 +393,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -405,7 +409,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      B
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        B
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -560,7 +568,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -576,7 +584,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      C
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        C
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -731,7 +743,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -747,7 +759,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      D
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        D
+                                      </div>
                                     </div>
                                   </span>
                                 </div>
@@ -902,7 +918,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                               type="button"
                             >
                               <div
-                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
+                                style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px; padding-left: 8px;"
                               >
                                 <div
                                   class="iconWrapper_17y0hv9"
@@ -918,7 +934,11 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
                                       data-test-id="choice-icon__library-choice-icon"
                                       style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
                                     >
-                                      E
+                                      <div
+                                        class="innerWrapper_177sg8x"
+                                      >
+                                        E
+                                      </div>
                                     </div>
                                   </span>
                                 </div>

package/src/styles/widgets/matrix.less

@@ -43,11 +43,13 @@
         &.bracket-left {
             border-color: @bracketColor;
             border-left-width: @borderWidth;
+            border-right-width: 0;
             left: 3px;
         }
 
         &.bracket-right {
             border-color: @bracketColor;
+            border-left-width: 0;
             border-right-width: @borderWidth;
             margin-left: (1px - 2 * @borderWidth);
         }

package/src/styles/widgets/passage.less

@@ -50,6 +50,7 @@
         font-weight: 400;
         font-size: 20px;
         line-height: 24px;
+        text-indent: 20px;
 
         span {
             text-indent: 0;

package/src/types.js

@@ -491,7 +491,7 @@ export type WidgetProps<RenderProps, Rubric> = {|
     questionCompleted?: boolean,
     onFocus: (blurPath: FocusPath) => void,
     onBlur: (blurPath: FocusPath) => void,
-    findWidgets: (FilterCriterion) => any,
+    findWidgets: (FilterCriterion) => $ReadOnlyArray<Widget>,
     reviewModeRubric: Rubric,
     onChange: ChangeHandler,
     trackInteraction: (extraData?: any) => void,

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

@@ -7,12 +7,10 @@ import {question1} from "../__testdata__/numeric-input_testdata.js";
 import {NumericInput} from "../numeric-input.jsx";
 
 type StoryArgs = {|
+    coefficient: boolean,
     currentValue: string,
-|};
-
-type Story = {|
-    title: string,
-    args: StoryArgs,
+    rightAlign: boolean,
+    size: "normal" | "small",
 |};
 
 function generateProps(overwrite) {
@@ -21,6 +19,7 @@ function generateProps(overwrite) {
         answers: [],
         containerSizeClass: "medium",
         isLastUsedWidget: true,
+        coefficient: false,
         currentValue: "",
         problemNum: 0,
         reviewModeRubric: {
@@ -30,6 +29,8 @@ function generateProps(overwrite) {
             coefficient: false,
             static: false,
         },
+        rightAlign: false,
+        size: "normal",
         static: false,
         widgetId: "widgetId",
         findWidgets: action("findWidgets"),
@@ -42,12 +43,21 @@ function generateProps(overwrite) {
     return {...base, ...overwrite};
 }
 
-export default ({
+export default {
     title: "Perseus/Widgets/NumericInput",
     args: {
+        coefficient: false,
         currentValue: "8675309",
+        rightAlign: false,
+    },
+    argTypes: {
+        size: {
+            options: ["normal", "small"],
+            control: {type: "radio"},
+            defaultValue: "normal",
+        },
     },
-}: Story);
+};
 
 export const Question1 = (): React.Node => {
     return <RendererWithDebugUI question={question1} />;
@@ -58,3 +68,39 @@ export const Interactive = (args: StoryArgs): React.Node => {
 
     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__/graded-group-set-jipt_test.jsx.snap

@@ -33,7 +33,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 class="perseus-graded-group"
               >
                 <div
-                  class="title_6pk9ag"
+                  class="title_1lagzkb"
                 >
                   Problem 1a
                 </div>
@@ -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"
@@ -267,7 +270,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 class="perseus-graded-group"
               >
                 <div
-                  class="title_6pk9ag"
+                  class="title_1lagzkb"
                 >
                   Problem 1b
                 </div>
@@ -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"
@@ -501,7 +507,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 class="perseus-graded-group"
               >
                 <div
-                  class="title_6pk9ag"
+                  class="title_1lagzkb"
                 >
                   Problem 1c
                 </div>
@@ -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

@@ -47,7 +47,13 @@ exports[`graded group widget should snapshot 1`] = `
                     aria-label="Skip to Problem 1a"
                     class="indicator_1ezvcme-o_O-selectedIndicator_1v68a6x"
                     role="button"
-                  />
+                  >
+                    <span
+                      class="srOnly_19bpjuy"
+                    >
+                      Current
+                    </span>
+                  </div>
                   <div
                     aria-label="Skip to Problem 1b"
                     class="indicator_1ezvcme"
@@ -99,7 +105,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 +274,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"