@onewelcome/react-lib-components 0.2.1 → 0.2.2

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}

package/src/Form/Radio/Radio.test.tsx

@@ -1,20 +1,20 @@
-import React, { useEffect, useRef } from 'react';
-import { Radio, Props } from './Radio';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { Radio, Props } from "./Radio";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const onChangeHandeler = jest.fn();
 
 const defaultParams: Props = {
-  value: 'test',
-  children: 'Label',
+  value: "test",
+  children: "Label",
   checked: false,
   error: false,
-  errorMessage: 'errormessage',
+  errorMessage: "errormessage",
   disabled: false,
-  formSelectorWrapperProps: { 'data-testid': 'radiowrapper' },
-  helperText: 'helpertext',
-  onChange: onChangeHandeler,
+  formSelectorWrapperProps: { "data-testid": "radiowrapper" },
+  helperText: "helpertext",
+  onChange: onChangeHandeler
 };
 
 const createRadio = (params?: (defaultParams: Props) => Props) => {
@@ -23,57 +23,57 @@ const createRadio = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Radio {...parameters} data-testid="radio" />);
-  const radio = queries.getByTestId('radio');
-  const radiowrapper = queries.getByTestId('radiowrapper');
+  const radio = queries.getByTestId("radio");
+  const radiowrapper = queries.getByTestId("radiowrapper");
 
   return {
     ...queries,
     radio,
-    radiowrapper,
+    radiowrapper
   };
 };
 
-describe('Radio should render', () => {
-  it('renders without crashing and has proper attributes/values', () => {
+describe("Radio should render", () => {
+  it("renders without crashing and has proper attributes/values", () => {
     const { radio } = createRadio();
 
-    expect((radio as HTMLInputElement).value).toBe('test');
+    expect((radio as HTMLInputElement).value).toBe("test");
     expect((radio as HTMLInputElement).checked).toBe(false);
     expect(radio).toBeTruthy();
   });
 
-  it('it is checked', () => {
-    const { radio } = createRadio((defaultParams) => ({ ...defaultParams, checked: true }));
+  it("it is checked", () => {
+    const { radio } = createRadio(defaultParams => ({ ...defaultParams, checked: true }));
 
     expect((radio as HTMLInputElement).checked).toBe(true);
   });
 
-  it('it is disabled', () => {
-    const { radio, radiowrapper } = createRadio((defaultParams) => ({
+  it("it is disabled", () => {
+    const { radio, radiowrapper } = createRadio(defaultParams => ({
       ...defaultParams,
-      disabled: true,
+      disabled: true
     }));
 
     expect((radio as HTMLInputElement).disabled).toBe(true);
-    expect(radiowrapper).toHaveClass('disabled');
+    expect(radiowrapper).toHaveClass("disabled");
   });
 
-  it('has the correct describedby value when theres no error', async () => {
-    const { radio, findByText } = createRadio((defaultParams) => ({
+  it("has the correct describedby value when theres no error", async () => {
+    const { radio, findByText } = createRadio(defaultParams => ({
       ...defaultParams,
-      error: true,
+      error: true
     }));
 
-    const error = await findByText('errormessage');
+    const error = await findByText("errormessage");
 
-    expect(radio).toHaveAttribute('aria-describedby', error.id);
+    expect(radio).toHaveAttribute("aria-describedby", error.id);
   });
 });
 
-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;
     }) => {
@@ -89,15 +89,15 @@ 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('Radio should be interactive', () => {
-  it('should call onChange when clicked', () => {
+describe("Radio should be interactive", () => {
+  it("should call onChange when clicked", () => {
     const { radio } = createRadio();
 
     expect(onChangeHandeler).not.toBeCalled();
@@ -105,8 +105,8 @@ describe('Radio should be interactive', () => {
     expect(onChangeHandeler).toBeCalledTimes(1);
   });
 
-  it('should not call onChange when disabled', () => {
-    const { radio } = createRadio((defaultParams) => ({ ...defaultParams, disabled: true }));
+  it("should not call onChange when disabled", () => {
+    const { radio } = createRadio(defaultParams => ({ ...defaultParams, disabled: true }));
 
     userEvent.click(radio);
     expect(onChangeHandeler).not.toBeCalled();

package/src/Form/Radio/Radio.tsx

@@ -1,15 +1,15 @@
-import React, { ComponentPropsWithRef } from 'react';
-import { Icon, Icons } from '../../Icon/Icon';
-import { Props as HelperProps } from '../FormHelperText/FormHelperText';
-import classes from './Radio.module.scss';
-import { useFormSelector } from '../../hooks/useFormSelector';
-import { FormSelector } from '../form.interfaces';
+import React, { ComponentPropsWithRef } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { Props as HelperProps } from "../FormHelperText/FormHelperText";
+import classes from "./Radio.module.scss";
+import { useFormSelector } from "../../hooks/useFormSelector";
+import { FormSelector } from "../form.interfaces";
 import {
   FormSelectorWrapper,
-  Props as FormSelectorWrapperProps,
-} from '../FormSelectorWrapper/FormSelectorWrapper';
+  Props as FormSelectorWrapperProps
+} from "../FormSelectorWrapper/FormSelectorWrapper";
 
-export interface Props extends ComponentPropsWithRef<'input'>, FormSelector {
+export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
   children: string;
   value: string;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
@@ -43,7 +43,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
       parentErrorId,
       errorMessage,
       error,
-      parentHelperId,
+      parentHelperId
     });
 
     const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
@@ -54,9 +54,9 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
       const nativeEvent: any = event.nativeEvent || event;
       const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
 
-      Object.defineProperty(clonedEvent, 'target', {
+      Object.defineProperty(clonedEvent, "target", {
         writable: true,
-        value: { value: value },
+        value: { value: value }
       });
 
       onChange && onChange(clonedEvent);
@@ -66,8 +66,8 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
     return (
       <FormSelectorWrapper
         {...formSelectorWrapperProps}
-        className={`${classes['radio-wrapper']} ${className ?? ''}`}
-        containerProps={{ className: classes['radio-container'] }}
+        className={`${classes["radio-wrapper"]} ${className ?? ""}`}
+        containerProps={{ className: classes["radio-container"] }}
         helperText={helperText}
         helperProps={helperProps}
         parentErrorId={parentErrorId}
@@ -82,7 +82,7 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
           ref={ref}
           disabled={disabled}
           tabIndex={0}
-          className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
+          className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
           onChange={onChangeHandler}
           checked={checked}
           aria-invalid={error ? true : false}
@@ -96,13 +96,13 @@ export const Radio = React.forwardRef<HTMLInputElement, Props>(
 
         {checked && (
           <Icon
-            className={`${classes['input']} ${disabled ? classes['disabled'] : ''}`}
+            className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
             icon={Icons.Radio}
           />
         )}
         {!checked && (
           <Icon
-            className={`${classes['input']} ${disabled ? classes['disabled'] : ''}`}
+            className={`${classes["input"]} ${disabled ? classes["disabled"] : ""}`}
             icon={Icons.Circle}
           />
         )}

package/src/Form/Select/Option.test.tsx

@@ -1,23 +1,23 @@
-import React, { useEffect, useRef } from 'react';
-import { Option } from './Option';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { Option } from "./Option";
+import { render } from "@testing-library/react";
 
-describe('Option should render', () => {
-  it('renders without crashing', () => {
+describe("Option should render", () => {
+  it("renders without crashing", () => {
     const { getByTestId } = render(
       <Option value="option" data-testid="component">
         Option
       </Option>
     );
-    const component = getByTestId('component');
+    const component = getByTestId("component");
     expect(component).toBeDefined();
   });
 });
 
-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;
     }) => {
@@ -33,7 +33,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/Select/Option.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from 'react';
-import classes from './Select.module.scss';
+import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from "react";
+import classes from "./Select.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'li'> {
+export interface Props extends ComponentPropsWithRef<"li"> {
   children: string;
   value: string;
   disabled?: boolean;
@@ -59,12 +59,12 @@ export const Option = React.forwardRef<HTMLLIElement, Props>(
         {...rest}
         ref={innerOptionRef}
         data-value={value}
-        className={`${isSelected ? classes['selected-option'] : ''} ${
-          disabled ? classes.disabled : ''
-        } ${className ?? ''}`}
+        className={`${isSelected ? classes["selected-option"] : ""} ${
+          disabled ? classes.disabled : ""
+        } ${className ?? ""}`}
         onClick={onSelectHandler}
-        onKeyDownCapture={(event) => {
-          if (event.code === 'Enter') {
+        onKeyDownCapture={event => {
+          if (event.code === "Enter") {
             event.stopPropagation();
             event.preventDefault();
 

package/src/Form/Select/Select.module.scss

@@ -1,4 +1,4 @@
-@import '../../readyclasses.module.scss';
+@import "../../readyclasses.module.scss";
 
 $listItemHeight: 2.125rem;
 
@@ -6,7 +6,9 @@ $listItemHeight: 2.125rem;
   position: relative;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
-  background-color: #fff;
+  border: 0;
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
   font-size: var(--font-size);
 
   [data-display] {
@@ -18,14 +20,13 @@ $listItemHeight: 2.125rem;
 
     .list-wrapper {
       background: #fff;
-      opacity: 1;
-      pointer-events: auto;
     }
   }
 
   &:not(.expanded) {
     button:focus-visible:not(.error) {
       border: var(--input-border-width-focus) solid var(--color-primary);
+      padding: 0 calc(1.25rem - var(--input-border-width-focus) + var(--input-border-width));
     }
   }
 
@@ -76,8 +77,6 @@ $listItemHeight: 2.125rem;
     top: 0;
     left: 0;
     width: 100%;
-    opacity: 0;
-    pointer-events: none;
     overflow: auto;
   }
 
@@ -102,7 +101,7 @@ $listItemHeight: 2.125rem;
       cursor: pointer;
 
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: 0;
@@ -132,7 +131,7 @@ $listItemHeight: 2.125rem;
 
 .selected-option {
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -147,7 +146,6 @@ $listItemHeight: 2.125rem;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  left: 1.25rem;
   pointer-events: none;
 }