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

package/src/DataGrid/DataGridBody/DataGridBody.tsx

@@ -0,0 +1,80 @@
+import React, { ComponentPropsWithRef, ReactElement, Ref } from 'react';
+import { HeaderCell } from '../datagrid.interfaces';
+import { DataGridCell } from './DataGridCell';
+import { DataGridRow } from './DataGridRow';
+import classes from './DataGridBody.module.scss';
+import { Typography } from '../../Typography/Typography';
+
+export interface Props<T> extends ComponentPropsWithRef<'tbody'> {
+  children: ({ item, index }: { item: T; index: number }) => ReactElement;
+  data?: T[];
+  headers: HeaderCell[];
+  isLoading?: boolean;
+  disableContextMenuColumn?: boolean;
+  emptyLabel?: string;
+  spacing?: React.CSSProperties;
+}
+
+const skeletonLoadingRows = 9;
+
+const DataGridBodyInner = <T extends {}>(
+  {
+    children,
+    data,
+    headers,
+    isLoading,
+    disableContextMenuColumn,
+    emptyLabel,
+    spacing,
+    ...rest
+  }: Props<T>,
+  ref: Ref<HTMLTableSectionElement>
+) => {
+  const renderContent = () => {
+    const visibleColumns = headers.filter((header) => !header.hidden).length;
+    if (isLoading) {
+      return Array.from(Array(skeletonLoadingRows)).map((_, rowIdx) => (
+        <DataGridRow key={rowIdx} isLoading>
+          {Array.from(Array(visibleColumns)).map((__, colIdx) => (
+            <DataGridCell key={colIdx} isLoading></DataGridCell>
+          ))}
+          {!disableContextMenuColumn && <DataGridCell></DataGridCell>}
+        </DataGridRow>
+      ));
+    }
+
+    const emptyData = !data || data.length === 0;
+    if (emptyData) {
+      return (
+        <tr>
+          <td
+            className={classes['empty']}
+            colSpan={visibleColumns + (disableContextMenuColumn ? 0 : 1)}
+          >
+            <Typography variant="body" spacing={{ margin: 0 }}>
+              {emptyLabel}
+            </Typography>
+          </td>
+        </tr>
+      );
+    }
+
+    return data?.map((item, index) => {
+      return React.cloneElement(children({ item, index }), {
+        headers,
+        spacing,
+        disableContextMenuColumn,
+      });
+    });
+  };
+
+  return (
+    <tbody {...rest} ref={ref}>
+      {renderContent()}
+    </tbody>
+  );
+};
+
+export const DataGridBody = React.forwardRef(DataGridBodyInner) as <T extends {}>(
+  p: Props<T> & { ref?: Ref<HTMLTableSectionElement> }
+) => ReactElement;

package/src/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -0,0 +1,33 @@
+@import '../../mixins.module.scss';
+
+.cell {
+  min-height: 3.5rem;
+  padding: 0.5rem 0.625rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+
+  .loading {
+    @include skeletonLoading();
+    border-radius: 0.5rem;
+    height: 1.25rem;
+    margin: 0.625rem 0;
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .cell {
+    &:first-child {
+      padding-left: 1.25rem;
+    }
+
+    &:last-child {
+      padding-right: 1.25rem;
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridCell, Props } from './DataGridCell';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  children: 'cell',
+};
+
+const createDataGridCell = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('tr');
+  const queries = render(<DataGridCell {...parameters} data-testid="dataGridCell" />, {
+    container,
+  });
+  const dataGridCell = queries.getByTestId('dataGridCell');
+
+  return {
+    ...queries,
+    dataGridCell,
+  };
+};
+
+describe('DataGridCell should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridCell } = createDataGridCell();
+
+    expect(dataGridCell).toBeDefined();
+    expect(dataGridCell).toHaveClass('cell');
+    expect(dataGridCell).toHaveTextContent(defaultParams.children as string);
+  });
+
+  it('renders with additional class', () => {
+    const { dataGridCell } = createDataGridCell((params) => ({ ...params, className: 'test' }));
+
+    expect(dataGridCell).toHaveClass('cell', 'test');
+  });
+
+  it('renders loading state', () => {
+    const { dataGridCell } = createDataGridCell((params) => ({ ...params, isLoading: true }));
+
+    const skeletonLoadingEl = dataGridCell.querySelector('div');
+    expect(skeletonLoadingEl).toHaveClass('loading');
+    expect(skeletonLoadingEl).toHaveAttribute('aria-busy', 'true');
+    expect(skeletonLoadingEl).toHaveAttribute('aria-live', 'polite');
+  });
+});
+
+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 <DataGridCell {...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/DataGridBody/DataGridCell.tsx

@@ -0,0 +1,58 @@
+import React, { ComponentPropsWithRef, ReactChild } from 'react';
+import { Typography } from '../../Typography/Typography';
+import classes from './DataGridCell.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'td'> {
+  children?: ReactChild;
+  isLoading?: boolean;
+  spacing?: React.CSSProperties;
+  cellIndex?: number;
+  columnLength?: number;
+  disableContextMenuColumn?: boolean;
+}
+
+export const DataGridCell = React.forwardRef<HTMLTableCellElement, Props>(
+  (
+    {
+      children,
+      className,
+      isLoading,
+      spacing,
+      cellIndex,
+      columnLength,
+      disableContextMenuColumn,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    let cellStyle: React.CSSProperties = {};
+
+    if (cellIndex === 0) {
+      cellStyle.paddingLeft = spacing?.paddingLeft;
+    }
+    if (
+      (cellIndex === columnLength && !disableContextMenuColumn) ||
+      (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
+    ) {
+      cellStyle.paddingRight = spacing?.paddingRight;
+    }
+
+    return (
+      <td
+        {...rest}
+        ref={ref}
+        style={{ ...rest.style, ...cellStyle }}
+        className={`${classes['cell']} ${className ?? ''}`}
+      >
+        {isLoading && (
+          <div className={classes['loading']} aria-busy="true" aria-live="polite"></div>
+        )}
+        {!isLoading && (
+          <Typography variant="body" tag="span">
+            {children}
+          </Typography>
+        )}
+      </td>
+    );
+  }
+);

package/src/DataGrid/DataGridBody/DataGridRow.module.scss

@@ -0,0 +1,7 @@
+.row {
+  background-color: var(--data-grid-row-background-color);
+
+  &:not(.loading):hover {
+    background-color: var(--data-grid-row-hover-background-color);
+  }
+}

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,42 @@
+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;
+  spacing?: React.CSSProperties;
+  disableContextMenuColumn?: boolean;
+}
+
+export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
+  (
+    { children, className, headers, isLoading, spacing, disableContextMenuColumn, ...rest }: Props,
+    ref
+  ) => {
+    const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
+      if (child) {
+        const cellWithSpacing = React.cloneElement(child, {
+          spacing: spacing,
+          cellIndex: index,
+          columnLength: headers?.length,
+          disableContextMenuColumn,
+        });
+
+        const visible = headers?.length! > index ? !headers![index].hidden : true;
+        return visible && cellWithSpacing;
+      }
+      return null;
+    });
+
+    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;
+  }
+}