@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/src/Wizard/wizardStateReducer.ts

@@ -1,6 +1,6 @@
-import { Reducer } from 'react';
-import { Step } from './BaseWizardSteps/BaseWizardSteps';
-import { WizardMode } from './Wizard';
+import { Reducer } from "react";
+import { Step } from "./BaseWizardSteps/BaseWizardSteps";
+import { WizardMode } from "./Wizard";
 
 type WizardStateType = {
   steps: Step[];
@@ -10,7 +10,7 @@ type WizardStateType = {
 };
 
 interface SetWizardStateAction {
-  type: 'SET_STATE';
+  type: "SET_STATE";
   payload: {
     steps: Step[];
     mode: WizardMode;
@@ -19,7 +19,7 @@ interface SetWizardStateAction {
 }
 
 interface ChangeCurrentStepNoAction {
-  type: 'CHANGE_CURRENT_STEP_NO';
+  type: "CHANGE_CURRENT_STEP_NO";
   payload: number;
 }
 
@@ -28,20 +28,20 @@ const setWizardState = (
   mode: WizardMode,
   stepScreenReaderLabel: string
 ): SetWizardStateAction => {
-  return { type: 'SET_STATE', payload: { steps, mode, stepScreenReaderLabel } };
+  return { type: "SET_STATE", payload: { steps, mode, stepScreenReaderLabel } };
 };
 
 const changeCurrentStepNo = (currentStepNo: number): ChangeCurrentStepNoAction => {
-  return { type: 'CHANGE_CURRENT_STEP_NO', payload: currentStepNo };
+  return { type: "CHANGE_CURRENT_STEP_NO", payload: currentStepNo };
 };
 
 type WizardActions = SetWizardStateAction | ChangeCurrentStepNoAction;
 
 const reducer: Reducer<WizardStateType, WizardActions> = (state, action) => {
   switch (action.type) {
-    case 'SET_STATE':
+    case "SET_STATE":
       return { ...state, ...action.payload };
-    case 'CHANGE_CURRENT_STEP_NO':
+    case "CHANGE_CURRENT_STEP_NO":
       return { ...state, currentStepNo: action.payload };
     default:
       return state;

package/src/_BaseStyling_/BaseStyling.test.tsx

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
-import { BaseStyling } from './BaseStyling';
-import { Button } from '../Button/Button';
-import { render } from '@testing-library/react';
+import React, { Fragment } from "react";
+import { BaseStyling } from "./BaseStyling";
+import { Button } from "../Button/Button";
+import { render } from "@testing-library/react";
 
-describe('BaseStyling should render', () => {
-  it('renders without crashing', async () => {
+describe("BaseStyling should render", () => {
+  it("renders without crashing", async () => {
     const { container, findByTestId } = render(
       <Fragment>
         <BaseStyling>
@@ -13,19 +13,19 @@ describe('BaseStyling should render', () => {
       </Fragment>
     );
 
-    const button = await findByTestId('button');
-    expect(button).toHaveStyle({ backgroundColor: 'rgb(158, 0, 107);' });
-    expect(container.querySelector('#child')).toBeDefined();
+    const button = await findByTestId("button");
+    expect(button).toHaveStyle({ backgroundColor: "rgb(158, 0, 107);" });
+    expect(container.querySelector("#child")).toBeDefined();
   });
 });
 
-describe('Should override default color', () => {
-  it('overrides primary color', async () => {
+describe("Should override default color", () => {
+  it("overrides primary color", async () => {
     const { findByTestId } = render(
       <Fragment>
         <BaseStyling
           properties={{
-            colorPrimary: 'rgb(255, 255, 255);',
+            colorPrimary: "rgb(255, 255, 255);"
           }}
         >
           <Button data-testid="button">Test</Button>
@@ -33,7 +33,7 @@ describe('Should override default color', () => {
       </Fragment>
     );
 
-    const button = await findByTestId('button');
-    expect(button).toHaveStyle({ backgroundColor: 'rgb(255, 255, 255);' });
+    const button = await findByTestId("button");
+    expect(button).toHaveStyle({ backgroundColor: "rgb(255, 255, 255);" });
   });
 });

package/src/_BaseStyling_/BaseStyling.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, HTMLAttributes, ReactChild, useEffect, useState } from 'react';
+import React, { Fragment, HTMLAttributes, ReactChild, useEffect, useState } from "react";
 
 interface CSSProperties {
   colorFocus?: string;
@@ -60,56 +60,56 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
-    colorFocus: '#0085f2',
-    colorPrimary: '#9e006b',
-    colorSecondary: '#003b5e',
-    colorTertiary: '#ff1e4e',
-    defaultLineHeight: '26px',
-    buttonBorderRadius: '20px',
-    buttonBorderWidth: '2px',
-    buttonFontSize: '1rem',
-    buttonBorderStyle: 'solid',
-    buttonFillTextColor: '#fff',
-    buttonFillBackgroundColor: '#fff',
-    buttonOutlineHoverTextColor: '#fff',
-    inputBorderColor: '#e9e9eb',
-    inputBorderRadius: '8px',
-    inputBorderWidth: '1px',
-    inputBorderWidthFocus: '2px',
-    inputBorderStyle: 'solid',
-    inputBackgroundColor: '#fff',
-    modalShadowColor: 'rgba(0, 0, 0, 0.16)',
-    modalBackgroundColor: '#f5f8f8',
-    modalHeaderBackgroundColor: '#fff',
-    snackbarTextColor: '#fff',
-    snackbarInfoBackgroundColor: '#003b5e',
-    snackbarSuccessBackgroundColor: '#008a28',
-    snackbarErrorBackgroundColor: '#e22a1d',
-    snackbarBorderRadius: '8px',
-    dataGridRowBackgroundColor: 'transparent',
-    dataGridRowHoverBackgroundColor: '#f5e6f0',
-    tabsBackgroundColor: '#FFF',
-    tabBorderWidth: '2px',
-    tabBorderStyle: 'solid',
-    tablistBorderWidth: '1px',
-    tablistBorderStyle: 'solid',
-    tablistBorderColor: '#C3C3C7',
-    tabTextColor: '#0f0f1e',
-    default: '#0f0f1e',
-    success: '#008a28',
-    error: '#e22a1d',
-    disabled: '#e9e9eb',
-    greyedOut: '#6f6f76',
-    warning: '#ff6105',
+    colorFocus: "#0085f2",
+    colorPrimary: "#9e006b",
+    colorSecondary: "#003b5e",
+    colorTertiary: "#ff1e4e",
+    defaultLineHeight: "26px",
+    buttonBorderRadius: "20px",
+    buttonBorderWidth: "2px",
+    buttonFontSize: "1rem",
+    buttonBorderStyle: "solid",
+    buttonFillTextColor: "#fff",
+    buttonFillBackgroundColor: "#fff",
+    buttonOutlineHoverTextColor: "#fff",
+    inputBorderColor: "#e9e9eb",
+    inputBorderRadius: "8px",
+    inputBorderWidth: "1px",
+    inputBorderWidthFocus: "2px",
+    inputBorderStyle: "solid",
+    inputBackgroundColor: "#fff",
+    modalShadowColor: "rgba(0, 0, 0, 0.16)",
+    modalBackgroundColor: "#f5f8f8",
+    modalHeaderBackgroundColor: "#fff",
+    snackbarTextColor: "#fff",
+    snackbarInfoBackgroundColor: "#003b5e",
+    snackbarSuccessBackgroundColor: "#008a28",
+    snackbarErrorBackgroundColor: "#d9291c",
+    snackbarBorderRadius: "8px",
+    dataGridRowBackgroundColor: "transparent",
+    dataGridRowHoverBackgroundColor: "#f5e6f0",
+    tabsBackgroundColor: "#FFF",
+    tabBorderWidth: "2px",
+    tabBorderStyle: "solid",
+    tablistBorderWidth: "1px",
+    tablistBorderStyle: "solid",
+    tablistBorderColor: "#C3C3C7",
+    tabTextColor: "#0f0f1e",
+    default: "#0f0f1e",
+    success: "#008a28",
+    error: "#d9291c",
+    disabled: "#e9e9eb",
+    greyedOut: "#6f6f76",
+    warning: "#ff6105",
     fontFamily: "'Red Hat Display', sans-serif",
     fontFamilyCode: "'Red Hat Mono', sans-serif",
-    fontSize: '1rem',
-    fontSizeH1: '2.5rem',
-    fontSizeH2: '1.625rem',
-    fontSizeH3: '1.5rem',
-    fontSizeH4: '1.25rem',
-    fontSizeSub: '.75rem',
-    fontSizeCode: '1rem',
+    fontSize: "1rem",
+    fontSizeH1: "2.5rem",
+    fontSizeH2: "1.625rem",
+    fontSizeH3: "1.5rem",
+    fontSizeH4: "1.25rem",
+    fontSizeSub: ".75rem",
+    fontSizeCode: "1rem"
   };
 
   /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */
@@ -118,7 +118,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
   /** Set the actual CSS properties on the HTML :root object */
   const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
     for (const [key, value] of Object.entries(CSSPropertiesObject)) {
-      const formattedPropertyName = key.replace(/([A-Z])/g, (val) => `-${val.toLowerCase()}`);
+      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);
       document.documentElement.style.setProperty(`--${formattedPropertyName}`, value);
     }
   };

package/src/hooks/useAnimation.test.tsx

@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useAnimation } from './useAnimation';
+import React, { Fragment } from "react";
+import { render, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useAnimation } from "./useAnimation";
 
-describe('useAnimation', () => {
-  it('should execute', () => {
+describe("useAnimation", () => {
+  it("should execute", () => {
     const callback = jest.fn();
 
     const Component = () => {
@@ -18,7 +18,7 @@ describe('useAnimation', () => {
           <div
             data-testid="animated-div"
             ref={ref}
-            className={animationStarted ? 'animation-started' : ''}
+            className={animationStarted ? "animation-started" : ""}
           >
             animated div
           </div>
@@ -28,18 +28,18 @@ describe('useAnimation', () => {
 
     const { getByTestId } = render(<Component />);
 
-    const animatedDiv = getByTestId('animated-div');
-    const startButton = getByTestId('button');
+    const animatedDiv = getByTestId("animated-div");
+    const startButton = getByTestId("button");
 
-    expect(animatedDiv).not.toHaveClass('animation-started');
+    expect(animatedDiv).not.toHaveClass("animation-started");
     expect(callback).not.toBeCalled();
 
     userEvent.click(startButton);
-    expect(animatedDiv).toHaveClass('animation-started');
+    expect(animatedDiv).toHaveClass("animation-started");
     expect(callback).not.toBeCalled();
 
     fireEvent.animationEnd(animatedDiv);
-    expect(animatedDiv).toHaveClass('animation-started');
+    expect(animatedDiv).toHaveClass("animation-started");
     expect(callback).toBeCalled();
   });
 });

package/src/hooks/useAnimation.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 export const useAnimation = <RefElement extends HTMLElement>(callback: () => void) => {
   const animatedObjectRef = useRef<RefElement>(null);
@@ -8,13 +8,13 @@ export const useAnimation = <RefElement extends HTMLElement>(callback: () => voi
   const onAnimationEnd = () => animationStarted && callback();
 
   useEffect(() => {
-    animatedObjectRef.current?.addEventListener('animationend', onAnimationEnd);
-    return () => animatedObjectRef.current?.removeEventListener('animationend', onAnimationEnd);
+    animatedObjectRef.current?.addEventListener("animationend", onAnimationEnd);
+    return () => animatedObjectRef.current?.removeEventListener("animationend", onAnimationEnd);
   }, [animationStarted]);
 
   return {
     ref: animatedObjectRef,
     animationStarted,
-    startAnimation: () => setAnimationStarted(true),
+    startAnimation: () => setAnimationStarted(true)
   };
 };

package/src/hooks/useBodyClick.test.tsx

@@ -1,10 +1,10 @@
-import React, { Fragment, useState } from 'react';
-import { useBodyClick } from './useBodyClick';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { Fragment, useState } from "react";
+import { useBodyClick } from "./useBodyClick";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-describe('function should be executed', () => {
-  it('should execute', () => {
+describe("function should be executed", () => {
+  it("should execute", () => {
     const clickHandler = jest.fn();
     const validateFunction = jest.fn(() => true);
 
@@ -27,8 +27,8 @@ describe('function should be executed', () => {
 
     const { getByTestId } = render(<Component></Component>);
 
-    const button1 = getByTestId('button1');
-    const button2 = getByTestId('button2');
+    const button1 = getByTestId("button1");
+    const button2 = getByTestId("button2");
 
     userEvent.click(button1);
     userEvent.click(button2);

package/src/hooks/useBodyClick.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
 export const useBodyClick = (
   checkFunction: (event: MouseEvent) => boolean,
@@ -11,10 +11,10 @@ export const useBodyClick = (
     }
   }
   useEffect(() => {
-    window.addEventListener('click', bodyClickListener);
+    window.addEventListener("click", bodyClickListener);
 
     return () => {
-      window.removeEventListener('click', bodyClickListener);
+      window.removeEventListener("click", bodyClickListener);
     };
   }, [dependingStateVariable]);
 };

package/src/hooks/useFormSelector.test.ts

@@ -1,16 +1,16 @@
-import { useFormSelector } from './useFormSelector';
-import { renderHook } from '@testing-library/react-hooks';
+import { useFormSelector } from "./useFormSelector";
+import { renderHook } from "@testing-library/react-hooks";
 
-describe('we should get the correct return values and describedBy is the same as identifier', () => {
-  it('should return correct values', () => {
+describe("we should get the correct return values and describedBy is the same as identifier", () => {
+  it("should return correct values", () => {
     const { result } = renderHook(() =>
       useFormSelector({
-        name: 'test',
-        errorMessage: 'errormessage',
+        name: "test",
+        errorMessage: "errormessage",
         error: false,
-        parentErrorId: 'parenterrorid',
-        helperText: 'helpertext',
-        parentHelperId: 'parenthelperid',
+        parentErrorId: "parenterrorid",
+        helperText: "helpertext",
+        parentHelperId: "parenthelperid"
       })
     );
 
@@ -22,19 +22,19 @@ describe('we should get the correct return values and describedBy is the same as
   });
 });
 
-describe('describedBy should be the parenterrorid', () => {
-  it('should be linked correctly', () => {
+describe("describedBy should be the parenterrorid", () => {
+  it("should be linked correctly", () => {
     const { result } = renderHook(() =>
       useFormSelector({
-        name: 'test',
-        errorMessage: 'errormessage',
+        name: "test",
+        errorMessage: "errormessage",
         error: true,
-        parentErrorId: 'parenterrorid',
-        helperText: 'helpertext',
-        parentHelperId: 'parenthelperid',
+        parentErrorId: "parenterrorid",
+        helperText: "helpertext",
+        parentHelperId: "parenthelperid"
       })
     );
 
-    expect(result.current.describedBy).toBe('parenterrorid');
+    expect(result.current.describedBy).toBe("parenterrorid");
   });
 });

package/src/hooks/useFormSelector.ts

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { generateID } from '../util/helper';
+import { useEffect, useState } from "react";
+import { generateID } from "../util/helper";
 
 export interface ConfigObject {
   name: string | undefined;
@@ -12,7 +12,7 @@ export interface ConfigObject {
 
 export const useFormSelector = (configObject: ConfigObject) => {
   const [identifier] = useState(generateID(15, configObject.name));
-  const [describedBy, setDescribedBy] = useState('');
+  const [describedBy, setDescribedBy] = useState("");
   const [errorId] = useState(generateID(15, configObject.errorMessage));
 
   useEffect(() => {
@@ -42,6 +42,6 @@ export const useFormSelector = (configObject: ConfigObject) => {
   return {
     describedBy,
     errorId,
-    identifier,
+    identifier
   };
 };