@khanacademy/perseus-editor 2.13.0 → 2.14.1

package/dist/item-extras-editor.d.ts

@@ -1,17 +1,17 @@
-import PropTypes from "prop-types";
 import * as React from "react";
-type Props = any;
+type ItemExtrasProps = {
+    calculator: boolean;
+    chi2Table: boolean;
+    periodicTable: boolean;
+    periodicTableWithKey: boolean;
+    tTable: boolean;
+    zTable: boolean;
+};
+type Props = ItemExtrasProps & {
+    onChange: (props: Partial<ItemExtrasProps>) => void;
+};
 declare class ItemExtrasEditor extends React.Component<Props> {
-    static propTypes: {
-        calculator: PropTypes.Requireable<boolean>;
-        chi2Table: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        periodicTable: PropTypes.Requireable<boolean>;
-        periodicTableWithKey: PropTypes.Requireable<boolean>;
-        tTable: PropTypes.Requireable<boolean>;
-        zTable: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: Props;
+    static defaultProps: ItemExtrasProps;
     serialize: () => any;
     render(): React.ReactNode;
 }

package/dist/widgets/label-image/behavior.d.ts

@@ -2,13 +2,16 @@
  * Controlled component to display and change widget options.
  */
 import * as React from "react";
+export type PreferredPopoverDirection = "NONE" | "UP" | "DOWN" | "LEFT" | "RIGHT";
 type Props = {
     multipleAnswers: boolean;
     hideChoicesFromInstructions: boolean;
+    preferredPopoverDirection: PreferredPopoverDirection;
     onChange: (options: {
         multipleAnswers?: boolean;
         hideChoicesFromInstructions?: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection;
     }) => void;
 };
-declare const Behavior: ({ multipleAnswers, hideChoicesFromInstructions, onChange, }: Props) => React.ReactElement;
+declare const Behavior: ({ multipleAnswers, hideChoicesFromInstructions, preferredPopoverDirection, onChange, }: Props) => React.ReactElement;
 export default Behavior;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.13.0",
+    "version": "2.14.1",
     "publishConfig": {
         "access": "public"
     },
@@ -22,18 +22,18 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.6",
-        "@khanacademy/kmath": "^0.1.7",
-        "@khanacademy/perseus": "^17.0.0",
-        "@khanacademy/perseus-core": "1.4.0"
+        "@khanacademy/kas": "^0.3.7",
+        "@khanacademy/kmath": "^0.1.8",
+        "@khanacademy/perseus": "^17.1.1",
+        "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-icon": "4.0.0",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
@@ -50,12 +50,12 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
-        "@khanacademy/wonder-blocks-icon": "2.2.1",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
+        "@khanacademy/wonder-blocks-icon": "4.0.0",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",

package/src/__tests__/items-extras-editors.test.tsx

@@ -0,0 +1,68 @@
+import "@testing-library/jest-dom";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import ItemExtrasEditor from "../item-extras-editor";
+
+describe("ItemExtrasEditor", () => {
+    it("should render correctly with default props", () => {
+        // Act
+        render(<ItemExtrasEditor onChange={() => {}} />);
+
+        // Assert
+        expect(screen.getByLabelText("Show calculator:")).not.toBeChecked();
+        expect(screen.getByLabelText("Show periodic table:")).not.toBeChecked();
+        expect(
+            screen.queryByText("Include key/legend with periodic table:"),
+        ).not.toBeInTheDocument();
+        expect(
+            screen.getByLabelText("Show z table (statistics):"),
+        ).not.toBeChecked();
+        expect(
+            screen.getByLabelText("Show t table (statistics):"),
+        ).not.toBeChecked();
+        expect(
+            screen.getByLabelText("Show chi-squared table (statistics):"),
+        ).not.toBeChecked();
+    });
+
+    it("should call onChange with updated calculator value", () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+        render(<ItemExtrasEditor calculator={false} onChange={onChangeMock} />);
+        const checkbox = screen.getByLabelText("Show calculator:");
+
+        // Act
+        userEvent.click(checkbox);
+
+        // Assert
+        expect(onChangeMock).toHaveBeenCalledWith({calculator: true});
+    });
+
+    it("should call onChange with updated periodicTableWithKey value when periodicTable is unchecked", () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+        render(
+            <ItemExtrasEditor
+                periodicTable={true}
+                periodicTableWithKey={true}
+                onChange={onChangeMock}
+            />,
+        );
+        const checkbox = screen.getByLabelText("Show periodic table:");
+
+        // Act
+        userEvent.click(checkbox);
+
+        // Assert
+        // visible when periodicTable is checked
+        expect(
+            screen.getByText("Include key/legend with periodic table:"),
+        ).toBeInTheDocument();
+        expect(onChangeMock).toHaveBeenCalledWith({
+            periodicTable: false,
+            periodicTableWithKey: false,
+        });
+    });
+});

package/src/item-extras-editor.tsx

@@ -1,23 +1,23 @@
 import {components} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 const {InfoTip} = components;
 
-type Props = any;
+type ItemExtrasProps = {
+    calculator: boolean;
+    chi2Table: boolean;
+    periodicTable: boolean;
+    periodicTableWithKey: boolean;
+    tTable: boolean;
+    zTable: boolean;
+};
 
-class ItemExtrasEditor extends React.Component<Props> {
-    static propTypes = {
-        calculator: PropTypes.bool,
-        chi2Table: PropTypes.bool,
-        onChange: PropTypes.func.isRequired,
-        periodicTable: PropTypes.bool,
-        periodicTableWithKey: PropTypes.bool,
-        tTable: PropTypes.bool,
-        zTable: PropTypes.bool,
-    };
+type Props = ItemExtrasProps & {
+    onChange: (props: Partial<ItemExtrasProps>) => void;
+};
 
-    static defaultProps: Props = {
+class ItemExtrasEditor extends React.Component<Props> {
+    static defaultProps: ItemExtrasProps = {
         calculator: false,
         chi2Table: false,
         periodicTable: false,
@@ -71,6 +71,10 @@ class ItemExtrasEditor extends React.Component<Props> {
                                 onChange={(e) => {
                                     this.props.onChange({
                                         periodicTable: e.target.checked,
+                                        // If the periodic table is unchecked,
+                                        // this needs to be reset. If table is
+                                        // checked, it should already be false.
+                                        periodicTableWithKey: false,
                                     });
                                 }}
                             />

package/src/widgets/label-image/__stories__/behavior.stories.tsx

@@ -27,5 +27,5 @@ export const Default = (args: StoryArgs): React.ReactElement => {
             setState({...state, ...newState});
         },
     } as const;
-    return <Behavior {...props} />;
+    return <Behavior preferredPopoverDirection="NONE" {...props} />;
 };

package/src/widgets/label-image/behavior.tsx

@@ -10,21 +10,32 @@ import Checkbox from "../../components/checkbox";
 
 const {colors, typography} = globalStyles;
 
+export type PreferredPopoverDirection =
+    | "NONE"
+    | "UP"
+    | "DOWN"
+    | "LEFT"
+    | "RIGHT";
+
 type Props = {
     // Whether multiple answer choices may be selected for markers.
     multipleAnswers: boolean;
     // Whether to hide answer choices from user instructions.
     hideChoicesFromInstructions: boolean;
+
+    preferredPopoverDirection: PreferredPopoverDirection;
     // Callback for when widget options change.
     onChange: (options: {
         multipleAnswers?: boolean;
         hideChoicesFromInstructions?: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection;
     }) => void;
 };
 
 const Behavior = ({
     multipleAnswers,
     hideChoicesFromInstructions,
+    preferredPopoverDirection,
     onChange,
 }: Props): React.ReactElement => (
     <div>
@@ -59,6 +70,27 @@ const Behavior = ({
                     Do not display answer choices in instructions
                 </span>
             </li>
+
+            <li className={css(styles.option)}>
+                <span className={css(styles.label)}>
+                    Preferred pop-over direction
+                </span>
+                <select
+                    value={preferredPopoverDirection}
+                    onChange={(e) => {
+                        onChange({
+                            preferredPopoverDirection: e.target
+                                .value as PreferredPopoverDirection,
+                        });
+                    }}
+                >
+                    <option value="NONE"> No Preference </option>
+                    <option value="UP"> Up </option>
+                    <option value="DOWN"> Down </option>
+                    <option value="LEFT"> Left </option>
+                    <option value="RIGHT"> Right </option>
+                </select>
+            </li>
         </ul>
     </div>
 );

package/src/widgets/label-image-editor.tsx

@@ -229,6 +229,7 @@ class LabelImageEditor extends React.Component<Props> {
                 <div className={css(styles.largeSpacer)} />
 
                 <Behavior
+                    preferredPopoverDirection="NONE"
                     multipleAnswers={multipleAnswers}
                     hideChoicesFromInstructions={hideChoicesFromInstructions}
                     onChange={this.handleBehaviorChange}