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

package/src/DataGrid/DataGridBody/DataGridRow.test.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridRow, Props } from './DataGridRow';
+import { render } from '@testing-library/react';
+import { DataGridCell } from './DataGridCell';
+
+const defaultParams: Props = {
+  children: [<DataGridCell>1</DataGridCell>, <DataGridCell>2</DataGridCell>],
+  headers: [
+    { name: 'firstName', headline: 'first name' },
+    { name: 'lastName', headline: 'last name' },
+  ],
+};
+
+const createDataGridRow = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('tbody');
+  const queries = render(<DataGridRow {...parameters} data-testid="dataGridRow" />, { container });
+  const dataGridRow = queries.getByTestId('dataGridRow');
+
+  return {
+    ...queries,
+    dataGridRow,
+  };
+};
+
+describe('DataGridRow should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridRow, getAllByRole } = createDataGridRow();
+
+    expect(dataGridRow).toBeDefined();
+    expect(dataGridRow).toHaveClass('row', { exact: true });
+    const cells = getAllByRole('cell');
+    expect(cells).toHaveLength(2);
+    expect(cells[0]).toHaveTextContent('1');
+    expect(cells[1]).toHaveTextContent('2');
+  });
+
+  it('renders with additional class', () => {
+    const { dataGridRow } = createDataGridRow((params) => ({ ...params, className: 'test' }));
+
+    expect(dataGridRow).toHaveClass('row test', { exact: true });
+  });
+
+  it('renders loading state', () => {
+    const { dataGridRow } = createDataGridRow((params) => ({ ...params, isLoading: true }));
+
+    expect(dataGridRow).toHaveClass('row loading', { exact: true });
+  });
+
+  it('renders only visible columns', () => {
+    const { dataGridRow, getAllByRole } = createDataGridRow((params) => ({
+      ...params,
+      headers: [
+        { name: 'firstName', headline: 'first name', hidden: true },
+        { name: 'lastName', headline: 'last name', hidden: true },
+        { name: 'date', headline: 'date' },
+        { name: 'status', headline: 'status' },
+      ],
+      children: [
+        <DataGridCell>1</DataGridCell>,
+        <DataGridCell>2</DataGridCell>,
+        <DataGridCell>3</DataGridCell>,
+        <DataGridCell>4</DataGridCell>,
+      ],
+    }));
+
+    expect(dataGridRow).toBeDefined();
+    const cells = getAllByRole('cell');
+    expect(cells).toHaveLength(2);
+    expect(cells[0]).toHaveTextContent('3');
+    expect(cells[1]).toHaveTextContent('4');
+  });
+});
+
+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 <DataGridRow {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('tbody');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridBody/DataGridRow.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { HeaderCell } from '../datagrid.interfaces';
+import classes from './DataGridRow.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'tr'> {
+  headers?: HeaderCell[];
+  isLoading?: boolean;
+}
+
+export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
+  ({ children, className, headers, isLoading, ...rest }: Props, ref) => {
+    const visibleCells = React.Children.map(children, (child, index) => {
+      const visible = headers?.length! > index ? !headers![index].hidden : true;
+      return visible && child;
+    });
+
+    const classNames = [classes['row']];
+    className && classNames.push(className);
+    isLoading && classNames.push(classes['loading']);
+
+    return (
+      <tr {...rest} ref={ref} className={classNames.join(' ')}>
+        {visibleCells}
+      </tr>
+    );
+  }
+);

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