@simplybusiness/mobius 4.8.6 → 4.8.8

package/src/components/NumberField/NumberField.stories.tsx

@@ -9,15 +9,6 @@ const meta: Meta<typeof NumberField> = {
   title: "Forms/NumberField",
   component: NumberField,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     minValue: {
       control: {
         control: { type: "range" },
@@ -34,7 +25,7 @@ const meta: Meta<typeof NumberField> = {
         step: 1,
       },
     },
-    ...excludeControls("value"),
+    ...excludeControls("value", "validationState"),
   },
   args: {
     minValue: 0,
@@ -80,7 +71,7 @@ export const Valid: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
-    validationState: "valid",
+    isInvalid: false,
     defaultValue: 0,
     errorMessage: "",
     step: 1,
@@ -92,7 +83,7 @@ export const Invalid: StoryType = {
   render: (args: NumberFieldProps) => <NumberField {...args} />,
   args: {
     label: "Number field",
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "Error message",
     defaultValue: 0,
     step: 1,

package/src/components/NumberField/NumberField.tsx

@@ -12,22 +12,23 @@ import {
   useState,
 } from "react";
 import { DOMProps } from "../../types/dom";
-import { UseLabelProps, useLabel } from "../../hooks";
+import { UseLabelProps, useLabel, useValidationClasses } from "../../hooks";
 import { ForwardedRefComponent } from "../../types/components";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
+import { Validation } from "../../types";
 
 export type NumberFieldElementType = HTMLInputElement;
 
 export interface NumberFieldProps
   extends DOMProps,
+    Validation,
     UseLabelProps,
     RefAttributes<NumberFieldElementType> {
   id?: string;
   /** Custom class name for setting specific CSS */
   className?: string;
-  validationState?: "valid" | "invalid" | undefined;
   /** The smallest value allowed for the input. */
   minValue?: number;
   /** The largest value allowed for the input. */
@@ -69,6 +70,7 @@ export const NumberField: ForwardedRefComponent<
     className,
     errorMessage,
     validationState,
+    isInvalid,
     isReadOnly,
     minValue,
     maxValue,
@@ -94,19 +96,29 @@ export const NumberField: ForwardedRefComponent<
     "--is-optional": optional,
   });
 
-  const inputClasses = classNames("mobius/NumberFieldInput", className, {
-    "--is-required": required,
-    "--is-optional": optional,
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
-    "--is-disabled": isDisabled,
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
   });
 
-  const labelClasses = classNames("mobius/NumberFieldLabel", {
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
-    "--is-disabled": isDisabled,
-  });
+  const inputClasses = classNames(
+    "mobius/NumberFieldInput",
+    className,
+    {
+      "--is-required": required,
+      "--is-optional": optional,
+      "--is-disabled": isDisabled,
+    },
+    validationClasses,
+  );
+
+  const labelClasses = classNames(
+    "mobius/NumberFieldLabel",
+    {
+      "--is-disabled": isDisabled,
+    },
+    validationClasses,
+  );
 
   const errorMessageId = useId();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
@@ -165,7 +177,7 @@ export const NumberField: ForwardedRefComponent<
           required={required}
           aria-describedby={describedBy}
           aria-errormessage={shouldErrorMessageShow}
-          aria-invalid={validationState === "invalid"}
+          aria-invalid={isInvalid}
           readOnly={isReadOnly}
           disabled={isDisabled}
           autoComplete="off"

package/src/components/PasswordField/PasswordField.stories.tsx

@@ -9,20 +9,11 @@ const meta: Meta<typeof PasswordField> = {
   title: "Forms/PasswordField",
   component: PasswordField,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     type: {
       control: { type: "radio" },
       options: ["text", "password"],
     },
-    ...excludeControls("description"),
+    ...excludeControls("description", "validationState"),
   },
   args: {
     isReadOnly: false,

package/src/components/Radio/Radio.stories.tsx

@@ -12,15 +12,6 @@ const meta: Meta<typeof RadioGroup> = {
   title: "Forms/Radio",
   component: RadioGroup,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     orientation: {
       control: { type: "radio" },
       options: ["horizontal", "vertical"],
@@ -35,6 +26,7 @@ const meta: Meta<typeof RadioGroup> = {
       "setSelected",
       "defaultValue",
       "value",
+      "validationState",
     ),
   },
   decorators: [
@@ -107,7 +99,7 @@ export const Valid: StoryType = {
     isDisabled: false,
     isRequired: false,
     errorMessage: "",
-    validationState: "valid",
+    isInvalid: false,
     orientation: "vertical",
   },
 };
@@ -124,7 +116,7 @@ export const Invalid: StoryType = {
     isDisabled: false,
     isRequired: false,
     errorMessage: "Please select a color",
-    validationState: "invalid",
+    isInvalid: true,
     orientation: "vertical",
   },
 };

package/src/components/Radio/Radio.test.tsx

@@ -375,7 +375,7 @@ describe("Radio", () => {
 
     it("sets classes for valid state", () => {
       const { container } = render(
-        <RadioGroup label="Color" validationState="valid">
+        <RadioGroup label="Color" isInvalid={false}>
           <Radio value="red">Red</Radio>
           <Radio value="blue">Blue</Radio>
         </RadioGroup>,
@@ -386,7 +386,7 @@ describe("Radio", () => {
 
     it("sets classes for invalid state", () => {
       const { container } = render(
-        <RadioGroup label="Color" validationState="invalid">
+        <RadioGroup label="Color" isInvalid>
           <Radio value="red">Red</Radio>
           <Radio value="blue">Blue</Radio>
         </RadioGroup>,
@@ -448,7 +448,7 @@ describe("Radio", () => {
   describe("given an invalid state", () => {
     it("renders aria-invalid attribute on container", () => {
       const { container } = render(
-        <RadioGroup label="Color" validationState="invalid">
+        <RadioGroup label="Color" isInvalid>
           <Radio value="red">Red</Radio>
           <Radio value="blue">Blue</Radio>
         </RadioGroup>,

package/src/components/Radio/RadioGroup.tsx

@@ -19,11 +19,14 @@ import { HTMLElementEvent } from "../../types/events";
 import { spaceDelimitedList } from "../../utils/spaceDelimitedList";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
+import { Validation } from "../../types";
+import { useValidationClasses } from "../../hooks";
 
 export type RadioGroupElementType = HTMLDivElement;
 
 export interface RadioGroupProps
   extends DOMProps,
+    Validation,
     RefAttributes<RadioGroupElementType> {
   children: ReactNode;
   className?: string;
@@ -39,8 +42,6 @@ export interface RadioGroupProps
   "aria-errormessage"?: string;
   // Identifies the element (or elements) that describes the object.
   "aria-describedby"?: string;
-  // Whether the input should display its "valid" or "invalid" visual styling.
-  validationState?: "valid" | "invalid";
   // Whether user input is required on the input before form submission.
   isRequired?: boolean;
   // Whether the input is disabled.
@@ -82,6 +83,7 @@ const RadioGroup: ForwardedRefComponent<
     isDisabled = false,
     isRequired,
     validationState,
+    isInvalid,
     orientation = "vertical",
     className,
     errorMessage,
@@ -94,10 +96,12 @@ const RadioGroup: ForwardedRefComponent<
   } = props;
   const defaultSelected = getDefaultVal(children, defaultValue);
   const [selected, setSelected] = useState<string>(defaultSelected);
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid,
+  });
   const radioClasses = {
     "--is-disabled": isDisabled,
-    "--is-valid": validationState === "valid",
-    "--is-invalid": validationState === "invalid",
     "--is-required": typeof isRequired === "boolean" && isRequired,
     "--is-optional": typeof isRequired === "boolean" && !isRequired,
     [`--is-${orientation}`]: true,
@@ -107,11 +111,12 @@ const RadioGroup: ForwardedRefComponent<
     "mobius",
     "mobius/RadioGroup",
     radioClasses,
+    validationClasses,
   );
   const radioWrapperClasses = classNames("mobius/RadioWrapper", {
     [`--is-${orientation}`]: true,
   });
-  const labelClasses = classNames(radioClasses);
+  const labelClasses = classNames(radioClasses, validationClasses);
   const errorMessageId = useId();
   const defaultNameAttrId = useId();
   const nameAttribute = name || defaultNameAttrId;
@@ -128,7 +133,7 @@ const RadioGroup: ForwardedRefComponent<
       aria-describedby={props["aria-describedby"]}
       aria-disabled={isDisabled}
       aria-errormessage={shouldErrorMessageShow}
-      aria-invalid={validationState === "invalid"}
+      aria-invalid={isInvalid}
       aria-label={props["aria-label"]}
       aria-labelledby={props["aria-labelledby"] || labelId}
       aria-orientation={orientation}

package/src/components/Select/Select.mdx

@@ -106,7 +106,7 @@ import { Select, Option } from "@simplybusiness/mobius";
   name="color"
   label="Colors"
   defaultValue="green"
-  validationState="valid"
+  isInvalid={false}
 >
   <Option key="none" value="" isDisabled>
     Please select a color
@@ -135,7 +135,7 @@ import { Select, Option } from "@simplybusiness/mobius";
   name="color"
   label="Colors"
   defaultValue="green"
-  validationState="invalid"
+  isInvalid
   errorMessage="Unacceptable color"
 >
   <Option key="none" value="" isDisabled>

package/src/components/Select/Select.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Option } from "../Option";
 import { Select, SelectProps } from "./Select";
+import { excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof Select>;
 
@@ -9,19 +10,11 @@ const meta: Meta<typeof Select> = {
   title: "Forms/Select",
   component: Select,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     value: {
       control: { type: "select" },
       options: ["", "red", "blue", "green"],
     },
+    ...excludeControls("validationState"),
   },
   decorators: [
     Story => (
@@ -135,7 +128,7 @@ export const Valid: StoryType = {
     name: "color",
     label: "Colors",
     defaultValue: "green",
-    validationState: "valid",
+    isInvalid: false,
     errorMessage: "",
     isDisabled: false,
     isRequired: false,
@@ -163,7 +156,7 @@ export const Invalid: StoryType = {
     name: "color",
     label: "Colors",
     defaultValue: "green",
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "Unacceptable color",
     isDisabled: false,
     isRequired: false,

package/src/components/Select/Select.test.tsx

@@ -204,7 +204,7 @@ describe("Select", () => {
 
     it("includes valid state class name", () => {
       render(
-        <Select label="Color" data-testid="test" validationState="valid">
+        <Select label="Color" data-testid="test" isInvalid={false}>
           <Option>Red</Option>
           <Option>Blue</Option>
         </Select>,

package/src/components/Select/Select.tsx

@@ -17,6 +17,7 @@ import { ErrorMessage } from "../ErrorMessage";
 import { Flex } from "../Flex";
 import { Label } from "../Label";
 import { OptionProps } from "../Option";
+import { useValidationClasses } from "../../hooks";
 
 export type SelectElementType = HTMLSelectElement;
 export interface SelectProps
@@ -43,6 +44,7 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
       label,
       onChange,
       validationState,
+      isInvalid,
       errorMessage,
       isDisabled = false,
       isRequired,
@@ -54,30 +56,35 @@ const Select: ForwardedRefComponent<SelectProps, SelectElementType> =
       ...otherProps,
     });
 
+    const validationClasses = useValidationClasses({
+      validationState,
+      isInvalid,
+    });
+
     const stateClasses = {
       "--is-disabled": isDisabled,
-      "--is-valid": validationState === "valid",
-      "--is-invalid": validationState === "invalid",
       "--is-required": typeof isRequired === "boolean" && isRequired,
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
     };
 
+    const sharedClasses = classNames(validationClasses, stateClasses);
+
     const wrapperClasses = classNames(
       "mobius/SelectWrapper",
-      stateClasses,
+      sharedClasses,
       otherProps.className,
     );
     const selectClasses = classNames(
       "mobius/Select",
-      stateClasses,
+      sharedClasses,
       otherProps.className,
     );
     const labelClasses = classNames(
       "mobius/Label",
-      stateClasses,
+      sharedClasses,
       otherProps.className,
     );
-    const iconClasses = classNames("mobius/SelectIcon", stateClasses);
+    const iconClasses = classNames("mobius/SelectIcon", sharedClasses);
     const errorMessageId = useId();
     const shouldErrorMessageShow = errorMessage ? errorMessageId : undefined;
     const describedBy = spaceDelimitedList([

package/src/components/TextArea/TextArea.stories.tsx

@@ -9,16 +9,7 @@ const meta: Meta<typeof TextArea> = {
   title: "Forms/TextArea",
   component: TextArea,
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
-    ...excludeControls("description"),
+    ...excludeControls("description", "validationState"),
   },
   args: {
     isReadOnly: false,
@@ -75,7 +66,7 @@ export const WithError: StoryType = {
     defaultValue: "John Doe",
     isDisabled: false,
     errorMessage: "This is an error message",
-    validationState: "invalid",
+    isInvalid: true,
   },
 };
 
@@ -87,7 +78,7 @@ export const Valid: StoryType = {
     defaultValue: "John Doe",
     isDisabled: false,
     errorMessage: "",
-    validationState: "valid",
+    isInvalid: false,
   },
 };
 
@@ -99,7 +90,7 @@ export const Invalid: StoryType = {
     defaultValue: "John Doe",
     isDisabled: false,
     errorMessage: "",
-    validationState: "invalid",
+    isInvalid: true,
   },
 };
 

package/src/components/TextArea/TextArea.test.tsx

@@ -102,16 +102,12 @@ describe("TextArea", () => {
     });
 
     it("includes valid class name", () => {
-      render(
-        <TextArea label="Test" data-testid="test" validationState="valid" />,
-      );
+      render(<TextArea label="Test" data-testid="test" isInvalid={false} />);
       expect(screen.getByTestId("test")).toHaveClass("--is-valid");
     });
 
     it("includes invalid class name", () => {
-      render(
-        <TextArea label="Test" data-testid="test" validationState="invalid" />,
-      );
+      render(<TextArea label="Test" data-testid="test" isInvalid />);
       expect(screen.getByTestId("test")).toHaveClass("--is-invalid");
     });
   });

package/src/components/TextArea/TextArea.tsx

@@ -8,7 +8,11 @@ import { Label } from "../Label";
 import { ForwardedRefComponent } from "../../types/components";
 import { Flex } from "../Flex";
 import { ErrorMessage } from "../ErrorMessage";
-import { UseTextFieldProps, useTextField } from "../../hooks";
+import {
+  UseTextFieldProps,
+  useTextField,
+  useValidationClasses,
+} from "../../hooks";
 
 export type TextAreaElementType = HTMLTextAreaElement;
 
@@ -18,7 +22,6 @@ export interface TextAreaProps
     RefAttributes<TextAreaElementType> {
   className?: string;
   errorMessage?: string;
-  validationState?: "valid" | "invalid";
 }
 
 export type TextAreaRef = Ref<TextAreaElementType>;
@@ -31,6 +34,7 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
       errorMessage,
       label,
       validationState,
+      isInvalid,
       ...otherProps
     } = props;
 
@@ -38,15 +42,17 @@ const TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =
 
     // Set class name for atom, including interaction state
     const classes = classNames("mobius", "mobius/TextArea", className);
-    const inputClasses = classNames("mobius/TextAreaInput", {
-      "--is-valid": validationState === "valid",
-      "--is-invalid": validationState === "invalid",
-    });
-    const labelClasses = classNames({
-      "--is-valid": validationState === "valid",
-      "--is-invalid": validationState === "invalid",
-      "--is-disabled": isDisabled,
+    const validationClasses = useValidationClasses({
+      validationState,
+      isInvalid,
     });
+    const inputClasses = classNames("mobius/TextAreaInput", validationClasses);
+    const labelClasses = classNames(
+      {
+        "--is-disabled": isDisabled,
+      },
+      validationClasses,
+    );
 
     return (
       <Flex flexDirection="column" className={classes}>

package/src/components/TextField/TextField.stories.tsx

@@ -16,15 +16,6 @@ const meta: Meta<typeof TextField> = {
   component: TextField,
   excludeStories: ["ExampleHorizontal"],
   argTypes: {
-    validationState: {
-      options: ["valid", "invalid", "neither"],
-      control: { type: "radio" },
-      mapping: {
-        valid: "valid",
-        invalid: "invalid",
-        neither: "",
-      },
-    },
     type: {
       options: ["text", "password", "email", "tel", "url", "hidden"],
       control: { type: "radio" },
@@ -35,6 +26,7 @@ const meta: Meta<typeof TextField> = {
       "prefixOutside",
       "suffixInside",
       "suffixOutside",
+      "validationState",
     ),
   },
   args: {
@@ -104,7 +96,7 @@ export const Valid: StoryType = {
     defaultValue: "john.doe@email.com",
     type: "text",
     isDisabled: false,
-    validationState: "valid",
+    isInvalid: false,
     errorMessage: "",
   },
 };
@@ -129,7 +121,7 @@ export const Invalid: StoryType = {
     defaultValue: "john.doe@email.com",
     type: "text",
     isDisabled: false,
-    validationState: "invalid",
+    isInvalid: true,
     errorMessage: "This is an error message",
   },
 };

package/src/components/TextField/TextField.test.tsx

@@ -96,22 +96,14 @@ describe("Test for TextField", () => {
 
       it("includes valid class name", () => {
         const { container } = render(
-          <TextField
-            label="TextField"
-            data-testid="test"
-            validationState="valid"
-          />,
+          <TextField label="TextField" data-testid="test" isInvalid={false} />,
         );
         expect(container.firstChild).toHaveClass("--is-valid");
       });
 
       it("includes invalid class name", () => {
         const { container } = render(
-          <TextField
-            label="TextField"
-            data-testid="test"
-            validationState="invalid"
-          />,
+          <TextField label="TextField" data-testid="test" isInvalid />,
         );
         expect(container.firstChild).toHaveClass("--is-invalid");
       });
@@ -149,12 +141,12 @@ describe("Test for TextField", () => {
       });
 
       it("includes valid class name", () => {
-        render(<TextField label="TextField" validationState="valid" />);
+        render(<TextField label="TextField" isInvalid={false} />);
         expect(screen.getByLabelText("TextField")).toHaveClass("--is-valid");
       });
 
       it("includes invalid class name", () => {
-        render(<TextField label="TextField" validationState="invalid" />);
+        render(<TextField label="TextField" isInvalid />);
         expect(screen.getByLabelText("TextField")).toHaveClass("--is-invalid");
       });
 
@@ -185,7 +177,7 @@ describe("Test for TextField", () => {
           label="Name"
           name="name"
           errorMessage="Required"
-          validationState="invalid"
+          isInvalid
         />,
       );
       expect(getByLabelText("Name").getAttribute("aria-invalid")).toBeTruthy();