@khanacademy/perseus 0.3.4 → 0.4.0

package/dist/strings.js

@@ -98,7 +98,6 @@ module.exports = [
     i18n._("Note: For this question, the shape will not move.", {}),
     i18n._("Number of divisions:", {}),
     i18n._("Number of trials:", {}),
-    i18n._("Open menu for Choice %(letter)s", {}),
     i18n._("Parameter", {}),
     i18n._("Please choose the correct number of answers.", {}),
     i18n.$_("Please make sure the number of divisions is in the range %(divRangeString)s.", {}),

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "0.3.4",
+    "version": "0.4.0",
     "publishConfig": {
         "access": "public"
     },
@@ -21,12 +21,13 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kmath": "^0.0.5",
-        "@khanacademy/kas": "^0.2.4",
-        "@khanacademy/math-input": "^0.5.5",
-        "@khanacademy/perseus-linter": "^0.2.0",
-        "@khanacademy/pure-markdown": "^0.1.0",
-        "@khanacademy/simple-markdown": "^0.8.3",
+        "@khanacademy/kas": "^0.2.5",
+        "@khanacademy/kmath": "^0.0.6",
+        "@khanacademy/math-input": "^0.5.6",
+        "@khanacademy/perseus-linter": "^0.2.1",
+        "@khanacademy/pure-markdown": "^0.1.1",
+        "@khanacademy/simple-markdown": "^0.8.4",
+        "@khanacademy/wonder-blocks-form": "^2.4.5",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
@@ -53,7 +54,7 @@
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
         "lodash.debounce": "^4.0.8",
-        "perseus-build-settings": "^0.0.2",
+        "perseus-build-settings": "^0.0.3",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",

package/src/__tests__/__snapshots__/item-renderer_test.jsx.snap

@@ -46,12 +46,11 @@ exports[`item renderer should snapshot: initial render 1`] = `
               <span>
                 <div>
                   <input
-                    aria-describedby="input-with-examples-aW5wdXQtbnVtYmVyIDE"
                     autocapitalize="off"
                     autocomplete="off"
                     autocorrect="off"
-                    class="perseus-input perseus-interactive perseus-input-size-normal"
-                    spellcheck="false"
+                    class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                    id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
                     type="text"
                     value=""
                   />

package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap

@@ -44,12 +44,11 @@ exports[`server item renderer should snapshot: initial render 1`] = `
                 <span>
                   <div>
                     <input
-                      aria-describedby="input-with-examples-aW5wdXQtbnVtYmVyIDE"
                       autocapitalize="off"
                       autocomplete="off"
                       autocorrect="off"
-                      class="perseus-input perseus-interactive perseus-input-size-normal"
-                      spellcheck="false"
+                      class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
+                      id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
                       type="text"
                       value=""
                     />

package/src/__tests__/renderer-api_test.jsx

@@ -149,30 +149,6 @@ describe("Perseus API", function () {
     });
 
     describe("CSS ClassNames", function () {
-        describe("perseus-input", function () {
-            it("should be on the `input` element of an input-number", function () {
-                // Feel free to change this if you change the class name,
-                // but if you do, you must up the perseus api [major]
-                // version
-                expect(ClassNames.INPUT).toBe("perseus-input");
-
-                const renderer = renderQuestionArea(inputNumber1Item);
-
-                const input =
-                    // $FlowFixMe[prop-missing]
-                    // $FlowFixMe[incompatible-use]
-                    ReactDOM.findDOMNode(renderer).querySelector("input");
-                expect($(input).hasClass(ClassNames.INPUT)).toBe(true);
-
-                const perseusInput = ReactDOM.findDOMNode(
-                    renderer,
-                    // $FlowFixMe[incompatible-use]
-                    // $FlowFixMe[prop-missing]
-                ).querySelector(".perseus-input");
-                expect(input).toBe(perseusInput);
-            });
-        });
-
         describe("perseus-focused", function () {
             it("should be on an input-number exactly when focused", function () {
                 // Feel free to change this if you change the class name,
@@ -190,13 +166,13 @@ describe("Perseus API", function () {
                     // $FlowFixMe[prop-missing]
                     ReactDOM.findDOMNode(renderer).querySelector("input");
 
-                expect($(input).hasClass(ClassNames.FOCUSED)).toBe(false);
+                expect($(input).attr("class").includes("focused")).toBe(false);
 
                 TestUtils.Simulate.focus(input);
-                expect($(input).hasClass(ClassNames.FOCUSED)).toBe(true);
+                expect($(input).attr("class").includes("focused")).toBe(true);
 
                 TestUtils.Simulate.blur(input);
-                expect($(input).hasClass(ClassNames.FOCUSED)).toBe(false);
+                expect($(input).attr("class").includes("focused")).toBe(false);
             });
         });
     });

package/src/components/__stories__/svg-image.stories.jsx

@@ -22,6 +22,17 @@ export const MostlyEmptyPropsObject = (args: StoryArgs): React.Node => {
     return <SvgImage alt="ALT" />;
 };
 
+export const SvgImageThatDoesntLoad = (args: StoryArgs): React.Node => {
+    return (
+        <SvgImage
+            alt="ALT"
+            height={100}
+            width={500}
+            src={"http://httpstat.us/200?sleep=1000000"}
+        />
+    );
+};
+
 export const SvgImageBasic = (args: StoryArgs): React.Node => {
     return <SvgImage src={svgUrl} alt="ALT" />;
 };

package/src/components/fixed-to-responsive.jsx

@@ -128,6 +128,7 @@ const FixedToResponsive: $FlowFixMe = createReactClass({
             maxHeight: height,
         };
 
+        // NOTE(jeremy): This depends on styles defined in perseus-renderer.less
         const className = classNames(
             "fixed-to-responsive",
             this.props.className,

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

@@ -78,8 +78,10 @@ class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
 
     _getPropsForInputType: () => $FlowFixMe = () => {
         // Minimal set of props, used by each input type
+        const id = this._getUniqueId();
         const inputProps = {
-            "aria-describedby": this._getUniqueId(),
+            id: id,
+            "aria-describedby": id,
             ref: "input",
             className: this._getInputClassName(),
             labelText: this.props.labelText,

package/src/components/svg-image.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-useless-escape, react/no-unsafe */
 // @flow
+import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import classNames from "classnames";
 import $ from "jquery";
 import * as React from "react";
@@ -119,14 +120,19 @@ function defaultPreloader(dimensions: Dimensions) {
     return (
         <span
             style={{
-                background: "url(/images/spinner.gif) no-repeat",
-                backgroundPosition: "center",
+                top: 0,
+                left: 0,
                 width: "100%",
                 height: "100%",
                 position: "absolute",
                 minWidth: "20px",
+                display: "flex",
+                justifyContent: "center",
+                alignContent: "center",
             }}
-        />
+        >
+            <CircularSpinner size="medium" />
+        </span>
     );
 }
 
@@ -591,10 +597,7 @@ class SvgImage extends React.Component<Props, State> {
         const width = this.props.width && this.props.width * this.props.scale;
         const height =
             this.props.height && this.props.height * this.props.scale;
-        const dimensions = {
-            width: width,
-            height: height,
-        };
+        const dimensions = {width, height};
 
         // To make an image responsive, we need to know what its width and
         // height are in advance (before inserting it into the DOM) so that we

package/src/components/text-input.jsx

@@ -1,33 +1,82 @@
 /* eslint-disable react/sort-comp */
 // @flow
-import PropTypes from "prop-types";
+import {TextField} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-class TextInput extends React.Component<$FlowFixMe> {
-    static propTypes = {
-        value: PropTypes.string,
-        onChange: PropTypes.func.isRequired,
-        className: PropTypes.string,
-        labelText: PropTypes.string,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        disabled: PropTypes.bool,
-    };
+type Props = {|
+    value: string | number | null,
+    onChange: (any) => void,
+    className?: string,
+    labelText?: string,
+    onFocus?: () => void,
+    onBlur?: () => void,
+    disabled?: boolean,
+    id?: string,
+    placeholder?: string,
+    onKeyDown?: () => void,
+
+    // TODO: Remove this
+    style?: $FlowFixMe,
+|};
+
+type DefaultProps = {|
+    value: Props["value"],
+    disabled: Props["disabled"],
+|};
+
+let lastId = 0;
+function uniqueIdForInput(prefix: string = "input-") {
+    lastId++;
+    return `${prefix}${lastId}`;
+}
 
-    static defaultProps: $FlowFixMe = {
+class TextInput extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         value: "",
         disabled: false,
     };
 
+    id: string;
+
+    constructor(props: Props) {
+        super(props);
+        if (props.id) {
+            this.id = props.id;
+        } else {
+            this.id = uniqueIdForInput();
+        }
+    }
+
     render(): React.Node {
-        const {labelText, ...props} = this.props;
+        const {
+            labelText,
+            value,
+            onFocus,
+            onBlur,
+            disabled,
+            placeholder,
+            onKeyDown,
+        } = this.props;
+
+        const formattedValue = value === null ? "" : value.toString();
+
         return (
-            <input
-                {...props}
+            // $FlowIgnore
+            <TextField
+                disabled={disabled}
+                id={this.id}
+                value={formattedValue}
                 type="text"
                 aria-label={labelText}
-                onChange={(e) => this.props.onChange(e.target.value)}
+                onChange={(value) => this.props.onChange(value)}
+                placeholder={placeholder}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                autoCorrect="off"
+                autoCapitalize="off"
+                autoComplete="off"
             />
         );
     }

package/src/definition-context.js

@@ -0,0 +1,59 @@
+// @flow
+/**
+ * A React context for ensuring there is one and only one definition showing at a time
+ */
+
+import * as React from "react";
+
+type DefintionContext = {|
+    activeDefinitionId: ?string,
+    setActiveDefinitionId: (?string) => void,
+|};
+
+const defaultContext: DefintionContext = {
+    activeDefinitionId: null,
+    setActiveDefinitionId: () => {},
+};
+
+const DefinitionContext: React.Context<DefintionContext> =
+    React.createContext(defaultContext);
+
+type ProviderState = {
+    activeDefinitionId: ?string,
+};
+
+export type ProviderProps = {|children: any|};
+export class DefinitionProvider extends React.Component<
+    ProviderProps,
+    ProviderState,
+> {
+    // Context state
+    state: ProviderState = {
+        activeDefinitionId: null,
+    };
+
+    // Method to update state
+    // $FlowFixMe[signature-verification-failure]
+    setActiveDefinitionId = (activeDefinitionId: ?string): void => {
+        this.setState((prevState: ProviderState) => ({activeDefinitionId}));
+    };
+
+    render(): React.Node {
+        const {children} = this.props;
+        const {activeDefinitionId} = this.state;
+        const {setActiveDefinitionId} = this;
+
+        return (
+            <DefinitionContext.Provider
+                value={{
+                    activeDefinitionId,
+                    setActiveDefinitionId,
+                }}
+            >
+                {children}
+            </DefinitionContext.Provider>
+        );
+    }
+}
+
+export const DefinitionConsumer = DefinitionContext.Consumer;

package/src/index.js

@@ -120,7 +120,11 @@ export type {
     WidgetExports,
     WidgetInfo,
 } from "./types.js";
-export type {InputNumberWidget, PerseusRenderer} from "./perseus-types.js";
+export type {
+    InputNumberWidget,
+    PerseusRadioWidgetOptions,
+    PerseusRenderer,
+} from "./perseus-types.js";
 export type {Format} from "./util/math.js";
 export type {Coord} from "./interactive2/types.js";
 export type {MarkerType} from "./widgets/label-image/types.js";