@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentPropsWithRef, useEffect, useRef, useState } from 'react';
-import { Input, Type, Props as InputProps } from '../../Input/Input';
-import classes from './InputWrapper.module.scss';
-import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
-import { useWrapper } from '../../../hooks/useWrapper';
+import React, { ComponentPropsWithRef, useEffect, useRef, useState } from "react";
+import { Input, Type, Props as InputProps } from "../../Input/Input";
+import classes from "./InputWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../hooks/useWrapper";
 
 interface PartialInputProps extends Partial<InputProps> {}
 
-export interface Props extends ComponentPropsWithRef<'div'>, WrapperProps {
+export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   label: string;
   type: Type;
   name: string;
@@ -18,7 +18,6 @@ export interface Props extends ComponentPropsWithRef<'div'>, WrapperProps {
 }
 
 const useLabelOffset = (
-  wrapper: React.RefObject<HTMLDivElement>,
   input: React.RefObject<HTMLInputElement>,
   floatingLabelActive: boolean,
   prefix?: string
@@ -28,19 +27,17 @@ const useLabelOffset = (
   const resetLabelOffset = () => setLabelOffset({ left: undefined });
 
   useEffect(() => {
-    if (wrapper.current && input.current && prefix) {
+    if (input.current && prefix) {
       if (floatingLabelActive) {
         resetLabelOffset();
       } else {
+        const spacingBetweenPrefixAndInput = 4;
         const prefixDifference =
-          input.current.getBoundingClientRect().left -
-          wrapper.current.getBoundingClientRect().left +
-          4;
-
+          getComputedStyle(input.current).paddingLeft + spacingBetweenPrefixAndInput;
         setLabelOffset({ left: `${prefixDifference}px` });
       }
     }
-  }, [wrapper.current, input.current, prefix, floatingLabelActive]);
+  }, [input.current, prefix, floatingLabelActive]);
 
   return { labelOffset };
 };
@@ -70,32 +67,30 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
       hasFocus,
       setHasFocus,
       helperId,
-      labelId,
+      labelId
     } = useWrapper(value, inputProps?.placeholder, type);
     const { prefix, suffix } = inputProps || {};
-    const wrapper = useRef<HTMLDivElement>(null);
     const input = useRef<HTMLInputElement>(null);
     const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
-    const labelClasses = [classes['input-label']];
+    const labelClasses = [classes["input-label"]];
     const { labelOffset } = useLabelOffset(
-      (ref as React.RefObject<HTMLDivElement>) || wrapper,
       (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
       floatingLabelActive,
       prefix
     );
 
-    hasFocus && labelClasses.push(classes['focus']);
+    hasFocus && labelClasses.push(classes["focus"]);
 
     return (
       <Wrapper
         {...rest}
-        ref={ref || wrapper}
+        ref={ref}
         name={name}
-        className={`${classes['input-wrapper']} ${className ?? ''}`}
+        className={`${classes["input-wrapper"]} ${className ?? ""}`}
         labelProps={{
           id: labelId,
-          className: labelClasses.join(' '),
-          style: { ...labelOffset },
+          className: labelClasses.join(" "),
+          style: { ...labelOffset }
         }}
         floatingLabelActive={floatingLabelActive}
         errorId={errorId}
@@ -104,42 +99,42 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
         helperText={helperText}
         helperProps={{
           ...helperProps,
-          className: `${classes['input-wrapper-helper']} ${helperProps?.className ?? ''} `,
+          className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
         }}
         helperIndent={20}
       >
         <Input
           {...inputProps}
-          prefix={hasValueOrActiveFloatingLabel ? prefix : ''}
-          suffix={hasValueOrActiveFloatingLabel ? suffix : ''}
+          prefix={hasValueOrActiveFloatingLabel ? prefix : ""}
+          suffix={hasValueOrActiveFloatingLabel ? suffix : ""}
           wrapperProps={{
-            className: `${floatingLabelActive ? classes['floating-label-active'] : ''} ${
-              inputProps?.wrapperProps?.className ?? ''
-            }`,
+            className: `${floatingLabelActive ? classes["floating-label-active"] : ""} ${
+              inputProps?.wrapperProps?.className ?? ""
+            }`
           }}
           ref={(inputProps && inputProps.ref) || input}
           aria-labelledby={labelId}
           aria-describedby={error ? errorId : helperId}
           onChange={onChange}
-          onFocus={(e) => {
+          onFocus={e => {
             onFocus && onFocus(e);
             setHasFocus(true);
             setFloatingLabelActive(true);
           }}
-          onBlur={(e) => {
+          onBlur={e => {
             onBlur && onBlur(e);
             setHasFocus(false);
             e.target.value ||
             e.target.placeholder ||
             inputProps?.placeholder?.length ||
-            type === 'datetime-local' ||
-            type === 'time' ||
-            type === 'date'
+            type === "datetime-local" ||
+            type === "time" ||
+            type === "date"
               ? setFloatingLabelActive(true)
               : setFloatingLabelActive(false);
           }}
-          className={`${floatingLabelActive ? classes['floating-label'] : ''} ${
-            inputProps?.className ?? ''
+          className={`${floatingLabelActive ? classes["floating-label"] : ""} ${
+            inputProps?.className ?? ""
           }`}
           name={name}
           error={error}

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.test.tsx

@@ -1,27 +1,27 @@
-import React from 'react';
-import { RadioWrapper, Props } from './RadioWrapper';
-import { Radio } from '../../Radio/Radio';
-import { render } from '@testing-library/react';
+import React from "react";
+import { RadioWrapper, Props } from "./RadioWrapper";
+import { Radio } from "../../Radio/Radio";
+import { render } from "@testing-library/react";
 
 const onChangeHandler = jest.fn();
-const checkedOptionValue = 'option1';
+const checkedOptionValue = "option1";
 
 const defaultParams: Props = {
-  label: 'Label',
-  errorMessage: 'Error message',
-  helperText: 'Helper text',
+  label: "Label",
+  errorMessage: "Error message",
+  helperText: "Helper text",
   error: false,
   onChange: onChangeHandler,
-  fieldsetProps: { legend: 'Example title' },
+  fieldsetProps: { legend: "Example title" },
   value: checkedOptionValue,
-  name: 'my-group',
+  name: "my-group",
   children: [
     <Radio helperText="This is helpertext" value="option1">
       Option 1
     </Radio>,
     <Radio value="option2">Option 2</Radio>,
-    <Radio value="option3">Option 3</Radio>,
-  ],
+    <Radio value="option3">Option 3</Radio>
+  ]
 };
 
 const createRadioWrapper = (params?: (defaultParams: Props) => Props) => {
@@ -30,72 +30,72 @@ const createRadioWrapper = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<RadioWrapper {...parameters} data-testid="radiowrapper" />);
-  const radiowrapper = queries.getByTestId('radiowrapper');
+  const radiowrapper = queries.getByTestId("radiowrapper");
 
   return {
     ...queries,
-    radiowrapper,
+    radiowrapper
   };
 };
 
-describe('RadioWrapper should render', () => {
-  it('renders without crashing', () => {
+describe("RadioWrapper should render", () => {
+  it("renders without crashing", () => {
     const { radiowrapper } = createRadioWrapper();
 
     expect(radiowrapper).toBeTruthy();
   });
 
-  it('has option 1 properly linked with aria-describedby to its helpertext', () => {
+  it("has option 1 properly linked with aria-describedby to its helpertext", () => {
     const { radiowrapper } = createRadioWrapper();
 
     const option1RadioWrapper = radiowrapper
       ?.querySelector('input[value="option1"]')
-      ?.closest('.radio-wrapper');
+      ?.closest(".radio-wrapper");
     const option1 = radiowrapper?.querySelector('input[value="option1"]');
-    const option1helper = option1RadioWrapper?.querySelector('.helper-text');
+    const option1helper = option1RadioWrapper?.querySelector(".helper-text");
 
     if (option1helper && option1) {
-      expect(`${option1helper.getAttribute('id')}-radio`).toBe(`${option1.getAttribute('id')}`);
+      expect(`${option1helper.getAttribute("id")}-radio`).toBe(`${option1.getAttribute("id")}`);
       expect(option1).toHaveAccessibleDescription();
-      expect(option1).toHaveAttribute('aria-describedby', option1helper.getAttribute('id'));
+      expect(option1).toHaveAttribute("aria-describedby", option1helper.getAttribute("id"));
     }
   });
 
   it("has all option's aria-describedby linked with the error message ID", () => {
-    const { radiowrapper } = createRadioWrapper((defaultParams) => ({
+    const { radiowrapper } = createRadioWrapper(defaultParams => ({
       ...defaultParams,
       error: true,
-      errorMessage: 'This is an error message',
+      errorMessage: "This is an error message"
     }));
 
-    const errorMessage = radiowrapper?.querySelector('.error-message .message');
+    const errorMessage = radiowrapper?.querySelector(".error-message .message");
     const option1 = radiowrapper?.querySelector('input[value="option1"]');
 
     expect(errorMessage).toBeTruthy();
     if (errorMessage) {
-      expect(option1).toHaveAttribute('aria-describedby', errorMessage.id);
+      expect(option1).toHaveAttribute("aria-describedby", errorMessage.id);
     }
   });
 });
 
-describe('RadioWrapper selection', () => {
-  it('has option 2 selected, the rest is unselected', () => {
-    const { radiowrapper } = createRadioWrapper((defaultParams) => ({
+describe("RadioWrapper selection", () => {
+  it("has option 2 selected, the rest is unselected", () => {
+    const { radiowrapper } = createRadioWrapper(defaultParams => ({
       ...defaultParams,
-      value: 'option2',
+      value: "option2"
     }));
 
     expect(radiowrapper?.querySelector('input[value="option1"]')).toHaveAttribute(
-      'aria-checked',
-      'false'
+      "aria-checked",
+      "false"
     );
     expect(radiowrapper?.querySelector('input[value="option2"]')).toHaveAttribute(
-      'aria-checked',
-      'true'
+      "aria-checked",
+      "true"
     );
     expect(radiowrapper?.querySelector('input[value="option3"]')).toHaveAttribute(
-      'aria-checked',
-      'false'
+      "aria-checked",
+      "false"
     );
   });
 });

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -1,11 +1,11 @@
-import React, { ComponentPropsWithRef, ReactElement, useEffect } from 'react';
-import classes from './RadioWrapper.module.scss';
-import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
-import { useWrapper } from '../../../hooks/useWrapper';
-import { Icons } from '../../../Icon/Icon';
-import { Fieldset, Props as FieldsetProps } from '../../../Form/Fieldset/Fieldset';
+import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
+import classes from "./RadioWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { useWrapper } from "../../../hooks/useWrapper";
+import { Icons } from "../../../Icon/Icon";
+import { Fieldset, Props as FieldsetProps } from "../../../Form/Fieldset/Fieldset";
 
-export interface Props extends ComponentPropsWithRef<'div'>, WrapperProps {
+export interface Props extends ComponentPropsWithRef<"div">, WrapperProps {
   children: ReactElement | ReactElement[];
   fieldsetProps: FieldsetProps;
   value: string;
@@ -39,7 +39,7 @@ export const RadioWrapper = React.forwardRef<HTMLDivElement, Props>(
     }, []);
 
     const renderChildren = () =>
-      React.Children.map(children, (child) =>
+      React.Children.map(children, child =>
         React.cloneElement(child, {
           parentErrorId: errorId,
           error: error,
@@ -47,7 +47,7 @@ export const RadioWrapper = React.forwardRef<HTMLDivElement, Props>(
           name: name,
           parentHelperId: helperText ? helperId : false,
           onChange: onChange,
-          disabled: child.props.disabled !== undefined ? child.props.disabled : disabled,
+          disabled: child.props.disabled !== undefined ? child.props.disabled : disabled
         })
       );
 
@@ -62,9 +62,9 @@ export const RadioWrapper = React.forwardRef<HTMLDivElement, Props>(
           helperText={helperText}
           helperProps={{
             ...helperProps,
-            className: `${classes['radio-wrapper-helper']} ${
-              error ? classes['radio-wrapper-error'] : ''
-            } ${helperProps?.className ?? ''}`,
+            className: `${classes["radio-wrapper-helper"]} ${
+              error ? classes["radio-wrapper-error"] : ""
+            } ${helperProps?.className ?? ""}`
           }}
           error={error}
           errorId={errorId}

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef } from 'react';
-import { SelectWrapper, Props } from './SelectWrapper';
-import { render } from '@testing-library/react';
-import { Option } from '../../Select/Option';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { SelectWrapper, Props } from "./SelectWrapper";
+import { render } from "@testing-library/react";
+import { Option } from "../../Select/Option";
+import userEvent from "@testing-library/user-event";
 
 const onChangeHandler = jest.fn();
 const onClearHandler = jest.fn();
@@ -20,17 +20,17 @@ const defaultParams: Props = {
     </Option>,
     <Option key="4" value="option4">
       Option 4
-    </Option>,
+    </Option>
   ],
-  label: 'select_label',
-  name: 'select',
-  helperText: 'helpertext',
-  helperProps: { 'data-testid': 'helpertext' },
-  errorMessage: 'errormessage',
+  label: "select_label",
+  name: "select",
+  helperText: "helpertext",
+  helperProps: { "data-testid": "helpertext" },
+  errorMessage: "errormessage",
   error: false,
-  value: 'option1',
+  value: "option1",
   onChange: onChangeHandler,
-  onClear: onClearHandler,
+  onClear: onClearHandler
 };
 
 const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
@@ -39,28 +39,28 @@ const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<SelectWrapper {...parameters} data-testid="selectwrapper" />);
-  const selectwrapper = queries.getByTestId('selectwrapper');
-  const select = selectwrapper.querySelector('button');
+  const selectwrapper = queries.getByTestId("selectwrapper");
+  const select = selectwrapper.querySelector("button");
 
   return {
     ...queries,
     selectwrapper,
-    select,
+    select
   };
 };
 
-describe('SelectWrapper should render', () => {
-  it('renders without crashing', () => {
+describe("SelectWrapper should render", () => {
+  it("renders without crashing", () => {
     const { selectwrapper } = createSelectWrapper();
 
     expect(selectwrapper).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>,
@@ -79,7 +79,7 @@ describe('ref should work', () => {
       return (
         <SelectWrapper
           {...defaultParams}
-          selectProps={{ ref: innerRef, 'data-ref': 'inner-testing' }}
+          selectProps={{ ref: innerRef, "data-ref": "inner-testing" }}
           name="test"
           data-ref="testing"
           ref={ref}
@@ -91,94 +91,94 @@ describe('ref should work', () => {
       ref: React.RefObject<HTMLElement>,
       innerRef: React.RefObject<HTMLElement>
     ) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
-      expect(innerRef.current!.nodeName).toBe('SELECT');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+      expect(innerRef.current!.nodeName).toBe("SELECT");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('SelectWrapper & Select have the right attributes', () => {
-  it('select has aria values', async () => {
+describe("SelectWrapper & Select have the right attributes", () => {
+  it("select has aria values", async () => {
     const { select, getByTestId, findByText } = createSelectWrapper();
 
-    const helpertext = getByTestId('helpertext');
-    const label = await findByText('select_label');
+    const helpertext = getByTestId("helpertext");
+    const label = await findByText("select_label");
 
-    expect(select).toHaveAttribute('aria-describedby', helpertext.id);
-    expect(select).toHaveAttribute('aria-labelledby', label.id);
+    expect(select).toHaveAttribute("aria-describedby", helpertext.id);
+    expect(select).toHaveAttribute("aria-labelledby", label.id);
   });
 
-  it('SelectWrapper has the right helpertext', () => {
+  it("SelectWrapper has the right helpertext", () => {
     const { getByTestId } = createSelectWrapper();
 
-    const helpertext = getByTestId('helpertext');
+    const helpertext = getByTestId("helpertext");
 
     expect(helpertext).toBeTruthy();
-    expect(helpertext).toHaveTextContent('helpertext');
+    expect(helpertext).toHaveTextContent("helpertext");
   });
 
-  it('Passes the proper helperProps class', () => {
-    const { getByTestId } = createSelectWrapper((defaultParams) => ({
+  it("Passes the proper helperProps class", () => {
+    const { getByTestId } = createSelectWrapper(defaultParams => ({
       ...defaultParams,
-      helperProps: { ...defaultParams.helperProps, className: 'example-helper-classname' },
+      helperProps: { ...defaultParams.helperProps, className: "example-helper-classname" }
     }));
 
-    const helpertext = getByTestId('helpertext');
+    const helpertext = getByTestId("helpertext");
 
-    expect(helpertext.parentElement).toHaveClass('example-helper-classname');
+    expect(helpertext.parentElement).toHaveClass("example-helper-classname");
   });
 
-  it('Passes the proper selectProps class', () => {
-    const { getByTestId } = createSelectWrapper((defaultParams) => ({
+  it("Passes the proper selectProps class", () => {
+    const { getByTestId } = createSelectWrapper(defaultParams => ({
       ...defaultParams,
       selectProps: {
         ...defaultParams.selectProps,
-        'data-testid': 'select-element',
-        className: 'example-select-classname',
-      },
+        "data-testid": "select-element",
+        className: "example-select-classname"
+      }
     }));
 
-    const select = getByTestId('select-element');
+    const select = getByTestId("select-element");
 
-    expect(select).toHaveClass('example-select-classname');
+    expect(select).toHaveClass("example-select-classname");
   });
 
-  it('SelectWrapper has the right errormessage', async () => {
-    const { findByText, select } = createSelectWrapper((defaultParams) => ({
+  it("SelectWrapper has the right errormessage", async () => {
+    const { findByText, select } = createSelectWrapper(defaultParams => ({
       ...defaultParams,
-      error: true,
+      error: true
     }));
 
-    const errorMessage = await findByText('errormessage');
+    const errorMessage = await findByText("errormessage");
 
     expect(errorMessage).toBeTruthy();
-    expect(select).toHaveAttribute('aria-describedby', errorMessage.id);
+    expect(select).toHaveAttribute("aria-describedby", errorMessage.id);
   });
 
-  it('Fires the onChange event', async () => {
+  it("Fires the onChange event", async () => {
     const { select, findByText } = createSelectWrapper();
 
     userEvent.click(select as Element);
 
-    const option3 = await findByText('Option 3');
+    const option3 = await findByText("Option 3");
 
     userEvent.click(option3 as Element);
 
     expect(onChangeHandler).toHaveBeenCalled();
   });
 
-  it('Fires the onClear event', async () => {
+  it("Fires the onClear event", async () => {
     const { select, findByText } = createSelectWrapper();
 
     userEvent.click(select as Element);
 
-    const option3 = await findByText('Option 3');
+    const option3 = await findByText("Option 3");
 
     userEvent.click(option3 as Element);
 
-    const clearButton = select!.querySelector('[data-clear]')!;
+    const clearButton = select!.querySelector("[data-clear]")!;
 
     userEvent.click(clearButton);
 

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -1,14 +1,14 @@
-import React, { ComponentPropsWithRef, ReactChild, ReactElement } from 'react';
-import classes from './SelectWrapper.module.scss';
-import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
-import { Select, Props as SelectProps } from '../../Select/Select';
-import { useWrapper } from '../../../hooks/useWrapper';
+import React, { ComponentPropsWithRef, ReactChild, ReactElement } from "react";
+import classes from "./SelectWrapper.module.scss";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+import { Select, Props as SelectProps } from "../../Select/Select";
+import { useWrapper } from "../../../hooks/useWrapper";
 
 interface PartialSelectProps extends Partial<SelectProps> {}
 
 export interface Props
-  extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>,
-    Omit<WrapperProps, 'onChange' | 'error'> {
+  extends Omit<ComponentPropsWithRef<"div">, "onChange">,
+    Omit<WrapperProps, "onChange" | "error"> {
   children: ReactChild | ReactChild[];
   placeholder?: string;
   value: string;
@@ -42,10 +42,10 @@ export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
         floatingLabelActive={floatingLabelActive}
         errorId={errorId}
         helperId={helperId}
-        labelProps={{ id: labelId, className: classes['select-label'] }}
+        labelProps={{ id: labelId, className: classes["select-label"] }}
         helperProps={{
           ...helperProps,
-          className: `${classes['select-helper-text']} ${helperProps?.className ?? ''}`,
+          className: `${classes["select-helper-text"]} ${helperProps?.className ?? ""}`
         }}
         error={error}
       >
@@ -56,12 +56,12 @@ export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
           error={error}
           describedBy={error ? errorId : helperId}
           onChange={onChange}
-          onClear={(e) => {
+          onClear={e => {
             onClear && onClear(e);
           }}
           placeholder={placeholder}
-          className={`${floatingLabelActive ? classes['floating-label-active'] : ''} ${
-            selectProps?.className ?? ''
+          className={`${floatingLabelActive ? classes["floating-label-active"] : ""} ${
+            selectProps?.className ?? ""
           }`}
         >
           {children as ReactElement[]}

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -1,15 +1,6 @@
-.textarea-label {
-  left: calc(
-    1.25rem + 1px
-  ); // 1px is for offset of the textarea border. It's relative to the parent div which doesn't have a border.
+@import "../../../mixins.module.scss";
 
-  &.focus {
-    color: var(--color-primary);
-  }
-  &.error {
-    color: var(--error);
-  }
-}
+@include inputLabelPrimaryColorOnFocus("label.textarea-label");
 
 .textarea {
   padding-top: 1.625rem;