@onewelcome/react-lib-components 0.1.6-alpha → 0.1.9-alpha

package/src/DataGrid/DataGridHeader/DataGridHeader.test.tsx

@@ -0,0 +1,255 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridHeader, Props } from './DataGridHeader';
+import { getByRole, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  headers: [
+    { name: 'firstName', headline: 'First name' },
+    { name: 'lastName', headline: 'Last name' },
+  ],
+};
+
+const createDataGridHeader = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('table');
+  const queries = render(<DataGridHeader {...parameters} data-testid="dataGridHeader" />, {
+    container,
+  });
+  const dataGridHeader = queries.getByTestId('dataGridHeader');
+
+  return {
+    ...queries,
+    dataGridHeader,
+  };
+};
+
+describe('DataGridHeader should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridHeader, getAllByRole, getByRole } = createDataGridHeader();
+
+    expect(dataGridHeader).toBeDefined();
+    expect(getAllByRole('columnheader')).toHaveLength(2);
+    expect(getByRole('cell')).toBeDefined(); //context-menu empty cell
+
+    expect(dataGridHeader.querySelectorAll('[data-icon]')).toHaveLength(0);
+  });
+
+  it('renders without hidden cell', () => {
+    const { dataGridHeader, getByRole } = createDataGridHeader((params) => ({
+      ...params,
+      headers: [...params.headers].map((header, idx) => ({ ...header, hidden: idx === 1 })),
+    }));
+
+    expect(dataGridHeader).toBeDefined();
+    expect(getByRole('columnheader')).toHaveTextContent(defaultParams.headers[0].headline);
+    expect(getByRole('cell')).toBeDefined(); //context-menu empty cell
+
+    expect(dataGridHeader.querySelectorAll('[data-icon]')).toHaveLength(0);
+  });
+
+  it('renders without contenxt-menu empty cell', () => {
+    const { dataGridHeader, getAllByRole, queryByRole } = createDataGridHeader((params) => ({
+      ...params,
+      disableContextMenuColumn: true,
+    }));
+
+    expect(dataGridHeader).toBeDefined();
+    expect(getAllByRole('columnheader')).toHaveLength(2);
+    expect(queryByRole('cell')).toBeNull(); //context-menu empty cell
+  });
+
+  it('renders headers cells without sorting indicators even when initialSort is provided', () => {
+    const { dataGridHeader } = createDataGridHeader((params) => ({
+      ...params,
+      initialSort: [{ name: params.headers[0].name, direction: 'ASC' }],
+    }));
+
+    expect(dataGridHeader.querySelectorAll('[data-icon]')).toHaveLength(0);
+  });
+
+  it('renders headers cells with sorting indicators', () => {
+    const onSort = jest.fn();
+    const { dataGridHeader } = createDataGridHeader((params) => ({
+      ...params,
+      onSort,
+    }));
+
+    const sortingIcons = dataGridHeader.querySelectorAll('[data-icon]');
+    expect(sortingIcons).toHaveLength(4);
+    sortingIcons.forEach((icon) => expect(icon).not.toHaveClass('hidden'));
+  });
+
+  it('renders headers cells with sorting indicators when initialSort provided with direction ASC', () => {
+    const onSort = jest.fn();
+    const { dataGridHeader, getAllByRole } = createDataGridHeader((params) => ({
+      ...params,
+      initialSort: [{ name: params.headers[0].name, direction: 'ASC' }],
+      onSort,
+    }));
+
+    expect(dataGridHeader.querySelectorAll('[data-icon]:not(.hidden)')).toHaveLength(3);
+    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
+    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
+    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+  });
+
+  it('renders headers cells with sorting indicators when initialSort provided with direction DESC', () => {
+    const onSort = jest.fn();
+    const { dataGridHeader, getAllByRole } = createDataGridHeader((params) => ({
+      ...params,
+      initialSort: [{ name: params.headers[1].name, direction: 'DESC' }],
+      onSort,
+    }));
+
+    expect(dataGridHeader.querySelectorAll('[data-icon]:not(.hidden)')).toHaveLength(3);
+    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
+    expect(firstNameCell).not.toHaveAttribute('aria-sort');
+    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+  });
+});
+
+describe('DataGridHeader should be interactive', () => {
+  it('clicking on cell call onSort callback', () => {
+    const onSortHandler = jest.fn();
+    const { getAllByRole } = createDataGridHeader((params) => ({
+      ...params,
+      onSort: onSortHandler,
+    }));
+
+    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
+    userEvent.click(getByRole(firstNameCell, 'button'));
+
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
+    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+  });
+
+  it('clicking on multiple cells call onSort callback with one column selected when single-sorting is enabled', () => {
+    const onSortHandler = jest.fn();
+    const { getAllByRole } = createDataGridHeader((params) => ({
+      ...params,
+      onSort: onSortHandler,
+    }));
+
+    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
+
+    userEvent.click(getByRole(firstNameCell, 'button'));
+    userEvent.click(getByRole(lastNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+    ]);
+    expect(firstNameCell).not.toHaveAttribute('aria-sort');
+    expect(lastNameCell).toHaveAttribute('aria-sort', 'ascending');
+
+    userEvent.click(getByRole(lastNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[1].name, direction: 'DESC' },
+    ]);
+    expect(firstNameCell).not.toHaveAttribute('aria-sort');
+    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+
+    userEvent.click(getByRole(firstNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
+    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+
+    userEvent.click(getByRole(firstNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[1].name, direction: 'DESC' },
+    ]);
+    expect(firstNameCell).toHaveAttribute('aria-sort', 'descending');
+    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+
+    userEvent.click(getByRole(firstNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([]);
+    expect(firstNameCell).not.toHaveAttribute('aria-sort');
+    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+  });
+
+  it('clicking on multiple cells call onSort callback with multiple columns selected when multi-sorting is enabled', () => {
+    const onSortHandler = jest.fn();
+    const { getAllByRole } = createDataGridHeader((params) => ({
+      ...params,
+      enableMultiSorting: true,
+      onSort: onSortHandler,
+    }));
+
+    const [firstNameCell, lastNameCell] = getAllByRole('columnheader');
+
+    userEvent.click(getByRole(firstNameCell, 'button'));
+    userEvent.click(getByRole(lastNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[1].name, direction: 'ASC' },
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
+    expect(lastNameCell).toHaveAttribute('aria-sort', 'ascending');
+
+    userEvent.click(getByRole(lastNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[1].name, direction: 'DESC' },
+      { name: defaultParams.headers[0].name, direction: 'ASC' },
+    ]);
+    expect(firstNameCell).toHaveAttribute('aria-sort', 'ascending');
+    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+
+    userEvent.click(getByRole(firstNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[0].name, direction: 'DESC' },
+      { name: defaultParams.headers[1].name, direction: 'DESC' },
+    ]);
+    expect(firstNameCell).toHaveAttribute('aria-sort', 'descending');
+    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+
+    userEvent.click(getByRole(firstNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([
+      { name: defaultParams.headers[1].name, direction: 'DESC' },
+    ]);
+    expect(firstNameCell).not.toHaveAttribute('aria-sort');
+    expect(lastNameCell).toHaveAttribute('aria-sort', 'descending');
+
+    userEvent.click(getByRole(lastNameCell, 'button'));
+    expect(onSortHandler).toBeCalledWith([]);
+    expect(firstNameCell).not.toHaveAttribute('aria-sort');
+    expect(lastNameCell).not.toHaveAttribute('aria-sort');
+  });
+});
+
+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(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridHeader {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('table');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -0,0 +1,103 @@
+import React, { ComponentPropsWithRef, useEffect, useState } from 'react';
+import { ColumnName, Direction, HeaderCell, OnSortFunction, Sort } from '../datagrid.interfaces';
+import { DataGridHeaderCell } from './DataGridHeaderCell';
+import classes from './DataGridHeader.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'thead'> {
+  headers: HeaderCell[];
+  initialSort?: Sort;
+  onSort?: OnSortFunction;
+  disableContextMenuColumn?: boolean;
+  enableMultiSorting?: boolean;
+  spacing?: React.CSSProperties;
+}
+
+const sortingStates = [undefined, 'ASC', 'DESC'] as (Direction | undefined)[];
+
+export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
+  (
+    {
+      initialSort,
+      onSort,
+      headers,
+      disableContextMenuColumn,
+      enableMultiSorting,
+      spacing,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const [sortList, setSortList] = useState(initialSort || []);
+
+    useEffect(() => {
+      setSortList(initialSort || []);
+    }, [initialSort]);
+
+    const calculateNextSortState = (direction?: Direction) => {
+      const currentDirectionIdx = sortingStates.findIndex((item) => item === direction);
+      return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
+    };
+
+    /**
+     * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.
+     * Last modified sorting column has the highest priority.
+     */
+    const updateSortList = (name: ColumnName): Sort => {
+      const current = sortList.find((item) => item.name === name);
+      const restSortList = enableMultiSorting ? sortList.filter((item) => item.name !== name) : [];
+      const newSortDirection = calculateNextSortState(current?.direction);
+      return newSortDirection
+        ? [{ name, direction: newSortDirection }, ...restSortList]
+        : restSortList;
+    };
+
+    const wrapOnSort = (name: ColumnName) => {
+      const newSort = updateSortList(name);
+      onSort && onSort(newSort);
+      setSortList(newSort);
+    };
+
+    const headerCells = headers.map((header, index) => {
+      if (header.hidden) {
+        return null;
+      }
+
+      let headerStyle: React.CSSProperties = {};
+
+      if (index === 0) {
+        headerStyle.paddingLeft = spacing?.paddingLeft;
+      }
+      if (index === headers.length - 1 && disableContextMenuColumn) {
+        headerStyle.paddingRight = spacing?.paddingRight;
+      }
+
+      const sort = sortList.find((item) => item.name === header.name);
+      return (
+        <DataGridHeaderCell
+          key={header.name}
+          name={header.name}
+          headline={header.headline}
+          disableSorting={header.disableSorting || !onSort}
+          onSort={wrapOnSort}
+          activeSortDirection={sort?.direction}
+          style={headerStyle}
+        />
+      );
+    });
+
+    return (
+      <thead {...rest} ref={ref} className={classes['thead']}>
+        <tr className={classes['row']}>
+          {headerCells}
+          {!disableContextMenuColumn && (
+            <td
+              style={{ paddingRight: spacing?.paddingRight }}
+              aria-label="context menu"
+              className={classes['context-menu']}
+            ></td>
+          )}
+        </tr>
+      </thead>
+    );
+  }
+);

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss

@@ -0,0 +1,68 @@
+.header-cell {
+  font-weight: normal;
+  text-align: left;
+  padding: 0 0.625rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+
+  & > * {
+    display: inline-flex;
+  }
+
+  & > button {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+  }
+}
+
+.headline {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: 1.5;
+  font-weight: 700;
+  color: var(--default);
+}
+
+.sorting-indicator-container {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0.5rem;
+  justify-content: center;
+
+  & > * {
+    font-size: 0.625rem;
+  }
+
+  .indicator {
+    color: var(--greyed-out);
+
+    &.active {
+      color: var(--color-primary);
+    }
+
+    &.hidden {
+      visibility: hidden;
+    }
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .header-cell {
+    &:first-child {
+      padding-left: 1.25rem;
+    }
+
+    &:last-child {
+      padding-right: 1.25rem;
+    }
+  }
+}

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.test.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridHeaderCell, Props } from './DataGridHeaderCell';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = { name: 'name-123', headline: 'Test' };
+
+const createDataGridHeaderCell = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('tr');
+  const queries = render(<DataGridHeaderCell {...parameters} data-testid="dataGridHeaderCell" />, {
+    container,
+  });
+  const dataGridHeaderCell = queries.getByTestId('dataGridHeaderCell');
+
+  return {
+    ...queries,
+    dataGridHeaderCell,
+  };
+};
+
+describe('DataGridHeaderCell should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridHeaderCell, queryByRole } = createDataGridHeaderCell();
+
+    expect(dataGridHeaderCell).toBeDefined();
+    expect(dataGridHeaderCell).toHaveTextContent(defaultParams.headline);
+    expect(queryByRole('button')).toBeDefined();
+    expect(dataGridHeaderCell.querySelectorAll('[data-icon]')).toHaveLength(2);
+  });
+
+  it('renders without sorting indicators (icons)', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+      ...params,
+      disableSorting: true,
+    }));
+
+    expect(dataGridHeaderCell.querySelector('[data-icon]')).toBeNull();
+  });
+
+  it('renders DESC and ASC sorting indicators (icons) when sorting is enabled and current sorting is not defined', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell();
+
+    expect(dataGridHeaderCell).toBeDefined();
+    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    expect(sortingIcons).toHaveLength(2);
+    sortingIcons.forEach((icon) => {
+      expect(icon).toHaveClass('indicator');
+      expect(icon).not.toHaveClass('active');
+      expect(icon).not.toHaveClass('hidden');
+    });
+  });
+
+  it('renders ASC sorting indicator (icon) when sorting is enabled and current sorting is ASC', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+      ...params,
+      activeSortDirection: 'ASC',
+    }));
+
+    expect(dataGridHeaderCell).toBeDefined();
+    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    expect(sortingIcons).toHaveLength(2);
+    sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
+    expect(sortingIcons[0]).toHaveClass('indicator', 'active', 'icon-triangle-up');
+    expect(sortingIcons[0]).not.toHaveClass('hidden');
+    expect(sortingIcons[1]).toHaveClass('indicator', 'hidden', 'icon-triangle-down');
+    expect(sortingIcons[1]).not.toHaveClass('active');
+  });
+});
+
+it('renders DESC sorting indicator (icon) when sorting is enabled and current sorting is DESC', () => {
+  const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+    ...params,
+    activeSortDirection: 'DESC',
+  }));
+
+  expect(dataGridHeaderCell).toBeDefined();
+  const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+  expect(sortingIcons).toHaveLength(2);
+  sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
+  expect(sortingIcons[0]).toHaveClass('indicator', 'hidden', 'icon-triangle-up');
+  expect(sortingIcons[0]).not.toHaveClass('active');
+  expect(sortingIcons[1]).toHaveClass('indicator', 'active', 'icon-triangle-down');
+  expect(sortingIcons[1]).not.toHaveClass('hidden');
+});
+
+describe('DataGridHeaderCell should be interactive', () => {
+  it('clicking on cell calls onSort callback', () => {
+    const onSortHandler = jest.fn();
+    const { getByRole } = createDataGridHeaderCell((params) => ({
+      ...params,
+      disableSorting: false,
+      onSort: onSortHandler,
+    }));
+
+    userEvent.click(getByRole('button'));
+
+    expect(onSortHandler).toBeCalledWith(defaultParams.name);
+  });
+});
+
+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(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridHeaderCell {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('tr');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -0,0 +1,72 @@
+import React, { ComponentPropsWithRef, Fragment } from 'react';
+import { Icon, Icons } from '../../Icon/Icon';
+import { ColumnName, Direction } from '../datagrid.interfaces';
+import classes from './DataGridHeaderCell.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'th'> {
+  headline: string;
+  name: ColumnName;
+  disableSorting?: boolean;
+  activeSortDirection?: Direction;
+  onSort?: (name: ColumnName) => void;
+}
+
+const ariaSortMapping = {
+  ASC: 'ascending',
+  DESC: 'descending',
+} as const;
+
+export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
+  ({ headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props, ref) => {
+    const onCellClick = () => {
+      onSort && onSort(name);
+    };
+
+    const sortingIndicator = () => {
+      const getSortingIndicatorClasses = (direction: Direction) => {
+        const sortingIndicatorClasses = [classes['indicator']];
+        activeSortDirection &&
+          sortingIndicatorClasses.push(
+            activeSortDirection === direction ? classes['active'] : classes['hidden']
+          );
+        return sortingIndicatorClasses;
+      };
+
+      return (
+        <Fragment>
+          <Icon className={getSortingIndicatorClasses('ASC').join(' ')} icon={Icons.TriangleUp} />
+          <Icon
+            className={getSortingIndicatorClasses('DESC').join(' ')}
+            icon={Icons.TriangleDown}
+          />
+        </Fragment>
+      );
+    };
+
+    const innerContent = (
+      <Fragment>
+        <span className={classes['headline']}>{headline}</span>
+        {!disableSorting && (
+          <div className={classes['sorting-indicator-container']}>{sortingIndicator()}</div>
+        )}
+      </Fragment>
+    );
+
+    return (
+      <th
+        {...rest}
+        ref={ref}
+        className={classes['header-cell']}
+        aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
+      >
+        {disableSorting ? (
+          <div key={name}>{innerContent}</div>
+        ) : (
+          <button key={name} onClick={onCellClick}>
+            {innerContent}
+          </button>
+        )}
+      </th>
+    );
+  }
+);

package/src/DataGrid/datagrid.interfaces.ts

@@ -0,0 +1,14 @@
+export type ColumnName = string;
+export type Direction = 'ASC' | 'DESC';
+export type Sort = {
+  name: ColumnName;
+  direction: Direction;
+}[];
+export type OnSortFunction = (sort: Sort) => void;
+
+export interface HeaderCell {
+  name: ColumnName;
+  headline: string;
+  disableSorting?: boolean;
+  hidden?: boolean;
+}