@onewelcome/react-lib-components 0.1.5-alpha → 0.1.8-alpha

package/src/DataGrid/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -0,0 +1,258 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataGridBody should render renders without crashing 1`] = `
+Array [
+  <tr
+    class="row"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Paweł
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Napieracz
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        12.12.1990
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Paweł-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Paweł"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Paweł
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+  <tr
+    class="row"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Michał
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Górski
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        12.12.1994
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Michał-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Michał"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Michał
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+  <tr
+    class="row"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Daniel
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Velden
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        12.12.199x
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Daniel-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Daniel"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Daniel
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+  <tr
+    class="row"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Jasha
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        Joachimsthal
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        12.12.198x
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body "
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Jasha-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Jasha"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Jasha
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+]
+`;

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

@@ -0,0 +1,26 @@
+.thead {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 2.5rem;
+    width: calc(100% - 2rem);
+    left: 1rem;
+    border-bottom: 1px solid #c3c3c7;
+  }
+}
+
+.row {
+  height: 2.5rem;
+}
+
+.context-menu {
+  width: 4.125rem;
+  box-sizing: border-box;
+}
+
+@media only screen and (min-width: 50em) {
+  .thead::after {
+    width: calc(100% - 2.5rem);
+    left: 1.25rem;
+  }
+}

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,80 @@
+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;
+}
+
+const sortingStates = [undefined, 'ASC', 'DESC'] as (Direction | undefined)[];
+
+export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
+  (
+    { initialSort, onSort, headers, disableContextMenuColumn, enableMultiSorting, ...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) => {
+      if (header.hidden) {
+        return null;
+      }
+
+      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}
+        />
+      );
+    });
+
+    return (
+      <thead {...rest} ref={ref} className={classes['thead']}>
+        <tr className={classes['row']}>
+          {headerCells}
+          {!disableContextMenuColumn && (
+            <td 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;
+    }
+  }
+}