@onewelcome/react-lib-components 0.1.0-alpha → 0.1.3-alpha

package/src/Typography/Typography.tsx

@@ -1,84 +1,82 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
 import classes from './Typography.module.scss';
 import { Spacing, useSpacing } from '../hooks/useSpacing';
 
 const validVariants = ['h1', 'h2', 'h3', 'h4', 'body', 'body-bold', 'sub-text', 'code'] as const;
 export type Variant = typeof validVariants[number];
 
-export interface Props extends HTMLAttributes<HTMLElement> {
+type Tags =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'p'
+  | 'div'
+  | 'code'
+  | 'span'
+  | 'sup'
+  | 'sub'
+  | 'strong'
+  | 'em'
+  | 'small'
+  | 'mark'
+  | 'del'
+  | 'ins'
+  | 'blockquote';
+
+/** I couldn't find anything on the internet that indicated that ComponentPropsWithRef can take multiple tags. Since the TagName can be many different things I have to use any here. Using a mix of tags (like the Tags type) will throw an error. */
+export interface Props extends ComponentPropsWithRef<any> {
   children: ReactNode;
   variant: Variant;
-  tag?:
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'p'
-    | 'div'
-    | 'code'
-    | 'span'
-    | 'sup'
-    | 'sub'
-    | 'strong'
-    | 'em'
-    | 'small'
-    | 'mark'
-    | 'del'
-    | 'ins'
-    | 'blockquote';
+  tag?: Tags;
   spacing?: Spacing;
 }
 
-export const Typography = ({
-  children,
-  variant,
-  tag,
-  style,
-  spacing,
-  className = '',
-  ...rest
-}: Props) => {
-  if (!validVariants.includes(variant)) {
-    throw new Error(
-      `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
-    );
-  }
+export const Typography = React.forwardRef<any, Props>(
+  ({ children, variant, tag, style, spacing, className = '', ...rest }: Props, ref) => {
+    if (!validVariants.includes(variant)) {
+      throw new Error(
+        `You entered an invalid variant. You can choose from: ${validVariants}, you entered: ${variant}`
+      );
+    }
 
-  const styleWithSpacing = useSpacing(spacing, style);
+    const styleWithSpacing = useSpacing(spacing, style);
 
-  if (!tag) {
-    switch (variant) {
-      case 'h1':
-      case 'h2':
-      case 'h3':
-      case 'h4':
-      case 'code':
-        tag = variant;
-        break;
-      case 'body':
-        tag = 'p';
-        break;
-      case 'body-bold':
-        tag = 'p';
-        break;
-      case 'sub-text':
-        tag = 'span';
-        break;
-      default:
-        tag = 'div';
-        break;
+    if (!tag) {
+      switch (variant) {
+        case 'h1':
+        case 'h2':
+        case 'h3':
+        case 'h4':
+        case 'code':
+          tag = variant;
+          break;
+        case 'body':
+          tag = 'p';
+          break;
+        case 'body-bold':
+          tag = 'p';
+          break;
+        case 'sub-text':
+          tag = 'span';
+          break;
+        default:
+          tag = 'div';
+          break;
+      }
     }
-  }
 
-  let TagName = tag;
+    let TagName = tag;
 
-  return (
-    <TagName
-      {...rest}
-      style={styleWithSpacing}
-      className={`${classes['typography_style_' + variant]} ${className}`}
-    >
-      {children}
-    </TagName>
-  );
-};
+    return (
+      <TagName
+        {...rest}
+        ref={ref}
+        style={styleWithSpacing}
+        className={`${classes['typography_style_' + variant]} ${className}`}
+      >
+        {children}
+      </TagName>
+    );
+  }
+);

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentPropsWithRef, Fragment } from 'react';
 import classes from './BaseWizardSteps.module.scss';
 import readyclasses from '../../readyclasses.module.scss';
 import { Icon, Icons } from '../../Icon/Icon';
@@ -10,7 +10,7 @@ export interface Step {
   disabled?: boolean;
 }
 
-export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'onClick'> {
   steps: Step[];
   currentStepNo: number;
   onClick?: (stepNo: number) => void;
@@ -18,69 +18,74 @@ export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'>
   stepScreenReaderLabel: string;
 }
 
-export const BaseWizardSteps = ({
-  steps,
-  currentStepNo,
-  onClick,
-  futureStepsClickable = false,
-  stepScreenReaderLabel,
-  ...restProps
-}: Props) => {
-  const getStepState = (stepNo: number): StepState => {
-    if (currentStepNo === stepNo) {
-      return 'current';
-    } else if (stepNo < currentStepNo) {
-      return 'finished';
-    }
-    return 'future';
-  };
+export const BaseWizardSteps = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      steps,
+      currentStepNo,
+      onClick,
+      futureStepsClickable = false,
+      stepScreenReaderLabel,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const getStepState = (stepNo: number): StepState => {
+      if (currentStepNo === stepNo) {
+        return 'current';
+      } else if (stepNo < currentStepNo) {
+        return 'finished';
+      }
+      return 'future';
+    };
+
+    const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
+      const stepNumberString = String(index + 1);
+      if (stepState === 'finished') {
+        return disabled ? null : <Icon className={classes['checkmark']} icon={Icons.Checkmark} />;
+      } else {
+        return (
+          <Fragment>
+            <span className={readyclasses['sr-only']}>{stepScreenReaderLabel} </span>
+            {stepNumberString}
+          </Fragment>
+        );
+      }
+    };
+
+    const generatedSteps = steps.map((step, index) => {
+      const stepState = getStepState(index);
+      const disabledStyleClassName = step.disabled ? classes['disabled'] : '';
+      const clickableClassName = futureStepsClickable ? classes['clickable'] : '';
 
-  const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
-    const stepNumberString = String(index + 1);
-    if (stepState === 'finished') {
-      return disabled ? null : <Icon className={classes['checkmark']} icon={Icons.Checkmark} />;
-    } else {
       return (
-        <>
-          <span className={readyclasses['sr-only']}>{stepScreenReaderLabel} </span>
-          {stepNumberString}
-        </>
+        <button
+          key={step.label.toLowerCase().replace(/\s/, '-')}
+          disabled={
+            step.disabled ||
+            (stepState === 'future' && !futureStepsClickable) ||
+            stepState === 'current'
+          }
+          aria-current={stepState === 'current' ? 'step' : undefined}
+          onClick={() => onClick && onClick(index)}
+          className={`${classes['wizard-element']} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
+        >
+          <div className={classes['number-wrapper']}>
+            <span className={classes['number']}>
+              {getStepContent(stepState, index, step.disabled)}
+            </span>
+          </div>
+          <div className={classes['two-line-text-overflow']}>
+            <span className={classes['label']}>{step.label}</span>
+          </div>
+        </button>
       );
-    }
-  };
-
-  const generatedSteps = steps.map((step, index) => {
-    const stepState = getStepState(index);
-    const disabledStyleClassName = step.disabled ? classes['disabled'] : '';
-    const clickableClassName = futureStepsClickable ? classes['clickable'] : '';
+    });
 
     return (
-      <button
-        key={step.label.toLowerCase().replace(/\s/, '-')}
-        disabled={
-          step.disabled ||
-          (stepState === 'future' && !futureStepsClickable) ||
-          stepState === 'current'
-        }
-        aria-current={stepState === 'current' ? 'step' : undefined}
-        onClick={() => onClick && onClick(index)}
-        className={`${classes['wizard-element']} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
-      >
-        <div className={classes['number-wrapper']}>
-          <span className={classes['number']}>
-            {getStepContent(stepState, index, step.disabled)}
-          </span>
-        </div>
-        <div className={classes['two-line-text-overflow']}>
-          <span className={classes['label']}>{step.label}</span>
-        </div>
-      </button>
+      <div {...rest} ref={ref} className={classes['wizard']}>
+        {generatedSteps}
+      </div>
     );
-  });
-
-  return (
-    <div {...restProps} className={classes['wizard']}>
-      {generatedSteps}
-    </div>
-  );
-};
+  }
+);

package/src/Wizard/Wizard.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { Fragment, useContext, useEffect } from 'react';
 import { Step } from './BaseWizardSteps/BaseWizardSteps';
 import { WizardStateContext, WizardStateProvider } from './WizardStateProvider';
 import { setWizardState } from './wizardStateReducer';
@@ -36,7 +36,7 @@ const WizardContent = ({ steps, mode, stepScreenReaderLabel, onStepChange, child
   useSetWizardState(steps, mode, stepScreenReaderLabel);
   useStepChanging(onStepChange);
 
-  return <>{children}</>;
+  return <Fragment>{children}</Fragment>;
 };
 
 export const Wizard = (props: Props) => {

package/src/Wizard/WizardActions/WizardActions.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { Fragment, useContext, useMemo } from 'react';
 import { Button } from '../../Button/Button';
 import { Step } from '../BaseWizardSteps/BaseWizardSteps';
 import { WizardMode } from '../Wizard';
@@ -78,7 +78,7 @@ export const WizardActions = ({
   };
 
   return (
-    <>
+    <Fragment>
       <Button variant="text" onClick={onCancel}>
         {cancelButtonLabel}
       </Button>
@@ -95,6 +95,6 @@ export const WizardActions = ({
       {isLastStepOrEditMode && (
         <Button onClick={onSaveAndCloseWrapper}>{saveAndCloseButtonLabel}</Button>
       )}
-    </>
+    </Fragment>
   );
 };

package/src/Wizard/WizardSteps/WizardSteps.tsx

@@ -1,30 +1,33 @@
-import React, { useContext } from 'react';
+import React, { ComponentPropsWithRef, useContext } from 'react';
 import { WizardStateContext } from '../WizardStateProvider';
 import { BaseWizardSteps } from '../BaseWizardSteps/BaseWizardSteps';
 import { changeCurrentStepNo } from '../wizardStateReducer';
 
-export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
 }
 
-export const WizardSteps = ({ onStepClick, ...restProps }: Props) => {
-  const {
-    state: { currentStepNo, mode, stepScreenReaderLabel, steps },
-    dispatch,
-  } = useContext(WizardStateContext);
+export const WizardSteps = React.forwardRef<HTMLDivElement, Props>(
+  ({ onStepClick, ...rest }: Props, ref) => {
+    const {
+      state: { currentStepNo, mode, stepScreenReaderLabel, steps },
+      dispatch,
+    } = useContext(WizardStateContext);
 
-  const onClick = (selectedStepNo: number) => {
-    onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));
-  };
+    const onClick = (selectedStepNo: number) => {
+      onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));
+    };
 
-  return (
-    <BaseWizardSteps
-      {...restProps}
-      onClick={onClick}
-      steps={steps}
-      currentStepNo={currentStepNo}
-      stepScreenReaderLabel={stepScreenReaderLabel}
-      futureStepsClickable={mode === 'edit'}
-    />
-  );
-};
+    return (
+      <BaseWizardSteps
+        {...rest}
+        ref={ref}
+        onClick={onClick}
+        steps={steps}
+        currentStepNo={currentStepNo}
+        stepScreenReaderLabel={stepScreenReaderLabel}
+        futureStepsClickable={mode === 'edit'}
+      />
+    );
+  }
+);

package/src/_BaseStyling_/BaseStyling.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment, HTMLAttributes, ReactChild, useEffect, useState } from 'react';
 
 interface CSSProperties {
+  colorFocus?: string;
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
@@ -16,6 +17,7 @@ interface CSSProperties {
   inputBorderRadius?: string;
   inputBorderWidth?: string;
   inputBorderStyle?: string;
+  inputBackgroundColor?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalHeaderBackgroundColor?: string;
@@ -24,6 +26,13 @@ interface CSSProperties {
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  tabsBackgroundColor?: string;
+  tabBorderWidth?: string;
+  tabBorderStyle?: string;
+  tablistBorderWidth?: string;
+  tablistBorderStyle?: string;
+  tablistBorderColor?: string;
+  tabTextColor?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -48,6 +57,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
+    colorFocus: '#0085f2',
     colorPrimary: '#9e006b',
     colorSecondary: '#003b5e',
     colorTertiary: '#ff1e4e',
@@ -63,6 +73,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputBorderRadius: '8px',
     inputBorderWidth: '1px',
     inputBorderStyle: 'solid',
+    inputBackgroundColor: '#FFF',
     modalShadowColor: 'rgba(0, 0, 0, 0.16)',
     modalBackgroundColor: '#F5F8F8',
     modalHeaderBackgroundColor: '#FFF',
@@ -71,6 +82,13 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     snackbarSuccessBackgroundColor: '#008a28',
     snackbarErrorBackgroundColor: '#e22a1d',
     snackbarBorderRadius: '8px',
+    tabsBackgroundColor: '#FFF',
+    tabBorderWidth: '2px',
+    tabBorderStyle: 'solid',
+    tablistBorderWidth: '1px',
+    tablistBorderStyle: 'solid',
+    tablistBorderColor: '#C3C3C7',
+    tabTextColor: '#0f0f1e',
     default: '#0f0f1e',
     success: '#008a28',
     error: '#e22a1d',
@@ -94,7 +112,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.replaceAll(/([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/usePosition.test.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { render } from '@testing-library/react';
 import { ConfigObject, usePosition } from './usePosition';
 import userEvent from '@testing-library/user-event';
@@ -30,7 +30,7 @@ const createUsePositionComponent = (
     const { top, left, bottom, right, calculatePosition } = usePosition({ ...parameters });
 
     return (
-      <>
+      <Fragment>
         <button data-testid="button" onClick={calculatePosition} ref={relativeElement}>
           Test
         </button>
@@ -41,7 +41,7 @@ const createUsePositionComponent = (
         >
           Test
         </div>
-      </>
+      </Fragment>
     );
   };
 

package/src/hooks/useRepeater.test.tsx

@@ -0,0 +1,139 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { useRepeater } from './useRepeater';
+import { render } from '@testing-library/react';
+import { InputWrapper } from '../Form/Wrapper/InputWrapper/InputWrapper';
+import { generateID } from '../util/helper';
+import userEvent from '@testing-library/user-event';
+
+export interface RepeatedComponentProps {
+  onChange?: (state: { [key: string]: unknown }) => void;
+  identifier?: string;
+}
+
+const ComponentToRepeat = ({ onChange, identifier }: RepeatedComponentProps) => {
+  const [inputState, setInputState] = useState({
+    errorMessage: 'random error',
+    error: false,
+    value: '',
+    identifier: identifier,
+  });
+
+  useEffect(() => {
+    onChange && onChange(inputState);
+  }, [inputState]);
+
+  return (
+    <InputWrapper
+      helperText="Helper text for this field. Description should be short and not repeat the label"
+      name={`input_${identifier}`}
+      errorMessage={inputState.errorMessage}
+      type="text"
+      error={inputState.error}
+      value={inputState.value}
+      label="Label for this inputfield"
+      onChange={(event) => {
+        setInputState((prevState) => ({ ...prevState, value: event.target.value }));
+      }}
+    />
+  );
+};
+
+describe('useRepeater should render', () => {
+  it('renders without crashing and repeats 1 item', () => {
+    const onChangeHandler = jest.fn();
+
+    const App = () => {
+      const { repeatedComponents } = useRepeater({
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+      });
+
+      return (
+        <div>
+          {repeatedComponents.map((component, index) =>
+            React.cloneElement(component, {
+              identifier: `component_${index}`,
+            })
+          )}
+        </div>
+      );
+    };
+
+    const renderedItems = render(<App />);
+
+    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+
+    expect(inputWrappers.length).toBe(1);
+  });
+
+  it('should repeat 2 items', () => {
+    const onChangeHandler = jest.fn();
+
+    const App = () => {
+      const { repeatedComponents, repeat } = useRepeater({
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+      });
+
+      useEffect(() => {
+        repeat();
+      }, []);
+
+      return (
+        <div>
+          {repeatedComponents.map((component, index) =>
+            React.cloneElement(component, {
+              identifier: `component_${index}`,
+            })
+          )}
+        </div>
+      );
+    };
+
+    const renderedItems = render(<App />);
+
+    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+
+    expect(inputWrappers.length).toBe(2);
+  });
+
+  it('should repeat 3 items and remove the first index', () => {
+    const onChangeHandler = jest.fn();
+
+    const App = () => {
+      const { repeatedComponents, repeat, remove } = useRepeater({
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+      });
+
+      useEffect(() => {
+        repeat();
+        repeat();
+      }, []);
+
+      return (
+        <div>
+          {repeatedComponents.map((component, index) => (
+            <Fragment key={index}>
+              {React.cloneElement(component, {
+                identifier: generateID(),
+              })}
+              <button id={`remove_input_${index}`} onClick={() => remove(component)}>
+                Remove
+              </button>
+            </Fragment>
+          ))}
+        </div>
+      );
+    };
+
+    const renderedItems = render(<App />);
+
+    const secondInputID = renderedItems.container.querySelectorAll('.input-wrapper input')[1].id;
+
+    const removeButton = renderedItems.container.querySelector('#remove_input_1');
+
+    userEvent.click(removeButton!);
+
+    expect(renderedItems.container.querySelector(`#${secondInputID}`)).toBeFalsy();
+    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+    expect(inputWrappers.length).toBe(2);
+  });
+});

package/src/hooks/useRepeater.ts

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { generateID } from '../util/helper';
+
+interface Arguments {
+  componentToRepeat: React.ReactElement;
+}
+
+export const useRepeater = <T>({ componentToRepeat }: Arguments) => {
+  const [repeatedComponents, setRepeatedComponents] = useState<JSX.Element[]>([]);
+
+  useEffect(() => {
+    repeat();
+  }, []);
+
+  const repeat = () => {
+    const clonedComponent = React.cloneElement(componentToRepeat, { key: generateID(20) });
+
+    setRepeatedComponents((prevState) => [...prevState, clonedComponent]);
+  };
+
+  const remove = (componentToRemove: React.ReactElement<T>) => {
+    const newRepeatedComponents = repeatedComponents.filter(
+      (component) => component !== componentToRemove
+    );
+
+    setRepeatedComponents(newRepeatedComponents);
+  };
+
+  return {
+    repeatedComponents,
+    repeat,
+    remove,
+  };
+};

package/src/hooks/useSpacing.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
-type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 type SpacingMultiplierStringOrNumber = `${SpacingMultiplier}` | SpacingMultiplier;
 type MultiValueSpacingMultiplier =
   | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`