@simplybusiness/mobius 4.8.6 → 4.8.8

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 "";
+};