@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from 'react';
-import { IconButton } from '../../../Button/IconButton';
-import { Icon, Icons } from '../../../Icon/Icon';
-import { Variant, Actions } from '../interfaces';
-import classes from './SnackbarItem.module.scss';
-import readyclasses from '../../../readyclasses.module.scss';
-import { useAnimation } from '../../../hooks/useAnimation';
-import { Typography } from '../../../Typography/Typography';
+import React, { useEffect, useRef } from "react";
+import { IconButton } from "../../../Button/IconButton";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { Variant, Actions } from "../interfaces";
+import classes from "./SnackbarItem.module.scss";
+import readyclasses from "../../../readyclasses.module.scss";
+import { useAnimation } from "../../../hooks/useAnimation";
+import { Typography } from "../../../Typography/Typography";
 
-const textColor = 'var(--snackbar-text-color)';
+const textColor = "var(--snackbar-text-color)";
 
 export interface Props {
   id: string;
@@ -28,7 +28,7 @@ export const SnackbarItem = ({
   content,
   actions = [],
   onClose,
-  closeButtonTitle,
+  closeButtonTitle
 }: Props) => {
   const timerHandler = useRef<ReturnType<typeof setTimeout>>();
   const onAnimationEnd = () => onClose(id);
@@ -50,42 +50,42 @@ export const SnackbarItem = ({
   };
 
   const getVariantIcon = () => {
-    if (variant === 'error') {
+    if (variant === "error") {
       return Icons.Error;
     }
-    return variant === 'success' ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
+    return variant === "success" ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
   };
 
   const actionButtons = actions.map((actionProp, index) => (
     <button
       key={index}
       {...actionProp}
-      onClick={(e) => {
+      onClick={e => {
         onClose(id);
         actionProp.onClick && actionProp.onClick(e);
       }}
       children={actionProp.label}
-      className={classes['action-button']}
+      className={classes["action-button"]}
     ></button>
   ));
 
   return (
     <div
       ref={ref}
-      className={`${classes['snackbar']} ${classes[variant]} ${
-        animationStarted ? readyclasses['slide-out'] : readyclasses['slide-in']
+      className={`${classes["snackbar"]} ${classes[variant]} ${
+        animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"]
       }`}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <Icon icon={getVariantIcon()} className={classes['icon']} />
-      <div className={classes['container']}>
-        <div className={classes['headline']}>
-          <Typography className={classes['title']} variant="h4" tag="span">
+      <Icon icon={getVariantIcon()} className={classes["icon"]} />
+      <div className={classes["container"]}>
+        <div className={classes["headline"]}>
+          <Typography className={classes["title"]} variant="h4" tag="span">
             {title}
           </Typography>
           <IconButton
-            id={classes['close-btn']}
+            id={classes["close-btn"]}
             onClick={() => startAnimation()}
             title={closeButtonTitle}
           >
@@ -93,11 +93,11 @@ export const SnackbarItem = ({
           </IconButton>
         </div>
         {!!content && (
-          <Typography className={classes['content']} variant="body">
+          <Typography className={classes["content"]} variant="body">
             {content}
           </Typography>
         )}
-        {actionButtons.length > 0 && <div className={classes['actions']}>{actionButtons}</div>}
+        {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
       </div>
     </div>
   );

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
   render,
   getByTestId,
@@ -8,29 +8,29 @@ import {
   getByText,
   findByText,
   findAllByText,
-  queryByText,
-} from '@testing-library/react';
-import { SnackbarProvider, Props } from './SnackbarProvider';
-import { useSnackbar } from '../useSnackbar';
-import userEvent from '@testing-library/user-event';
+  queryByText
+} from "@testing-library/react";
+import { SnackbarProvider, Props } from "./SnackbarProvider";
+import { useSnackbar } from "../useSnackbar";
+import userEvent from "@testing-library/user-event";
 
 const successProps = {
-  title: 'success title',
+  title: "success title"
 };
 
 const errorProps = {
-  title: 'error title',
+  title: "error title"
 };
 
 const infoProps = {
-  title: 'info title',
-  content: 'test content',
+  title: "info title",
+  content: "test content",
   options: {
     actions: [
-      { label: 'Contact support', onClick: jest.fn() },
-      { label: 'Contact Onewelcome', onClick: jest.fn() },
-    ],
-  },
+      { label: "Contact support", onClick: jest.fn() },
+      { label: "Contact Onewelcome", onClick: jest.fn() }
+    ]
+  }
 };
 
 const renderSnackbarProvider = (props?: Partial<Props>) => {
@@ -77,26 +77,26 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
     </SnackbarProvider>
   );
 
-  const showSuccessSnackbarBtn = getByTestId(queries.container, 'show-success');
-  const showErrorSnackbarBtn = getByTestId(queries.container, 'show-error');
-  const showInfoSnackbarBtn = getByTestId(queries.container, 'show-info');
+  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
+  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
+  const showInfoSnackbarBtn = getByTestId(queries.container, "show-info");
 
   return {
     ...queries,
     showSuccessSnackbarBtn,
     showErrorSnackbarBtn,
-    showInfoSnackbarBtn,
+    showInfoSnackbarBtn
   };
 };
 
-describe('SnackbarProvider', () => {
-  it('renders without crashing', () => {
+describe("SnackbarProvider", () => {
+  it("renders without crashing", () => {
     const { container } = renderSnackbarProvider();
 
-    expect(container).toHaveTextContent('content');
+    expect(container).toHaveTextContent("content");
   });
 
-  it('should stack 3 snackbars at one time', () => {
+  it("should stack 3 snackbars at one time", () => {
     const { showSuccessSnackbarBtn } = renderSnackbarProvider();
 
     userEvent.click(showSuccessSnackbarBtn);
@@ -107,7 +107,7 @@ describe('SnackbarProvider', () => {
     expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
   });
 
-  it('should render 3 variants of snackbars', () => {
+  it("should render 3 variants of snackbars", () => {
     const { showSuccessSnackbarBtn, showErrorSnackbarBtn, showInfoSnackbarBtn } =
       renderSnackbarProvider();
 
@@ -119,7 +119,7 @@ describe('SnackbarProvider', () => {
     expect(getByText(document.body, new RegExp(errorProps.title))).toBeDefined();
     expect(getByText(document.body, new RegExp(infoProps.title))).toBeDefined();
     expect(getByText(document.body, infoProps.content)).toBeDefined();
-    const infoSnackbarActions = getAllByRole(document.body, 'button', { name: /Contact/i });
+    const infoSnackbarActions = getAllByRole(document.body, "button", { name: /Contact/i });
     expect(infoSnackbarActions).toHaveLength(2);
 
     userEvent.click(infoSnackbarActions[0]);
@@ -129,9 +129,9 @@ describe('SnackbarProvider', () => {
     waitFor(() => expect(infoProps.options.actions[1].onClick).toBeCalledTimes(1));
   });
 
-  it('should stack 3 snackbars at one time and then after 3 disapear show the fourth one', () => {
+  it("should stack 3 snackbars at one time and then after 3 disapear show the fourth one", () => {
     const { showSuccessSnackbarBtn } = renderSnackbarProvider({
-      autoHideDuration: { long: 1, short: 1 },
+      autoHideDuration: { long: 1, short: 1 }
     });
 
     userEvent.click(showSuccessSnackbarBtn);
@@ -142,7 +142,7 @@ describe('SnackbarProvider', () => {
     expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
 
     /** Looking for fourth one to be shown */
-    waitFor(() => expect(getAllByText(document.body, successProps.title + '3')).toHaveLength(1));
+    waitFor(() => expect(getAllByText(document.body, successProps.title + "3")).toHaveLength(1));
 
     /** There shouldn't be any other snackbars */
     waitFor(() =>
@@ -150,9 +150,9 @@ describe('SnackbarProvider', () => {
     );
   });
 
-  it('should close snackbar after clicking X button', async () => {
+  it("should close snackbar after clicking X button", async () => {
     const { showSuccessSnackbarBtn } = renderSnackbarProvider({
-      autoHideDuration: { long: 1_000_000, short: 1_000_000 },
+      autoHideDuration: { long: 1_000_000, short: 1_000_000 }
     });
 
     userEvent.click(showSuccessSnackbarBtn);
@@ -160,18 +160,18 @@ describe('SnackbarProvider', () => {
     userEvent.click(showSuccessSnackbarBtn);
     userEvent.click(showSuccessSnackbarBtn);
 
-    const closeButtons = getAllByRole(document.body, 'button', { name: 'close' });
+    const closeButtons = getAllByRole(document.body, "button", { name: "close" });
 
     expect(closeButtons).toHaveLength(3);
     expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(3);
 
     userEvent.click(closeButtons[0]);
     expect(
-      await findAllByText(document.body, new RegExp(successProps.title + '[12]+'))
+      await findAllByText(document.body, new RegExp(successProps.title + "[12]+"))
     ).toHaveLength(2);
 
     userEvent.click(closeButtons[1]);
-    expect(await findByText(document.body, successProps.title + '2')).toBeDefined();
+    expect(await findByText(document.body, successProps.title + "2")).toBeDefined();
 
     userEvent.click(closeButtons[2]);
     waitFor(() => expect(queryByText(document.body, new RegExp(successProps.title))).toBeNull());

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -1,10 +1,10 @@
-import React, { ReactNode, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { SnackbarContextProvider } from './SnackbarStateProvider';
-import { Actions, SnackbarOptionsProps, Variant } from '../interfaces';
-import { Placement, SnackbarContainer } from '../SnackbarContainer/SnackbarContainer';
-import { generateID } from '../../../util/helper';
-import { SnackbarItem } from '../SnackbarItem/SnackbarItem';
+import React, { ReactNode, useState } from "react";
+import { createPortal } from "react-dom";
+import { SnackbarContextProvider } from "./SnackbarStateProvider";
+import { Actions, SnackbarOptionsProps, Variant } from "../interfaces";
+import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
+import { generateID } from "../../../util/helper";
+import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
 
 /** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
 interface Duration {
@@ -34,22 +34,22 @@ interface Item {
 export const SnackbarProvider = (
   {
     closeButtonTitle,
-    placement = { vertical: 'bottom', horizontal: 'center' },
+    placement = { vertical: "bottom", horizontal: "center" },
     autoHideDuration = { long: 8000, short: 4000 },
     stackSize = 3,
     domRoot = document.body,
     children,
-    className,
-  }: Props = { closeButtonTitle: '' }
+    className
+  }: Props = { closeButtonTitle: "" }
 ) => {
   const [snackbars, setSnackbars] = useState<Item[]>([]);
 
   const addSnackbar = (item: Item) => {
-    setSnackbars((items) => [...items, item]);
+    setSnackbars(items => [...items, item]);
   };
 
   const getDuration = (variant: Variant, actions?: Actions, content?: string) => {
-    const hasError = variant === 'error';
+    const hasError = variant === "error";
     const hasContentOrActions = content || actions;
     if (hasError || hasContentOrActions) {
       return autoHideDuration.long;
@@ -63,9 +63,9 @@ export const SnackbarProvider = (
     options: SnackbarOptionsProps = {}
   ): void => {
     const {
-      variant = 'info',
+      variant = "info",
       actions,
-      duration = getDuration(variant, actions, content),
+      duration = getDuration(variant, actions, content)
     } = options;
     const item: Item = {
       title,
@@ -73,7 +73,7 @@ export const SnackbarProvider = (
       variant,
       actions,
       duration,
-      id: generateID(15, title),
+      id: generateID(15, title)
     };
     addSnackbar(item);
   };
@@ -83,7 +83,7 @@ export const SnackbarProvider = (
     content?: string,
     options?: SnackbarOptionsProps
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: 'success' });
+    enqueueSnackbar(title, content, { ...options, variant: "success" });
   };
 
   const enqueueErrorSnackbar = (
@@ -91,11 +91,11 @@ export const SnackbarProvider = (
     content?: string,
     options?: SnackbarOptionsProps
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: 'error' });
+    enqueueSnackbar(title, content, { ...options, variant: "error" });
   };
 
   const onItemClosed = (id: string) => {
-    setSnackbars((items) => [...items].filter((item) => item.id !== id));
+    setSnackbars(items => [...items].filter(item => item.id !== id));
   };
 
   const snackbarList = snackbars.map((item, index) =>

package/src/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx

@@ -1,5 +1,5 @@
-import React, { createContext } from 'react';
-import { SnackbarOptionsProps } from '../interfaces';
+import React, { createContext } from "react";
+import { SnackbarOptionsProps } from "../interfaces";
 
 interface SnackbarContextProps {
   enqueueSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
@@ -10,7 +10,7 @@ interface SnackbarContextProps {
 const SnackbarContext = createContext<SnackbarContextProps>({
   enqueueSnackbar: () => null,
   enqueueSuccessSnackbar: () => null,
-  enqueueErrorSnackbar: () => null,
+  enqueueErrorSnackbar: () => null
 });
 
 interface Props {

package/src/Notifications/Snackbar/interfaces.ts

@@ -1,6 +1,6 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from "react";
 
-export type Variant = 'info' | 'success' | 'error';
+export type Variant = "info" | "success" | "error";
 
 export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
 

package/src/Notifications/Snackbar/useSnackbar.ts

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
-import { SnackbarContext } from './SnackbarProvider/SnackbarStateProvider';
+import { useContext } from "react";
+import { SnackbarContext } from "./SnackbarProvider/SnackbarStateProvider";
 
 export const useSnackbar = () => useContext(SnackbarContext);

package/src/Pagination/Pagination.module.scss

@@ -85,6 +85,7 @@
   .current-value-input {
     margin: 0 0.25rem 0 0;
     padding: 0;
+    height: auto;
 
     input {
       border-radius: var(--input-border-radius);
@@ -120,5 +121,6 @@
 @media screen and (min-width: 48em) {
   .pagination-wrapper .per-page {
     display: flex;
+    margin-right: 0.5rem;
   }
 }

package/src/Pagination/Pagination.test.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from 'react';
-import { Pagination, Props } from './Pagination';
-import { render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect, useRef } from "react";
+import { Pagination, Props } from "./Pagination";
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   currentPage: 1,
   totalElements: 500,
   onPageChange: jest.fn(),
-  onPageSizeChange: jest.fn(),
+  onPageSizeChange: jest.fn()
 };
 
 const createPagination = (params?: (defaultParams: Props) => Props) => {
@@ -19,41 +19,41 @@ const createPagination = (params?: (defaultParams: Props) => Props) => {
 
   const queries = render(<Pagination data-testid="pagination" {...parameters} />);
 
-  const pagination = queries.getByTestId('pagination');
+  const pagination = queries.getByTestId("pagination");
 
   return {
     ...queries,
-    pagination,
+    pagination
   };
 };
 
-describe('Pagination should render', () => {
-  it('renders without crashing', () => {
+describe("Pagination should render", () => {
+  it("renders without crashing", () => {
     const { pagination } = createPagination();
 
     expect(pagination).toBeTruthy();
   });
 });
 
-describe('Pagination events', () => {
-  it('should give us the correct values', async () => {
+describe("Pagination events", () => {
+  it("should give us the correct values", async () => {
     const onPageChange = jest.fn();
 
     const onPageSizeChange = jest.fn();
 
-    const { pagination } = createPagination((defaultParams) => ({
+    const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
       currentPage: 10,
       onPageChange: onPageChange,
-      onPageSizeChange: onPageSizeChange,
+      onPageSizeChange: onPageSizeChange
     }));
 
     const next = pagination.querySelector('[data-paginate="next"]')!;
     const previous = pagination.querySelector('[data-paginate="previous"]')!;
     const first = pagination.querySelector('[data-paginate="first"]')!;
     const last = pagination.querySelector('[data-paginate="last"]')!;
-    const pageSizeSelect = pagination.querySelector('.page-size-select')!;
-    const currentPageInput = pagination.querySelector('#current-value-input')!;
+    const pageSizeSelect = pagination.querySelector(".page-size-select")!;
+    const currentPageInput = pagination.querySelector("#current-value-input")!;
 
     userEvent.click(next);
 
@@ -68,7 +68,7 @@ describe('Pagination events', () => {
     userEvent.click(last);
     await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(50));
 
-    userEvent.click(pageSizeSelect);
+    userEvent.click(pageSizeSelect.querySelector("button")!);
 
     const option25 = pageSizeSelect.querySelector('[data-value="25"]')!;
 
@@ -78,45 +78,45 @@ describe('Pagination events', () => {
 
     (currentPageInput as HTMLInputElement).focus();
 
-    userEvent.keyboard('{backspace}{backspace}30{enter}');
+    userEvent.keyboard("{backspace}{backspace}30{enter}");
 
     await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(30));
   });
 });
 
-describe('different current pages and their effect on what renders', () => {
-  it('is on the first page and does not render previous and first', () => {
+describe("different current pages and their effect on what renders", () => {
+  it("is on the first page and does not render previous and first", () => {
     const { pagination } = createPagination();
 
-    expect(pagination.querySelector('.next')).toBeTruthy();
-    expect(pagination.querySelector('.previous')).toBeFalsy();
+    expect(pagination.querySelector(".next")).toBeTruthy();
+    expect(pagination.querySelector(".previous")).toBeFalsy();
   });
 
-  it('is on the second page and does not render first', () => {
-    const { pagination } = createPagination((defaultParams) => ({
+  it("is on the second page and does not render first", () => {
+    const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
-      currentPage: 2,
+      currentPage: 2
     }));
 
     expect(pagination.querySelector('[data-paginate="first"]')).toBeFalsy();
-    expect((pagination.querySelector('.current-value-input input') as HTMLInputElement).value).toBe(
-      '2'
+    expect((pagination.querySelector(".current-value-input input") as HTMLInputElement).value).toBe(
+      "2"
     );
   });
 
-  it('is on the second to last page and does not render last', () => {
-    const { pagination } = createPagination((defaultParams) => ({
+  it("is on the second to last page and does not render last", () => {
+    const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
-      currentPage: 499,
+      currentPage: 499
     }));
 
     expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
   });
 
-  it('is on the last page and does not render next & last', () => {
-    const { pagination } = createPagination((defaultParams) => ({
+  it("is on the last page and does not render next & last", () => {
+    const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
-      currentPage: 500,
+      currentPage: 500
     }));
 
     expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
@@ -124,35 +124,35 @@ describe('different current pages and their effect on what renders', () => {
   });
 });
 
-describe('omitted attributes still renders correctly', () => {
+describe("omitted attributes still renders correctly", () => {
   it("still renders next if totalItems prop isn't given and we're on the first page", () => {
-    const { pagination } = createPagination((defaultParams) => ({
+    const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
-      totalElements: undefined,
+      totalElements: undefined
     }));
 
-    expect(pagination.querySelector('.page')).toBeFalsy();
-    expect(pagination.querySelector('.next')).toBeTruthy();
-    expect(pagination.querySelector('.previous')).toBeFalsy();
+    expect(pagination.querySelector(".page")).toBeFalsy();
+    expect(pagination.querySelector(".next")).toBeTruthy();
+    expect(pagination.querySelector(".previous")).toBeFalsy();
   });
 
   it("still renders next if totalItems prop isn't given and we're on the first page", () => {
-    const { pagination } = createPagination((defaultParams) => ({
+    const { pagination } = createPagination(defaultParams => ({
       ...defaultParams,
       currentPage: 4,
-      totalElements: undefined,
+      totalElements: undefined
     }));
 
-    expect(pagination.querySelector('.page')).toBeFalsy();
-    expect(pagination.querySelector('.next')).toBeTruthy();
-    expect(pagination.querySelector('.previous')).toBeTruthy();
+    expect(pagination.querySelector(".page")).toBeFalsy();
+    expect(pagination.querySelector(".next")).toBeTruthy();
+    expect(pagination.querySelector(".previous")).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;
     }) => {
@@ -168,7 +168,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} />);