@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/src/Tooltip/Tooltip.tsx

@@ -4,15 +4,15 @@ import React, {
   useEffect,
   useLayoutEffect,
   useRef,
-  useState,
-} from 'react';
-import { Icon, Icons } from '../Icon/Icon';
-import classes from './Tooltip.module.scss';
-import { generateID } from '../util/helper';
-import { Offset, Placement, usePosition } from '../hooks/usePosition';
-import { createPortal } from 'react-dom';
+  useState
+} from "react";
+import { Icon, Icons } from "../Icon/Icon";
+import classes from "./Tooltip.module.scss";
+import { generateID } from "../util/helper";
+import { Offset, Placement, usePosition } from "../hooks/usePosition";
+import { createPortal } from "react-dom";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   label: string | ReactNode;
   children: string;
   placement?: Placement;
@@ -28,9 +28,9 @@ interface DefaultPosition {
 }
 
 const defaultPosition: DefaultPosition = {
-  placement: { horizontal: 'right', vertical: 'center' },
+  placement: { horizontal: "right", vertical: "center" },
   offset: { left: 16, right: 0, top: 0, bottom: 0 },
-  transformOrigin: { horizontal: 'left', vertical: 'center' },
+  transformOrigin: { horizontal: "left", vertical: "center" }
 };
 
 export const Tooltip = React.forwardRef<HTMLDivElement, Props>(
@@ -58,22 +58,22 @@ export const Tooltip = React.forwardRef<HTMLDivElement, Props>(
       elementToBePositioned: elementToBePositioned,
       placement: placement,
       offset: offset,
-      transformOrigin: transformOrigin,
+      transformOrigin: transformOrigin
     });
 
     useEffect(() => {
       if (!visible) return;
 
       function escapePressHandler(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
+        if (event.key === "Escape") {
           setVisible(false);
         }
       }
 
-      document.addEventListener('keyup', escapePressHandler);
+      document.addEventListener("keyup", escapePressHandler);
 
       return () => {
-        document.removeEventListener('keyup', escapePressHandler);
+        document.removeEventListener("keyup", escapePressHandler);
       };
     }, [visible]);
 
@@ -86,15 +86,15 @@ export const Tooltip = React.forwardRef<HTMLDivElement, Props>(
         return React.cloneElement(label, {
           onFocus: () => setVisible(true),
           onBlur: () => setVisible(false),
-          'aria-describedby': identifier,
+          "aria-describedby": identifier,
           tabIndex: 0,
-          className: classes['label'],
+          className: classes["label"]
         });
       }
 
       return (
         <span
-          className={classes['label']}
+          className={classes["label"]}
           tabIndex={0}
           onFocus={() => setVisible(true)}
           onBlur={() => setVisible(false)}
@@ -106,9 +106,9 @@ export const Tooltip = React.forwardRef<HTMLDivElement, Props>(
     };
 
     return (
-      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ''}`}>
+      <div {...rest} ref={ref} className={`${classes.wrapper} ${className ?? ""}`}>
         {renderChildren()}
-        <div className={`${classes['tooltip-wrapper']}`}>
+        <div className={`${classes["tooltip-wrapper"]}`}>
           <Icon
             ref={relativeElement}
             tag="div"
@@ -125,11 +125,11 @@ export const Tooltip = React.forwardRef<HTMLDivElement, Props>(
                 top: top,
                 left: left,
                 right: right,
-                bottom: bottom,
+                bottom: bottom
               }}
               aria-hidden={!visible}
               id={identifier}
-              className={`${classes.tooltip} ${visible ? classes.visible : ''}`}
+              className={`${classes.tooltip} ${visible ? classes.visible : ""}`}
             >
               {children}
             </div>,

package/src/Typography/Typography.module.scss

@@ -21,7 +21,7 @@
   }
 
   &h3 {
-    @include fontProperties(var(--font-family), var(--font-size-h3), 500, 1.16666);
+    @include fontProperties(var(--font-family), var(--font-size-h3), 400, 1.16666);
   }
 
   &h4 {

package/src/Typography/Typography.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { Typography, Props } from './Typography';
-import { render } from '@testing-library/react';
-import { Spacing } from '../hooks/useSpacing';
+import React, { useEffect, useRef } from "react";
+import { Typography, Props } from "./Typography";
+import { render } from "@testing-library/react";
+import { Spacing } from "../hooks/useSpacing";
 
 const renderTypography = (
-  typoVariant: Props['variant'],
-  wrapper?: Props['tag'],
+  typoVariant: Props["variant"],
+  wrapper?: Props["tag"],
   spacing?: Spacing
 ) => {
   const queries = render(
@@ -14,109 +14,109 @@ const renderTypography = (
     </Typography>
   );
 
-  const typography = queries.getByTestId('component');
+  const typography = queries.getByTestId("component");
 
   return {
     ...queries,
-    typography,
+    typography
   };
 };
 
-const className = (variant: Props['variant']) => `typography_style_${variant}`;
+const className = (variant: Props["variant"]) => `typography_style_${variant}`;
 
-describe('Typography should render', () => {
-  it('renders without crashing', () => {
-    const { typography } = renderTypography('h1');
+describe("Typography should render", () => {
+  it("renders without crashing", () => {
+    const { typography } = renderTypography("h1");
     expect(typography).toBeDefined();
   });
 });
 
-describe('Should give the correct default tags and corresponding classnames', () => {
-  it('renders an h1', () => {
-    const variant = 'h1';
+describe("Should give the correct default tags and corresponding classnames", () => {
+  it("renders an h1", () => {
+    const variant = "h1";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('H1');
+    expect(typography.nodeName).toBe("H1");
     expect(typography).toHaveClass(className(variant));
   });
 
-  it('renders an h2', () => {
-    const variant = 'h2';
+  it("renders an h2", () => {
+    const variant = "h2";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('H2');
+    expect(typography.nodeName).toBe("H2");
     expect(typography).toHaveClass(className(variant));
   });
 
-  it('renders an h3', () => {
-    const variant = 'h3';
+  it("renders an h3", () => {
+    const variant = "h3";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('H3');
+    expect(typography.nodeName).toBe("H3");
     expect(typography).toHaveClass(className(variant));
   });
 
-  it('renders an h4', () => {
-    const variant = 'h4';
+  it("renders an h4", () => {
+    const variant = "h4";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('H4');
+    expect(typography.nodeName).toBe("H4");
     expect(typography).toHaveClass(className(variant));
   });
 
-  it('renders a p', () => {
-    const variant = 'body';
+  it("renders a p", () => {
+    const variant = "body";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('P');
+    expect(typography.nodeName).toBe("P");
     expect(typography).toHaveClass(className(variant));
   });
 
-  it('renders a p', () => {
-    const variant = 'body-bold';
+  it("renders a p", () => {
+    const variant = "body-bold";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('P');
+    expect(typography.nodeName).toBe("P");
     expect(typography).toHaveClass(className(variant));
   });
 
-  it('renders a span', () => {
-    const variant = 'sub-text';
+  it("renders a span", () => {
+    const variant = "sub-text";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('SPAN');
+    expect(typography.nodeName).toBe("SPAN");
     expect(typography).toHaveClass(className(variant));
   });
 
-  it('renders a code', () => {
-    const variant = 'code';
+  it("renders a code", () => {
+    const variant = "code";
     const { typography } = renderTypography(variant);
 
-    expect(typography.nodeName).toBe('CODE');
+    expect(typography.nodeName).toBe("CODE");
     expect(typography).toHaveClass(className(variant));
   });
 });
 
-describe('Should override tagname', () => {
-  it('has to be a DIV element', () => {
-    const { typography } = renderTypography('h1', 'div');
+describe("Should override tagname", () => {
+  it("has to be a DIV element", () => {
+    const { typography } = renderTypography("h1", "div");
 
-    expect(typography.nodeName).toBe('DIV');
+    expect(typography.nodeName).toBe("DIV");
   });
 });
 
-describe('Should override styling', () => {
-  it('renders h1 with overwritten margin properties', () => {
-    const { typography } = renderTypography('h1', undefined, { margin: 4, marginBottom: 8 });
+describe("Should override styling", () => {
+  it("renders h1 with overwritten margin properties", () => {
+    const { typography } = renderTypography("h1", undefined, { margin: 4, marginBottom: 8 });
 
-    expect(typography.style).toHaveProperty('margin', '1rem 1rem 2rem 1rem');
+    expect(typography.style).toHaveProperty("margin", "1rem 1rem 2rem 1rem");
   });
 });
 
-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;
     }) => {
@@ -132,7 +132,7 @@ 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} />);

package/src/Typography/Typography.tsx

@@ -1,37 +1,37 @@
-import React, { ComponentPropsWithRef, ReactNode } from 'react';
-import classes from './Typography.module.scss';
-import { Spacing, useSpacing } from '../hooks/useSpacing';
+import React, { ComponentPropsWithRef, ReactNode } from "react";
+import classes from "./Typography.module.scss";
+import { Spacing, useSpacing } from "../hooks/useSpacing";
 
 export const validVariants = [
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'body',
-  'body-bold',
-  'sub-text',
-  'code',
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "body",
+  "body-bold",
+  "sub-text",
+  "code"
 ] as const;
 export type Variant = typeof validVariants[number];
 
 type Tags =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'p'
-  | 'div'
-  | 'code'
-  | 'span'
-  | 'sup'
-  | 'sub'
-  | 'strong'
-  | 'em'
-  | 'small'
-  | 'mark'
-  | 'del'
-  | 'ins'
-  | 'blockquote';
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "p"
+  | "div"
+  | "code"
+  | "span"
+  | "sup"
+  | "sub"
+  | "strong"
+  | "em"
+  | "small"
+  | "mark"
+  | "del"
+  | "ins"
+  | "blockquote";
 
 export interface Props extends ComponentPropsWithRef<any> {
   children: ReactNode;
@@ -41,7 +41,7 @@ export interface Props extends ComponentPropsWithRef<any> {
 }
 
 export const Typography = React.forwardRef<any, Props>(
-  ({ children, variant, tag, style, spacing, className = '', ...rest }: Props, ref) => {
+  ({ 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}`
@@ -52,24 +52,24 @@ export const Typography = React.forwardRef<any, Props>(
 
     if (!tag) {
       switch (variant) {
-        case 'h1':
-        case 'h2':
-        case 'h3':
-        case 'h4':
-        case 'code':
+        case "h1":
+        case "h2":
+        case "h3":
+        case "h4":
+        case "code":
           tag = variant;
           break;
-        case 'body':
-          tag = 'p';
+        case "body":
+          tag = "p";
           break;
-        case 'body-bold':
-          tag = 'p';
+        case "body-bold":
+          tag = "p";
           break;
-        case 'sub-text':
-          tag = 'span';
+        case "sub-text":
+          tag = "span";
           break;
         default:
-          tag = 'div';
+          tag = "div";
           break;
       }
     }
@@ -81,7 +81,7 @@ export const Typography = React.forwardRef<any, Props>(
         {...rest}
         ref={ref}
         style={styleWithSpacing}
-        className={`${classes['typography_style_' + variant]} ${className}`}
+        className={`${classes["typography_style_" + variant]} ${className}`}
       >
         {children}
       </TagName>

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss

@@ -143,7 +143,7 @@
 
   &:after,
   &:before {
-    content: ' ';
+    content: " ";
     margin-bottom: 0.8125rem;
     width: 100%;
     border-bottom: 2px solid var(--greyed-out);

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.test.tsx

@@ -1,46 +1,46 @@
-import React from 'react';
-import { BaseWizardSteps, Props } from './BaseWizardSteps';
-import { getAllByRole, getByText, queryByText, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React from "react";
+import { BaseWizardSteps, Props } from "./BaseWizardSteps";
+import { getAllByRole, getByText, queryByText, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const initParams: Props = {
   steps: [
     {
-      label: 'Step 1',
+      label: "Step 1"
     },
     {
-      label: 'Step 2',
+      label: "Step 2"
     },
     {
-      label: 'Step 3',
-      disabled: true,
+      label: "Step 3",
+      disabled: true
     },
     {
-      label: 'Step 4',
-    },
+      label: "Step 4"
+    }
   ],
   currentStepNo: 1,
-  stepScreenReaderLabel: 'Step',
-  onClick: jest.fn(),
+  stepScreenReaderLabel: "Step",
+  onClick: jest.fn()
 };
 
-const getStepButtons = (container: HTMLElement) => getAllByRole(container, 'button');
+const getStepButtons = (container: HTMLElement) => getAllByRole(container, "button");
 
-describe('BaseWizardSteps', () => {
-  it('renders without crashing', () => {
+describe("BaseWizardSteps", () => {
+  it("renders without crashing", () => {
     const { container } = render(<BaseWizardSteps {...initParams} />);
     const buttons = getStepButtons(container);
     expect(initParams.onClick).toHaveBeenCalledTimes(0);
 
     expect(buttons).toHaveLength(4);
-    expect(buttons[0]).not.toHaveAttribute('aria-current');
-    expect(buttons[0].querySelector('.checkmark')).toBeDefined();
-    expect(buttons[1]).toHaveAttribute('aria-current', 'step');
-    expect(getByText(buttons[1], '2')).toBeDefined();
-    expect(buttons[2]).not.toHaveAttribute('aria-current');
-    expect(getByText(buttons[2], '3')).toBeDefined();
-    expect(buttons[3]).not.toHaveAttribute('aria-current');
-    expect(getByText(buttons[3], '4')).toBeDefined();
+    expect(buttons[0]).not.toHaveAttribute("aria-current");
+    expect(buttons[0].querySelector(".checkmark")).toBeDefined();
+    expect(buttons[1]).toHaveAttribute("aria-current", "step");
+    expect(getByText(buttons[1], "2")).toBeDefined();
+    expect(buttons[2]).not.toHaveAttribute("aria-current");
+    expect(getByText(buttons[2], "3")).toBeDefined();
+    expect(buttons[3]).not.toHaveAttribute("aria-current");
+    expect(getByText(buttons[3], "4")).toBeDefined();
 
     userEvent.click(buttons[0]);
     expect(initParams.onClick).toHaveBeenCalledTimes(1);
@@ -51,7 +51,7 @@ describe('BaseWizardSteps', () => {
     expect(initParams.onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('should allow to click on future and prev steps but not on current and disabled steps when futureStepsClickable is enabled', () => {
+  it("should allow to click on future and prev steps but not on current and disabled steps when futureStepsClickable is enabled", () => {
     const { container } = render(<BaseWizardSteps {...initParams} futureStepsClickable />);
     const buttons = getStepButtons(container);
     expect(initParams.onClick).toHaveBeenCalledTimes(0);
@@ -66,10 +66,10 @@ describe('BaseWizardSteps', () => {
     expect(initParams.onClick).toHaveBeenCalledTimes(2);
   });
 
-  it('should not render checkmark or number when prev steps is disabled', () => {
+  it("should not render checkmark or number when prev steps is disabled", () => {
     const { container } = render(<BaseWizardSteps {...initParams} currentStepNo={3} />);
     const buttons = getStepButtons(container);
 
-    expect(queryByText(buttons[2], '3')).toBeNull();
+    expect(queryByText(buttons[2], "3")).toBeNull();
   });
 });

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

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