Addressing PR Feedback

packages/perseus/src/components/simple-keypad-input.tsx

@@ -39,6 +39,8 @@ export default class SimpleKeypadInput extends React.Component<any> {
     }
 
     focus() {
+        // The inputRef is a ref to a MathInput, which
+        // also controls the keypad state during focus events.
         this.inputRef.current?.focus(this.context.setKeypadActive);
     }
 

packages/perseus/src/widgets/numeric-input/numeric-input.class.tsx

@@ -64,6 +64,14 @@ type DefaultProps = {
     PerseusNumericInputRubric
 > satisfies PropsFor<typeof NumericInput>;
 
+/**
+ * The NumericInput widget is a numeric input field that supports a variety of
+ * answer forms, including integers, decimals, fractions, and mixed numbers.
+ *
+ * [Jan 2025] We're currenly migrating from class-based components to functional
+ * components. While we cannot fully migrate this component yet, we can start
+ * by using the functional component for the rendering the UI of the widget.
+ */
 export class NumericInput
     extends React.Component<NumericInputProps>
     implements Widget

packages/perseus/src/widgets/numeric-input/numeric-input.tsx

@@ -89,7 +89,7 @@ export const NumericInputComponent = forwardRef(
         if (props.apiOptions.customKeypad) {
             const alignmentClass = props.rightAlign
                 ? "perseus-input-right-align"
-                : "";
+                : undefined;
             return (
                 <div className={alignmentClass}>
                     <SimpleKeypadInput

packages/perseus/src/widgets/numeric-input/utils.test.ts

@@ -0,0 +1,84 @@
+import {generateExamples, shouldShowExamples} from "./utils";
+
+import type {PerseusStrings} from "../../strings";
+import type {PerseusNumericInputAnswerForm} from "@khanacademy/perseus-core";
+
+describe("generateExamples", () => {
+    it("returns an array of examples", () => {
+        const answerForms: readonly PerseusNumericInputAnswerForm[] = [
+            {
+                name: "integer",
+                simplify: "optional",
+            },
+            {
+                name: "proper",
+                simplify: "required",
+            },
+        ];
+        const strings: Partial<PerseusStrings> = {
+            yourAnswer: "Your answer",
+            integerExample: "Integer example",
+            properExample: "Proper example",
+            simplifiedProperExample: "Simplified proper example",
+        };
+        const expected = [
+            "Your answer",
+            "Integer example",
+            "Simplified proper example",
+        ];
+        expect(
+            generateExamples(answerForms, strings as PerseusStrings),
+        ).toEqual(expected);
+    });
+});
+
+describe("shouldShowExamples", () => {
+    it("returns true when not all forms are accepted", () => {
+        const answerForms: readonly PerseusNumericInputAnswerForm[] = [
+            {
+                name: "integer",
+                simplify: "optional",
+            },
+            {
+                name: "proper",
+                simplify: "required",
+            },
+        ];
+        expect(shouldShowExamples(answerForms)).toBe(true);
+    });
+
+    it("returns false when all forms are accepted", () => {
+        const answerForms: readonly PerseusNumericInputAnswerForm[] = [
+            {
+                name: "integer",
+                simplify: "optional",
+            },
+            {
+                name: "proper",
+                simplify: "required",
+            },
+            {
+                name: "improper",
+                simplify: "optional",
+            },
+            {
+                name: "mixed",
+                simplify: "required",
+            },
+            {
+                name: "decimal",
+                simplify: "optional",
+            },
+            {
+                name: "pi",
+                simplify: "required",
+            },
+        ];
+        expect(shouldShowExamples(answerForms)).toBe(false);
+    });
+
+    it("returns false when no forms are accepted", () => {
+        const answerForms = [];
+        expect(shouldShowExamples(answerForms)).toBe(false);
+    });
+});