Remove PropCheckBox (#1479)

* remove from expression-editor * rm from graph-settings * rm from interactive-graph-settings * rm categorizer-editor * rm cs-program-editor * rm iframe-editor * rm from matcher-editor * rm from measurer-editor * rm from number-line-editor * rm from passage-editor * rm from sorter-editor * rm from radio-editor * rm from numeric-input-editor * remove prop-check-box * changeset
Khan · Aug 5, 2024 · ef96cdd · ef96cdd
1 parent 8089560
commit ef96cdd
Show file tree

Hide file tree

Showing 18 changed files with 204 additions and 270 deletions.
diff --git a/.changeset/four-windows-retire.md b/.changeset/four-windows-retire.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": major
+"@khanacademy/perseus-editor": patch
+---
+
+Remove PropCheckBox component from Perseus; use WB instead
diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx
@@ -10,13 +10,14 @@ import {
     KhanMath,
     Util,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-const {ButtonGroup, InfoTip, PropCheckBox, RangeInput} = components;
+const {ButtonGroup, InfoTip, RangeInput} = components;
 
 const defaultBackgroundImage = {
     url: null,
@@ -521,10 +522,12 @@ const GraphSettings = createReactClass({
                             />
                         </div>
                         <div className="perseus-widget-left-col">
-                            <PropCheckBox
+                            <Checkbox
                                 label="Show tooltips"
-                                showTooltips={this.props.showTooltips}
-                                onChange={this.change}
+                                checked={this.props.showTooltips}
+                                onChange={(value) => {
+                                    this.change({showTooltips: value});
+                                }}
                             />
                         </div>
                     </div>
@@ -566,17 +569,21 @@ const GraphSettings = createReactClass({
                     <div className="misc-settings">
                         <div className="perseus-widget-row">
                             <div className="perseus-widget-left-col">
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show ruler"
-                                    showRuler={this.props.showRuler}
-                                    onChange={this.change}
+                                    checked={this.props.showRuler}
+                                    onChange={(value) => {
+                                        this.change({showRuler: value});
+                                    }}
                                 />
                             </div>
                             <div className="perseus-widget-right-col">
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show protractor"
-                                    showProtractor={this.props.showProtractor}
-                                    onChange={this.change}
+                                    checked={this.props.showProtractor}
+                                    onChange={(value) => {
+                                        this.change({showProtractor: value});
+                                    }}
                                 />
                             </div>
                         </div>

diff --git a/packages/perseus-editor/src/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/components/interactive-graph-settings.tsx
@@ -10,6 +10,7 @@ import {
 } from "@khanacademy/perseus";
 import Banner from "@khanacademy/wonder-blocks-banner";
 import {View} from "@khanacademy/wonder-blocks-core";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -20,7 +21,7 @@ import Heading from "./heading";
 
 import type {PerseusImageBackground} from "@khanacademy/perseus";
 
-const {ButtonGroup, InfoTip, PropCheckBox, RangeInput} = components;
+const {ButtonGroup, InfoTip, RangeInput} = components;
 
 const defaultBackgroundImage = {
     url: null,
@@ -547,10 +548,12 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
                                 </LabeledRow>
                             </div>
                             <div className="perseus-widget-left-col">
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show tooltips"
-                                    showTooltips={this.props.showTooltips}
-                                    onChange={this.change}
+                                    checked={this.props.showTooltips}
+                                    onChange={(value) => {
+                                        this.change({showTooltips: value});
+                                    }}
                                 />
                             </div>
                         </div>
@@ -585,10 +588,12 @@ class InteractiveGraphSettings extends React.Component<Props, State> {
 
                         <View style={styles.protractorSection}>
                             <View style={styles.checkboxRow}>
-                                <PropCheckBox
+                                <Checkbox
                                     label="Show protractor"
-                                    showProtractor={this.props.showProtractor}
-                                    onChange={this.change}
+                                    checked={this.props.showProtractor}
+                                    onChange={(value) => {
+                                        this.change({showProtractor: value});
+                                    }}
                                     style={styles.resetSpaceTop}
                                 />
                             </View>

diff --git a/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
@@ -84,6 +84,33 @@ describe("numeric-input-editor", () => {
         expect(onChangeMock).toBeCalledWith({coefficient: true});
     });
 
+    it("should be possible to select strictly match only these formats", async () => {
+        const onChangeMock = jest.fn();
+
+        render(<NumericInputEditor onChange={onChangeMock} />);
+
+        await userEvent.click(screen.getByLabelText("Toggle options"));
+        await userEvent.click(
+            screen.getByRole("checkbox", {
+                name: "Strictly match only these formats",
+            }),
+        );
+
+        expect(onChangeMock).toBeCalledWith({
+            answers: [
+                {
+                    answerForms: [],
+                    maxError: null,
+                    message: "",
+                    simplify: "required",
+                    status: "correct",
+                    strict: true,
+                    value: null,
+                },
+            ],
+        });
+    });
+
     it("should be possible to update label text", async () => {
         const onChangeMock = jest.fn();
 

diff --git a/packages/perseus-editor/src/widgets/categorizer-editor.tsx b/packages/perseus-editor/src/widgets/categorizer-editor.tsx
@@ -5,11 +5,12 @@ import {
     Changeable,
     EditorJsonify,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {PropCheckBox, TextListEditor} = components;
+const {TextListEditor} = components;
 const Categorizer = CategorizerWidget.widget;
 
 type Props = any;
@@ -45,11 +46,12 @@ class CategorizerEditor extends React.Component<Props> {
         return (
             <div>
                 <div className="perseus-widget-row">
-                    <PropCheckBox
+                    <Checkbox
                         label="Randomize item order"
-                        labelAlignment="right"
-                        randomizeItems={this.props.randomizeItems}
-                        onChange={this.props.onChange}
+                        checked={this.props.randomizeItems}
+                        onChange={(value) => {
+                            this.props.onChange({randomizeItems: value});
+                        }}
                     />
                 </div>
                 Categories:

diff --git a/packages/perseus-editor/src/widgets/cs-program-editor.tsx b/packages/perseus-editor/src/widgets/cs-program-editor.tsx
@@ -11,14 +11,15 @@ import {
     Log,
 } from "@khanacademy/perseus";
 import {Errors} from "@khanacademy/perseus-core";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import $ from "jquery";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 
-const {InfoTip, PropCheckBox} = components;
+const {InfoTip} = components;
 
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -220,20 +221,24 @@ class CSProgramEditor extends React.Component<any> {
                     />
                 </label>
                 <br />
-                <PropCheckBox
+                <Checkbox
                     label="Show Editor"
-                    showEditor={this.props.showEditor}
-                    onChange={this.props.onChange}
+                    checked={this.props.showEditor}
+                    onChange={(value) => {
+                        this.props.onChange({showEditor: value});
+                    }}
                 />
                 <InfoTip>
                     If you show the editor, you should use the "full-width"
                     alignment to make room for the width of the editor.
                 </InfoTip>
                 <br />
-                <PropCheckBox
+                <Checkbox
                     label="Show Buttons"
-                    showButtons={this.props.showButtons}
-                    onChange={this.props.onChange}
+                    checked={this.props.showButtons}
+                    onChange={(value) => {
+                        this.props.onChange({showButtons: value});
+                    }}
                 />
                 <br />
                 <label>

diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -7,6 +7,7 @@ import {
     Expression,
     PerseusExpressionAnswerFormConsidered,
 } from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {isTruthy} from "@khanacademy/wonder-stuff-core";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import lens from "hubble";
@@ -17,7 +18,7 @@ import SortableArea from "../components/sortable";
 
 import type {PerseusExpressionWidgetOptions} from "@khanacademy/perseus";
 
-const {InfoTip, PropCheckBox, TextInput} = components;
+const {InfoTip, TextInput} = components;
 
 type Props = {
     widgetId?: any;
@@ -218,12 +219,12 @@ class ExpressionEditor extends React.Component<Props> {
                 </div>
 
                 <div>
-                    <PropCheckBox
-                        times={this.props.times}
-                        onChange={this.props.onChange}
-                        labelAlignment="right"
-                        label="Use × for rendering multiplication instead of a
-                        center dot."
+                    <Checkbox
+                        label="Use × for rendering multiplication instead of a center dot."
+                        checked={this.props.times}
+                        onChange={(value) => {
+                            this.props.onChange({times: value});
+                        }}
                     />
                     <InfoTip>
                         <p>
@@ -542,11 +543,12 @@ class AnswerOption extends React.Component<
                     </div>
 
                     <div className="answer-option">
-                        <PropCheckBox
-                            form={this.props.form}
-                            onChange={this.props.onChange}
-                            labelAlignment="right"
+                        <Checkbox
                             label="Answer expression must have the same form."
+                            checked={this.props.form}
+                            onChange={(value) => {
+                                this.props.onChange({form: value});
+                            }}
                         />
                         <InfoTip>
                             <p>
@@ -558,12 +560,12 @@ class AnswerOption extends React.Component<
                     </div>
 
                     <div className="answer-option">
-                        <PropCheckBox
-                            simplify={this.props.simplify}
-                            onChange={this.props.onChange}
-                            labelAlignment="right"
-                            label="Answer expression must be fully expanded and
-                            simplified."
+                        <Checkbox
+                            label="Answer expression must be fully expanded and simplified."
+                            checked={this.props.simplify}
+                            onChange={(value) => {
+                                this.props.onChange({simplify: value});
+                            }}
                         />
                         <InfoTip>
                             <p>

diff --git a/packages/perseus-editor/src/widgets/iframe-editor.tsx b/packages/perseus-editor/src/widgets/iframe-editor.tsx
@@ -1,14 +1,13 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/sort-comp */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
+import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 
-const {PropCheckBox} = components;
-
 type PairEditorProps = any;
 
 /**
@@ -174,16 +173,20 @@ class IframeEditor extends React.Component<IframeEditorProps> {
                         onChange={this.change("height")}
                     />
                 </label>
-                <PropCheckBox
+                <Checkbox
                     label="Allow full screen"
-                    allowFullScreen={this.props.allowFullScreen}
-                    onChange={this.props.onChange}
+                    checked={this.props.allowFullScreen}
+                    onChange={(value) => {
+                        this.props.onChange({allowFullScreen: value});
+                    }}
                 />
                 <br />
-                <PropCheckBox
+                <Checkbox
                     label="Allow iframe content to redirect the page"
-                    allowTopNavigation={this.props.allowTopNavigation}
-                    onChange={this.props.onChange}
+                    checked={this.props.allowTopNavigation}
+                    onChange={(value) => {
+                        this.props.onChange({allowTopNavigation: value});
+                    }}
                 />
             </div>
         );

diff --git a/packages/perseus-editor/src/widgets/matcher-editor.tsx b/packages/perseus-editor/src/widgets/matcher-editor.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 import {components} from "@khanacademy/perseus";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-const {InfoTip, PropCheckBox, TextListEditor} = components;
+const {InfoTip, TextListEditor} = components;
 
 type Props = any;
 
@@ -79,10 +80,12 @@ class MatcherEditor extends React.Component<Props> {
                     />
                 </div>
                 <div>
-                    <PropCheckBox
+                    <Checkbox
                         label="Order of the matched pairs matters:"
-                        orderMatters={this.props.orderMatters}
-                        onChange={this.props.onChange}
+                        checked={this.props.orderMatters}
+                        onChange={(value) => {
+                            this.props.onChange({orderMatters: value});
+                        }}
                     />
                     <InfoTip>
                         <p>
@@ -100,10 +103,12 @@ class MatcherEditor extends React.Component<Props> {
                     </InfoTip>
                 </div>
                 <div>
-                    <PropCheckBox
+                    <Checkbox
                         label="Padding:"
-                        padding={this.props.padding}
-                        onChange={this.props.onChange}
+                        checked={this.props.padding}
+                        onChange={(value) => {
+                            this.props.onChange({padding: value});
+                        }}
                     />
                     <InfoTip>
                         <p>