@khanacademy/perseus-editor 2.14.2 → 2.15.0

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

@@ -1,18 +1,18 @@
 import * as React from "react";
-type ItemExtrasProps = {
-    calculator: boolean;
-    chi2Table: boolean;
-    periodicTable: boolean;
-    periodicTableWithKey: boolean;
-    tTable: boolean;
-    zTable: boolean;
+import type { PerseusAnswerArea } from "@khanacademy/perseus";
+type Props = PerseusAnswerArea & {
+    onChange: (props: Partial<PerseusAnswerArea>) => void;
 };
-type Props = ItemExtrasProps & {
-    onChange: (props: Partial<ItemExtrasProps>) => void;
+type State = {
+    financialCalculatorOptionsExpanded: boolean;
 };
-declare class ItemExtrasEditor extends React.Component<Props> {
-    static defaultProps: ItemExtrasProps;
-    serialize: () => any;
+declare class ItemExtrasEditor extends React.Component<Props, State> {
+    static defaultProps: PerseusAnswerArea;
+    state: {
+        financialCalculatorOptionsExpanded: boolean;
+    };
+    componentDidUpdate(prevProps: Readonly<Props>): void;
+    serialize: () => PerseusAnswerArea;
     render(): React.ReactNode;
 }
 export default ItemExtrasEditor;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.14.2",
+    "version": "2.15.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/perseus": "^17.2.0",
+        "@khanacademy/perseus": "^17.3.0",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {

package/src/__stories__/item-editor.stories.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/prop-types */
+import * as React from "react";
+
+import ItemExtrasEditor from "../item-extras-editor";
+
+import type {Meta, StoryObj} from "@storybook/react";
+
+import "../styles/perseus-editor.less";
+
+type Props = React.ComponentProps<typeof ItemExtrasEditor>;
+
+const Wrapper = (props: Props) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {onChange, ...rest} = props;
+    const [extras, setExtras] =
+        React.useState<Partial<typeof ItemExtrasEditor.defaultProps>>(rest);
+
+    return (
+        <ItemExtrasEditor
+            {...extras}
+            onChange={(e) => {
+                props.onChange?.(e); // to register action in storybook
+                setExtras((prevExtras) => ({...prevExtras, ...e}));
+            }}
+        />
+    );
+};
+
+const story: Meta<Props> = {
+    title: "Perseus/Editor/Item Extras Editor",
+    component: ItemExtrasEditor,
+    render: (args) => <Wrapper {...args} />,
+    argTypes: {onChange: {action: "changed"}},
+};
+export default story;
+
+type Story = StoryObj<typeof ItemExtrasEditor>;
+
+export const Default: Story = {
+    args: {...ItemExtrasEditor.defaultProps},
+};

package/src/__tests__/{items-extras-editors.test.tsx → item-extras-editor.test.tsx}

@@ -65,4 +65,21 @@ describe("ItemExtrasEditor", () => {
             periodicTableWithKey: false,
         });
     });
+
+    it("should call onChange on dependent values when financialCalculator is checked", () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+        render(<ItemExtrasEditor onChange={onChangeMock} />);
+        const checkbox = screen.getByLabelText("Show financial calculator:");
+
+        // Act
+        userEvent.click(checkbox);
+
+        // Assert
+        expect(onChangeMock).toHaveBeenCalledWith({
+            financialCalculatorMonthlyPayment: true,
+            financialCalculatorTotalAmount: true,
+            financialCalculatorTimeToPayOff: true,
+        });
+    });
 });

package/src/item-extras-editor.tsx

@@ -1,178 +1,230 @@
-import {components} from "@khanacademy/perseus";
+import {components, ItemExtras} from "@khanacademy/perseus";
 import * as React from "react";
 
+import type {PerseusAnswerArea} from "@khanacademy/perseus";
+
 const {InfoTip} = components;
 
-type ItemExtrasProps = {
-    calculator: boolean;
-    chi2Table: boolean;
-    periodicTable: boolean;
-    periodicTableWithKey: boolean;
-    tTable: boolean;
-    zTable: boolean;
+type Props = PerseusAnswerArea & {
+    onChange: (props: Partial<PerseusAnswerArea>) => void;
 };
 
-type Props = ItemExtrasProps & {
-    onChange: (props: Partial<ItemExtrasProps>) => void;
+type State = {
+    financialCalculatorOptionsExpanded: boolean;
 };
 
-class ItemExtrasEditor extends React.Component<Props> {
-    static defaultProps: ItemExtrasProps = {
+class ItemExtrasEditor extends React.Component<Props, State> {
+    static defaultProps: PerseusAnswerArea = {
         calculator: false,
         chi2Table: false,
+        financialCalculatorMonthlyPayment: false,
+        financialCalculatorTotalAmount: false,
+        financialCalculatorTimeToPayOff: false,
         periodicTable: false,
         periodicTableWithKey: false,
         tTable: false,
         zTable: false,
     };
 
-    serialize: () => any = () => {
-        return {
-            calculator: this.props.calculator,
-            chi2Table: this.props.chi2Table,
-            periodicTable: this.props.periodicTable,
-            periodicTableWithKey: this.props.periodicTableWithKey,
-            tTable: this.props.tTable,
-            zTable: this.props.zTable,
-        };
+    state = {
+        financialCalculatorOptionsExpanded: false,
+    };
+
+    componentDidUpdate(prevProps: Readonly<Props>): void {
+        // If no financial calculator options are checked, uncheck the
+        // financial calculator option.
+        if (
+            this.state.financialCalculatorOptionsExpanded &&
+            !this.props.financialCalculatorMonthlyPayment &&
+            !this.props.financialCalculatorTotalAmount &&
+            !this.props.financialCalculatorTimeToPayOff
+        ) {
+            this.setState({financialCalculatorOptionsExpanded: false});
+        }
+    }
+
+    serialize: () => PerseusAnswerArea = () => {
+        const data = {...ItemExtrasEditor.defaultProps};
+        for (const key of ItemExtras) {
+            data[key] = !!this.props[key];
+        }
+        return data;
     };
 
     render(): React.ReactNode {
         return (
             <div className="perseus-answer-editor">
                 <div className="perseus-answer-options">
-                    <div>
-                        <label>
-                            Show calculator:{" "}
-                            <input
-                                type="checkbox"
-                                checked={this.props.calculator}
-                                onChange={(e) => {
-                                    this.props.onChange({
-                                        calculator: e.target.checked,
-                                    });
-                                }}
-                            />
-                        </label>
-                        <InfoTip>
-                            Use the calculator when completing difficult
-                            calculations is NOT the intent of the question.
-                            DON’T use the calculator when testing the student’s
-                            ability to complete different types of computations.
-                        </InfoTip>
-                    </div>
-
-                    <div>
-                        <label>
-                            Show periodic table:{" "}
-                            <input
-                                type="checkbox"
-                                checked={this.props.periodicTable}
-                                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,
-                                    });
-                                }}
-                            />
-                        </label>
-                        <InfoTip>
-                            This provides the student with the ability to view a
-                            periodic table of the elements, e.g., for answering
-                            chemistry questions.
-                        </InfoTip>
-                    </div>
+                    <ItemExtraCheckbox
+                        label="Show calculator:"
+                        infoTip="Use the calculator when completing difficult calculations is NOT the intent of the question. DON’T use the calculator when testing the student’s ability to complete different types of computations."
+                        checked={this.props.calculator}
+                        onChange={(e) => {
+                            this.props.onChange({
+                                calculator: e.target.checked,
+                            });
+                        }}
+                    />
 
-                    {this.props.periodicTable && (
-                        <div>
-                            <label>
-                                Include key/legend with periodic table:{" "}
-                                <input
-                                    type="checkbox"
-                                    checked={this.props.periodicTableWithKey}
-                                    onChange={(e) => {
-                                        this.props.onChange({
-                                            periodicTableWithKey:
-                                                e.target.checked,
-                                        });
-                                    }}
-                                />
-                            </label>
-                            <InfoTip>
-                                Include a key for HS courses, omit for AP
-                                chemistry.
-                            </InfoTip>
-                        </div>
-                    )}
+                    <ItemExtraCheckbox
+                        label="Show financial calculator:"
+                        infoTip="This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked."
+                        checked={this.state.financialCalculatorOptionsExpanded}
+                        onChange={(e) => {
+                            this.setState({
+                                financialCalculatorOptionsExpanded:
+                                    e.target.checked,
+                            });
+                            // If the financial calculator is unchecked,
+                            // this needs to be reset. All checked by
+                            // default.
+                            this.props.onChange({
+                                financialCalculatorMonthlyPayment:
+                                    e.target.checked,
+                                financialCalculatorTotalAmount:
+                                    e.target.checked,
+                                financialCalculatorTimeToPayOff:
+                                    e.target.checked,
+                            });
+                        }}
+                    />
 
-                    <div>
-                        <label>
-                            Show z table (statistics):{" "}
-                            <input
-                                type="checkbox"
-                                checked={this.props.zTable}
+                    {this.state.financialCalculatorOptionsExpanded && (
+                        <>
+                            <ItemExtraCheckbox
+                                label="Include monthly payment:"
+                                infoTip="This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?"
+                                checked={
+                                    this.props.financialCalculatorMonthlyPayment
+                                }
                                 onChange={(e) => {
                                     this.props.onChange({
-                                        zTable: e.target.checked,
+                                        financialCalculatorMonthlyPayment:
+                                            e.target.checked,
                                     });
                                 }}
+                                indent
                             />
-                        </label>
-                        <InfoTip>
-                            This provides the student with the ability to view a
-                            table of critical values for the z distribution,
-                            e.g. for answering statistics questions.
-                        </InfoTip>
-                    </div>
-
-                    <div>
-                        <label>
-                            Show t table (statistics):{" "}
-                            <input
-                                type="checkbox"
-                                checked={this.props.tTable}
+                            <ItemExtraCheckbox
+                                label="Include total amount:"
+                                infoTip="This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?"
+                                checked={
+                                    this.props.financialCalculatorTotalAmount
+                                }
                                 onChange={(e) => {
                                     this.props.onChange({
-                                        tTable: e.target.checked,
+                                        financialCalculatorTotalAmount:
+                                            e.target.checked,
                                     });
                                 }}
+                                indent
                             />
-                        </label>
-                        <InfoTip>
-                            This provides the student with the ability to view a
-                            table of critical values for the Student's t
-                            distribution, e.g. for answering statistics
-                            questions.
-                        </InfoTip>
-                    </div>
-
-                    <div>
-                        <label>
-                            Show chi-squared table (statistics):{" "}
-                            <input
-                                type="checkbox"
-                                checked={this.props.chi2Table}
+                            <ItemExtraCheckbox
+                                label="Include time-to-pay-off:"
+                                infoTip="This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?"
+                                checked={
+                                    this.props.financialCalculatorTimeToPayOff
+                                }
                                 onChange={(e) => {
                                     this.props.onChange({
-                                        chi2Table: e.target.checked,
+                                        financialCalculatorTimeToPayOff:
+                                            e.target.checked,
                                     });
                                 }}
+                                indent
                             />
-                        </label>
-                        <InfoTip>
-                            This provides the student with the ability to view a
-                            table of critical values for the chi-squared
-                            distribution, e.g. for answering statistics
-                            questions.
-                        </InfoTip>
-                    </div>
+                        </>
+                    )}
+
+                    <ItemExtraCheckbox
+                        label="Show periodic table:"
+                        infoTip="This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions."
+                        checked={this.props.periodicTable}
+                        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,
+                            });
+                        }}
+                    />
+
+                    {this.props.periodicTable && (
+                        <ItemExtraCheckbox
+                            label="Include key/legend with periodic table:"
+                            infoTip="Include a key for HS courses; omit for AP chemistry."
+                            checked={this.props.periodicTableWithKey}
+                            onChange={(e) => {
+                                this.props.onChange({
+                                    periodicTableWithKey: e.target.checked,
+                                });
+                            }}
+                            indent
+                        />
+                    )}
+
+                    <ItemExtraCheckbox
+                        label="Show z table (statistics):"
+                        infoTip="This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions."
+                        checked={this.props.zTable}
+                        onChange={(e) => {
+                            this.props.onChange({
+                                zTable: e.target.checked,
+                            });
+                        }}
+                    />
+
+                    <ItemExtraCheckbox
+                        label="Show t table (statistics):"
+                        infoTip="This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions."
+                        checked={this.props.tTable}
+                        onChange={(e) => {
+                            this.props.onChange({
+                                tTable: e.target.checked,
+                            });
+                        }}
+                    />
+
+                    <ItemExtraCheckbox
+                        label="Show chi-squared table (statistics):"
+                        infoTip="This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions."
+                        checked={this.props.chi2Table}
+                        onChange={(e) => {
+                            this.props.onChange({
+                                chi2Table: e.target.checked,
+                            });
+                        }}
+                    />
                 </div>
             </div>
         );
     }
 }
 
+const ItemExtraCheckbox = (props: {
+    label: string;
+    infoTip: string;
+    checked: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    indent?: boolean;
+}) => (
+    <div
+        style={{
+            marginLeft: props.indent ? "10px" : "0px",
+        }}
+    >
+        <label>
+            {props.label}
+            <input
+                type="checkbox"
+                checked={props.checked}
+                onChange={props.onChange}
+            />
+        </label>
+        <InfoTip>{props.infoTip}</InfoTip>
+    </div>
+);
+
 export default ItemExtrasEditor;