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

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.test.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { Popover, Props } from './Popover';
 import { render } from '@testing-library/react';
 import { usePosition } from '../hooks/usePosition';
@@ -32,7 +32,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
     });
 
     return (
-      <>
+      <Fragment>
         <button data-testid="button" onClick={calculatePosition} ref={relativeElement}>
           Test
         </button>
@@ -44,7 +44,7 @@ const createPopover = (params?: (defaultParams: Props) => Props) => {
         >
           Test
         </Popover>
-      </>
+      </Fragment>
     );
   };
 

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} />);
+  });
+});

package/src/Tabs/Tab.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface Props {
+  title: string;
+  children?: React.ReactNode;
+  selected?: boolean;
+  focussed?: boolean;
+  buttonRef?: React.RefObject<HTMLButtonElement>;
+  panelRef?: React.RefObject<HTMLDivElement>;
+  onTabButtonClick?: () => void;
+}
+
+export const Tab = (args: Props) => {
+  return (
+    <div {...args}>{`A <Tab /> component should only be used inside the <Tabs /> component.`}</div>
+  );
+};

package/src/Tabs/TabButton.module.scss

@@ -0,0 +1,36 @@
+.tabbutton {
+  border: 0;
+  border-radius: 0;
+  font-size: var(--font-size);
+  line-height: 1.5;
+  margin: 0;
+  padding: 0.25rem 0 1rem 0;
+  min-height: 2.5rem;
+  cursor: pointer;
+  font-family: var(--font-family);
+  background-color: transparent;
+  white-space: nowrap;
+  position: relative;
+  font-weight: bold;
+  color: transparent;
+
+  &.focussed:not(:focus-visible) {
+    outline: none;
+  }
+
+  span {
+    color: var(--tab-text-color);
+    font-weight: normal;
+    position: absolute;
+    left: 0;
+  }
+
+  &.selected {
+    color: var(--tab-text-color);
+
+    span {
+      color: transparent;
+      visibility: hidden;
+    }
+  }
+}

package/src/Tabs/TabButton.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Props, TabButton } from './TabButton';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {};
+
+const createTabButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TabButton {...parameters} data-testid="tabbutton">
+      tab content
+    </TabButton>
+  );
+  const tabButton = queries.getByTestId('tabbutton');
+
+  return {
+    ...queries,
+    tabButton,
+  };
+};
+
+describe('Tab should render', () => {
+  it('renders without crashing', () => {
+    const { tabButton } = createTabButton();
+
+    expect(tabButton).toBeTruthy();
+  });
+
+  it('should be selected when prop selected is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      selected: true,
+    }));
+
+    expect(tabButton).toHaveAttribute('aria-selected', 'true');
+    expect(tabButton).toHaveAttribute('tabIndex', '0');
+  });
+
+  it('should be focussed when prop focussed is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      focussed: true,
+    }));
+
+    expect(tabButton).toHaveClass('focussed');
+  });
+
+  it('should set accessibility attributes when prop tabPanelId is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      tabPanelId: 'fakeId',
+    }));
+
+    expect(tabButton).toHaveAttribute('aria-controls', 'fakeId');
+  });
+
+  it('should set id attribute when prop tabId is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      tabId: 'fakeId',
+    }));
+
+    expect(tabButton).toHaveAttribute('id', 'fakeId');
+  });
+
+  it('should set class when prop className is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      className: 'customclass',
+    }));
+
+    expect(tabButton).toHaveClass('customclass');
+  });
+});

package/src/Tabs/TabButton.tsx

@@ -0,0 +1,58 @@
+import React, { ComponentPropsWithRef, useEffect } from 'react';
+import classes from './TabButton.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'button'> {
+  children?: string;
+  selected?: boolean;
+  focussed?: boolean;
+  tabId?: string;
+  tabPanelId?: string;
+  onTabButtonClick?: () => void;
+}
+
+export const TabButton = React.forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      children,
+      selected = false,
+      focussed = false,
+      tabId,
+      tabPanelId,
+      className,
+      onTabButtonClick,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    useEffect(() => {
+      if (focussed && ref) {
+        (ref as React.MutableRefObject<HTMLButtonElement>).current.focus();
+      }
+    }, [focussed]);
+
+    const classNames = [classes['tabbutton']];
+
+    selected && classNames.push(classes['selected']);
+    focussed && !selected && classNames.push(classes['focussed']);
+    className && classNames.push(className);
+
+    return (
+      <button
+        {...rest}
+        aria-selected={selected}
+        key={tabId}
+        className={classNames.join(' ')}
+        ref={ref}
+        role="tab"
+        tabIndex={selected ? 0 : -1}
+        type="button"
+        aria-controls={tabPanelId}
+        id={tabId}
+        onClick={onTabButtonClick}
+      >
+        <span aria-hidden="true">{children}</span>
+        {children}
+      </button>
+    );
+  }
+);

package/src/Tabs/TabPanel.module.scss

@@ -0,0 +1,7 @@
+.tabpanel {
+  display: none;
+
+  &.selected {
+    display: block;
+  }
+}

package/src/Tabs/TabPanel.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { TabPanel, Props } from './TabPanel';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  tabId: 'fakeTabId',
+  tabPanelId: 'fakeTabPanelId',
+  children: [],
+};
+
+const createTabPanel = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TabPanel {...parameters} data-testid="tabpanel">
+      tabpanel content
+    </TabPanel>
+  );
+  const tabpanel = queries.getByTestId('tabpanel');
+
+  return {
+    ...queries,
+    tabpanel,
+  };
+};
+
+describe('TabPanel should render', () => {
+  it('renders without crashing', () => {
+    const { tabpanel } = createTabPanel();
+
+    expect(tabpanel).toBeTruthy();
+
+    expect(tabpanel).toHaveAttribute('aria-hidden', 'true');
+    expect(tabpanel).toHaveAttribute('hidden');
+  });
+
+  it('should be visible when prop selected is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      selected: true,
+    }));
+
+    expect(tabpanel).toHaveClass('selected');
+    expect(tabpanel).toHaveAttribute('aria-hidden', 'false');
+    expect(tabpanel).not.toHaveAttribute('hidden');
+  });
+
+  it('should set id when prop tabPanelId is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      tabPanelId: 'fakeId',
+    }));
+
+    expect(tabpanel).toHaveAttribute('id', 'fakeId');
+  });
+
+  it('should set accessibility attributes when prop tabId is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      tabId: 'fakeId',
+    }));
+
+    expect(tabpanel).toHaveAttribute('aria-labelledby', 'fakeId');
+  });
+
+  it('should set class when prop className is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      className: 'customclass',
+    }));
+
+    expect(tabpanel).toHaveClass('customclass');
+  });
+});

package/src/Tabs/TabPanel.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithRef } from 'react';
+import classes from './TabPanel.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children: React.ReactNode;
+  tabId: string;
+  tabPanelId: string;
+  selected?: boolean;
+}
+
+export const TabPanel = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, tabId, tabPanelId, selected = false, className, ...rest }: Props, ref) => (
+    <div
+      {...rest}
+      ref={ref}
+      aria-labelledby={tabId}
+      className={`${classes['tabpanel']} ${selected ? classes['selected'] : ''} ${className ?? ''}`}
+      id={tabPanelId}
+      role="tabpanel"
+      tabIndex={0}
+      hidden={!selected || undefined}
+      aria-hidden={!selected}
+    >
+      {children}
+    </div>
+  )
+);

package/src/Tabs/Tabs.module.scss

@@ -0,0 +1,41 @@
+$focus-width: 5px;
+
+.tabs {
+  background-color: var(--tabs-background-color);
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tablist {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 2rem;
+  position: relative;
+  margin: -$focus-width;
+  padding: $focus-width;
+  z-index: 0;
+}
+
+.indicator {
+  position: absolute;
+  height: 2px;
+  background-color: var(--color-primary);
+  transition-property: left, width;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+
+.tabdivider {
+  border-bottom-style: var(--tablist-border-style);
+  border-bottom-width: var(--tablist-border-width);
+  border-bottom-color: var(--tablist-border-color);
+  width: calc(100% - ($focus-width * 2));
+  position: absolute;
+  bottom: $focus-width;
+  left: $focus-width;
+  z-index: -1;
+}