@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Form/Toggle/Toggle.test.tsx

@@ -1,10 +1,10 @@
-import React, { useRef, useEffect } from 'react';
-import { Toggle, Props } from './Toggle';
-import { render } from '@testing-library/react';
+import React, { useRef, useEffect } from "react";
+import { Toggle, Props } from "./Toggle";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  children: 'label',
-  name: 'example toggle',
+  children: "label",
+  name: "example toggle"
 };
 
 const createToggle = (params?: (defaultParams: Props) => Props) => {
@@ -17,34 +17,34 @@ const createToggle = (params?: (defaultParams: Props) => Props) => {
       toggle content
     </Toggle>
   );
-  const toggle = queries.getByTestId('toggle');
+  const toggle = queries.getByTestId("toggle");
 
   return {
     ...queries,
-    toggle,
+    toggle
   };
 };
 
-describe('Toggle should render', () => {
-  it('renders without crashing', () => {
+describe("Toggle should render", () => {
+  it("renders without crashing", () => {
     const { toggle } = createToggle();
 
     expect(toggle).toBeDefined();
   });
 });
 
-describe('Toggle attributes', () => {
-  it('should be checked', () => {
-    const { toggle } = createToggle((defaultParams) => ({ ...defaultParams, checked: true }));
+describe("Toggle attributes", () => {
+  it("should be checked", () => {
+    const { toggle } = createToggle(defaultParams => ({ ...defaultParams, checked: true }));
 
-    expect(toggle).toHaveAttribute('aria-checked', 'true');
+    expect(toggle).toHaveAttribute("aria-checked", "true");
   });
 });
 
-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;
     }) => {
@@ -60,21 +60,21 @@ 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('helperProps should be properly propagated down', () => {
-  it('renders an anchor tag as helper', () => {
-    const { getByTestId } = createToggle((defaultParams) => ({
+describe("helperProps should be properly propagated down", () => {
+  it("renders an anchor tag as helper", () => {
+    const { getByTestId } = createToggle(defaultParams => ({
       ...defaultParams,
-      helperProps: { children: <a data-testid="helpertextanchor">test</a> },
+      helperProps: { children: <a data-testid="helpertextanchor">test</a> }
     }));
 
-    const helperTextAnchor = getByTestId('helpertextanchor');
+    const helperTextAnchor = getByTestId("helpertextanchor");
 
     expect(helperTextAnchor).toBeTruthy();
   });

package/src/Form/Toggle/Toggle.tsx

@@ -1,30 +1,30 @@
-import React, { ComponentPropsWithRef } from 'react';
-import { Checkbox, Props as CheckboxProps } from '../Checkbox/Checkbox';
-import classes from './Toggle.module.scss';
+import React, { ComponentPropsWithRef } from "react";
+import { Checkbox, Props as CheckboxProps } from "../Checkbox/Checkbox";
+import classes from "./Toggle.module.scss";
 
 export interface Props
-  extends ComponentPropsWithRef<'input'>,
-    Omit<CheckboxProps, 'indeterminate' | 'errorMessage' | 'error' | 'children' | 'label'> {
+  extends ComponentPropsWithRef<"input">,
+    Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "children" | "label"> {
   children: string;
 }
 
 export const Toggle = React.forwardRef<HTMLInputElement, Props>(
   ({ children, checked, disabled, helperProps, ...rest }: Props, ref) => (
-    <div className={classes['toggle-wrapper']}>
+    <div className={classes["toggle-wrapper"]}>
       <Checkbox
         {...rest}
         ref={ref}
         checked={checked}
-        className={classes['checkbox']}
-        helperProps={{ className: classes['toggle-helper'], ...helperProps }}
+        className={classes["checkbox"]}
+        helperProps={{ className: classes["toggle-helper"], ...helperProps }}
         disabled={disabled}
         label={children}
       >
         <span
           data-toggle
           aria-hidden="true"
-          className={`${classes['toggle']} ${checked ? classes['checked'] : ''} ${
-            disabled ? classes['disabled'] : ''
+          className={`${classes["toggle"]} ${checked ? classes["checked"] : ""} ${
+            disabled ? classes["disabled"] : ""
           } `}
         ></span>
       </Checkbox>

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

@@ -1,29 +1,29 @@
-import React, { useEffect, useRef } from 'react';
-import { CheckboxWrapper, Props } from './CheckboxWrapper';
-import { Checkbox, Props as CheckboxProps } from '../../Checkbox/Checkbox';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { CheckboxWrapper, Props } from "./CheckboxWrapper";
+import { Checkbox, Props as CheckboxProps } from "../../Checkbox/Checkbox";
+import { render } from "@testing-library/react";
 
 const defaultParentParams: CheckboxProps = {
   indeterminate: false,
-  name: 'parentcheckbox',
-  label: 'testlabel',
+  name: "parentcheckbox",
+  label: "testlabel",
   children: [
     <Checkbox checked={true} name="checkbox2">
       Checkbox 2
     </Checkbox>,
-    <Checkbox name="checkbox3">Checkbox 3</Checkbox>,
-  ],
+    <Checkbox name="checkbox3">Checkbox 3</Checkbox>
+  ]
 };
 
 const defaultParams: Props = {
   onChange: jest.fn(),
-  errorMessage: 'This is an error',
+  errorMessage: "This is an error",
   error: false,
-  helperText: 'Helpertext',
-  name: 'Checkboxwrapper',
-  fieldsetProps: { legend: 'Example title' },
-  label: 'Label',
-  children: [],
+  helperText: "Helpertext",
+  name: "Checkboxwrapper",
+  fieldsetProps: { legend: "Example title" },
+  label: "Label",
+  children: []
 };
 
 const createCheckboxWrapper = (
@@ -46,27 +46,27 @@ const createCheckboxWrapper = (
       <Checkbox data-testid="parentcheckbox" {...parentCheckboxParameters} />
     </CheckboxWrapper>
   );
-  const checkboxwrapper = queries.getByTestId('checkboxwrapper');
-  const parentcheckbox = queries.getByTestId('parentcheckbox');
+  const checkboxwrapper = queries.getByTestId("checkboxwrapper");
+  const parentcheckbox = queries.getByTestId("parentcheckbox");
 
   return {
     ...queries,
     checkboxwrapper,
-    parentcheckbox,
+    parentcheckbox
   };
 };
 
-describe('checkboxwrapper should render', () => {
-  it('renders without crashing', () => {
+describe("checkboxwrapper should render", () => {
+  it("renders without crashing", () => {
     const { checkboxwrapper } = createCheckboxWrapper();
     expect(checkboxwrapper).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;
     }) => {
@@ -82,44 +82,44 @@ 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('CheckboxWrapper should have an error', () => {
-  it('should have an error and the children checkboxes should have aria-describedby of the error message of the group.', () => {
-    const { checkboxwrapper } = createCheckboxWrapper((defaultParams) => ({
+describe("CheckboxWrapper should have an error", () => {
+  it("should have an error and the children checkboxes should have aria-describedby of the error message of the group.", () => {
+    const { checkboxwrapper } = createCheckboxWrapper(defaultParams => ({
       ...defaultParams,
       error: true,
-      errorMessage: 'This is an error',
+      errorMessage: "This is an error"
     }));
 
-    const checkboxes = checkboxwrapper?.querySelectorAll('.checkbox-container input');
-    const errorMessage = checkboxwrapper?.querySelector('.default-helper .error-message .message');
+    const checkboxes = checkboxwrapper?.querySelectorAll(".checkbox-container input");
+    const errorMessage = checkboxwrapper?.querySelector(".default-helper .error-message .message");
 
     /** All of the children checkboxes should be described by the error message in the parent checkbox group. */
-    checkboxes?.forEach((box) => {
-      expect(box.getAttribute('aria-describedby')).toBe(errorMessage?.getAttribute('id'));
+    checkboxes?.forEach(box => {
+      expect(box.getAttribute("aria-describedby")).toBe(errorMessage?.getAttribute("id"));
     });
 
     expect(checkboxes?.length).toBe(3);
-    expect(errorMessage).toHaveTextContent('This is an error');
+    expect(errorMessage).toHaveTextContent("This is an error");
   });
 });
 
-describe('Parent checkbox attributes', () => {
-  it('is indeterminate, label is set', () => {
-    const { parentcheckbox, container } = createCheckboxWrapper(undefined, (defaultParams) => ({
+describe("Parent checkbox attributes", () => {
+  it("is indeterminate, label is set", () => {
+    const { parentcheckbox, container } = createCheckboxWrapper(undefined, defaultParams => ({
       ...defaultParams,
-      indeterminate: true,
+      indeterminate: true
     }));
 
-    expect(parentcheckbox.getAttribute('aria-checked')).toBe('mixed');
+    expect(parentcheckbox.getAttribute("aria-checked")).toBe("mixed");
     expect(
-      container.querySelector(`label[for="${parentcheckbox.getAttribute('id')}"]`)
-    ).toHaveTextContent('testlabel');
+      container.querySelector(`label[for="${parentcheckbox.getAttribute("id")}"]`)
+    ).toHaveTextContent("testlabel");
   });
 });

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -1,11 +1,11 @@
-import React, { ComponentPropsWithRef, ReactElement, useEffect } from 'react';
-import classes from './CheckboxWrapper.module.scss';
-import { useWrapper } from '../../../hooks/useWrapper';
-import { Wrapper, WrapperProps } from '../Wrapper/Wrapper';
-import { Icons } from '../../../Icon/Icon';
-import { Fieldset, Props as FieldsetProps } from '../../../Form/Fieldset/Fieldset';
+import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
+import classes from "./CheckboxWrapper.module.scss";
+import { useWrapper } from "../../../hooks/useWrapper";
+import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
+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;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -24,12 +24,12 @@ export const CheckboxWrapper = React.forwardRef<HTMLDivElement, Props>(
     }, []);
 
     const renderChildren = () =>
-      React.Children.map(children, (child) =>
+      React.Children.map(children, child =>
         React.cloneElement(child, {
           parentErrorId: errorId,
           error: error,
           parentHelperId: helperText ? helperId : false,
-          disabled: rest.disabled,
+          disabled: rest.disabled
         })
       );
 
@@ -43,9 +43,9 @@ export const CheckboxWrapper = React.forwardRef<HTMLDivElement, Props>(
           helperText={helperText}
           helperProps={{
             ...helperProps,
-            className: `${classes['checkbox-wrapper-helper']} ${
-              error ? classes['checkbox-wrapper-error'] : ''
-            } ${helperProps?.className ?? ''}`,
+            className: `${classes["checkbox-wrapper-helper"]} ${
+              error ? classes["checkbox-wrapper-error"] : ""
+            } ${helperProps?.className ?? ""}`
           }}
           error={error}
           errorMessageIcon={Icons.Error}

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

@@ -1,12 +1,6 @@
-.input-label {
-  left: calc(
-    1.25rem + 2px
-  ); // 2px 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);
-  }
-}
+@include inputLabelPrimaryColorOnFocus("label.input-label");
 
 input {
   &.floating-label {

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

@@ -1,17 +1,17 @@
-import React, { useEffect, useRef } from 'react';
-import { InputWrapper, Props } from './InputWrapper';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { InputWrapper, Props } from "./InputWrapper";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
-  label: 'Example label',
-  type: 'text',
-  name: 'Example input',
-  helperText: 'this is helpertext',
-  errorMessage: 'This is an error',
+  label: "Example label",
+  type: "text",
+  name: "Example input",
+  helperText: "this is helpertext",
+  errorMessage: "This is an error",
   error: false,
-  value: 'value',
-  onChange: jest.fn(),
+  value: "value",
+  onChange: jest.fn()
 };
 
 const createInputWrapper = (params?: (defaultParams: Props) => Props) => {
@@ -20,50 +20,50 @@ const createInputWrapper = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<InputWrapper {...parameters} data-testid="inputwrapper" />);
-  const inputwrapper = queries.getByTestId('inputwrapper');
+  const inputwrapper = queries.getByTestId("inputwrapper");
 
   return {
     ...queries,
-    inputwrapper,
+    inputwrapper
   };
 };
 
-describe('InputWrapper should render', () => {
-  it('renders without crashing', () => {
+describe("InputWrapper should render", () => {
+  it("renders without crashing", () => {
     const { inputwrapper } = createInputWrapper();
 
     expect(inputwrapper).toBeTruthy();
   });
 
-  it('has helpertext', () => {
-    const { getByTestId } = createInputWrapper((defaultParams) => ({
+  it("has helpertext", () => {
+    const { getByTestId } = createInputWrapper(defaultParams => ({
       ...defaultParams,
-      helperProps: { 'data-testid': 'helper_text' },
+      helperProps: { "data-testid": "helper_text" }
     }));
 
-    const helperText = getByTestId('helper_text');
+    const helperText = getByTestId("helper_text");
 
     expect(helperText).toBeTruthy();
   });
 
-  it('is described by the helpertext', () => {
-    const { getByTestId } = createInputWrapper((defaultParams) => ({
+  it("is described by the helpertext", () => {
+    const { getByTestId } = createInputWrapper(defaultParams => ({
       ...defaultParams,
-      inputProps: { 'data-testid': 'input' },
-      helperProps: { 'data-testid': 'helper_text' },
+      inputProps: { "data-testid": "input" },
+      helperProps: { "data-testid": "helper_text" }
     }));
 
-    const input = getByTestId('input');
-    const helperId = getByTestId('helper_text').getAttribute('id');
+    const input = getByTestId("input");
+    const helperId = getByTestId("helper_text").getAttribute("id");
 
-    expect(input).toHaveAttribute('aria-describedby', helperId);
+    expect(input).toHaveAttribute("aria-describedby", helperId);
   });
 });
 
-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>,
@@ -82,7 +82,7 @@ describe('ref should work', () => {
       return (
         <InputWrapper
           {...defaultParams}
-          inputProps={{ ref: innerRef, 'data-ref': 'inner-testing' }}
+          inputProps={{ ref: innerRef, "data-ref": "inner-testing" }}
           name="test"
           data-ref="testing"
           ref={ref}
@@ -94,35 +94,35 @@ describe('ref should work', () => {
       ref: React.RefObject<HTMLElement>,
       innerRef: React.RefObject<HTMLElement>
     ) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
-      expect(innerRef.current).toHaveAttribute('data-ref', 'inner-testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+      expect(innerRef.current).toHaveAttribute("data-ref", "inner-testing");
     };
 
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
 
-describe('InputWrapper should be interactive', () => {
-  it('executes the eventlisteners', () => {
+describe("InputWrapper should be interactive", () => {
+  it("executes the eventlisteners", () => {
     const onFocusHandler = jest.fn();
     const onChangeHandler = jest.fn();
     const onBlurHandler = jest.fn();
 
-    const { getByTestId } = createInputWrapper((defaultParams) => ({
+    const { getByTestId } = createInputWrapper(defaultParams => ({
       ...defaultParams,
       inputProps: {
-        'data-testid': 'input',
+        "data-testid": "input"
       },
       onChange: onChangeHandler,
       onFocus: onFocusHandler,
       onBlur: onBlurHandler,
-      value: '',
+      value: ""
     }));
 
-    const input = getByTestId('input');
+    const input = getByTestId("input");
 
     userEvent.tab();
-    userEvent.keyboard('test');
+    userEvent.keyboard("test");
 
     expect(input).toHaveFocus();
     expect(onChangeHandler).toHaveBeenCalled();
@@ -134,39 +134,39 @@ describe('InputWrapper should be interactive', () => {
   });
 });
 
-describe('InputWrapper should support prefix and suffix', () => {
-  const prefix = 'prefix';
-  const suffix = 'suffix';
+describe("InputWrapper should support prefix and suffix", () => {
+  const prefix = "prefix";
+  const suffix = "suffix";
 
   const hasPrefixAndSuffixDefined = (container: HTMLElement) => {
-    expect(container.querySelector('[data-prefix]')).toHaveTextContent(prefix);
-    expect(container.querySelector('[data-suffix]')).toHaveTextContent(suffix);
+    expect(container.querySelector("[data-prefix]")).toHaveTextContent(prefix);
+    expect(container.querySelector("[data-suffix]")).toHaveTextContent(suffix);
   };
 
-  it('renders prefix and sufix when input has focus', () => {
-    const { container, getByTestId } = createInputWrapper((defaultParams) => ({
+  it("renders prefix and sufix when input has focus", () => {
+    const { container, getByTestId } = createInputWrapper(defaultParams => ({
       ...defaultParams,
-      value: '',
-      inputProps: { 'data-testid': 'input', prefix, suffix },
+      value: "",
+      inputProps: { "data-testid": "input", prefix, suffix }
     }));
 
-    const input = getByTestId('input');
+    const input = getByTestId("input");
 
-    expect(container.querySelector('[data-prefix]')).toBeNull();
-    expect(container.querySelector('[data-suffix]')).toBeNull();
+    expect(container.querySelector("[data-prefix]")).toBeNull();
+    expect(container.querySelector("[data-suffix]")).toBeNull();
 
     userEvent.tab();
     expect(input).toHaveFocus();
     hasPrefixAndSuffixDefined(container);
   });
 
-  it('renders prefix and sufix when input has value', () => {
-    const { container, getByTestId } = createInputWrapper((defaultParams) => ({
+  it("renders prefix and sufix when input has value", () => {
+    const { container, getByTestId } = createInputWrapper(defaultParams => ({
       ...defaultParams,
-      inputProps: { 'data-testid': 'input', prefix, suffix },
+      inputProps: { "data-testid": "input", prefix, suffix }
     }));
 
-    const input = getByTestId('input');
+    const input = getByTestId("input");
 
     hasPrefixAndSuffixDefined(container);