@onewelcome/react-lib-components 0.1.1-alpha → 0.1.2-alpha

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DiscardChangesModal, Props } from './DiscardChangesModal';
 import { findByTestId, getAllByRole, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -109,3 +109,54 @@ describe('DiscardChangesModal should show DiscardChangesDialog', () => {
     expect(defaultParams.onClose).toBeCalled();
   });
 });
+
+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?: (
+        ref1: React.RefObject<HTMLElement>,
+        ref2: React.RefObject<HTMLElement>
+      ) => void;
+    }) => {
+      const modalRef = useRef(null);
+      const dialogRef = useRef(null);
+
+      useEffect(() => {
+        if (dialogRef.current && modalRef.current) {
+          propagateRef && propagateRef(modalRef, dialogRef);
+        }
+      }, [modalRef, dialogRef]);
+
+      return (
+        <DiscardChangesModal
+          modalRef={modalRef}
+          dialogRef={dialogRef}
+          data-ref="testing"
+          hasUnsavedChanges={jest.fn()}
+          onClose={jest.fn()}
+          headerProps={{ title: 'test' }}
+          open={false}
+          children="test"
+          discardChangedDialogProps={{
+            contentLabel: 'test',
+            discardChangesButtonLabel: 'test',
+            keepEditingButtonLabel: 'test',
+            titleLabel: 'test',
+            'data-ref': 'testing',
+          }}
+          title="test"
+          id="test"
+        />
+      );
+    };
+
+    const refCheck = (ref1: React.RefObject<HTMLElement>, ref2: React.RefObject<HTMLElement>) => {
+      expect(ref1.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref2.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.tsx

@@ -14,15 +14,19 @@ export interface Props extends Omit<ModalProps, 'onClose'> {
     DiscardChangesDialogProps,
     'open' | 'onKeepEditing' | 'onDiscardChanges'
   >;
+  modalRef?: React.RefObject<HTMLDivElement>;
+  dialogRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const DiscardChangesModal = ({
   id,
-  onClose,
   children,
-  hasUnsavedChanges,
   headerProps,
   discardChangedDialogProps,
+  modalRef,
+  dialogRef,
+  onClose,
+  hasUnsavedChanges,
   ...rest
 }: Props) => {
   const [openDiscardChangesDialog, setOpenDiscardChangesDialog] = useState(false);
@@ -41,12 +45,13 @@ export const DiscardChangesModal = ({
 
   return (
     <Fragment>
-      <Modal id={id} onClose={onCloseWrapper} {...rest}>
+      <Modal id={id} ref={modalRef} onClose={onCloseWrapper} {...rest}>
         <ModalHeader {...headerProps} id={`${id}-label`} onClose={onCloseWrapper} />
         {children}
       </Modal>
       <DiscardChangesDialog
         {...discardChangedDialogProps}
+        ref={dialogRef}
         open={openDiscardChangesDialog}
         onKeepEditing={onDialogKeepEditing}
         onDiscardChanges={onDialogDiscardChanges}

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

@@ -51,7 +51,7 @@ export const SnackbarItem = ({
 
   const getVariantIcon = () => {
     if (variant === 'error') {
-      return Icons.TimesCircleAlt;
+      return Icons.Error;
     }
     return variant === 'success' ? Icons.CheckmarkCircleBreakout : Icons.InfoCircle;
   };

package/src/Pagination/Pagination.module.scss

@@ -0,0 +1,120 @@
+.pagination-wrapper {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--greyed-out);
+  display: flex;
+  flex-direction: column;
+}
+
+.form-element {
+  height: 2.5rem;
+
+  button {
+    min-height: 2.5rem;
+  }
+}
+
+.total {
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span > span {
+    font-weight: 700;
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    margin-left: 0.25rem;
+  }
+}
+
+.pagination {
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1rem;
+
+  .previous,
+  .next {
+    display: flex;
+    align-items: center;
+
+    button {
+      margin: 0.25rem;
+    }
+
+    button span:before {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+.per-page {
+  display: none;
+  align-items: center;
+}
+
+.page {
+  display: flex;
+  align-items: center;
+  flex-basis: min-content;
+}
+
+.page-size-select {
+  border-color: #fff;
+  margin: 0 0.25rem;
+
+  button {
+    min-width: 55px;
+    padding: 0;
+
+    div[data-display] {
+      left: 0.5rem;
+    }
+
+    div:not([data-display]) {
+      right: 0.5rem;
+    }
+  }
+}
+
+.current-value-input {
+  margin: 0 0.25rem 0 0;
+  padding: 0;
+
+  input {
+    border-radius: var(--input-border-radius);
+    padding: 0 1rem;
+    width: auto;
+    text-align: center;
+  }
+}
+
+@media screen and (min-width: 30em) {
+  .pagination-wrapper {
+    flex-direction: row;
+  }
+
+  .total {
+    justify-content: flex-start;
+  }
+
+  .pagination {
+    margin-top: 0;
+    justify-content: flex-end;
+
+    .previous,
+    .next {
+      button {
+        margin: 0.5rem;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 48em) {
+  .per-page {
+    display: flex;
+  }
+}

package/src/Pagination/Pagination.test.tsx

@@ -0,0 +1,176 @@
+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(),
+};
+
+const createPagination = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+
+  if (params) {
+    parameters = params(defaultParams);
+  }
+
+  const queries = render(<Pagination data-testid="pagination" {...parameters} />);
+
+  const pagination = queries.getByTestId('pagination');
+
+  return {
+    ...queries,
+    pagination,
+  };
+};
+
+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 () => {
+    const onPageChange = jest.fn();
+
+    const onPageSizeChange = jest.fn();
+
+    const { pagination } = createPagination((defaultParams) => ({
+      ...defaultParams,
+      currentPage: 10,
+      onPageChange: onPageChange,
+      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')!;
+
+    userEvent.click(next);
+
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(11));
+
+    userEvent.click(previous);
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(9));
+
+    userEvent.click(first);
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(0));
+
+    userEvent.click(last);
+    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(50));
+
+    userEvent.click(pageSizeSelect);
+
+    const option25 = pageSizeSelect.querySelector('[data-value="25"]')!;
+
+    userEvent.click(option25);
+
+    await waitFor(() => expect(onPageSizeChange).toHaveBeenCalledWith(25));
+
+    (currentPageInput as HTMLInputElement).focus();
+
+    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', () => {
+    const { pagination } = createPagination();
+
+    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) => ({
+      ...defaultParams,
+      currentPage: 2,
+    }));
+
+    expect(pagination.querySelector('[data-paginate="first"]')).toBeFalsy();
+    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) => ({
+      ...defaultParams,
+      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) => ({
+      ...defaultParams,
+      currentPage: 500,
+    }));
+
+    expect(pagination.querySelector('[data-paginate="last"]')).toBeFalsy();
+    expect(pagination.querySelector('[data-paginate="next"]')).toBeFalsy();
+  });
+});
+
+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) => ({
+      ...defaultParams,
+      totalElements: undefined,
+    }));
+
+    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) => ({
+      ...defaultParams,
+      currentPage: 4,
+      totalElements: undefined,
+    }));
+
+    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', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Pagination {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,205 @@
+import React, { ComponentPropsWithRef, Fragment, useState } from 'react';
+import classes from './Pagination.module.scss';
+import readyclasses from '../readyclasses.module.scss';
+import { IconButton } from '../Button/IconButton';
+import { Icons, Icon } from '../Icon/Icon';
+import { Input } from '../Form/Input/Input';
+import { Select } from '../Form/Select/Select';
+import { Option } from '../Form/Select/Option';
+import { Label } from '../Form/Label/Label';
+
+export type PaginationTranslations = {
+  totalItems: string;
+  itemsPerPage: string;
+  itemsPerPageLabel: string;
+  currentPage: string;
+  currentPageLabel: string;
+};
+
+export type PageChangeLabels = 'next' | 'previous' | 'first' | 'last';
+
+enum DefaultTranslations {
+  totalItems = 'Total items',
+  itemsPerPage = 'Items per page',
+  currentPage = 'Page %1 of %2',
+  itemsPerPageLabel = 'Select how many items per page you want to see.',
+  currentPageLabel = 'What page you are currently on.',
+}
+
+export type PageSize = 10 | 25 | 50;
+
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'translate'> {
+  currentPage?: number;
+  totalElements?: number;
+  pageSize?: PageSize;
+  translate?: PaginationTranslations;
+  onPageChange: (pageToGoTo: number) => void;
+  onPageSizeChange: (pageSize: PageSize) => void;
+}
+
+export const Pagination = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      totalElements,
+      pageSize = 10,
+      translate = DefaultTranslations,
+      currentPage,
+      className,
+      onPageChange,
+      onPageSizeChange,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
+    const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() || '1');
+    const calculateAmountOfPages = () => (totalElements ? Math.ceil(totalElements / pageSize) : 0);
+
+    const onEnterListener = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.code === 'Enter') {
+        onPageChange(Number(internalCurrentPage));
+      }
+    };
+
+    const renderCurrentPageTranslation = () => {
+      const amountOfPages = calculateAmountOfPages();
+
+      if (amountOfPages) {
+        const splitCurrentPageTranslation = translate.currentPage.split(' ');
+
+        return splitCurrentPageTranslation.map((string) => {
+          if (string.includes('%1')) {
+            return (
+              <Fragment key={string}>
+                <Label
+                  id="current-value-input-label"
+                  htmlFor="current-value-input"
+                  className={readyclasses['sr-only']}
+                >
+                  {translate.currentPageLabel}
+                </Label>
+                <Input
+                  aria-labelledby="current-value-input-label"
+                  key="input"
+                  id="current-value-input"
+                  type="text"
+                  size={currentPage?.toString().length}
+                  max={calculateAmountOfPages()}
+                  wrapperProps={{ className: classes['current-value-input'] }}
+                  onKeyUp={onEnterListener}
+                  onBlur={(event: React.ChangeEvent<HTMLInputElement>) =>
+                    onPageChange(Number(event.target.value))
+                  }
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setInternalCurrentPage(e.target.value)
+                  }
+                  name="current-value-input"
+                  value={internalCurrentPage}
+                  className={`${classes['form-element']} ${classes['current-page-input']}`}
+                />
+              </Fragment>
+            );
+          }
+
+          if (string.includes('%2')) {
+            return <div key={string}>{string.replace('%2', amountOfPages.toString())}&nbsp;</div>;
+          }
+
+          return <div key={string}>{string}&nbsp;</div>;
+        });
+      }
+
+      return null;
+    };
+
+    const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const pageSizeNumber = Number(event.target.value) as PageSize;
+      onPageSizeChange(pageSizeNumber);
+    };
+
+    const onPageChangeHandler = (pageToGoTo: number) => {
+      onPageChange(pageToGoTo);
+    };
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={`${classes['pagination-wrapper']} ${className ? className : ''}`}
+      >
+        {totalElements && (
+          <div className={classes['total']}>
+            <span tabIndex={0}>
+              {translate.totalItems}: <span>{totalElements}</span>
+            </span>
+          </div>
+        )}
+        <div className={classes['pagination']}>
+          {totalElements && pageSize && (
+            <div className={classes['per-page']}>
+              <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
+              <Select
+                labeledBy="page-size-select-label"
+                className={`${classes['form-element']} ${classes['page-size-select']}`}
+                value={pageSize.toString()}
+                onChange={onPageSizeChangeHandler}
+              >
+                <Option value="10">10</Option>
+                <Option value="25">25</Option>
+                <Option value="50">50</Option>
+              </Select>
+            </div>
+          )}
+          <Fragment>
+            {((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
+              <div className={classes['previous']}>
+                {currentPage > 2 && (
+                  <IconButton
+                    title="first"
+                    onClick={() => onPageChangeHandler(0)}
+                    data-paginate="first"
+                  >
+                    <Icon icon={Icons.NavigationFirst} />
+                  </IconButton>
+                )}
+                {currentPage > 1 && (
+                  <IconButton
+                    title="previous"
+                    onClick={() => onPageChangeHandler(currentPage - 1)}
+                    data-paginate="previous"
+                  >
+                    <Icon icon={Icons.ChevronLeft} />
+                  </IconButton>
+                )}
+              </div>
+            )}
+            {totalElements && (
+              <div className={classes['page']}>{renderCurrentPageTranslation()}</div>
+            )}
+            <div className={classes['next']}>
+              {((currentPage && currentPage < calculateAmountOfPages()) ||
+                (currentPage && !totalElements)) && (
+                <IconButton
+                  title="next"
+                  onClick={() => onPageChangeHandler(currentPage + 1)}
+                  data-paginate="next"
+                >
+                  <Icon icon={Icons.ChevronRight} />
+                </IconButton>
+              )}
+              {currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1 && (
+                <IconButton
+                  title="last"
+                  onClick={() => onPageChangeHandler(totalElements / pageSize)}
+                  data-paginate="last"
+                >
+                  <Icon icon={Icons.NavigationLast} />
+                </IconButton>
+              )}
+            </div>
+          </Fragment>
+        </div>
+      </div>
+    );
+  }
+);

package/src/Popover/Popover.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLProps, ReactNode, RefObject, useEffect, useRef } from 'react';
+import React, { ComponentPropsWithRef, ReactNode, RefObject, useEffect, useRef } from 'react';
 import { usePosition, Offset, Placement } from '../hooks/usePosition';
 import classes from './Popover.module.scss';
 
-export interface Props extends HTMLProps<HTMLDivElement> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   children?: ReactNode;
   show?: boolean;
   anchorEl?: RefObject<HTMLOrSVGElement>;
@@ -11,7 +11,7 @@ export interface Props extends HTMLProps<HTMLDivElement> {
   transformOrigin?: Placement;
 }
 
-export const Popover = forwardRef<HTMLDivElement, Props>(
+export const Popover = React.forwardRef<HTMLDivElement, Props>(
   ({ children, className, show, placement, offset, transformOrigin, anchorEl, ...rest }, ref) => {
     const elToBePositioned = useRef<HTMLDivElement>(null);
 

package/src/Tabs/Tab.test.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react';
+import { Tabs } from './Tabs';
+import { Tab, Props } from './Tab';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  title: 'Title of tab',
+};
+
+const createTab = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <Tab {...parameters} data-testid="tab">
+      tab content
+    </Tab>
+  );
+  const tab = queries.getByTestId('tab');
+
+  return {
+    ...queries,
+    tab,
+  };
+};
+
+describe('Tab should render', () => {
+  it('renders without crashing', () => {
+    const { tab } = createTab();
+
+    expect(tab).toBeTruthy();
+  });
+});
+
+describe('Tab useRef should work for panel and button', () => {
+  it('gives us back the proper refs', () => {
+    type logRefsFunction = (
+      buttonRef: React.RefObject<HTMLButtonElement>,
+      panelRef: React.RefObject<HTMLDivElement>
+    ) => void;
+    const ExampleComponent = ({ logRefs }: { logRefs: logRefsFunction }) => {
+      const ref1 = useRef<HTMLButtonElement>(null);
+      const ref2 = useRef<HTMLDivElement>(null);
+
+      useEffect(() => {
+        if (ref1.current && ref2.current) {
+          logRefs(ref1, ref2);
+        }
+      }, [ref1, ref2]);
+
+      return (
+        <Tabs>
+          <Tab buttonRef={ref1} panelRef={ref2} title="ShouldBeButtonRef">
+            <span>Should be panel ref</span>
+          </Tab>
+        </Tabs>
+      );
+    };
+
+    const setCorrectText = (
+      buttonRef: React.RefObject<HTMLButtonElement>,
+      panelRef: React.RefObject<HTMLDivElement>
+    ) => {
+      expect(buttonRef.current?.innerHTML).toContain('ShouldBeButtonRef');
+      expect(panelRef.current?.innerHTML).toEqual('<span>Should be panel ref</span>');
+    };
+
+    render(<ExampleComponent logRefs={setCorrectText} />);
+  });
+});