@hyphen/hyphen-components 2.9.0

package/src/components/Table/TableBody/TableBody.tsx

@@ -0,0 +1,96 @@
+import React, { FC, Key } from 'react';
+import classNames from 'classnames';
+import styles from './TableBody.module.scss';
+import { Column, Row } from '../../../types';
+import { TableRow } from '../common/TableRow/TableRow';
+
+export interface TableBodyProps {
+  /**
+   * The table columns to be rendered
+   */
+  columns: Column[];
+  /**
+   * The unique key to identify a React node for each row.
+   */
+  rowKey: Key;
+  /**
+   * The table rows to be rendered
+   */
+  rows: Row[];
+  /**
+   * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+   * for a specific column.
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * A custom class to apply to the table body.
+   */
+  className?: string;
+  /**
+   * A global placeholder for empty cells. Note: can be overwriten by
+   * the same attribute passed for an individual column config object.
+   */
+  emptyCellPlaceholder?: string | number | undefined;
+  /**
+   * Enable a hover state on table rows.
+   */
+  hoverableRows?: boolean;
+  /**
+   * Whether the table has borders or not.
+   */
+  isBorderless?: boolean;
+  /**
+   * Whether the table rows have smaller padding
+   */
+  isCompact?: boolean;
+  /**
+   * Whether the table rows have a striped pattern
+   */
+  isStriped?: boolean;
+  /**
+   * Truncate overflow inside column based on column width. Can be overwritten on specific columns,
+   * by passing `truncateOverflow` value on a specific Column
+   */
+  truncateOverflow?: boolean;
+}
+
+export const TableBody: FC<TableBodyProps> = ({
+  columns,
+  rowKey,
+  rows,
+  align = 'left',
+  className = '',
+  emptyCellPlaceholder = '',
+  hoverableRows = false,
+  isBorderless = false,
+  isCompact = false,
+  isStriped = false,
+  truncateOverflow = false,
+}) => {
+  const tableBodyClasses = classNames(
+    styles['table-body'],
+    {
+      [styles.striped]: isStriped,
+      [styles.hover]: hoverableRows,
+    },
+    className
+  );
+
+  return (
+    <tbody className={tableBodyClasses}>
+      {rows.map((row, rowIndex) => (
+        <TableRow
+          columns={columns}
+          row={row}
+          rowIndex={rowIndex}
+          align={align}
+          key={row[rowKey as any]}
+          emptyCellPlaceholder={emptyCellPlaceholder}
+          truncateOverflow={truncateOverflow}
+          isBorderless={isBorderless}
+          isCompact={isCompact}
+        />
+      ))}
+    </tbody>
+  );
+};

package/src/components/Table/TableBody/TableBodyCell/TableBodyCell.module.scss

@@ -0,0 +1,47 @@
+.table-cell {
+  border-color: var(--color-border-default);
+  border-bottom-style: solid;
+  border-width: 0 0 var(--size-border-width-sm) 0;
+  color: var(--color-font-base);
+  padding: var(--size-spacing-md) var(--size-spacing-lg);
+
+  &.borderless {
+    border-width: 0;
+  }
+
+  &.compact {
+    padding: var(--size-spacing-sm) var(--size-spacing-md);
+  }
+
+  &.truncated {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.sticky-column-left {
+    background-color: var(--color-background-primary);
+    left: 0;
+  }
+
+  &.sticky-column-right {
+    background-color: var(--color-background-primary);
+    right: 0;
+  }
+
+  &.sticky-column {
+    position: sticky;
+    z-index: calc(var(--size-z-index-sticky) - 1);
+    background-color: var(--color-background-primary);
+    box-shadow: 5px 0 5px -2px rgb(0 0 0 / 10%),
+      -5px 0 5px -2px rgb(0 0 0 / 10%);
+  }
+
+  &.align-right {
+    text-align: right;
+  }
+
+  &.align-center {
+    text-align: center;
+  }
+}

package/src/components/Table/TableBody/TableBodyCell/TableBodyCell.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TableCell from './TableBodyCell';
+
+describe('TableCell', () => {
+  describe('States', () => {
+    test('It renders an empty td when no children passed', () => {
+      render(<TableCell />);
+
+      const tableCell = screen.getByRole('cell');
+      expect(tableCell).toBeInTheDocument();
+    });
+
+    test('td element is rendered with specific width style attribute based on width prop', () => {
+      render(<TableCell width={200}>ID</TableCell>);
+
+      const tableCell = screen.getByText('ID');
+
+      expect(tableCell).toHaveStyle({ minWidth: '200px', maxWidth: '200px' });
+    });
+
+    test("td content is truncated if 'isTruncated' prop is passed", () => {
+      render(
+        <TableCell width={50} truncateOverflow>
+          Lots of long long long content
+        </TableCell>
+      );
+
+      const tableCellWithEllipsis = screen.getByRole('cell');
+
+      expect(tableCellWithEllipsis).toHaveClass('truncated');
+    });
+
+    test("td is borderless if 'isBorderless' prop is passed", () => {
+      render(<TableCell isBorderless>ID</TableCell>);
+
+      const tableCellWithEllipsis = screen.getByRole('cell');
+
+      expect(tableCellWithEllipsis).toHaveClass('borderless');
+    });
+
+    test("td is compact if 'isCompact' prop is passed", () => {
+      render(<TableCell isCompact>ID</TableCell>);
+
+      const tableCellWithEllipsis = screen.getByRole('cell');
+
+      expect(tableCellWithEllipsis).toHaveClass('compact');
+    });
+
+    test('It renders with a custom class is passed as prop', () => {
+      render(<TableCell className="my-custom-class" />);
+
+      const tableCell = screen.getByRole('cell');
+      expect(tableCell).toHaveClass('my-custom-class');
+    });
+
+    describe('Sticky', () => {
+      test('it renders as a <th> element if sticky is passed as a prop with "left" as its value', () => {
+        render(<TableCell sticky="left" />);
+
+        const tableRowHeader = screen.getByRole('rowheader');
+
+        expect(tableRowHeader).toBeInTheDocument();
+        expect(tableRowHeader).toHaveAttribute('scope', 'row');
+        expect(tableRowHeader).toHaveClass('sticky-column');
+        expect(tableRowHeader).toHaveClass('sticky-column-left');
+      });
+
+      test('it renders as a <th> element if sticky is passed as a prop with "right" as its value', () => {
+        render(<TableCell sticky="right" />);
+
+        const tableRowHeader = screen.getByRole('rowheader');
+
+        expect(tableRowHeader).toBeInTheDocument();
+        expect(tableRowHeader).toHaveAttribute('scope', 'row');
+        expect(tableRowHeader).toHaveClass('sticky-column');
+        expect(tableRowHeader).toHaveClass('sticky-column-right');
+      });
+    });
+  });
+});

package/src/components/Table/TableBody/TableBodyCell/TableBodyCell.tsx

@@ -0,0 +1,94 @@
+import React, { FC, ReactNode } from 'react';
+import classNames from 'classnames';
+import { Box } from '../../../Box/Box';
+import styles from './TableBodyCell.module.scss';
+
+export interface TableBodyCellProps {
+  /**
+   * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+   * for a specific column.
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * Children node to be rendered.
+   */
+  children?: ReactNode;
+  /**
+   * Custom class to be applied to `<tr>` element.
+   */
+  className?: string;
+  /**
+   * Remove borders around td elements.
+   */
+  isBorderless?: boolean;
+  /**
+   * Reduces padding inside table cells.
+   */
+  isCompact?: boolean;
+  /**
+   * Will stick to either the left or right side of a table during horizontal scroll.
+   */
+  sticky?: 'left' | 'right';
+  /**
+   * Truncates the cell contents based on width established by `Column`
+   * NOTE: Truncate only on cells with primitive data types.
+   */
+  truncateOverflow?: boolean;
+  /**
+   * Placeholder for an empty cell, will be rendered when content is `null` `undefined`
+   * or `''`. Placeholders will not be rendered on values of `0`.
+   */
+  emptyCellPlaceholder?: ReactNode;
+  /**
+   * Fixed width for a particular cell.
+   * Value should be taken from column config so it matches its parent.
+   */
+  width?: number;
+}
+
+const TableBodyCell: FC<TableBodyCellProps> = ({
+  align = 'left',
+  children = null,
+  className = '',
+  emptyCellPlaceholder = null,
+  isBorderless = false,
+  isCompact = false,
+  sticky = undefined,
+  truncateOverflow = false,
+  width = undefined,
+}) => {
+  const columnIsSticky = sticky === 'left' || sticky === 'right';
+  const tableCellClasses = classNames(
+    styles['table-cell'],
+    {
+      [styles.truncated]: truncateOverflow,
+      [styles.compact]: isCompact,
+      [styles.borderless]: isBorderless,
+      [styles['sticky-column']]: columnIsSticky,
+      [styles['sticky-column-left']]: sticky === 'left',
+      [styles['sticky-column-right']]: sticky === 'right',
+      [styles['align-right']]: align === 'right',
+      [styles['align-center']]: align === 'center',
+    },
+    className
+  );
+
+  return (
+    <Box
+      as={columnIsSticky ? 'th' : 'td'}
+      className={tableCellClasses}
+      display="table-cell"
+      width={`${width}px`}
+      style={{
+        ...(width && { minWidth: `${width}px`, maxWidth: `${width}px` }),
+      }}
+      scope="row"
+    >
+      {children === null || typeof children === 'undefined' || children === ''
+        ? emptyCellPlaceholder
+        : children}
+    </Box>
+  );
+};
+
+export default TableBodyCell;

package/src/components/Table/TableHead/TableHead.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TableHead } from './TableHead';
+
+const columns = [
+  { heading: 'ID', dataKey: 'id' },
+  { heading: 'Color', dataKey: 'color' },
+  { heading: 'Flavor', dataKey: 'flavor' },
+];
+
+describe('TableHead', () => {
+  describe('States', () => {
+    test('it renders an empty thead element if no children are passed', () => {
+      render(<TableHead columns={columns} />);
+
+      const tableHead = screen.getByRole('rowgroup');
+      expect(tableHead).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Table/TableHead/TableHead.tsx

@@ -0,0 +1,78 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import { Column, EventWithColumnKey } from '../../../types';
+import { TableRow } from '../common/TableRow/TableRow';
+
+export interface TableHeadProps {
+  /**
+   * The table columns to be rendered
+   */
+  columns: Column[];
+  /**
+   * Text alignment for all table cells. Can be superseded by passing the same prop into the `Column` object
+   * for a specific column.
+   */
+  align?: 'left' | 'right' | 'center';
+  /**
+   * Custom class to be applied to the `<thead>` element.
+   */
+  className?: string;
+  /**
+   * Whether the table has borders or not.
+   */
+  isBorderless?: boolean;
+  /**
+   * Whether the table rows have smaller padding
+   */
+  isCompact?: boolean;
+  /**
+   * If table scrolls vertically, header will remain stuck to the top of the table, and not scroll away.
+   */
+  hasStickyHeader?: boolean;
+  /**
+   * Callback function to fire on sorting one of the table headers.
+   */
+  onSort?: (event: EventWithColumnKey) => void;
+  /**
+   * The key of the sorted column and its sort direction.
+   */
+  sortedColumn?: {
+    dataKey: string | undefined;
+    sortDirection: 'none' | 'ascending' | 'descending' | undefined;
+  };
+  /**
+   * Truncate overflow inside column based on column width. Can be overwritten on specific columns,
+   * by passing `truncateOverflow` value on a specific Column
+   */
+  truncateOverflow?: boolean;
+}
+
+export const TableHead: FC<TableHeadProps> = ({
+  columns,
+  align = 'left',
+  className = '',
+  isBorderless = false,
+  isCompact = false,
+  hasStickyHeader = false,
+  onSort = undefined,
+  sortedColumn = undefined,
+  truncateOverflow = false,
+}) => {
+  const tableHeadClasses = classNames(className);
+
+  return (
+    <thead className={tableHeadClasses}>
+      <TableRow
+        columns={columns}
+        align={align}
+        isTableHead
+        isBorderless={isBorderless}
+        isCompact={isCompact}
+        onSort={onSort}
+        sortedColumn={sortedColumn}
+        truncateOverflow={truncateOverflow}
+        hasStickyHeader={hasStickyHeader}
+      />
+    </thead>
+  );
+};

package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.module.scss

@@ -0,0 +1,72 @@
+.table-header-cell {
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  border-color: var(--color-border-default);
+  border-bottom-style: solid;
+  border-width: 0 0 var(--size-border-width-sm) 0;
+  background-color: var(--color-background-primary);
+  color: var(--color-font-primary);
+  font-size: var(--size-font-size-sm);
+  font-weight: var(--size-font-weight-bold);
+  padding: var(--size-spacing-md)
+  var(--size-spacing-lg);
+
+  &.sortable {
+    cursor: pointer;
+  }
+
+  &.borderless {
+    border-width: 0;
+  }
+
+  &.truncated {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.compact {
+    padding: var(--size-spacing-sm) var(--size-spacing-md);
+  }
+
+  &.sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: var(--size-z-index-sticky);
+  }
+
+
+  &.sticky-column-left {
+    left: 0;
+  }
+
+  &.sticky-column-right {
+    right: 0;
+  }
+
+  &.sticky-column {
+    position: sticky;
+    z-index: calc(var(--size-z-index-sticky) + 1);
+    box-shadow: 5px 0 5px -2px rgb(0 0 0 / 10%), -5px 0 5px -2px rgb(0 0 0 / 10%);
+    background-color: var(--color-background-primary);
+  }
+
+
+  &.align-right {
+    text-align: right;
+  }
+
+  &.align-center {
+    text-align: center;
+  }
+
+  .heading {
+    white-space: nowrap;
+
+    .sort-icon {
+      margin-left: var(--size-spacing-xs);
+    }
+  }
+}

package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.test.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TableHeaderCell } from './TableHeaderCell';
+
+const column = {
+  heading: 'ID',
+  dataKey: 'id',
+};
+
+const sortedColumn = (
+  direction: 'none' | 'ascending' | 'descending' | undefined
+) => ({
+  dataKey: 'id',
+  sortDirection: direction,
+});
+
+describe('TableHeaderCell', () => {
+  describe('Callback Handling', () => {
+    describe('onSort', () => {
+      test('onSort event fires callback function on click', () => {
+        const mockHandleSort = jest.fn();
+        render(
+          <TableHeaderCell column={column} onSort={mockHandleSort} isSortable />
+        );
+
+        const tableHeaderCell = screen.getByText('ID');
+
+        fireEvent.click(tableHeaderCell);
+        expect(mockHandleSort).toHaveBeenCalledTimes(1);
+      });
+
+      test('onSort event fires callback function on Enter keydown', () => {
+        const mockHandleSort = jest.fn();
+        render(
+          <TableHeaderCell column={column} isSortable onSort={mockHandleSort} />
+        );
+
+        const tableHeaderCell = screen.getByText('ID');
+
+        fireEvent.keyDown(tableHeaderCell, { keyCode: 13 });
+        expect(mockHandleSort).toHaveBeenCalledTimes(1);
+      });
+
+      test('onSort event fires callback function on Space keydown', () => {
+        const mockHandleSort = jest.fn();
+        render(
+          <TableHeaderCell column={column} isSortable onSort={mockHandleSort} />
+        );
+
+        const tableHeaderCell = screen.getByText('ID');
+
+        fireEvent.keyDown(tableHeaderCell, { keyCode: 32 });
+        expect(mockHandleSort).toHaveBeenCalledTimes(1);
+      });
+
+      test('onSort does NOT fire callback function on keydown that is not ENTER or SPACE', () => {
+        const mockHandleSort = jest.fn();
+        render(
+          <TableHeaderCell column={column} isSortable onSort={mockHandleSort} />
+        );
+
+        const tableHeaderCell = screen.getByText('ID');
+
+        fireEvent.keyDown(tableHeaderCell, { keyCode: 77 });
+        expect(mockHandleSort).toHaveBeenCalledTimes(0);
+      });
+
+      test('onSort does NOT fire callback when keyed unless both onSort and isSortable props are provided', () => {
+        const mockHandleSort = jest.fn();
+        render(<TableHeaderCell column={column} onSort={mockHandleSort} />);
+
+        const tableHeaderCell = screen.getByText('ID');
+
+        fireEvent.keyDown(tableHeaderCell, { keyCode: 32 });
+        expect(mockHandleSort).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    test('onSort does NOT fire callback when clicked unless both onSort and isSortable props are provided', () => {
+      const mockHandleSort = jest.fn();
+      render(<TableHeaderCell column={column} onSort={mockHandleSort} />);
+
+      const tableHeaderCell = screen.getByText('ID');
+
+      fireEvent.click(tableHeaderCell);
+      expect(mockHandleSort).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('States', () => {
+    test("It renders the header with sort icon and default sortDirection if 'isSortable' is passed", () => {
+      render(<TableHeaderCell column={column} isSortable />);
+
+      const tableHeaderCell = screen.getByRole('columnheader');
+
+      expect(tableHeaderCell).toHaveAttribute('aria-sort', 'none');
+      expect(
+        screen.getByTestId('tableHeaderCellSortNone-testid')
+      ).toBeInTheDocument();
+    });
+
+    test('It renders the header with sort icon and proper sortDirection', () => {
+      const { rerender } = render(
+        <TableHeaderCell
+          column={column}
+          isSortable
+          sortedColumn={sortedColumn('none')}
+        />
+      );
+
+      const tableHeaderCell = screen.getByRole('columnheader');
+
+      expect(tableHeaderCell).toHaveAttribute('aria-sort', 'none');
+      expect(
+        screen.getByTestId('tableHeaderCellSortNone-testid')
+      ).toBeInTheDocument();
+
+      rerender(
+        <TableHeaderCell
+          column={column}
+          isSortable
+          sortedColumn={sortedColumn('ascending')}
+        />
+      );
+
+      expect(tableHeaderCell).toHaveAttribute('aria-sort', 'ascending');
+      expect(
+        screen.getByTestId('tableHeaderCellSortAsc-testid')
+      ).toBeInTheDocument();
+
+      rerender(
+        <TableHeaderCell
+          column={column}
+          isSortable
+          sortedColumn={sortedColumn('descending')}
+        />
+      );
+
+      expect(tableHeaderCell).toHaveAttribute('aria-sort', 'descending');
+      expect(
+        screen.getByTestId('tableHeaderCellSortDesc-testid')
+      ).toBeInTheDocument();
+    });
+
+    test('th element is rendered with specific width style attribute based on width prop', () => {
+      render(<TableHeaderCell column={column} width={200} />);
+
+      const tableHeaderCell = screen.getByText('ID').closest('th');
+
+      expect(tableHeaderCell).toHaveStyle({ width: '200px' });
+    });
+
+    test('th element is rendered with custom class when passed as a prop', () => {
+      render(<TableHeaderCell column={column} className="my-custom-class" />);
+
+      const tableHeaderCell = screen.getByRole('columnheader');
+
+      expect(tableHeaderCell).toHaveClass('my-custom-class');
+    });
+
+    describe('Sticky', () => {
+      test('it renders as a <th> element with correct classes and attributes if sticky is passed as a prop with "left" as its value', () => {
+        // eslint-disable-line max-len
+        render(<TableHeaderCell column={column} sticky="left" />);
+
+        const tableColumnHeader = screen.getByRole('columnheader');
+
+        expect(tableColumnHeader).toBeInTheDocument();
+        expect(tableColumnHeader).toHaveAttribute('scope', 'col');
+        expect(tableColumnHeader).toHaveClass('sticky-column');
+        expect(tableColumnHeader).toHaveClass('sticky-column-left');
+      });
+
+      test('it renders as a <th> element with correct classes and attributes if sticky is passed as a prop with "right" as its value', () => {
+        // eslint-disable-line max-len
+        render(<TableHeaderCell column={column} sticky="right" />);
+
+        const tableColumnHeader = screen.getByRole('columnheader');
+
+        expect(tableColumnHeader).toBeInTheDocument();
+        expect(tableColumnHeader).toHaveAttribute('scope', 'col');
+        expect(tableColumnHeader).toHaveClass('sticky-column');
+        expect(tableColumnHeader).toHaveClass('sticky-column-right');
+      });
+    });
+  });
+});