@hyphen/hyphen-components 2.9.0

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

@@ -0,0 +1,192 @@
+import React, { FC, Key, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import classNames from 'classnames';
+import { Box } from '../../../Box/Box';
+import { Icon } from '../../../Icon/Icon';
+import { Column, EventWithColumnKey } from '../../../../types';
+import styles from './TableHeaderCell.module.scss';
+
+export interface TableHeaderCellProps {
+  /**
+   * Title to display for the column.
+   */
+  column: 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 apply to the `<th>` element.
+   */
+  className?: string;
+  /**
+   * Key of corresponding data value in the table.
+   */
+  dataKey?: Key;
+  /**
+   * Remove borders around th elements.
+   */
+  isBorderless?: boolean;
+  /**
+   * Determines if table header cells should render as compact (less padding);
+   */
+  isCompact?: boolean;
+  /**
+   * If table scrolls vertically, header will remain stuck to the top of the table, and not scroll away.
+   */
+  hasStickyHeader?: boolean;
+  /**
+   * Boolean to mark if a column is sortable. This will show the sorting icons. Use
+   * in conjunction with the `sortDirection` prop to determine which icon is shown.
+   */
+  isSortable?: boolean;
+  /**
+   * Callback function to execute when a sortable column's header is clicked.
+   * Column can be sorted without providing an onSort method, it means that the arrows
+   * will not be clickable, but they will still represent the sort state
+   * of a column as determined by the `sortDirection` prop.
+   */
+  onSort?: (event: EventWithColumnKey) => void;
+  /**
+   * The key of the sorted column and its sort direction.
+   */
+  sortedColumn?: {
+    dataKey: string | undefined;
+    sortDirection: 'none' | 'ascending' | 'descending' | undefined;
+  };
+  /**
+   * Will stick to either the left or right side of a table during horizontal scroll.
+   */
+  sticky?: 'left' | 'right';
+  /**
+   * Whether the text should be cut off with ellipsis if it exceeds the width of the column.
+   */
+  truncateOverflow?: boolean;
+  /**
+   * Width of the column, if using the `useFixedWidthColumns` prop is set to true.
+   */
+  width?: number;
+}
+
+// eslint-disable-line import/prefer-default-export
+export const TableHeaderCell: FC<TableHeaderCellProps> = ({
+  column,
+  align = 'left',
+  className = undefined,
+  dataKey = undefined,
+  isBorderless = false,
+  isCompact = false,
+  hasStickyHeader = false,
+  isSortable = false,
+  onSort = undefined,
+  sortedColumn = undefined,
+  sticky = undefined,
+  truncateOverflow = false,
+  width = undefined,
+}) => {
+  const isColumnSorted = (columnDataKey: Key | undefined): boolean =>
+    !!sortedColumn && sortedColumn.dataKey === columnDataKey;
+
+  const getSortDirection = ():
+    | 'ascending'
+    | 'descending'
+    | 'none'
+    | undefined =>
+    sortedColumn && isColumnSorted(column.dataKey)
+      ? sortedColumn.sortDirection
+      : 'none';
+
+  const renderIcon = (): ReactNode => {
+    const renderArrows = (): ReactNode => {
+      if (getSortDirection() === 'ascending') {
+        return (
+          <Icon
+            name="caret-sm-up"
+            data-testid="tableHeaderCellSortAsc-testid"
+          />
+        );
+      }
+      if (getSortDirection() === 'descending') {
+        return (
+          <Icon
+            name="caret-sm-down"
+            data-testid="tableHeaderCellSortDesc-testid"
+          />
+        );
+      }
+
+      return (
+        <Box
+          display="inline-block"
+          width="12px"
+          height="12px"
+          aria-hidden="true"
+          data-testid="tableHeaderCellSortNone-testid"
+        />
+      );
+    };
+
+    return <span className={styles['sort-icon']}>{renderArrows()}</span>;
+  };
+
+  const handleKeyPress = (
+    event: KeyboardEvent<HTMLTableHeaderCellElement>
+  ): void => {
+    if (!onSort || !isSortable) return;
+
+    const enterKey = 13;
+    const spaceKey = 32;
+
+    if (event.keyCode === enterKey || event.keyCode === spaceKey) {
+      const eventWithKey: EventWithColumnKey = { ...event, sortedKey: dataKey };
+      onSort(eventWithKey);
+    }
+  };
+
+  const handleSort = (event: MouseEvent<HTMLTableHeaderCellElement>): void => {
+    if (!onSort || !isSortable) return;
+
+    const eventWithKey: EventWithColumnKey = { ...event, sortedKey: dataKey };
+    onSort(eventWithKey);
+  };
+
+  const tableHeaderClasses = classNames(
+    styles['table-header-cell'],
+    {
+      [styles.sortable]: isSortable,
+      [styles.compact]: isCompact,
+      [styles.truncated]: truncateOverflow,
+      [styles.borderless]: isBorderless,
+      [styles['sticky-header']]: hasStickyHeader,
+      [styles['sticky-column']]: sticky === 'left' || sticky === 'right',
+      [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="th"
+      display="table-cell"
+      className={tableHeaderClasses}
+      width={`${width}px`}
+      aria-sort={
+        sortedColumn && isColumnSorted(column.dataKey)
+          ? sortedColumn.sortDirection
+          : 'none'
+      }
+      tabIndex={isSortable ? 0 : undefined}
+      onClick={handleSort}
+      onKeyDown={handleKeyPress}
+      scope="col"
+    >
+      <div className={styles.heading}>
+        {column.heading}
+        {isSortable && renderIcon()}
+      </div>
+    </Box>
+  );
+};

package/src/components/Table/common/TableRow/TableRow.module.scss

@@ -0,0 +1,5 @@
+.table-row {
+  &.hoverable {
+    background-color: var(--table-row-hover-background);
+  }
+}

package/src/components/Table/common/TableRow/TableRow.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TableRow } from './TableRow';
+
+const row = { id: 1, flavor: 'vanilla' };
+const rowIndex = 1;
+const columns = [
+  { heading: 'ID', dataKey: 'id' },
+  { heading: 'Flavor', dataKey: 'flavor' },
+];
+
+describe('TableRow', () => {
+  describe('States', () => {
+    test('It renders with a custom class is passed as prop', () => {
+      render(
+        <TableRow
+          row={row}
+          rowIndex={rowIndex}
+          columns={columns}
+          className="my-custom-class"
+        />
+      );
+
+      const tableRow = screen.getByRole('row');
+      expect(tableRow).toHaveClass('my-custom-class');
+    });
+
+    test('It renders with a custom cell class (function) is passed as prop', () => {
+      const func = jest.fn().mockReturnValue('my-custom-class');
+      const customClassCell = [
+        { heading: 'ID', dataKey: 'id', cellClassName: func },
+      ];
+      render(
+        <TableRow row={row} rowIndex={rowIndex} columns={customClassCell} />
+      );
+      expect(func).toHaveBeenCalledWith(customClassCell[0], row, rowIndex);
+      const element = document.getElementsByClassName('my-custom-class')[0];
+      expect(element).toBeInTheDocument();
+    });
+
+    test('It renders with a custom cell class (string) is passed as prop', () => {
+      const customClassCell = [
+        { heading: 'ID', dataKey: 'id', cellClassName: 'string-class' },
+      ];
+      render(
+        <TableRow row={row} rowIndex={rowIndex} columns={customClassCell} />
+      );
+      const element = document.getElementsByClassName('string-class')[0];
+      expect(element).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Table/common/TableRow/TableRow.tsx

@@ -0,0 +1,155 @@
+import React, { FC, ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './TableRow.module.scss';
+import { Column, EventWithColumnKey, Row } from '../../../../types';
+import { getColumnKeys } from '../../../../lib/getColumnKeys';
+import TableBodyCell from '../../TableBody/TableBodyCell/TableBodyCell';
+import { TableHeaderCell } from '../../TableHead/TableHeaderCell/TableHeaderCell';
+
+export interface TableRowProps {
+  /**
+   * 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 `<tr>` element.
+   */
+  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;
+  /**
+   * 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;
+  /**
+   * Determine whether row is hoverable
+   */
+  isHoverable?: boolean;
+  /**
+   * Whether the row is inside the table head (thead).
+   */
+  isTableHead?: boolean;
+  /**
+   * Callback function to fire on sorting one of the table headers.
+   */
+  onSort?: (event: EventWithColumnKey) => void;
+  /**
+   * The specific row to be rendered.
+   */
+  row?: Row;
+  /**
+   * The unique key to identify a React node for each row.
+   */
+  rowIndex?: number;
+  /**
+   * 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 TableRow: FC<TableRowProps> = ({
+  columns,
+  align = 'left',
+  className = '',
+  emptyCellPlaceholder = '',
+  isBorderless = false,
+  isCompact = false,
+  hasStickyHeader = false,
+  isHoverable = false,
+  isTableHead = false,
+  onSort = undefined,
+  sortedColumn = undefined,
+  row = undefined,
+  rowIndex = undefined,
+  truncateOverflow = false,
+}) => {
+  const tableRowClasses = classNames(
+    styles['table-row'],
+    { [styles.hoverable]: isHoverable },
+    className
+  );
+
+  const renderCellContent = (column: Column): ReactNode => {
+    if (column.render) {
+      const cellValue = column.dataKey && row ? row[column.dataKey] : undefined;
+      return column.render(cellValue, row, rowIndex);
+    }
+
+    return column.dataKey && row ? row[column.dataKey] : null;
+  };
+
+  const getCellClassName = (column: Column): string | undefined => {
+    if (column.cellClassName) {
+      if (typeof column.cellClassName === 'function') {
+        return column.cellClassName(column, row, rowIndex);
+      }
+      return column.cellClassName;
+    }
+    return undefined;
+  };
+
+  return (
+    <tr className={tableRowClasses}>
+      {Object.values(columns).map((column, columnIndex) =>
+        isTableHead ? (
+          <TableHeaderCell
+            column={column}
+            align={column.align || align}
+            key={getColumnKeys(columns)[columnIndex]}
+            dataKey={column.dataKey}
+            className={column.headerClassName}
+            isSortable={column.isSortable}
+            onSort={onSort}
+            isBorderless={isBorderless}
+            isCompact={isCompact}
+            sortedColumn={sortedColumn}
+            truncateOverflow={column.truncateOverflow || truncateOverflow}
+            width={column.width}
+            hasStickyHeader={hasStickyHeader}
+            sticky={column.sticky}
+          />
+        ) : (
+          <TableBodyCell
+            align={column.align || align}
+            className={getCellClassName(column)}
+            emptyCellPlaceholder={
+              column.emptyCellPlaceholder || emptyCellPlaceholder
+            }
+            truncateOverflow={column.truncateOverflow || truncateOverflow}
+            key={getColumnKeys(columns)[columnIndex]}
+            isBorderless={isBorderless}
+            isCompact={isCompact}
+            width={column.width}
+            sticky={column.sticky}
+          >
+            {renderCellContent(column)}
+          </TableBodyCell>
+        )
+      )}
+    </tr>
+  );
+};

package/src/components/TextInput/TextInput.mdx

@@ -0,0 +1,96 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { TextInput } from './TextInput';
+import * as Stories from './TextInput.stories';
+
+<Meta of={Stories} />
+
+# TextInput
+
+Use TextInput to render a single-line text input. Masks can also be applied to custom format the input; currently supported masks include Credit Card and Phone.
+
+<Canvas isExpanded of={Stories.Basic} />
+
+## Props
+
+<ArgTypes of={TextInput} />
+
+## Examples
+
+All that is required to render a basic version of the TextInput is a unique `id`, `label`, `value`, and an onchange event handler passed to the `onChange` prop.
+
+<Canvas of={Stories.Examples} />
+
+## Required
+
+Use the `isRequired` prop to set the `required` and `aria-required` on the underlying input element.
+
+<Canvas of={Stories.Required} />
+
+You can remove or customize the required indicator using the `requiredIndicator` prop.
+
+<Canvas of={Stories.CustomRequiredIndicator} />
+
+## With Help Text
+
+Use the `helpText` prop to add clarifying text beneath the input label.
+
+<Canvas of={Stories.WithHelpText} />
+
+## Placeholder
+
+Use the `placeholder` prop to add a custom placeholder.
+
+<Canvas of={Stories.Placeholder} />
+
+## Autofocus
+
+Use the `autoFocus` prop to autofocus the input.
+
+<Canvas of={Stories.Autofocus} />
+
+## Hidden Label
+
+Use the `hideLabel` prop to not render the label.
+
+<Canvas of={Stories.HiddenLabel} />
+
+## Prefix and Suffix
+
+All that is required to render a basic version of the TextInput is a unique `id`, `label`, `value`, and an onchange event handler passed to the `onChange` prop.
+
+<Canvas of={Stories.PrefixAndSuffix} />
+
+## Disabled
+
+Use the `isDisabled` prop to mark the input as disabled.
+
+<Canvas of={Stories.Disabled} />
+
+## Clearable
+
+Use the `onClear` prop to display a clear icon (x) when the input has a value. `onClear` will fire
+a callback function when the clear icon is clicked, which can then be handled to clear the value.
+
+<Canvas of={Stories.Clearable} />
+
+## Sizes
+
+Set the `size` of the input to `sm`, `md` or `lg`. The `size` prop is also a `ResponsiveProp`, so it can be sized differently at each [breakpoint](?path=/docs/design-tokens-design-tokens--page#breakpoints) by passing an object.
+
+<Canvas of={Stories.Sizes} />
+
+## Max Length
+
+Use the `maxLength` prop to limit the number of characters that can be entered into an input.
+
+<Canvas of={Stories.MaxLength} />
+
+## Validation Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`.
+
+<Canvas of={Stories.ValidationError} />
+
+## Component Design Tokens
+
+This component shares component design tokens with all form controls. For a complete list of tokens, see the [Theming Form Controls documentation](/docs/theming-form-controls--custom-theme-form).