feat: Whole number option on Number Input

editor.planx.uk/src/@planx/components/NumberInput/Editor.tsx

@@ -3,10 +3,7 @@ import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import type { NumberInput } from "@planx/components/NumberInput/model";
 import { parseNumberInput } from "@planx/components/NumberInput/model";
-import {
-  EditorProps,
-  ICONS,
-} from "@planx/components/ui";
+import { EditorProps, ICONS } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
@@ -91,6 +88,22 @@ export default function NumberInputComponent(props: Props): FCReturn {
               label="Allow negative numbers to be input"
             />
           </InputRow>
+          <InputRow>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={formik.values.onlyWholeNumbers}
+                  onChange={() =>
+                    formik.setFieldValue(
+                      "onlyWholeNumbers",
+                      !formik.values.onlyWholeNumbers,
+                    )
+                  }
+                />
+              }
+              label="Only allow whole numbers"
+            />
+          </InputRow>
         </ModalSectionContent>
       </ModalSection>
       <ModalFooter formik={formik} />

editor.planx.uk/src/@planx/components/NumberInput/Public.test.tsx

@@ -84,6 +84,56 @@ test("allows negative numbers to be input when toggled on by editor", async () =
   expect(handleSubmit).toHaveBeenCalledWith({ data: { fahrenheit: -10 } });
 });
 
+test("requires only whole numbers to be input when toggled on by editor", async () => {
+  const handleSubmit = vi.fn();
+
+  const { user } = setup(
+    <NumberInput
+      fn="fahrenheit"
+      title="What's the temperature?"
+      handleSubmit={handleSubmit}
+      onlyWholeNumbers={true}
+    />,
+  );
+
+  expect(screen.getByRole("heading")).toHaveTextContent(
+    "What's the temperature?",
+  );
+
+  const textArea = screen.getByLabelText("What's the temperature?");
+
+  await user.type(textArea, "10.06");
+  await user.click(screen.getByTestId("continue-button"));
+
+  expect(screen.getByText("Enter a whole number")).toBeInTheDocument();
+  expect(handleSubmit).not.toHaveBeenCalledWith({
+    data: { fahrenheit: 10.06 },
+  });
+});
+
+test("allows only whole numbers to be input when toggled on by editor", async () => {
+  const handleSubmit = vi.fn();
+
+  const { user } = setup(
+    <NumberInput
+      fn="fahrenheit"
+      title="What's the temperature?"
+      handleSubmit={handleSubmit}
+      onlyWholeNumbers={true}
+    />,
+  );
+
+  expect(screen.getByRole("heading")).toHaveTextContent(
+    "What's the temperature?",
+  );
+
+  const textArea = screen.getByLabelText("What's the temperature?");
+
+  await user.type(textArea, "10");
+  await user.click(screen.getByTestId("continue-button"));
+  expect(handleSubmit).toHaveBeenCalledWith({ data: { fahrenheit: 10 } });
+});
+
 test("requires a value before being able to continue", async () => {
   const handleSubmit = vi.fn();
 

editor.planx.uk/src/@planx/components/NumberInput/model.ts

@@ -8,6 +8,7 @@ export interface NumberInput extends BaseNodeData {
   fn?: string;
   units?: string;
   allowNegatives?: boolean;
+  onlyWholeNumbers?: boolean;
 }
 
 export type UserData = number;
@@ -28,6 +29,7 @@ export const parseNumberInput = (
   fn: data?.fn || "",
   units: data?.units,
   allowNegatives: data?.allowNegatives || false,
+  onlyWholeNumbers: data?.onlyWholeNumbers || false,
   ...parseBaseNodeData(data),
 });
 
@@ -52,6 +54,19 @@ export const numberInputValidationSchema = (input: NumberInput) =>
         }
         return value === "0" ? true : Boolean(parseNumber(value));
       },
+    })
+    .test({
+      name: "check for a whole number",
+      message: "Enter a whole number",
+      test: (value: string | undefined) => {
+        if (!value) {
+          return false;
+        }
+        if (input.onlyWholeNumbers && !Number.isInteger(Number(value))) {
+          return false;
+        }
+        return true;
+      },
     });
 
 export const validationSchema = (input: NumberInput) =>