@khanacademy/perseus 0.2.7 → 0.3.1

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

@@ -30,15 +30,24 @@ exports[`Definition widget should have a default snapshot: first render 1`] = `
             class="perseus-widget-container widget-nohighlight widget-inline"
           >
             <span
-              aria-describedby="uid-tooltip-0-aria-content"
+              aria-controls="uid-popover-0-wb-id"
+              aria-expanded="false"
               class="perseus-widget-definition"
-              tabindex="0"
+              id="uid-popover-0-wb-id-anchor"
             >
-              <div
-                class="default_xu2jcg-o_O-inlineStyles_txdle"
+              <button
+                aria-disabled="false"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_xwkmkn"
+                role="button"
+                tabindex="0"
+                type="button"
               >
-                the Pequots
-              </div>
+                <span
+                  class="text_f1191h-o_O-LabelSmall_hl4zs1-o_O-text_m8a8ki-o_O-textWithFocus_e296pg"
+                >
+                  the Pequots
+                </span>
+              </button>
             </span>
           </div>
           , upon these conditions.
@@ -79,15 +88,24 @@ exports[`Definition widget should have an open state snapshot: open state 1`] =
             class="perseus-widget-container widget-nohighlight widget-inline"
           >
             <span
-              aria-describedby="uid-tooltip-1-aria-content"
+              aria-controls="uid-popover-1-wb-id"
+              aria-expanded="true"
               class="perseus-widget-definition"
-              tabindex="0"
+              id="uid-popover-1-wb-id-anchor"
             >
-              <div
-                class="default_xu2jcg-o_O-inlineStyles_txdle"
+              <button
+                aria-disabled="false"
+                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8-o_O-small_xwkmkn"
+                role="button"
+                tabindex="0"
+                type="button"
               >
-                the Pequots
-              </div>
+                <span
+                  class="text_f1191h-o_O-LabelSmall_hl4zs1-o_O-text_m8a8ki-o_O-textWithFocus_e296pg-o_O-focus_15mc0l2"
+                >
+                  the Pequots
+                </span>
+              </button>
             </span>
           </div>
           , upon these conditions.

package/src/widgets/__tests__/definition_test.js

@@ -1,5 +1,5 @@
 // @flow
-import {screen, waitForElementToBeRemoved} from "@testing-library/react";
+import {screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom"; // Imports custom matchers
@@ -49,28 +49,30 @@ describe("Definition widget", () => {
         expect(container).toMatchSnapshot("first render");
     });
 
-    it("should have an open state snapshot", () => {
+    it("should have an open state snapshot", async () => {
         // Arrange
         const {container} = renderQuestion(question);
 
         // Act
         const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.hover(definitionAnchor);
+        userEvent.click(definitionAnchor);
 
         // Assert
+        const tooltip = await screen.findByRole("dialog");
+        expect(tooltip).toBeVisible();
         expect(container).toMatchSnapshot("open state");
     });
 
-    it("should display the definition on hover", async () => {
+    it("should display the definition on click", async () => {
         // Arrange
         renderQuestion(question);
 
         // Act
         const definitionAnchor = screen.getByText("the Pequots");
-        userEvent.hover(definitionAnchor);
+        userEvent.click(definitionAnchor);
 
         // Assert
-        const tooltip = await screen.findByRole("tooltip");
+        const tooltip = await screen.findByRole("dialog");
         expect(tooltip).toBeVisible();
         expect(tooltip).toHaveTextContent("Definition text");
     });
@@ -82,41 +84,28 @@ describe("Definition widget", () => {
         // Act
         const definitionAnchor = screen.getByText("the Pequots");
         userEvent.click(definitionAnchor);
-        const tooltip = await screen.findByRole("tooltip");
+        const tooltip = await screen.findByRole("dialog");
 
         // Assert
         expect(tooltip).toBeVisible();
         expect(tooltip).toHaveTextContent("Definition text");
     });
 
-    it("should show via focus by the tab key", async () => {
+    it("should show via focus on space key", async () => {
         // Arrange
         renderQuestion(question);
 
         // Act - Tab in to set focus
-        userEvent.tab();
+        const definitionAnchor = screen.getByText("the Pequots");
+        userEvent.type(definitionAnchor, "{space}");
 
         // Assert
-        const tooltip = await screen.findByRole("tooltip");
+        const tooltip = await screen.findByRole("dialog");
         expect(tooltip).toBeVisible();
         expect(tooltip).toHaveTextContent("Definition text");
     });
 
-    it("should hide and blur by the tab key", async () => {
-        // Arrange
-        renderQuestion(question);
-
-        // Act - Tab in to set focus, tab out to blur
-        userEvent.tab();
-        await screen.findByRole("tooltip");
-        userEvent.tab();
-        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
-
-        // Assert
-        expect(screen.queryByRole("tooltip")).toBeNull();
-    });
-
-    it("should dimiss by a click when showing", async () => {
+    it("should dimiss by a click on the x when showing", async () => {
         renderQuestion(question);
 
         // Act
@@ -124,16 +113,12 @@ describe("Definition widget", () => {
         const definitionAnchor = screen.getByText("the Pequots");
         userEvent.click(definitionAnchor);
 
-        // Move the mouse away and make sure text is still visible
-        userEvent.unhover(definitionAnchor);
-        await screen.findByRole("tooltip");
-
-        // Click to elsewhere, tooltip is hidden
-        userEvent.click((document.body: any));
-        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
+        // Click close, tooltip is hidden
+        const close = screen.getByTestId("popover-close-btn");
+        userEvent.click(close);
 
         // Assert
-        expect(screen.queryByRole("tooltip")).toBeNull();
+        expect(screen.queryByRole("dialog")).toBeNull();
     });
 
     it("should not affect answerable", () => {

package/src/widgets/__tests__/grapher.cypress.jsx

@@ -1,7 +1,7 @@
 // @flow
 
 import renderQuestionWithCypress from "../../../../../testing/render-question-with-cypress.jsx";
-import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import {cypressTestDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Perseus from "../../index.js";
 import {
     absoluteValueQuestion,
@@ -27,7 +27,7 @@ const LINES = "[data-interactive-kind-for-testing=movable-line] > svg > path";
 describe("Grapher widget", () => {
     beforeEach(() => {
         Perseus.init({skipMathJax: true});
-        Perseus.Dependencies.setDependencies(testDependencies);
+        Perseus.Dependencies.setDependencies(cypressTestDependencies);
     });
 
     describe("absolute value graph", () => {

package/src/widgets/__tests__/interactive-graph.cypress.jsx

@@ -1,7 +1,7 @@
 // @flow
 
 import renderQuestion from "../../../../../testing/render-question-with-cypress.jsx";
-import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import {cypressTestDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Dependencies from "../../dependencies.js";
 import * as Perseus from "../../index.js";
 import {
@@ -29,7 +29,7 @@ const CIRCLES = "svg > circle";
 
 describe("Interactive graph", () => {
     beforeEach(() => {
-        Dependencies.setDependencies(testDependencies);
+        Dependencies.setDependencies(cypressTestDependencies);
         Perseus.init({skipMathJax: true});
     });
 

package/src/widgets/categorizer.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/sort-comp */
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
@@ -7,7 +8,6 @@ import * as React from "react";
 import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon.jsx";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import {iconCircle, iconCircleThin} from "../icon-paths.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";

package/src/widgets/definition.jsx

@@ -1,60 +1,20 @@
 // @flow
 
+import Button from "@khanacademy/wonder-blocks-button";
 import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
+import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-import PropTypes from "prop-types";
 import * as React from "react";
-import _ from "underscore";
 
-import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";
 
 import type {
     PerseusRenderer,
     PerseusDefinitionWidgetOptions,
 } from "../perseus-types.js";
-import type {
-    APIOptionsWithDefaults,
-    PerseusScore,
-    WidgetExports,
-    WidgetProps,
-} from "../types.js";
-
-type DefinitionContentProps = {|
-    apiOptions: APIOptionsWithDefaults,
-    content: string,
-    trackInteraction: () => mixed,
-    widgets: PerseusRenderer["widgets"],
-|};
-
-class DefinitionContent extends React.Component<DefinitionContentProps> {
-    static propTypes = {
-        apiOptions: ApiOptions.propTypes,
-        content: PropTypes.string,
-        trackInteraction: PropTypes.func.isRequired,
-        widgets: PropTypes.objectOf(PropTypes.any),
-    };
-
-    componentDidMount() {
-        this.props.trackInteraction();
-    }
-
-    render(): React.Node {
-        return (
-            <View style={styles.tooltipBody}>
-                <Renderer
-                    apiOptions={this.props.apiOptions}
-                    content={this.props.content}
-                    widgets={this.props.widgets}
-                />
-            </View>
-        );
-    }
-}
+import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
 
-type RenderProps = PerseusDefinitionWidgetOptions; // transform = _.identity
+type RenderProps = PerseusDefinitionWidgetOptions;
 
 type Rubric = PerseusDefinitionWidgetOptions;
 
@@ -89,25 +49,38 @@ class Definition extends React.Component<DefinitionProps> {
     };
 
     render(): React.Node {
-        const content = (
-            <DefinitionContent
-                apiOptions={this.props.apiOptions}
-                content={this.props.definition}
-                key={this.props.definition}
-                trackInteraction={this.props.trackInteraction}
-                widgets={this.props.widgets}
-            />
-        );
-
         return (
-            // $FlowFixMe[incompatible-type]: content prop
-            <Tooltip content={content} placement="top">
-                <span className="perseus-widget-definition">
-                    <View style={styles.definitionLink}>
-                        {this.props.togglePrompt}
-                    </View>
-                </span>
-            </Tooltip>
+            <Popover
+                content={
+                    <PopoverContentCore
+                        color="white"
+                        style={styles.tooltipBody}
+                        closeButtonVisible={true}
+                    >
+                        <Renderer
+                            apiOptions={this.props.apiOptions}
+                            content={this.props.definition}
+                            widgets={this.props.widgets}
+                        />
+                    </PopoverContentCore>
+                }
+                placement="top"
+            >
+                {({open}) => (
+                    <span className="perseus-widget-definition">
+                        <Button
+                            size="small"
+                            kind="tertiary"
+                            onClick={() => {
+                                this.props.trackInteraction();
+                                open();
+                            }}
+                        >
+                            {this.props.togglePrompt}
+                        </Button>
+                    </span>
+                )}
+            </Popover>
         );
     }
 }
@@ -121,14 +94,6 @@ const styles = {
         lineHeight: "30px",
         margin: Spacing.xSmall_8,
     },
-
-    definitionLink: {
-        borderBottom: `dashed 1px ${Color.blue}`,
-        color: Color.blue,
-        cursor: "pointer",
-        display: "inline-block",
-        textDecoration: "none",
-    },
 };
 
 export default ({
@@ -137,5 +102,5 @@ export default ({
     accessible: true,
     defaultAlignment: "inline",
     widget: Definition,
-    transform: _.identity,
+    transform: (x: any) => x,
 }: WidgetExports<typeof Definition>);

package/src/widgets/explanation.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/sort-comp */
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import Renderer from "../renderer.jsx";
 import * as styleConstants from "../styles/constants.js";

package/src/widgets/expression.jsx

@@ -2,6 +2,7 @@
 // @flow
 import * as KAS from "@khanacademy/kas";
 import {KeypadInput, KeypadTypes} from "@khanacademy/math-input";
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
 import * as React from "react";
@@ -11,7 +12,6 @@ import InlineIcon from "../components/inline-icon.jsx";
 import InputWithExamples from "../components/input-with-examples.jsx";
 import MathInput from "../components/math-input.jsx";
 import Tooltip from "../components/tooltip.jsx";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import {iconExclamationSign} from "../icon-paths.js";
 import {Errors as PerseusErrors, Log} from "../logging/log.js";
 import * as Changeable from "../mixins/changeable.jsx";

package/src/widgets/graded-group-set.jsx

@@ -1,10 +1,10 @@
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
 import {getDependencies} from "../dependencies.js";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import {
     grayLight,

package/src/widgets/graded-group.jsx

@@ -1,4 +1,5 @@
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import Button from "@khanacademy/wonder-blocks-button";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
@@ -7,7 +8,6 @@ import * as React from "react";
 import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon.jsx";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import {iconOk, iconRemove} from "../icon-paths.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import {ApiOptions} from "../perseus-api.jsx";

package/src/widgets/group.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/sort-comp */
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import classNames from "classnames";
 import * as React from "react";
 import _ from "underscore";
 
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";

package/src/widgets/image.jsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/sort-comp */
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
 import _ from "underscore";
 
 import SvgImage from "../components/svg-image.jsx";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import Renderer from "../renderer.jsx";
 import {baseUnitPx} from "../styles/constants.js";

package/src/widgets/input-number.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/sort-comp */
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
 import * as React from "react";
@@ -9,7 +10,6 @@ import _ from "underscore";
 import InputWithExamples from "../components/input-with-examples.jsx";
 import PossibleAnswers from "../components/possible-answers.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import {ClassNames as ApiClassNames, ApiOptions} from "../perseus-api.jsx";
 import TexWrangler from "../tex-wrangler.js";
 import KhanAnswerTypes from "../util/answer-types.js";

package/src/widgets/matcher.jsx

@@ -1,5 +1,9 @@
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 // @flow
+import {
+    linterContextProps,
+    linterContextDefault,
+} from "@khanacademy/perseus-linter";
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import {StyleSheet, css} from "aphrodite";
 import PropTypes from "prop-types";
@@ -8,7 +12,6 @@ import _ from "underscore";
 
 import Sortable from "../components/sortable.jsx";
 import {getDependencies} from "../dependencies.js";
-import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
 import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";
 import Util from "../util.js";

package/src/widgets/matrix.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/sort-comp */
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
 import * as React from "react";
@@ -11,7 +12,6 @@ import MathOutput from "../components/math-output.jsx";
 import NumberInput from "../components/number-input.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import TextInput from "../components/text-input.jsx";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import InteractiveUtil from "../interactive2/interactive-util.js";
 import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";

package/src/widgets/numeric-input.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 // @flow
 
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import classNames from "classnames";
 import * as React from "react";
@@ -9,7 +10,6 @@ import _ from "underscore";
 import InputWithExamples from "../components/input-with-examples.jsx";
 import PossibleAnswers from "../components/possible-answers.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import {ApiOptions, ClassNames as ApiClassNames} from "../perseus-api.jsx";
 import TexWrangler from "../tex-wrangler.js";
 import KhanAnswerTypes from "../util/answer-types.js";

package/src/widgets/orderer.jsx

@@ -1,5 +1,9 @@
 /* eslint-disable @babel/no-invalid-this, no-unused-vars, one-var, react/no-unsafe, react/sort-comp */
 // @flow
+import {
+    linterContextProps,
+    linterContextDefault,
+} from "@khanacademy/perseus-linter";
 import $ from "jquery";
 import PropTypes, {bool} from "prop-types";
 import * as React from "react";
@@ -7,7 +11,6 @@ import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import {getDependencies} from "../dependencies.js";
-import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
 import {Errors, Log} from "../logging/log.js";
 import {ClassNames as ApiClassNames} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";

package/src/widgets/passage-ref-target.jsx

@@ -1,9 +1,12 @@
 // @flow
+import {
+    linterContextProps,
+    linterContextDefault,
+} from "@khanacademy/perseus-linter";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";
 import Renderer from "../renderer.jsx";

package/src/widgets/passage.jsx

@@ -1,5 +1,6 @@
 // @flow
 
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import $ from "jquery";
@@ -9,7 +10,6 @@ import _ from "underscore";
 
 import HighlightableContent from "../components/highlighting/highlightable-content.jsx";
 import {getDependencies} from "../dependencies.js";
-import {linterContextDefault} from "../gorgon/proptypes.js";
 import Renderer from "../renderer.jsx";
 
 import {getLineHeightForNode} from "./passage/get-line-height-for-node.js";

package/src/widgets/radio/widget.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/sort-comp */
 // @flow
+import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import * as React from "react";
 import _ from "underscore";
 
-import {linterContextDefault} from "../../gorgon/proptypes.js";
 import Renderer from "../../renderer.jsx";
 import Util from "../../util.js";
 import PassageRef from "../passage-ref.jsx";

package/src/widgets/sequence.jsx

@@ -1,10 +1,13 @@
 // @flow
+import {
+    linterContextProps,
+    linterContextDefault,
+} from "@khanacademy/perseus-linter";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon.jsx";
-import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
 import {iconOk} from "../icon-paths.js";
 import * as Changeable from "../mixins/changeable.jsx";
 import {ApiOptions} from "../perseus-api.jsx";

package/src/widgets/sorter.jsx

@@ -1,10 +1,13 @@
 // @flow
+import {
+    linterContextProps,
+    linterContextDefault,
+} from "@khanacademy/perseus-linter";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import Sortable from "../components/sortable.jsx";
-import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
 import {ApiOptions} from "../perseus-api.jsx";
 import Util from "../util.js";
 

package/src/widgets/table.jsx

@@ -1,6 +1,10 @@
 /* eslint-disable react/sort-comp */
 // @flow
 import {keypadElementPropType} from "@khanacademy/math-input";
+import {
+    linterContextProps,
+    linterContextDefault,
+} from "@khanacademy/perseus-linter";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -8,7 +12,6 @@ import _ from "underscore";
 
 import MathOutput from "../components/math-output.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
-import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
 import InteractiveUtil from "../interactive2/interactive-util.js";
 import {ApiOptions} from "../perseus-api.jsx";
 import Renderer from "../renderer.jsx";