@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithRef, Fragment } from 'react';
-import { Icon, Icons } from '../../Icon/Icon';
-import { ColumnName, Direction } from '../datagrid.interfaces';
-import classes from './DataGridHeaderCell.module.scss';
+import React, { ComponentPropsWithRef, Fragment } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { ColumnName, Direction } from "../datagrid.interfaces";
+import classes from "./DataGridHeaderCell.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'th'> {
+export interface Props extends ComponentPropsWithRef<"th"> {
   headline: string;
   name: ColumnName;
   disableSorting?: boolean;
@@ -12,8 +12,8 @@ export interface Props extends ComponentPropsWithRef<'th'> {
 }
 
 const ariaSortMapping = {
-  ASC: 'ascending',
-  DESC: 'descending',
+  ASC: "ascending",
+  DESC: "descending"
 } as const;
 
 export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
@@ -24,19 +24,19 @@ export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
 
     const sortingIndicator = () => {
       const getSortingIndicatorClasses = (direction: Direction) => {
-        const sortingIndicatorClasses = [classes['indicator']];
+        const sortingIndicatorClasses = [classes["indicator"]];
         activeSortDirection &&
           sortingIndicatorClasses.push(
-            activeSortDirection === direction ? classes['active'] : classes['hidden']
+            activeSortDirection === direction ? classes["active"] : classes["hidden"]
           );
         return sortingIndicatorClasses;
       };
 
       return (
         <Fragment>
-          <Icon className={getSortingIndicatorClasses('ASC').join(' ')} icon={Icons.TriangleUp} />
+          <Icon className={getSortingIndicatorClasses("ASC").join(" ")} icon={Icons.TriangleUp} />
           <Icon
-            className={getSortingIndicatorClasses('DESC').join(' ')}
+            className={getSortingIndicatorClasses("DESC").join(" ")}
             icon={Icons.TriangleDown}
           />
         </Fragment>
@@ -45,9 +45,9 @@ export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
 
     const innerContent = (
       <Fragment>
-        <span className={classes['headline']}>{headline}</span>
+        <span className={classes["headline"]}>{headline}</span>
         {!disableSorting && (
-          <div className={classes['sorting-indicator-container']}>{sortingIndicator()}</div>
+          <div className={classes["sorting-indicator-container"]}>{sortingIndicator()}</div>
         )}
       </Fragment>
     );
@@ -56,7 +56,7 @@ export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
       <th
         {...rest}
         ref={ref}
-        className={classes['header-cell']}
+        className={classes["header-cell"]}
         aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
       >
         {disableSorting ? (

package/src/DataGrid/datagrid.interfaces.ts

@@ -1,5 +1,5 @@
 export type ColumnName = string;
-export type Direction = 'ASC' | 'DESC';
+export type Direction = "ASC" | "DESC";
 export type Sort = {
   name: ColumnName;
   direction: Direction;

package/src/Form/Checkbox/Checkbox.test.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useRef } from 'react';
-import { Checkbox, Props } from './Checkbox';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Toggle } from '../Toggle/Toggle';
+import React, { useEffect, useRef } from "react";
+import { Checkbox, Props } from "./Checkbox";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Toggle } from "../Toggle/Toggle";
 
 const onChangeHandler = jest.fn();
 
 const defaultParams: Props = {
-  name: 'Testing',
-  children: 'checkbox content',
-  helperText: 'example helper',
-  onChange: onChangeHandler,
+  name: "Testing",
+  children: "checkbox content",
+  helperText: "example helper",
+  onChange: onChangeHandler
 };
 
 const createCheckbox = (params?: (defaultParams: Props) => Props) => {
@@ -19,25 +19,25 @@ const createCheckbox = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<Checkbox {...parameters} data-testid="checkbox" />);
-  const checkbox = queries.getByTestId('checkbox');
+  const checkbox = queries.getByTestId("checkbox");
 
   return {
     ...queries,
-    checkbox,
+    checkbox
   };
 };
 
-describe('Checkbox should render', () => {
-  it('renders without crashing', () => {
+describe("Checkbox should render", () => {
+  it("renders without crashing", () => {
     const { checkbox } = createCheckbox();
     expect(checkbox).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;
     }) => {
@@ -53,42 +53,42 @@ 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('Checkbox should have proper attributes', () => {
-  it('should be unchecked', () => {
+describe("Checkbox should have proper attributes", () => {
+  it("should be unchecked", () => {
     const { checkbox } = createCheckbox();
 
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
   });
 
-  it('should be checked', () => {
-    const { checkbox } = createCheckbox((defaultParams) => ({ ...defaultParams, checked: true }));
+  it("should be checked", () => {
+    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, checked: true }));
 
-    expect(checkbox).toHaveAttribute('aria-checked', 'true');
+    expect(checkbox).toHaveAttribute("aria-checked", "true");
   });
 
-  it('should call the onChange function', () => {
+  it("should call the onChange function", () => {
     const onChangeHandler = jest.fn();
-    const { checkbox } = createCheckbox((defaultParams) => ({
+    const { checkbox } = createCheckbox(defaultParams => ({
       ...defaultParams,
-      onChange: onChangeHandler,
+      onChange: onChangeHandler
     }));
     userEvent.click(checkbox);
     expect(onChangeHandler).toHaveBeenCalled();
   });
 
-  it('should be disabled', () => {
+  it("should be disabled", () => {
     const onChangeHandler = jest.fn();
-    const { checkbox } = createCheckbox((defaultParams) => ({
+    const { checkbox } = createCheckbox(defaultParams => ({
       ...defaultParams,
       onChange: onChangeHandler,
-      disabled: true,
+      disabled: true
     }));
 
     expect(checkbox).toBeDisabled();
@@ -98,64 +98,64 @@ describe('Checkbox should have proper attributes', () => {
     expect(onChangeHandler).not.toHaveBeenCalled();
   });
 
-  it('nested checkbox should be disabled', () => {
-    const { getByTestId } = createCheckbox((defaultParams) => ({
+  it("nested checkbox should be disabled", () => {
+    const { getByTestId } = createCheckbox(defaultParams => ({
       ...defaultParams,
       indeterminate: false,
-      label: 'test',
+      label: "test",
       children: (
         <Checkbox data-testid="nested-checkbox" name="test" disabled={true}>
           test
         </Checkbox>
-      ),
+      )
     }));
 
-    const nestedCheckbox = getByTestId('nested-checkbox');
+    const nestedCheckbox = getByTestId("nested-checkbox");
 
     expect(nestedCheckbox).toBeDisabled();
   });
 
-  it('should have helpertext rendered', () => {
+  it("should have helpertext rendered", () => {
     const { getByText } = createCheckbox();
 
-    const helperText = getByText('example helper');
+    const helperText = getByText("example helper");
 
     expect(helperText).toBeTruthy();
   });
 
-  it('should have the error state enabled', () => {
-    const { checkbox, container, getByTestId } = createCheckbox((defaultParams) => ({
+  it("should have the error state enabled", () => {
+    const { checkbox, container, getByTestId } = createCheckbox(defaultParams => ({
       ...defaultParams,
       error: true,
-      errorMessage: 'This is an error',
-      formSelectorWrapperProps: { 'data-testid': 'checkbox-wrapper' },
+      errorMessage: "This is an error",
+      formSelectorWrapperProps: { "data-testid": "checkbox-wrapper" }
     }));
 
     expect(checkbox).toHaveAttribute(
-      'aria-describedby',
-      container.querySelector('.error-message span:last-of-type')!.id
+      "aria-describedby",
+      container.querySelector(".error-message span:last-of-type")!.id
     );
 
-    expect(checkbox).toHaveAttribute('aria-invalid', 'true');
-    expect(getByTestId('checkbox-wrapper')).toHaveClass('error');
+    expect(checkbox).toHaveAttribute("aria-invalid", "true");
+    expect(getByTestId("checkbox-wrapper")).toHaveClass("error");
   });
 
-  it('should have a correctly linked label element', () => {
-    const { checkbox, container } = createCheckbox((defaultParams) => ({
+  it("should have a correctly linked label element", () => {
+    const { checkbox, container } = createCheckbox(defaultParams => ({
       ...defaultParams,
-      children: 'Label',
+      children: "Label"
     }));
 
-    const id = checkbox.getAttribute('id');
+    const id = checkbox.getAttribute("id");
     const label = container.querySelector(`label[for=${id}]`);
 
     expect(label).toBeTruthy();
-    expect(label).toHaveTextContent('Label');
+    expect(label).toHaveTextContent("Label");
   });
 });
 
-describe('Checkbox should be interactive', () => {
-  it('should call onChange when clicked', () => {
+describe("Checkbox should be interactive", () => {
+  it("should call onChange when clicked", () => {
     const { checkbox } = createCheckbox();
 
     expect(onChangeHandler).not.toBeCalled();
@@ -163,24 +163,24 @@ describe('Checkbox should be interactive', () => {
     expect(onChangeHandler).toBeCalledTimes(1);
   });
 
-  it('should not call onChange when disabled', () => {
-    const { checkbox } = createCheckbox((defaultParams) => ({ ...defaultParams, disabled: true }));
+  it("should not call onChange when disabled", () => {
+    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, disabled: true }));
 
     userEvent.click(checkbox);
     expect(onChangeHandler).not.toBeCalled();
   });
 });
 
-describe('toggle version', () => {
-  it('should turn into a toggle', () => {
+describe("toggle version", () => {
+  it("should turn into a toggle", () => {
     const { container } = render(<Toggle name="toggle">Test</Toggle>);
 
-    expect(container.querySelector('[data-toggle]')).toBeInTheDocument();
+    expect(container.querySelector("[data-toggle]")).toBeInTheDocument();
   });
 });
 
-describe('missing attributes gets us errors', () => {
-  it('throws an error for missing label prop', () => {
+describe("missing attributes gets us errors", () => {
+  it("throws an error for missing label prop", () => {
     // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
     const err = console.error;
     console.error = jest.fn();
@@ -189,24 +189,24 @@ describe('missing attributes gets us errors', () => {
 
     try {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox((defaultParams) => ({
+      createCheckbox(defaultParams => ({
         ...defaultParams,
-        name: 'testing',
-        children: <Checkbox name="test">Test</Checkbox>,
+        name: "testing",
+        children: <Checkbox name="test">Test</Checkbox>
       }));
     } catch (e: any) {
       actual = e.message;
     }
 
     const expected =
-      'If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.';
+      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.";
 
     expect(actual).toEqual(expected);
 
     console.error = err;
   });
 
-  it('throws an error for indeterminate prop', () => {
+  it("throws an error for indeterminate prop", () => {
     // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
     const err = console.error;
     console.error = jest.fn();
@@ -215,24 +215,24 @@ describe('missing attributes gets us errors', () => {
 
     try {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox((defaultParams) => ({
+      createCheckbox(defaultParams => ({
         ...defaultParams,
-        label: 'testing',
-        children: <Checkbox name="test">Test</Checkbox>,
+        label: "testing",
+        children: <Checkbox name="test">Test</Checkbox>
       }));
     } catch (e: any) {
       actual = e.message;
     }
 
     const expected =
-      'If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.';
+      "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.";
 
     expect(actual).toEqual(expected);
 
     console.error = err;
   });
 
-  it('throws an error for incorrect children prop', () => {
+  it("throws an error for incorrect children prop", () => {
     // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
     const err = console.error;
     console.error = jest.fn();
@@ -241,22 +241,22 @@ describe('missing attributes gets us errors', () => {
 
     try {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox((defaultParams) => ({
-        name: undefined,
+      createCheckbox(defaultParams => ({
+        name: undefined
       }));
     } catch (e: any) {
       actual = e.message;
     }
 
     const expected =
-      'Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.';
+      "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.";
 
     expect(actual).toEqual(expected);
 
     console.error = err;
   });
 
-  it('throws an error for missing name prop', () => {
+  it("throws an error for missing name prop", () => {
     // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
     const err = console.error;
     console.error = jest.fn();
@@ -265,8 +265,8 @@ describe('missing attributes gets us errors', () => {
 
     try {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox((defaultParams) => ({
-        children: 'test',
+      createCheckbox(defaultParams => ({
+        children: "test"
       }));
     } catch (e: any) {
       actual = e.message;

package/src/Form/Checkbox/Checkbox.tsx

@@ -1,17 +1,17 @@
-import React, { ComponentPropsWithRef, ReactElement, ReactNode, useEffect } from 'react';
-import { Icon, Icons } from '../../Icon/Icon';
-import { Props as FormHelperTextProps } from '../FormHelperText/FormHelperText';
-import classes from './Checkbox.module.scss';
-import { useFormSelector } from '../../hooks/useFormSelector';
+import React, { ComponentPropsWithRef, ReactElement, ReactNode, useEffect } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
+import classes from "./Checkbox.module.scss";
+import { useFormSelector } from "../../hooks/useFormSelector";
 import {
   FormSelectorWrapper,
-  Props as FormSelectorWrapperProps,
-} from '../FormSelectorWrapper/FormSelectorWrapper';
-import { FormSelector } from '../form.interfaces';
+  Props as FormSelectorWrapperProps
+} from "../FormSelectorWrapper/FormSelectorWrapper";
+import { FormSelector } from "../form.interfaces";
 
-const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.['data-toggle'];
+const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.["data-toggle"];
 
-export interface Props extends ComponentPropsWithRef<'input'>, FormSelector {
+export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
   children: ReactNode;
   label?: string;
   indeterminate?: boolean;
@@ -48,7 +48,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
       parentErrorId,
       errorMessage,
       error,
-      parentHelperId,
+      parentHelperId
     });
 
     useEffect(() => {
@@ -56,9 +56,9 @@ export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
         throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
       }
 
-      if (typeof children === 'object' && !isToggle(children) && indeterminate === undefined) {
+      if (typeof children === "object" && !isToggle(children) && indeterminate === undefined) {
         throw new Error(
-          'If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.'
+          "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop."
         );
       }
     }, []);
@@ -68,22 +68,22 @@ export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
         return label;
       } else if (children === undefined) {
         throw new Error(
-          'Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.'
+          "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component."
         );
       }
 
-      if (typeof children === 'string') {
+      if (typeof children === "string") {
         return children;
       }
 
       throw new Error(
-        'If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.'
+        "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox."
       );
     };
 
     const renderNestedCheckboxes = () => (
-      <ul className={classes['checkbox-list']}>
-        {React.Children.map(children as ReactElement[], (child) => {
+      <ul className={classes["checkbox-list"]}>
+        {React.Children.map(children as ReactElement[], child => {
           return (
             <li>
               <Checkbox
@@ -110,14 +110,14 @@ export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
 
     const renderToggle = () => React.Children.toArray(children).filter(isToggle);
 
-    const iconClasses = [classes['input'], disabled ? classes['disabled'] : ''];
+    const iconClasses = [classes["input"], disabled ? classes["disabled"] : ""];
 
     /** Default return value is the default checkbox */
     return (
       <FormSelectorWrapper
         {...formSelectorWrapperProps}
-        className={`${classes['checkbox-wrapper']} ${className ? className : ''}`}
-        containerProps={{ className: classes['checkbox-container'] }}
+        className={`${classes["checkbox-wrapper"]} ${className ? className : ""}`}
+        containerProps={{ className: classes["checkbox-container"] }}
         helperText={helperText}
         helperProps={helperProps}
         parentErrorId={parentErrorId}
@@ -127,18 +127,18 @@ export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
         disabled={disabled}
         identifier={identifier}
         nestedChildren={
-          typeof children === 'object' && !isToggle(children) && renderNestedCheckboxes()
+          typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
         }
       >
         <input
           {...rest}
           ref={ref}
           disabled={disabled}
-          className={`${classes['native-input']} ${error ? classes['error'] : ''}`}
+          className={`${classes["native-input"]} ${error ? classes["error"] : ""}`}
           checked={checked}
           onChange={onChangeHandler}
           aria-invalid={error as boolean}
-          aria-checked={indeterminate ? 'mixed' : checked}
+          aria-checked={indeterminate ? "mixed" : checked}
           aria-describedby={describedBy}
           id={`${identifier}-checkbox`}
           name={name}
@@ -146,12 +146,12 @@ export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
         />
         {renderToggle()}
 
-        {indeterminate && <Icon className={iconClasses.join(' ')} icon={Icons.MinusSquare} />}
+        {indeterminate && <Icon className={iconClasses.join(" ")} icon={Icons.MinusSquare} />}
         {checked && !indeterminate && (
-          <Icon className={iconClasses.join(' ')} icon={Icons.CheckmarkSquare} />
+          <Icon className={iconClasses.join(" ")} icon={Icons.CheckmarkSquare} />
         )}
         {!checked && !indeterminate && (
-          <Icon className={iconClasses.join(' ')} icon={Icons.Square} />
+          <Icon className={iconClasses.join(" ")} icon={Icons.Square} />
         )}
         <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
       </FormSelectorWrapper>

package/src/Form/Fieldset/Fieldset.module.scss

@@ -18,7 +18,7 @@
 
     &.required {
       &:after {
-        content: ' *';
+        content: " *";
       }
     }