@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/src/Table/Table.test.jsx

@@ -0,0 +1,367 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Table from '.';
+
+const props = {
+  columns: [
+    { key: 'num', label: 'Number' },
+    { key: 'x2', label: 'Number * 2' },
+    { key: 'sq', label: 'Number Squared' },
+    { key: 'i', label: 'Imaginary Number' },
+  ],
+  data: [
+    {
+      sq: 1, num: 1, x2: 2, i: 'i',
+    },
+    {
+      sq: 4, num: 2, x2: 4, i: '2i',
+    },
+    {
+      sq: 9, num: 3, x2: 6, i: '3i',
+    },
+  ],
+};
+
+const sortableColumnProps = {
+  num: {
+    columnSortable: true,
+    onSort: () => {},
+  },
+  x2: {
+    columnSortable: true,
+    onSort: () => {},
+  },
+  sq: {
+    columnSortable: false,
+  },
+  i: {
+    columnSortable: false,
+    hideHeader: true,
+  },
+};
+
+const sortableColumns = props.columns.map(column => ({
+  ...column,
+  ...sortableColumnProps[column.key],
+}));
+
+const sortableProps = {
+  columns: sortableColumns,
+  data: props.data,
+  tableSortable: true,
+  defaultSortedColumn: sortableColumns[0].key,
+  defaultSortDirection: 'desc',
+};
+
+const fixedColumnProps = {
+  num: { width: 'col-4' },
+  x2: { width: 'col-2' },
+  sq: { width: 'col-3' },
+  i: { width: 'col-3' },
+};
+
+const fixedColumns = props.columns.map(column => ({
+  ...column,
+  ...fixedColumnProps[column.key],
+}));
+
+const fixedProps = {
+  ...props,
+  columns: fixedColumns,
+  hasFixedColumnWidths: true,
+};
+
+const propsWithColWidths = {
+  ...props,
+  columns: fixedColumns,
+};
+
+describe('<Table />', () => {
+  describe('renders', () => {
+    it('with display columns in the right order', () => {
+      render(<Table {...props} />);
+      props.columns.forEach((column) => {
+        const columnHeader = screen.getByText(column.label);
+        expect(columnHeader).toBeInTheDocument();
+      });
+    });
+
+    it('with data in the same order as the columns', () => {
+      render(<Table {...props} />);
+
+      const rows = screen.getAllByRole('row');
+      rows.forEach((row, rowIndex) => {
+        const cells = within(row).queryAllByRole('cell');
+        cells.forEach((cell, columnIndex) => {
+          const cellContent = cell.textContent.trim();
+          let parsed = Number(cellContent);
+          if (Number.isNaN(parsed)) {
+            parsed = cellContent;
+          }
+          // rowIndex - 1 due to the absence of td elements at the first circle
+          expect(parsed).toEqual(props.data[rowIndex - 1][props.columns[columnIndex].key]);
+        });
+      });
+    });
+  });
+
+  describe('that is non-sortable renders', () => {
+    it('it sets column headers correctly even with hidden prop', () => {
+      render(<Table {...sortableProps} tableSortable={false} />);
+      const tableHeadings = screen.getAllByRole('columnheader');
+
+      let hiddenHeader;
+
+      tableHeadings.forEach((th, i) => {
+        expect(th.textContent).toEqual(sortableProps.columns[i].label);
+        if (sortableProps.columns[i].hideHeader) {
+          hiddenHeader = sortableProps.columns[i].label;
+        }
+      });
+
+      const spanElement = screen.getByText(hiddenHeader);
+      expect(spanElement).toBeInTheDocument();
+    });
+
+    it('without sortable columns', () => {
+      render(<Table {...sortableProps} tableSortable={false} />);
+      const tableHeadings = screen.getAllByRole('columnheader');
+
+      tableHeadings.forEach((heading) => {
+        expect(heading).not.toHaveClass('sortable');
+      });
+    });
+
+    it('without column buttons', () => {
+      render(<Table {...sortableProps} tableSortable={false} />);
+      const buttons = screen.queryAllByRole('button');
+      expect(buttons).toHaveLength(0);
+    });
+  });
+
+  describe('that is sortable and has mixed columns renders', () => {
+    beforeEach(() => {
+      render(<Table {...sortableProps} />);
+    });
+
+    it('with sortable classname on correct headings', () => {
+      const tableHeadings = screen.queryAllByRole('columnheader');
+
+      expect(tableHeadings).toHaveLength(sortableProps.columns.length);
+      expect(tableHeadings[0]).toHaveClass('sortable');
+      expect(tableHeadings[1]).toHaveClass('sortable');
+      expect(tableHeadings[2]).not.toHaveClass('sortable');
+    });
+
+    it('with sr-only classname on correct headings', () => {
+      const srOnly = screen.queryAllByTestId('table-heading-sr');
+
+      expect(srOnly).toHaveLength(sortableProps.columns.length - 1);
+      expect(srOnly[0]).toHaveClass('sr-only');
+      expect(srOnly[1]).toHaveClass('sr-only');
+    });
+
+    it('with correct initial sr-only text on correct headings', () => {
+      const headings = screen.queryAllByTestId('table-heading-sr');
+
+      expect(headings[0]).toHaveTextContent('sort descending');
+      expect(headings[1]).toHaveTextContent('click to sort');
+    });
+
+    it('with correct column buttons', () => {
+      const buttons = screen.queryAllByRole('button');
+      expect(buttons).toHaveLength(2);
+      expect(buttons[0].classList).toContain('btn-header');
+      expect(buttons[1].classList).toContain('btn-header');
+    });
+
+    it('with correct initial sort icons', () => {
+      const buttons = screen.queryAllByRole('button');
+
+      expect(buttons).toHaveLength(sortableProps.columns.length - 2);
+      expect(buttons[0].querySelector('.fa')).toHaveClass('fa-sort-desc');
+      expect(buttons[1].querySelector('.fa')).toHaveClass('fa-sort');
+    });
+  });
+
+  describe('that is sortable and has mixed columns has behavior that', () => {
+    let buttons;
+    let numSpy;
+    let x2Spy;
+
+    beforeEach(() => {
+      render(<Table data-testid="sorted" {...sortableProps} />);
+
+      buttons = screen.queryAllByRole('button');
+      numSpy = jest.fn();
+      x2Spy = jest.fn();
+
+      sortableProps.columns.find(column => (column.key === 'num')).onSort = numSpy;
+      sortableProps.columns.find(column => (column.key === 'x2')).onSort = x2Spy;
+    });
+
+    it('changes sort icons appropriately on click', async () => {
+      await userEvent.click(buttons[0]);
+      buttons = screen.queryAllByRole('button');
+
+      expect(buttons[0].querySelector('.fa')).toHaveClass('fa-sort-asc');
+      expect(buttons[0].querySelector('.fa')).not.toHaveClass('fa-sort-desc');
+      expect(buttons[0].querySelector('.fa')).not.toHaveClass('fa-sort');
+
+      expect(buttons[1].querySelector('.fa')).toHaveClass('fa-sort');
+      expect(buttons[1].querySelector('.fa')).not.toHaveClass('fa-sort-asc');
+      expect(buttons[1].querySelector('.fa')).not.toHaveClass('fa-sort-desc');
+
+      await userEvent.click(buttons[1]);
+      buttons = screen.queryAllByRole('button');
+
+      expect(buttons[0].querySelector('.fa')).toHaveClass('fa-sort');
+      expect(buttons[0].querySelector('.fa')).not.toHaveClass('fa-sort-asc');
+      expect(buttons[0].querySelector('.fa')).not.toHaveClass('fa-sort-desc');
+
+      expect(buttons[1].querySelector('.fa')).toHaveClass('fa-sort-desc');
+      expect(buttons[1].querySelector('.fa')).not.toHaveClass('fa-sort');
+      expect(buttons[1].querySelector('.fa')).not.toHaveClass('fa-sort-asc');
+    });
+
+    it('changes sr-only text appropriately on click', async () => {
+      const headings = screen.queryAllByTestId('table-heading-sr');
+
+      await userEvent.click(buttons[0]);
+      buttons = screen.queryAllByRole('button');
+
+      expect(headings[0]).toHaveTextContent('sort ascending');
+      expect(headings[1]).toHaveTextContent('click to sort');
+
+      await userEvent.click(buttons[1]);
+
+      expect(headings[0]).toHaveTextContent('click to sort');
+      expect(headings[1]).toHaveTextContent('sort descending');
+    });
+
+    it('calls onSort function correctly on click', async () => {
+      expect(numSpy).toHaveBeenCalledTimes(0);
+      expect(x2Spy).toHaveBeenCalledTimes(0);
+
+      await userEvent.click(buttons[0]);
+      buttons = screen.queryAllByRole('button');
+
+      expect(numSpy).toHaveBeenCalledTimes(1);
+      expect(x2Spy).toHaveBeenCalledTimes(0);
+
+      expect(numSpy).toBeCalledWith('asc');
+
+      await userEvent.click(buttons[0]);
+      buttons = screen.queryAllByRole('button');
+
+      expect(numSpy).toHaveBeenCalledTimes(2);
+      expect(x2Spy).toHaveBeenCalledTimes(0);
+
+      expect(numSpy).toBeCalledWith('desc');
+
+      await userEvent.click(buttons[1]);
+      buttons = screen.queryAllByRole('button');
+
+      expect(numSpy).toHaveBeenCalledTimes(2);
+      expect(x2Spy).toHaveBeenCalledTimes(1);
+
+      expect(x2Spy).toBeCalledWith('desc');
+    });
+  });
+
+  describe('that is fixed', () => {
+    beforeEach(() => {
+      render(<Table {...fixedProps} />);
+    });
+
+    it('with col width classnames on headings', () => {
+      const tableHeadings = screen.queryAllByRole('columnheader');
+
+      expect(tableHeadings).toHaveLength(fixedProps.columns.length);
+      expect(tableHeadings[0]).toHaveClass('col-4');
+      expect(tableHeadings[1]).toHaveClass('col-2');
+      expect(tableHeadings[2]).toHaveClass('col-3');
+    });
+
+    it('with col width classnames on cells', () => {
+      const tableCells = screen.queryAllByRole('cell');
+
+      expect(tableCells).toHaveLength(fixedProps.columns.length * fixedProps.data.length);
+      expect(tableCells[0]).toHaveClass('col-4');
+      expect(tableCells[1]).toHaveClass('col-2');
+      expect(tableCells[2]).toHaveClass('col-3');
+    });
+
+    it('with fixed-related classnames on head, body, and rows', () => {
+      const thead = screen.queryAllByRole('rowgroup')[0];
+      const tbody = screen.queryAllByRole('rowgroup')[1];
+      const tr = screen.queryAllByRole('row')[0];
+
+      expect(thead).toHaveClass('d-inline');
+      expect(tbody).toHaveClass('d-inline');
+      expect(tr).toHaveClass('d-flex');
+    });
+  });
+
+  describe('that is not fixed with col widths', () => {
+    beforeEach(() => {
+      render(<Table {...propsWithColWidths} />);
+    });
+
+    it('with no col width classnames on headings', () => {
+      const tableHeadings = screen.queryAllByRole('columnheader');
+
+      expect(tableHeadings).toHaveLength(fixedProps.columns.length);
+      expect(tableHeadings[0]).not.toHaveClass('col-4');
+      expect(tableHeadings[1]).not.toHaveClass('col-2');
+      expect(tableHeadings[2]).not.toHaveClass('col-3');
+    });
+
+    it('with no col width classnames on cells', () => {
+      const tableCells = screen.queryAllByRole('cell');
+
+      expect(tableCells).toHaveLength(fixedProps.columns.length * fixedProps.data.length);
+      expect(tableCells[0]).not.toHaveClass('col-4');
+      expect(tableCells[1]).not.toHaveClass('col-2');
+      expect(tableCells[2]).not.toHaveClass('col-3');
+    });
+
+    it('with no fixed-related classnames on head, body, and rows', () => {
+      const thead = screen.queryAllByRole('rowgroup')[0];
+      const tbody = screen.queryAllByRole('rowgroup')[1];
+      const tr = screen.queryAllByRole('row')[0];
+
+      expect(thead).not.toHaveClass('d-inline');
+      expect(tbody).not.toHaveClass('d-inline');
+      expect(tr).not.toHaveClass('d-flex');
+    });
+  });
+
+  describe('renders row headers', () => {
+    beforeEach(() => {
+      render(<Table {...props} rowHeaderColumnKey="num" />);
+    });
+
+    it('with the row header as th with row scope', () => {
+      const tableHeadings = screen.queryAllByRole('rowheader');
+
+      tableHeadings.forEach((th) => {
+        if (th.getAttribute('data-colkey') === 'num') {
+          expect(th.getAttribute('scope')).toEqual('row');
+        }
+      });
+    });
+
+    it('with all other columns unchanged', () => {
+      const tableCells = screen.queryAllByRole('cell');
+
+      tableCells.forEach((td) => {
+        if (td.getAttribute('data-colkey') !== 'num') {
+          expect(td.getAttribute('scope')).not.toEqual('row');
+        }
+      });
+    });
+  });
+});

package/src/Table/_variables.scss

@@ -0,0 +1,34 @@
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-color:                 $body-color !default;
+$table-bg:                    null !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-color:           $table-color !default;
+$table-hover-bg:              rgba($black, .075) !default;
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $border-color !default;
+
+$table-head-bg:               theme-color("gray", "background") !default;
+$table-head-color:            theme-color("gray", "text") !default;
+
+$table-dark-color:            $white !default;
+$table-dark-bg:               theme-color("gray", "hover") !default;
+$table-dark-accent-bg:        rgba($white, .05) !default;
+$table-dark-hover-color:      $table-dark-color !default;
+$table-dark-hover-bg:         rgba($white, .075) !default;
+$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+$table-dark-color:            $white !default;
+
+$table-striped-order:         odd !default;
+
+$table-caption-color:         $text-muted !default;
+
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;

package/src/Table/index.jsx

@@ -0,0 +1,264 @@
+/* eslint-disable max-len */
+import React from 'react';
+import classNames from 'classnames';
+import isRequiredIf from 'react-proptype-conditional-require';
+import PropTypes from 'prop-types';
+
+import Button from '../Button';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
+
+class Table extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      sortedColumn: props.tableSortable ? this.props.defaultSortedColumn : '',
+      sortDirection: props.tableSortable ? this.props.defaultSortDirection : '',
+    };
+
+    this.onSortClick = this.onSortClick.bind(this);
+  }
+
+  onSortClick(columnKey) {
+    let newDirection = 'desc';
+
+    if (this.state.sortedColumn === columnKey) {
+      newDirection = (this.state.sortDirection === 'desc' ? 'asc' : 'desc');
+    }
+
+    this.setState({
+      sortedColumn: columnKey,
+      sortDirection: newDirection,
+    });
+
+    const currentlySortedColumn = this.props.columns.find(column => (columnKey === column.key));
+    currentlySortedColumn.onSort(newDirection);
+  }
+
+  getCaption() {
+    return this.props.caption && (
+      <caption>{this.props.caption}</caption>
+    );
+  }
+
+  getSortButtonScreenReaderText(columnKey) {
+    let text;
+
+    if (this.state.sortedColumn === columnKey) {
+      text = this.props.sortButtonsScreenReaderText[this.state.sortDirection];
+    } else {
+      text = this.props.sortButtonsScreenReaderText.defaultText;
+    }
+
+    return text;
+  }
+
+  getSortIcon(sortDirection) {
+    const sortIconClassName = ['fa-sort', sortDirection].filter(n => n).join('-');
+
+    return (
+      <span
+        className={classNames('fa', sortIconClassName)}
+        aria-hidden
+      />
+    );
+  }
+
+  getTableHeading(column) {
+    let heading;
+    if (this.props.tableSortable && column.columnSortable) {
+      heading = (
+        <Button
+          variant="header"
+          onClick={() => this.onSortClick(column.key)}
+        >
+          <span>
+            {column.label}
+            <span className={classNames('sr-only')} data-testid="table-heading-sr">
+              {' '}
+              {this.getSortButtonScreenReaderText(column.key)}
+            </span>
+            {' '}
+            {this.getSortIcon(column.key === this.state.sortedColumn ? this.state.sortDirection : '')}
+          </span>
+        </Button>
+      );
+    } else if (column.hideHeader) {
+      heading = (<span className={classNames('sr-only')} data-testid="table-heading-sr">{column.label}</span>);
+    } else {
+      heading = column.label;
+    }
+
+    return heading;
+  }
+
+  getHeadings() {
+    return (
+      <thead
+        className={classNames(
+          ...this.props.headingClassName,
+          { 'd-inline': this.props.hasFixedColumnWidths },
+        )}
+      >
+        <tr className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}>
+          {this.props.columns.map(col => (
+            <th
+              className={classNames(
+                { sortable: this.props.tableSortable && col.columnSortable },
+                this.props.hasFixedColumnWidths ? col.width : null,
+              )}
+              key={col.key}
+              scope="col"
+            >
+              {this.getTableHeading(col)}
+            </th>
+          ))}
+        </tr>
+      </thead>
+    );
+  }
+
+  getBody() {
+    return (
+      <tbody className={classNames({ 'd-inline': this.props.hasFixedColumnWidths })}>
+        {this.props.data.map((row, i) => (
+          <tr
+          // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            className={classNames({ 'd-flex': this.props.hasFixedColumnWidths })}
+          >
+            {this.props.columns.map(({ key, width }) => (
+              React.createElement(
+                (key === this.props.rowHeaderColumnKey) ? 'th' : 'td',
+                {
+                  key,
+                  className: classNames(this.props.hasFixedColumnWidths ? width : null),
+                  scope: (key === this.props.rowHeaderColumnKey) ? 'row' : null,
+                },
+                row[key],
+              )
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    );
+  }
+
+  render() {
+    return (
+      <table className={classNames(
+        'table',
+        this.props.className,
+      )}
+      >
+        {this.getCaption()}
+        {this.getHeadings()}
+        {this.getBody()}
+      </table>
+    );
+  }
+}
+
+Table.propTypes = {
+  caption: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+  ]),
+  className: PropTypes.string,
+  /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
+
+1. `label` (string or element; required) contains the display string for each column's heading.
+2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
+3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
+4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
+5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
+6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
+
+The order of objects in `columns` specifies the order of the columns in the table. */
+  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
+
+1. `label` (string or element; required) contains the display string for each column's heading.
+2. `key` (string; required) maps that label to its corresponding datum for each row in `data`, to ensure table data are displayed in their appropriate columns.
+3. `columnSortable` (boolean; optional) specifies at the column-level whether the column is sortable. If `columnSortable` is `true`, a sort button will be rendered in the column table heading. It is only required if `tableSortable` is set to `true`.
+4. `onSort` (function; conditionally required) specifies what function is called when a sortable column is clicked. It is only required if the column's `columnSortable` is set to `true`.
+5. `hideHeader` (boolean; optional) specifies at the column-level whether the column label is visible. A column that is sortable cannot have its label be hidden.
+6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
+
+The order of objects in `columns` specifies the order of the columns in the table. */
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]).isRequired,
+    columnSortable: isRequiredIf(PropTypes.bool, props => props.tableSortable),
+    onSort: isRequiredIf(PropTypes.func, props => props.columnSortable),
+    hideHeader: PropTypes.bool,
+    width: isRequiredIf(PropTypes.string, props => props.hasFixedColumnWidths),
+  })).isRequired,
+  /** Specifies Bootstrap class names to apply to the table heading. Options are detailed in [Bootstrap's docs](https://getbootstrap.com/docs/4.0/content/tables/#table-head-options).
+ */
+  headingClassName: PropTypes.arrayOf(PropTypes.string),
+  /** Specifies whether the table is sortable. This setting supercedes column-level sortability, so if it is `false`, no sortable components will be rendered. */
+  tableSortable: PropTypes.bool,
+  /** Specifies whether the table's columns have fixed widths. Every element in `columns` must define a `width` if this is `true`.
+ */
+  hasFixedColumnWidths: PropTypes.bool,
+  /* eslint-disable react/require-default-props */
+  /** Specifies the key of the column that is sorted by default. It is only required if `tableSortable` is set to `true`. */
+  defaultSortedColumn: isRequiredIf(PropTypes.string, props => props.tableSortable),
+  /* eslint-disable react/require-default-props */
+  /** Specifies the direction the `defaultSortedColumn` is sorted in by default; it will typically be either 'asc' or 'desc'. It is only required if `tableSortable` is set to `true`. */
+  defaultSortDirection: isRequiredIf(PropTypes.string, props => props.tableSortable),
+  /** Specifies the screen reader only text that accompanies the sort buttons for sortable columns. It takes the form of an object containing the following keys:
+
+1. `asc`: (string) specifies the screen reader only text for sort buttons in the ascending state.
+2. `desc`: (string) specifies the screen reader only text for sort buttons in the descending state.
+3. `defaultText`: (string) specifies the screen reader only text for sort buttons that are not engaged.
+
+It is only required if `tableSortable` is set to `true`.
+
+Default:
+
+```javascript
+{
+  asc: 'sort ascending',
+  desc: 'sort descending',
+  defaultText: 'click to sort',
+}
+``` */
+  sortButtonsScreenReaderText: isRequiredIf(
+    PropTypes.shape({
+      asc: PropTypes.string,
+      desc: PropTypes.string,
+      defaultText: PropTypes.string,
+    }),
+    props => props.tableSortable,
+  ),
+  /** Specifies the key for the column that should act as a row header. Rather than rendering as `<td>` elements,
+cells in this column will render as `<th scope="row">`  */
+  rowHeaderColumnKey: PropTypes.string,
+};
+
+Table.defaultProps = {
+  caption: null,
+  className: undefined,
+  headingClassName: [],
+  tableSortable: false,
+  hasFixedColumnWidths: false,
+  sortButtonsScreenReaderText: {
+    asc: 'sort ascending',
+    desc: 'sort descending',
+    defaultText: 'click to sort',
+  },
+};
+
+export default withDeprecatedProps(Table, 'TableDeprecated', {
+  className: {
+    deprType: DeprTypes.FORMAT,
+    expect: value => typeof value === 'string',
+    transform: value => (Array.isArray(value) ? value.join(' ') : value),
+    message: 'It should be a string.',
+  },
+});

package/src/Table/index.scss

@@ -0,0 +1,12 @@
+@import "variables";
+@import "~bootstrap/scss/tables";
+
+.btn-header {
+  padding: 0;
+  font-weight: $font-weight-bold;
+}
+
+.table th,
+.table td {
+  word-wrap: break-word;
+}

package/src/Tabs/README.md

@@ -8,7 +8,9 @@ categories:
 - Navigation
 status: 'Stable'
 designStatus: 'Done'
-devStatus: 'Done'
+devStatus: 'TO DO'
+notes: |
+  TODO: Remove subcomponent of deprecated implementation soon
 ---
 
 <p>