@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/src/Link/Link.test.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import { Link, Props } from './Link';
-import { render } from '@testing-library/react';
-import { BrowserRouter, Link as RouterLink } from 'react-router-dom';
+import React, { useEffect, useRef } from "react";
+import { Link, Props } from "./Link";
+import { render } from "@testing-library/react";
+import { BrowserRouter, Link as RouterLink } from "react-router-dom";
 
 const defaultParams: Props = {
-  type: 'external',
-  to: 'https://www.google.com',
+  type: "external",
+  to: "https://www.google.com"
 };
 
 const createLink = (params?: (defaultParams: Props) => Props) => {
@@ -18,126 +18,126 @@ const createLink = (params?: (defaultParams: Props) => Props) => {
       link content
     </Link>
   );
-  const link = queries.getByTestId('link');
+  const link = queries.getByTestId("link");
 
   return {
     ...queries,
-    link,
+    link
   };
 };
 
-describe('Link should render', () => {
-  it('renders without crashing', () => {
+describe("Link should render", () => {
+  it("renders without crashing", () => {
     const { link } = createLink();
 
     expect(link).toBeTruthy();
   });
 
-  it('is an external link with the right attributes', () => {
+  it("is an external link with the right attributes", () => {
     const { link } = createLink();
 
-    expect(link).toHaveAttribute('aria-disabled', 'false');
-    expect(link).toHaveAttribute('rel', 'noopener noreferer');
-    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute("aria-disabled", "false");
+    expect(link).toHaveAttribute("rel", "noopener noreferer");
+    expect(link).toHaveAttribute("target", "_blank");
   });
 
-  it('is an internal link with the right attributes', () => {
-    const { link } = createLink((defaultParams) => ({
+  it("is an internal link with the right attributes", () => {
+    const { link } = createLink(defaultParams => ({
       ...defaultParams,
-      type: 'internal',
-      to: '/home',
+      type: "internal",
+      to: "/home"
     }));
 
-    expect(link).toHaveAttribute('aria-disabled', 'false');
-    expect(link).not.toHaveAttribute('rel', 'noopener noreferer');
-    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute("aria-disabled", "false");
+    expect(link).not.toHaveAttribute("rel", "noopener noreferer");
+    expect(link).not.toHaveAttribute("target", "_blank");
   });
 
-  it('is a download link with the right attributes', () => {
-    const { link } = createLink((defaultParams) => ({
+  it("is a download link with the right attributes", () => {
+    const { link } = createLink(defaultParams => ({
       ...defaultParams,
-      type: 'download',
-      to: '/test.png',
+      type: "download",
+      to: "/test.png"
     }));
 
-    expect(link).toHaveAttribute('aria-disabled', 'false');
-    expect(link).not.toHaveAttribute('rel', 'noopener noreferer');
-    expect(link).not.toHaveAttribute('target', '_blank');
-    expect(link).toHaveAttribute('download');
+    expect(link).toHaveAttribute("aria-disabled", "false");
+    expect(link).not.toHaveAttribute("rel", "noopener noreferer");
+    expect(link).not.toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("download");
   });
 
-  it('should set the correct target', () => {
-    const { link } = createLink((defaultParams) => ({ ...defaultParams, target: '_parent' }));
+  it("should set the correct target", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, target: "_parent" }));
 
-    expect(link).toHaveAttribute('target', '_parent');
+    expect(link).toHaveAttribute("target", "_parent");
   });
 
-  it('should accept this React Router Link prop and render as such', () => {
+  it("should accept this React Router Link prop and render as such", () => {
     const queries = render(
       <BrowserRouter>
         <Link to="/contact" component={RouterLink} children="Routerlink" />
       </BrowserRouter>
     );
 
-    const routerLink = queries.getByText('Routerlink');
+    const routerLink = queries.getByText("Routerlink");
 
     expect(routerLink).toBeTruthy();
-    expect(routerLink).toHaveClass('link');
-    expect(routerLink).toHaveAttribute('href', '/contact');
+    expect(routerLink).toHaveClass("link");
+    expect(routerLink).toHaveAttribute("href", "/contact");
   });
 
-  it('should be disabled', () => {
-    const { link } = createLink((defaultParams) => ({ ...defaultParams, disabled: true }));
+  it("should be disabled", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, disabled: true }));
 
-    expect(link).not.toHaveAttribute('href');
-    expect(link).toHaveClass('disabled');
-    expect(link).toHaveStyle({ color: 'var(--greyed-out)' });
+    expect(link).not.toHaveAttribute("href");
+    expect(link).toHaveClass("disabled");
+    expect(link).toHaveStyle({ color: "var(--greyed-out)" });
   });
 
-  it('should have a className added', () => {
-    const { link } = createLink((defaultParams) => ({ ...defaultParams, className: 'classname' }));
+  it("should have a className added", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, className: "classname" }));
 
-    expect(link).toHaveClass('classname');
+    expect(link).toHaveClass("classname");
   });
 
-  it('should render as a filled button ', () => {
-    const { link } = createLink((defaultParams) => ({
+  it("should render as a filled button ", () => {
+    const { link } = createLink(defaultParams => ({
       ...defaultParams,
-      display: 'button',
-      buttonVariant: 'fill',
+      display: "button",
+      buttonVariant: "fill"
     }));
 
-    expect(link).toHaveClass('button');
-    expect(link).toHaveClass('fill');
+    expect(link).toHaveClass("button");
+    expect(link).toHaveClass("fill");
   });
 
-  it('should render as a text button ', () => {
-    const { link } = createLink((defaultParams) => ({
+  it("should render as a text button ", () => {
+    const { link } = createLink(defaultParams => ({
       ...defaultParams,
-      display: 'button',
-      buttonVariant: 'text',
+      display: "button",
+      buttonVariant: "text"
     }));
 
-    expect(link).toHaveClass('button');
-    expect(link).toHaveClass('text');
+    expect(link).toHaveClass("button");
+    expect(link).toHaveClass("text");
   });
 
-  it('should render as an outline button ', () => {
-    const { link } = createLink((defaultParams) => ({
+  it("should render as an outline button ", () => {
+    const { link } = createLink(defaultParams => ({
       ...defaultParams,
-      display: 'button',
-      buttonVariant: 'outline',
+      display: "button",
+      buttonVariant: "outline"
     }));
 
-    expect(link).toHaveClass('button');
-    expect(link).toHaveClass('outline');
+    expect(link).toHaveClass("button");
+    expect(link).toHaveClass("outline");
   });
 });
 
-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;
     }) => {
@@ -153,29 +153,29 @@ 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('colors', () => {
-  it('should be color primary', () => {
-    const { link } = createLink((defaultParams) => ({ ...defaultParams, color: 'primary' }));
+describe("colors", () => {
+  it("should be color primary", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "primary" }));
 
-    expect(link).toHaveStyle({ color: 'var(--color-primary)' });
+    expect(link).toHaveStyle({ color: "var(--color-primary)" });
   });
 
-  it('should be color secondary', () => {
-    const { link } = createLink((defaultParams) => ({ ...defaultParams, color: 'secondary' }));
+  it("should be color secondary", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "secondary" }));
 
-    expect(link).toHaveStyle({ color: 'var(--color-secondary)' });
+    expect(link).toHaveStyle({ color: "var(--color-secondary)" });
   });
 
-  it('should be color tertiary', () => {
-    const { link } = createLink((defaultParams) => ({ ...defaultParams, color: 'tertiary' }));
+  it("should be color tertiary", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "tertiary" }));
 
-    expect(link).toHaveStyle({ color: 'var(--color-tertiary)' });
+    expect(link).toHaveStyle({ color: "var(--color-tertiary)" });
   });
 });

package/src/Link/Link.tsx

@@ -2,18 +2,18 @@ import React, {
   ComponentPropsWithRef,
   ForwardRefExoticComponent,
   ReactNode,
-  RefAttributes,
-} from 'react';
-import classes from './Link.module.scss';
-import { LinkProps } from './types';
+  RefAttributes
+} from "react";
+import classes from "./Link.module.scss";
+import { LinkProps } from "./types";
 
-export type AnchorType = 'external' | 'internal' | 'download';
+export type AnchorType = "external" | "internal" | "download";
 
-export interface Props extends ComponentPropsWithRef<'a'> {
+export interface Props extends ComponentPropsWithRef<"a"> {
   children?: ReactNode;
-  color?: 'primary' | 'secondary' | 'tertiary';
-  display?: 'link' | 'button';
-  buttonVariant?: 'outline' | 'text' | 'fill';
+  color?: "primary" | "secondary" | "tertiary";
+  display?: "link" | "button";
+  buttonVariant?: "outline" | "text" | "fill";
   type?: AnchorType;
   to: string;
   disabled?: boolean;
@@ -27,10 +27,10 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       className,
       disabled = false,
       to,
-      color = 'primary',
-      type = 'internal',
-      display = 'link',
-      buttonVariant = 'fill',
+      color = "primary",
+      type = "internal",
+      display = "link",
+      buttonVariant = "fill",
       component,
       ...rest
     }: Props,
@@ -41,17 +41,17 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
         return rest.target;
       }
 
-      if (type === 'external') {
-        return '_blank';
+      if (type === "external") {
+        return "_blank";
       }
 
-      return '';
+      return "";
     };
 
     const classNames = [classes[color]];
-    display === 'link' && classNames.push(classes['link']);
-    display === 'button' && classNames.push(classes['button'], classes[buttonVariant]);
-    disabled && classNames.push(classes['disabled']);
+    display === "link" && classNames.push(classes["link"]);
+    display === "button" && classNames.push(classes["button"], classes[buttonVariant]);
+    disabled && classNames.push(classes["disabled"]);
     className && classNames.push(className);
 
     if (component) {
@@ -59,12 +59,12 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
         ...rest,
         ref: ref,
         to: to,
-        className: classNames.join(' '),
-        'aria-disabled': disabled,
+        className: classNames.join(" "),
+        "aria-disabled": disabled,
         style: {
-          ...rest.style,
+          ...rest.style
         },
-        children: children,
+        children: children
       });
     }
 
@@ -72,14 +72,14 @@ export const Link = React.forwardRef<HTMLAnchorElement, Props>(
       <a
         {...rest}
         ref={ref}
-        download={type === 'download'}
-        rel={type === 'external' ? 'noopener noreferer' : undefined}
+        download={type === "download"}
+        rel={type === "external" ? "noopener noreferer" : undefined}
         href={!disabled ? to : undefined}
-        className={classNames.join(' ')}
+        className={classNames.join(" ")}
         aria-disabled={disabled}
         target={determineTarget()}
         style={{
-          ...rest.style,
+          ...rest.style
         }}
       >
         {children}

package/src/Link/types.d.ts

@@ -1,8 +1,8 @@
-import * as H from 'history';
+import * as H from "history";
 
 export interface LinkProps<S = H.LocationState>
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  component?: React.ComponentType<any> | undefined;
+  component?: React.ComponentType<unknown> | undefined;
   to: H.LocationDescriptor<S> | ((location: H.Location<S>) => H.LocationDescriptor<S>);
   replace?: boolean | undefined;
   innerRef?: React.Ref<HTMLAnchorElement> | undefined;

package/src/Notifications/BaseModal/BaseModal.module.scss

@@ -16,7 +16,7 @@ $marginTop: 3.125rem;
   justify-content: center;
 
   .backdrop {
-    content: '';
+    content: "";
     position: absolute;
     width: 100%;
     height: 100%;

package/src/Notifications/BaseModal/BaseModal.test.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect, useRef } from 'react';
-import { BaseModal, Props } from './BaseModal';
-import { render, getByText, queryByText, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { BaseModal, Props } from "./BaseModal";
+import { render, getByText, queryByText, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-const classNames = ['class11', 'class12'];
-const containerClassNames = ['class21', 'class22'];
+const classNames = ["class11", "class12"];
+const containerClassNames = ["class21", "class22"];
 
 const defaultParams: Props = {
-  id: 'modal',
+  id: "modal",
   open: true,
   onClose: jest.fn(),
-  className: classNames.join(' '),
-  containerProps: { className: containerClassNames.join(' ') },
-  children: 'This is example dialog content.',
+  className: classNames.join(" "),
+  containerProps: { className: containerClassNames.join(" ") },
+  children: "This is example dialog content."
 };
 
 const createBaseModal = (params?: (defaultParams: Props) => Props) => {
@@ -21,105 +21,105 @@ const createBaseModal = (params?: (defaultParams: Props) => Props) => {
     parameters = params(defaultParams);
   }
   const queries = render(<BaseModal {...parameters} data-testid="BaseModal" />);
-  const slideInModal = queries.getByTestId('BaseModal');
+  const slideInModal = queries.getByTestId("BaseModal");
 
   return {
     ...queries,
-    slideInModal,
+    slideInModal
   };
 };
 
-describe('BaseModal', () => {
-  it('renders without crashing', () => {
+describe("BaseModal", () => {
+  it("renders without crashing", () => {
     const { getByRole } = createBaseModal();
-    const dialog = getByRole('dialog');
+    const dialog = getByRole("dialog");
 
-    expect(dialog).toHaveAttribute('aria-modal', 'true');
-    expect(dialog).toHaveAttribute('aria-labelledby', 'modal-label');
-    expect(dialog).toHaveAttribute('aria-describedby', 'modal-description');
-    expect(dialog).toHaveAttribute('data-hidden', 'false');
-    expect(dialog).toHaveAttribute('aria-hidden', 'false');
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(dialog).toHaveAttribute("aria-labelledby", "modal-label");
+    expect(dialog).toHaveAttribute("aria-describedby", "modal-description");
+    expect(dialog).toHaveAttribute("data-hidden", "false");
+    expect(dialog).toHaveAttribute("aria-hidden", "false");
     expect(getByText(dialog, defaultParams.children as string)).toBeDefined();
-    expect(document.body).toHaveStyle('overflow: hidden');
+    expect(document.body).toHaveStyle("overflow: hidden");
   });
 
-  it('should render closed modal without content', () => {
-    const { queryByRole } = createBaseModal((params) => ({ ...params, open: false }));
+  it("should render closed modal without content", () => {
+    const { queryByRole } = createBaseModal(params => ({ ...params, open: false }));
 
-    const dialogByRole = queryByRole('dialog');
+    const dialogByRole = queryByRole("dialog");
     const dialog = document.body.children[1] as HTMLElement;
 
     expect(dialogByRole).toBeNull();
-    expect(dialog).toHaveAttribute('aria-hidden', 'true');
+    expect(dialog).toHaveAttribute("aria-hidden", "true");
     expect(queryByText(dialog, defaultParams.children as string)).toBeNull();
   });
 
-  it('should render closed modal with content when forceContainerOpen is provided', () => {
-    const { getByRole } = createBaseModal((params) => ({
+  it("should render closed modal with content when forceContainerOpen is provided", () => {
+    const { getByRole } = createBaseModal(params => ({
       ...params,
       open: false,
-      forceContainerOpen: true,
+      forceContainerOpen: true
     }));
 
-    const modal = getByRole('dialog', { hidden: true });
-    const container = modal.querySelector('.container') as HTMLElement;
+    const modal = getByRole("dialog", { hidden: true });
+    const container = modal.querySelector(".container") as HTMLElement;
 
     expect(container).toBeInTheDocument();
-    expect(container).toHaveAttribute('aria-hidden', 'true');
+    expect(container).toHaveAttribute("aria-hidden", "true");
   });
 
-  it('propagates containerProps to container element', () => {
-    const { getByRole } = createBaseModal((params) => ({
+  it("propagates containerProps to container element", () => {
+    const { getByRole } = createBaseModal(params => ({
       ...params,
       open: true,
       containerProps: {
-        id: 'container',
-      },
+        id: "container"
+      }
     }));
 
-    const modal = getByRole('dialog');
-    const container = modal.querySelector('.container') as HTMLElement;
+    const modal = getByRole("dialog");
+    const container = modal.querySelector(".container") as HTMLElement;
 
     expect(container).toBeInTheDocument();
-    expect(container).toHaveAttribute('id', 'container');
+    expect(container).toHaveAttribute("id", "container");
   });
 
-  it('propagates backdropProps to backdrop element', () => {
-    const { getByRole } = createBaseModal((params) => ({
+  it("propagates backdropProps to backdrop element", () => {
+    const { getByRole } = createBaseModal(params => ({
       ...params,
       open: true,
       backdropProps: {
-        id: 'backdrop',
-      },
+        id: "backdrop"
+      }
     }));
 
-    const modal = getByRole('dialog');
-    const backdrop = modal.querySelector('.backdrop') as HTMLElement;
+    const modal = getByRole("dialog");
+    const backdrop = modal.querySelector(".backdrop") as HTMLElement;
 
     expect(backdrop).toBeInTheDocument();
-    expect(backdrop).toHaveAttribute('id', 'backdrop');
+    expect(backdrop).toHaveAttribute("id", "backdrop");
   });
 
-  it('should handle clicking on backdrop & ESC key', () => {
+  it("should handle clicking on backdrop & ESC key", () => {
     const { getByRole } = createBaseModal();
 
-    const modal = getByRole('dialog');
+    const modal = getByRole("dialog");
 
-    const backdrop = modal.querySelector('.backdrop')!;
+    const backdrop = modal.querySelector(".backdrop")!;
     expect(defaultParams.onClose).toHaveBeenCalledTimes(0);
 
     userEvent.click(backdrop);
     expect(defaultParams.onClose).toHaveBeenCalledTimes(1);
 
-    fireEvent.keyDown(modal, { key: 'Escape' });
+    fireEvent.keyDown(modal, { key: "Escape" });
     expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
   });
 });
 
-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;
     }) => {
@@ -135,7 +135,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/Notifications/BaseModal/BaseModal.tsx

@@ -1,19 +1,19 @@
-import React, { ComponentPropsWithRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import classes from './BaseModal.module.scss';
-import { labelId, descriptionId } from './BaseModalContext';
+import React, { ComponentPropsWithRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import classes from "./BaseModal.module.scss";
+import { labelId, descriptionId } from "./BaseModalContext";
 
-const SCROLL_PROPERTY_NAME = 'overflow';
-const SCROLL_PROPERTY_VALUE = 'hidden';
+const SCROLL_PROPERTY_NAME = "overflow";
+const SCROLL_PROPERTY_VALUE = "hidden";
 
-export interface Props extends ComponentPropsWithRef<'div'> {
+export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   children: React.ReactNode;
   open: boolean;
   onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
   className?: string;
-  containerProps?: ComponentPropsWithRef<'div'>;
-  backdropProps?: ComponentPropsWithRef<'div'>;
+  containerProps?: ComponentPropsWithRef<"div">;
+  backdropProps?: ComponentPropsWithRef<"div">;
   labelledby?: string;
   describedby?: string;
   disableEscapeKeyDown?: boolean;
@@ -30,7 +30,7 @@ export const useSetBodyScroll = (open: boolean) => {
 
   const showBodyScroll = () => {
     const allModalsClosed =
-      document.querySelectorAll('[role=dialog][data-hidden=false]').length === 0;
+      document.querySelectorAll("[role=dialog][data-hidden=false]").length === 0;
     if (allModalsClosed) {
       document.body.style.removeProperty(SCROLL_PROPERTY_NAME);
     }
@@ -52,7 +52,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
       children,
       open,
       onClose,
-      className = '',
+      className = "",
       containerProps,
       backdropProps,
       labelledby,
@@ -69,7 +69,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
     useSetBodyScroll(open);
 
     const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (!disableEscapeKeyDown && event.key === 'Escape') {
+      if (!disableEscapeKeyDown && event.key === "Escape") {
         event.stopPropagation();
         onClose && onClose();
       }
@@ -82,7 +82,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref}
         id={id}
-        className={`${classes['modal']} ${open ? classes['visible'] : ''} ${className}`}
+        className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
         role="dialog"
         aria-modal="true"
         aria-labelledby={labelledby || labelId(id)}
@@ -95,7 +95,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
       >
         <div
           {...backdropProps}
-          className={`${classes['backdrop']} ${backdropProps?.className ?? ''}`}
+          className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
           onClick={handleBackdropClick}
         ></div>
         {forceContainerOpen ? (
@@ -104,7 +104,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
             aria-hidden={!open}
             hidden={!open}
             style={{ zIndex: zIndex && zIndex + 1 }}
-            className={`${classes['container']} ${containerProps?.className ?? ''}`}
+            className={`${classes["container"]} ${containerProps?.className ?? ""}`}
           >
             {children}
           </div>
@@ -113,7 +113,7 @@ export const BaseModal = React.forwardRef<HTMLDivElement, Props>(
             <div
               {...containerProps}
               style={{ zIndex: zIndex && zIndex + 1 }}
-              className={`${classes['container']} ${containerProps?.className ?? ''}`}
+              className={`${classes["container"]} ${containerProps?.className ?? ""}`}
             >
               {children}
             </div>