@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Form/Input/Input.test.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef } from 'react';
-import { Input, Props } from './Input';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef, useState, Fragment } from "react";
+import { Input, Props, Type } from "./Input";
+import { fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Label } from "../Label/Label";
 
 const defaultParams: Props = {
-  name: 'input',
-  type: 'text',
+  name: "input",
+  type: "text"
 };
 
 const createInput = (params?: (defaultParams: Props) => Props) => {
@@ -14,25 +15,54 @@ const createInput = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Input {...parameters} data-testid="input" />);
-  const input = queries.getByTestId('input');
+  const input = queries.getByTestId("input");
 
   return {
     ...queries,
-    input,
+    input
   };
 };
 
-describe('Input should render', () => {
-  it('renders without crashing and has a name and type', () => {
+const CreateInputComponent = ({
+  onValueChange,
+  type
+}: {
+  onValueChange: (value: string) => void;
+  type: Type;
+}) => {
+  const [inputValue, setInputValue] = useState("");
+
+  useEffect(() => {
+    if (inputValue !== "") {
+      onValueChange(inputValue);
+    }
+  }, [inputValue]);
+
+  return (
+    <Fragment>
+      <Label htmlFor="sample-input">Test</Label>
+      <Input
+        name="sample_input"
+        type={type}
+        id="sample-input"
+        value={inputValue}
+        onChange={e => setInputValue(e.target.value)}
+      />
+    </Fragment>
+  );
+};
+
+describe("Input should render", () => {
+  it("renders without crashing and has a name and type", () => {
     const { input } = createInput();
     expect(input).toBeTruthy();
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -48,114 +78,132 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('Should have the appropriate attributes', () => {
-  it('is disabled and has a class', () => {
-    const { input } = createInput((defaultParams) => ({
+describe("Should have the appropriate attributes", () => {
+  it("is disabled and has a class", () => {
+    const { input } = createInput(defaultParams => ({
       ...defaultParams,
       disabled: true,
-      className: 'classname',
+      className: "classname"
     }));
 
-    expect(input).toHaveAttribute('disabled');
-    expect(input).toHaveClass('classname');
+    expect(input).toHaveAttribute("disabled");
+    expect(input).toHaveClass("classname");
   });
 });
 
-describe('Should render all different types of inputs', () => {
-  it('should render a text input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'text' }));
+describe("Should render all different types of inputs", () => {
+  it.each([
+    ["text", "testing", "testing"],
+    ["email", "testing@testing.com", "testing@testing.com"],
+    ["tel", "06123456789", "06123456789"],
+    ["number", "1234567890", "1234567890"],
+    ["search", "example", "example"],
+    ["time", "1234", "12:34"],
+    ["url", "https://www.onewelcome.com", "https://www.onewelcome.com"]
+  ])(
+    "renders a %p input with %p as a value",
+    async (type: string, value: string, result: string) => {
+      let changedValue = "";
 
-    expect(input).toHaveAttribute('type', 'text');
-  });
+      const { findByLabelText } = render(
+        <CreateInputComponent type={type as Type} onValueChange={value => (changedValue = value)} />
+      );
 
-  it('should render a email input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'email' }));
+      const input = await findByLabelText(/Test/);
 
-    expect(input).toHaveAttribute('type', 'email');
-  });
-
-  it('should render a tel input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'tel' }));
-
-    expect(input).toHaveAttribute('type', 'tel');
-  });
+      input.focus();
 
-  it('should render a number input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'number' }));
+      userEvent.keyboard(value);
 
-    expect(input).toHaveAttribute('type', 'number');
-  });
+      expect(changedValue).toBe(result);
+    }
+  );
 
-  it('should render a password input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'password' }));
+  it("should render a password input", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "password" }));
 
-    expect(input).toHaveAttribute('type', 'password');
+    expect(input).toHaveAttribute("type", "password");
   });
 
-  it('should render a search input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'search' }));
-
-    expect(input).toHaveAttribute('type', 'search');
-  });
+  it("should render a datetime input", async () => {
+    let changedValue = "";
 
-  it('should render a time input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'time' }));
+    const { findByLabelText } = render(
+      <CreateInputComponent type="datetime-local" onValueChange={value => (changedValue = value)} />
+    );
 
-    expect(input).toHaveAttribute('type', 'time');
-  });
+    const input = await findByLabelText(/Test/);
 
-  it('should render a url input', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'url' }));
+    const testValue = "2019-03-29T12:34";
+    fireEvent.change(input, { target: { value: testValue } });
 
-    expect(input).toHaveAttribute('type', 'url');
+    expect(changedValue).toBe(testValue);
   });
 
-  it('should render a datetime input', () => {
-    const { input } = createInput((defaultParams) => ({
-      ...defaultParams,
-      type: 'datetime-local',
-    }));
+  it("should be hidden", () => {
+    const { input } = createInput(defaultParams => ({ ...defaultParams, type: "hidden" }));
 
-    expect(input).toHaveAttribute('type', 'datetime-local');
-  });
-
-  it('should be hidden', () => {
-    const { input } = createInput((defaultParams) => ({ ...defaultParams, type: 'hidden' }));
-
-    expect(input.parentElement).toHaveClass('hidden');
-    expect(input).toHaveAttribute('type', 'hidden');
+    expect(input.parentElement).toHaveClass("hidden");
+    expect(input).toHaveAttribute("type", "hidden");
   });
 });
 
-describe('It should execute the listeners', () => {
-  it('fires event handlers', () => {
+describe("It should execute the listeners", () => {
+  it("fires event handlers", () => {
     const onChangeHandler = jest.fn();
     const onKeyUpHandler = jest.fn();
     const onKeyDownHandler = jest.fn();
 
-    const { input } = createInput((defaultParams) => ({
+    const { input } = createInput(defaultParams => ({
       ...defaultParams,
-      type: 'text',
+      type: "text",
       onKeyUp: onKeyUpHandler,
       onKeyDown: onKeyDownHandler,
-      onChange: onChangeHandler,
+      onChange: onChangeHandler
     }));
 
     input.focus();
 
     expect(input).toHaveFocus();
 
-    userEvent.keyboard('test');
+    userEvent.keyboard("test");
 
     expect(onKeyUpHandler).toHaveBeenCalled();
     expect(onKeyDownHandler).toHaveBeenCalled();
     expect(onChangeHandler).toHaveBeenCalled();
   });
 });
+
+describe("It should render prefix and suffix ", () => {
+  it("renders prefix and suffix", () => {
+    const prefix = "http://";
+    const suffix = ".com";
+    const { getByText } = createInput(defaultParams => ({
+      ...defaultParams,
+      prefix,
+      suffix
+    }));
+
+    expect(getByText(prefix)).toBeDefined();
+    expect(getByText(suffix)).toBeDefined();
+  });
+
+  it("error icon should be visible with suffix", () => {
+    const suffix = ".com";
+    const { input, getByText } = createInput(defaultParams => ({
+      ...defaultParams,
+      error: true,
+      suffix
+    }));
+
+    expect(input.querySelector("icon-warning")).toBeDefined();
+    expect(getByText(suffix)).toBeDefined();
+  });
+});

package/src/Form/Input/Input.tsx

@@ -1,31 +1,69 @@
-import React, { ComponentPropsWithRef, Ref, useEffect, useState } from 'react';
-import classes from './Input.module.scss';
-import readyclasses from '../../readyclasses.module.scss';
-import { Icon, Icons } from '../../Icon/Icon';
-import { FormElement } from '../form.interfaces';
+import React, { ComponentPropsWithRef, Ref, useEffect, useRef, useState } from "react";
+import classes from "./Input.module.scss";
+import readyclasses from "../../readyclasses.module.scss";
+import { Icon, Icons } from "../../Icon/Icon";
+import { FormElement } from "../form.interfaces";
 
-const dateTypes = ['date', 'time', 'datetime-local'] as const;
+const dateTypes = ["date", "time", "datetime-local"] as const;
 
 export type Type =
-  | 'text'
-  | 'email'
-  | 'file'
-  | 'number'
-  | 'password'
-  | 'search'
-  | 'tel'
-  | 'url'
-  | 'hidden'
+  | "text"
+  | "email"
+  | "file"
+  | "number"
+  | "password"
+  | "search"
+  | "tel"
+  | "url"
+  | "hidden"
   | typeof dateTypes[number];
 
-export interface Props extends ComponentPropsWithRef<'input'>, FormElement {
-  wrapperProps?: ComponentPropsWithRef<'div'>;
+export interface Props extends ComponentPropsWithRef<"input">, FormElement {
+  wrapperProps?: ComponentPropsWithRef<"div">;
   labeledBy?: string;
   type: Type;
   suffix?: string;
   prefix?: string;
 }
 
+const useErrorOffset = (
+  suffix: React.RefObject<HTMLDivElement>,
+  errorIcon: React.RefObject<HTMLDivElement>,
+  inputWrapper: React.RefObject<HTMLDivElement>,
+  error: boolean,
+  type: Type,
+  suffixContent: string = ""
+) => {
+  const [errorOffset, setErrorOffset] = useState({});
+  const [defaultErrorOffset, setDefaultErrorOffset] = useState<number | null>(null);
+
+  const getErrorIconOffset = () => parseFloat(getComputedStyle(errorIcon.current!).right);
+  const getInputPaddingRight = (input: HTMLDivElement) =>
+    (dateTypes as ReadonlyArray<string>).includes(type)
+      ? 0
+      : parseFloat(getComputedStyle(input).paddingRight);
+
+  useEffect(() => {
+    if (errorIcon.current && inputWrapper.current) {
+      let defaultOffset = defaultErrorOffset;
+      if (!defaultOffset) {
+        defaultOffset = getErrorIconOffset();
+        setDefaultErrorOffset(defaultOffset);
+      }
+
+      if (suffix.current && suffixContent) {
+        const inputPaddingRight = getInputPaddingRight(inputWrapper.current);
+        const prefixDifference = suffix.current.offsetWidth + inputPaddingRight + defaultOffset;
+        setErrorOffset({ right: `${prefixDifference}px` });
+      } else {
+        setErrorOffset({ right: `${defaultOffset}px` });
+      }
+    }
+  }, [suffix.current, errorIcon.current, inputWrapper.current, error, type, suffixContent]);
+
+  return { errorOffset };
+};
+
 export const Input = React.forwardRef(
   (
     {
@@ -46,6 +84,17 @@ export const Input = React.forwardRef(
     ref: Ref<HTMLInputElement>
   ) => {
     const [focus, setFocus] = useState(false);
+    const inputWrapperRef = useRef<HTMLDivElement>(null);
+    const errorIconRef = useRef<HTMLDivElement>(null);
+    const suffixRef = useRef<HTMLDivElement>(null);
+    const { errorOffset } = useErrorOffset(
+      suffixRef,
+      errorIconRef,
+      inputWrapperRef,
+      error,
+      type,
+      suffix
+    );
 
     useEffect(() => {
       if (name === undefined) {
@@ -53,45 +102,49 @@ export const Input = React.forwardRef(
       }
     }, []);
 
-    const inputClassNames = [classes['input']];
+    const inputClassNames = [classes["input"]];
 
     (dateTypes as ReadonlyArray<string>).includes(type) &&
-      inputClassNames.push(classes['remove-extra-indent']);
+      inputClassNames.push(classes["remove-extra-indent"]);
     className && inputClassNames.push(className);
 
-    const iconClassNames = [classes['warning']];
+    const iconClassNames = [classes["warning"]];
     (dateTypes as ReadonlyArray<string>).includes(type) &&
-      iconClassNames.push(classes['extra-indent']);
+      iconClassNames.push(classes["extra-indent"]);
 
-    const wrapperClasses = [classes['input-wrapper']];
+    const wrapperClasses = [classes["input-wrapper"]];
+    const outlineClasses = [classes["outline"]];
 
     wrapperProps?.className && wrapperClasses.push(wrapperProps.className);
-    type === 'hidden' && wrapperClasses.push(readyclasses['hidden']);
-    prefix && wrapperClasses.push(classes['prefix']);
-    suffix && wrapperClasses.push(classes['suffix']);
-    disabled && wrapperClasses.push(classes['disabled']);
-    error && wrapperClasses.push(classes['error']);
-    focus && wrapperClasses.push(classes['focus']);
+    type === "hidden" && wrapperClasses.push(readyclasses["hidden"]);
+    prefix && wrapperClasses.push(classes["prefix"]);
+    suffix && wrapperClasses.push(classes["suffix"]);
+    disabled &&
+      wrapperClasses.push(classes["disabled"]) &&
+      outlineClasses.push(classes["disabled"]);
+    error && wrapperClasses.push(classes["error"]) && outlineClasses.push(classes["error"]);
+    focus && wrapperClasses.push(classes["focus"]) && outlineClasses.push(classes["focus"]);
 
     return (
       <div
+        ref={inputWrapperRef}
         {...wrapperProps}
         style={{ ...style }}
-        className={`${classes['input-wrapper']} ${wrapperClasses.join(' ')}`}
+        className={`${classes["input-wrapper"]} ${wrapperClasses.join(" ")}`}
       >
         {prefix && (
-          <div data-prefix className={classes['prefix']}>
+          <div data-prefix className={classes["prefix"]}>
             <span>{prefix}</span>
           </div>
         )}
         <input
           {...rest}
           ref={ref}
-          onFocus={(event) => {
+          onFocus={event => {
             setFocus(true);
             onFocus && onFocus(event);
           }}
-          onBlur={(event) => {
+          onBlur={event => {
             setFocus(false);
             onBlur && onBlur(event);
           }}
@@ -99,14 +152,22 @@ export const Input = React.forwardRef(
           type={type}
           name={name}
           disabled={disabled}
-          className={inputClassNames.join(' ')}
+          className={inputClassNames.join(" ")}
         />
         {suffix && (
-          <div data-suffix className={classes['suffix']}>
+          <div ref={suffixRef} data-suffix className={classes["suffix"]}>
             <span>{suffix}</span>
           </div>
         )}
-        {error && <Icon className={iconClassNames.join(' ')} icon={Icons.Error} />}
+        {error && (
+          <Icon
+            style={errorOffset}
+            ref={errorIconRef}
+            className={iconClassNames.join(" ")}
+            icon={Icons.Error}
+          />
+        )}
+        <span className={outlineClasses.join(" ")}></span>
       </div>
     );
   }

package/src/Form/Label/Label.test.tsx

@@ -1,34 +1,34 @@
-import React, { useEffect, useRef } from 'react';
-import { Label } from './Label';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { Label } from "./Label";
+import { render } from "@testing-library/react";
 
-describe('Label should render', () => {
-  it('renders without crashing', () => {
+describe("Label should render", () => {
+  it("renders without crashing", () => {
     const { getByTestId } = render(
       <Label htmlFor="input-name" data-testid="component">
         Label
       </Label>
     );
-    const component = getByTestId('component');
+    const component = getByTestId("component");
     expect(component).toBeDefined();
   });
 
-  it('adds htmlFor attribute', () => {
+  it("adds htmlFor attribute", () => {
     const { getByTestId } = render(
       <Label htmlFor="input-name" data-testid="component">
         Label
       </Label>
     );
 
-    const component = getByTestId('component');
-    expect(component.getAttribute('for')).toBe('input-name');
+    const component = getByTestId("component");
+    expect(component.getAttribute("for")).toBe("input-name");
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -44,7 +44,7 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);

package/src/Form/Label/Label.tsx

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
-import classes from './Label.module.scss';
-import readyclasses from '../../readyclasses.module.scss';
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+import classes from "./Label.module.scss";
+import readyclasses from "../../readyclasses.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'label'> {
+export interface Props extends ComponentPropsWithRef<"label"> {
   children?: ReactNode;
 }
 
@@ -12,8 +12,8 @@ export const Label = React.forwardRef<HTMLLabelElement, Props>(
       <label
         {...rest}
         ref={ref}
-        className={`${hidden ? readyclasses['sr-only'] : ''} ${classes['label']} ${
-          className ?? ''
+        className={`${hidden ? readyclasses["sr-only"] : ""} ${classes["label"]} ${
+          className ?? ""
         }`}
       >
         {children}