@simplybusiness/mobius 4.8.7 → 4.9.0

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();

package/src/components/TextField/TextField.tsx

@@ -9,7 +9,11 @@ import {
   RefAttributes,
   forwardRef,
 } from "react";
-import { UseTextFieldProps, useTextField } from "../../hooks";
+import {
+  UseTextFieldProps,
+  useTextField,
+  useValidationClasses,
+} from "../../hooks";
 import { DOMProps, FocusEvents } from "../../types";
 import { ForwardedRefComponent } from "../../types/components";
 import { ErrorMessage } from "../ErrorMessage";
@@ -56,6 +60,7 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
       isDisabled,
       type = "text",
       validationState,
+      isInvalid,
       className,
       label,
       errorMessage,
@@ -75,37 +80,43 @@ const TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =
 
     const hidden = type === "hidden";
 
+    const validationClasses = useValidationClasses({
+      validationState,
+      isInvalid,
+    });
+
     const textfieldClasses = {
       "--is-disabled": isDisabled,
-      "--is-valid": validationState === "valid",
-      "--is-invalid": validationState === "invalid",
       "--is-required": typeof isRequired === "boolean" && isRequired,
       "--is-optional": typeof isRequired === "boolean" && !isRequired,
       "--is-hidden": hidden,
       [className || ""]: true,
     };
 
-    const labelClasses = classNames({
-      "--is-disabled": isDisabled,
-      "--is-valid": validationState === "valid",
-      "--is-invalid": validationState === "invalid",
-    });
+    const sharedClasses = classNames(validationClasses, textfieldClasses);
+
+    const labelClasses = classNames(
+      {
+        "--is-disabled": isDisabled,
+      },
+      validationClasses,
+    );
 
     const containerClasses = classNames(
       "mobius",
       "mobius/TextField",
-      textfieldClasses,
+      sharedClasses,
     );
 
     const inputClasses = classNames(
       "mobius",
       "mobius/TextInput",
-      textfieldClasses,
+      sharedClasses,
     );
 
     const inputWrapperClasses = classNames(
       "mobius/TextFieldInputWrapper",
-      textfieldClasses,
+      sharedClasses,
     );
 
     return (

package/src/hooks/index.tsx

@@ -1,9 +1,11 @@
 export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
+export * from "./useDeprecationWarning";
 export * from "./useDialog";
 export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";
+export * from "./useValidationClasses";
 export * from "./useWindowEvent";

package/src/hooks/useDeprecationWarning/index.ts

@@ -0,0 +1 @@
+export * from "./useDeprecationWarning";

package/src/hooks/useDeprecationWarning/useDeprecationWarning.test.ts

@@ -0,0 +1,51 @@
+import { renderHook } from "@testing-library/react";
+import { useDeprecationWarning } from "./useDeprecationWarning";
+
+const deprecationWarning = (prop: string) =>
+  `Deprecation warning: Mobius no longer supports the prop '${prop}'. Please refer to the documentation for more information.`;
+
+describe("useDeprecationWarning", () => {
+  describe("given there are no deprecated props", () => {
+    it("should not log a warning", () => {
+      const warnSpy = jest.spyOn(console, "warn").mockImplementation();
+
+      renderHook(() => useDeprecationWarning({}));
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("given deprecated props are passed", () => {
+    it("should log a warning for each deprecated prop", () => {
+      const warnSpy = jest.spyOn(console, "warn").mockImplementation();
+
+      renderHook(() =>
+        useDeprecationWarning({
+          size: "large",
+          appElement: "body",
+          preventCloseOnEsc: true,
+          shouldFocusAfterRender: true,
+          parentSelector: "#modal-parent",
+        }),
+      );
+
+      expect(warnSpy).toHaveBeenCalledTimes(5);
+
+      const warningSize = deprecationWarning("size");
+      const warningAppElement = deprecationWarning("appElement");
+      const warningPreventCloseOnEsc = deprecationWarning("preventCloseOnEsc");
+      const warningShouldFocusAfterRender = deprecationWarning(
+        "shouldFocusAfterRender",
+      );
+      const warningParentSelector = deprecationWarning("parentSelector");
+
+      expect(warnSpy).toHaveBeenCalledWith(warningSize);
+      expect(warnSpy).toHaveBeenCalledWith(warningAppElement);
+      expect(warnSpy).toHaveBeenCalledWith(warningPreventCloseOnEsc);
+      expect(warnSpy).toHaveBeenCalledWith(warningShouldFocusAfterRender);
+      expect(warnSpy).toHaveBeenCalledWith(warningParentSelector);
+
+      warnSpy.mockRestore();
+    });
+  });
+});

package/src/hooks/useDeprecationWarning/useDeprecationWarning.ts

@@ -0,0 +1,33 @@
+import { useRef } from "react";
+
+export type UseDeprecationWarningProps = Record<string, unknown>;
+
+export const useDeprecationWarning = (props: UseDeprecationWarningProps) => {
+  const hasWarned = useRef<boolean>(false);
+  const deprecatedProps = Object.entries(props).reduce<string[]>(
+    (acc, [key, value]) => {
+      if (value) {
+        acc.push(key);
+      }
+
+      return acc;
+    },
+    [],
+  );
+
+  const noDeprecatedProps = deprecatedProps.length === 0;
+
+  if (noDeprecatedProps) {
+    return;
+  }
+
+  if (!hasWarned.current) {
+    deprecatedProps.forEach(prop => {
+      console.warn(
+        `Deprecation warning: Mobius no longer supports the prop '${prop}'. Please refer to the documentation for more information.`,
+      );
+    });
+
+    hasWarned.current = true;
+  }
+};

package/src/hooks/useTextField/types.tsx

@@ -1,9 +1,10 @@
 import { InputHTMLAttributes } from "react";
 import { UseLabelProps, UseLabelReturn } from "../useLabel/useLabel";
-import { FocusEvents } from "../../types";
+import { FocusEvents, Validation } from "../../types";
 
 export type UseTextFieldProps = UseLabelProps &
   FocusEvents &
+  Validation &
   Pick<
     InputHTMLAttributes<HTMLInputElement>,
     | "defaultValue"
@@ -41,7 +42,6 @@ export type UseTextFieldProps = UseLabelProps &
     isDisabled?: boolean | undefined;
     isReadOnly?: boolean | undefined;
     isRequired?: boolean | undefined;
-    validationState?: "valid" | "invalid" | undefined;
     description?: string | undefined;
     errorMessage?: string | undefined;
     "aria-describedby"?: string | undefined;

package/src/hooks/useTextField/useTextField.test.tsx

@@ -137,27 +137,25 @@ describe("useTextField", () => {
     });
   });
 
-  describe("validationState", () => {
-    it("should set aria-invalid to true when validationState is invalid", () => {
-      render(<WrapperComponent label={TEST_LABEL} validationState="invalid" />);
+  describe("validation", () => {
+    it("should set aria-invalid to true when isInvalid is set to true", () => {
+      render(<WrapperComponent label={TEST_LABEL} isInvalid />);
       expect(screen.getByLabelText(TEST_LABEL)).toHaveAttribute(
         "aria-invalid",
         "true",
       );
     });
 
-    it("should set aria-invalid to false when validationState is valid", () => {
-      render(<WrapperComponent label={TEST_LABEL} validationState="valid" />);
+    it("should set aria-invalid to false when isInvalid is set to false", () => {
+      render(<WrapperComponent label={TEST_LABEL} isInvalid={false} />);
       expect(screen.getByLabelText(TEST_LABEL)).toHaveAttribute(
         "aria-invalid",
         "false",
       );
     });
 
-    it("should not set aria-invalid when validationState is missing", () => {
-      render(
-        <WrapperComponent label={TEST_LABEL} validationState={undefined} />,
-      );
+    it("should not set aria-invalid when isInvalid is not provided", () => {
+      render(<WrapperComponent label={TEST_LABEL} />);
       expect(screen.getByLabelText(TEST_LABEL)).not.toHaveAttribute(
         "aria-invalid",
       );

package/src/hooks/useTextField/useTextField.tsx

@@ -35,12 +35,7 @@ export function useTextField(props: UseTextFieldProps): UseTextFieldReturn {
       disabled: isDisabled,
       readOnly: isReadOnly,
       "aria-required": isRequired === true ? true : undefined,
-      "aria-invalid":
-        props.validationState === "invalid"
-          ? true
-          : props.validationState === "valid"
-            ? false
-            : undefined,
+      "aria-invalid": props.isInvalid,
       "aria-describedby": ariaDescribedBy,
       "aria-errormessage": props["aria-errormessage"],
 

package/src/hooks/useValidationClasses/index.ts

@@ -0,0 +1 @@
+export * from "./useValidationClasses";

package/src/hooks/useValidationClasses/useValidationClasses.test.ts

@@ -0,0 +1,85 @@
+import { renderHook } from "@testing-library/react";
+import { useValidationClasses } from "./useValidationClasses";
+
+describe("useValidationClasses", () => {
+  describe("given validationState prop is used", () => {
+    it("should warn about deprecation", () => {
+      const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+      const validationState = "valid";
+
+      renderHook(() => useValidationClasses({ validationState }));
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "Deprecation warning: Mobius no longer supports the prop 'validationState'. Please refer to the documentation for more information.",
+      );
+
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe("validationState", () => {
+    beforeEach(() => {
+      jest.spyOn(console, "warn").mockImplementation(() => {});
+    });
+
+    describe("given validationState is set to invalid", () => {
+      it("should return '--is-invalid'", () => {
+        const { result } = renderHook(() =>
+          useValidationClasses({ validationState: "invalid" }),
+        );
+
+        expect(result.current).toBe("--is-invalid");
+      });
+    });
+
+    describe("given validationState is set to valid", () => {
+      it("should return '--is-valid'", () => {
+        const { result } = renderHook(() =>
+          useValidationClasses({ validationState: "valid" }),
+        );
+
+        expect(result.current).toBe("--is-valid");
+      });
+    });
+
+    describe("given validationState is set to undefined", () => {
+      it("should return an empty string", () => {
+        const { result } = renderHook(() =>
+          useValidationClasses({ validationState: undefined }),
+        );
+
+        expect(result.current).toBe("");
+      });
+    });
+  });
+
+  describe("given isInvalid is set to true", () => {
+    it("should return '--is-invalid'", () => {
+      const { result } = renderHook(() =>
+        useValidationClasses({ isInvalid: true }),
+      );
+
+      expect(result.current).toBe("--is-invalid");
+    });
+  });
+
+  describe("given isInvalid is set to false", () => {
+    it("should return '--is-valid'", () => {
+      const { result } = renderHook(() =>
+        useValidationClasses({ isInvalid: false }),
+      );
+
+      expect(result.current).toBe("--is-valid");
+    });
+  });
+
+  describe("given isInvalid is set to undefined", () => {
+    it("should return an empty string", () => {
+      const { result } = renderHook(() =>
+        useValidationClasses({ isInvalid: undefined }),
+      );
+
+      expect(result.current).toBe("");
+    });
+  });
+});

package/src/hooks/useValidationClasses/useValidationClasses.ts

@@ -0,0 +1,23 @@
+import { Validation } from "../../types";
+import { useDeprecationWarning } from "../useDeprecationWarning";
+
+export type GetValidationClassesProps = Pick<
+  Validation,
+  "validationState" | "isInvalid"
+>;
+
+export const useValidationClasses = (props: GetValidationClassesProps) => {
+  const { validationState, isInvalid } = props;
+
+  useDeprecationWarning({ validationState });
+
+  if (isInvalid || validationState === "invalid") {
+    return "--is-invalid";
+  }
+
+  if (isInvalid === false || validationState === "valid") {
+    return "--is-valid";
+  }
+
+  return "";
+};