@orangesk/orange-design-system 1.11.0 → 2.0.0-alpha.0

package/src/components/Table/Row.js

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import Button from '../Button/';
-import Icon from '../Icon/';
-
-import TableContext from './TableContext';
-import Cell from './Cell';
-
-export default ({ row }) => {
-  const { headers, expandableRows } = React.useContext(TableContext);
-  return headers.map(({ key, cellProps }, index, array) => {
-    const cell = row[key];
-    const { value, ...props } = cell?.value ? cell : { value: cell };
-    const rl = row?.expand?.length;
-    return (
-      <React.Fragment key={key}>
-        <Cell {...cellProps} {...props}>
-          {value ? value : ''}
-        </Cell>
-        {index === array.length - 1 &&
-          expandableRows?.hasExpandableRows &&
-          (row?.expand ? (
-            <Cell className="align-right table__cell--shrink table__cell--expand">
-              <Button
-                type="ghost"
-                htmlType="button"
-                size="small"
-                isSquare
-                className="mb-none"
-                data-subrow-toggle
-                aria-expanded={row.isExpanded ? 'true' : 'false'}
-                aria-controls={row.expand?.map(r => r.id).join(' ')}
-              >
-                <span className="visually-hidden">
-                  {`Zobraziť ${rl} súvisiac${
-                    rl > 4 ? 'ich' : rl > 1 ? 'e' : 'i'
-                  } riad${rl > 4 ? 'kov' : rl > 1 ? 'ky' : 'ok'}`}
-                </span>
-                <Icon name="chevron-down" size="large" />
-              </Button>
-            </Cell>
-          ) : (
-            <Cell className="align-right table__cell--shrink">
-              <span className="sr-only">
-                {expandableRows?.expandableRowsCaptions?.emptyRow}
-              </span>
-            </Cell>
-          ))}
-      </React.Fragment>
-    );
-  });
-};

package/src/components/Table/Rows.js

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import TableContext from './TableContext';
-import Row from './Row';
-
-export default () => {
-  const { rows } = React.useContext(TableContext);
-  return (
-    <tbody>
-      {rows.map((row, i) => (
-        <React.Fragment key={i.toString()}>
-          <tr>
-            <Row row={row} />
-          </tr>
-          {row?.expand?.map(({ id, ...expandableRow }, j) => (
-            <tr
-              key={j.toString()}
-              id={id}
-              className="table__subrow"
-              hidden={row.isExpanded ? undefined : true}
-            >
-              <Row row={expandableRow} />
-            </tr>
-          ))}
-        </React.Fragment>
-      ))}
-    </tbody>
-  );
-};

package/src/components/Table/Table.js

@@ -1,153 +0,0 @@
-import React from 'react';
-import { arrayOf, bool, shape, string, node, object } from 'prop-types';
-import cx from 'classnames';
-
-import ConditionalWrapper from '../../utils/ConditionalWrapper';
-import generateId from '../../utils/generateId';
-
-import Header from './Header';
-import TableContext from './TableContext';
-import Rows from './Rows';
-import Footer from './Footer';
-import TableStatic from './Table.static';
-
-const propTypes = {
-  /** Caption helps users with screen readers to find a table and understand what it’s about and decide if they want to read it. */
-  caption: node,
-  expandableRowsCaptions: shape({
-    /** Text for screenreader in header of column with expandable button */
-    header: string,
-    /** Text for screenreader when row is not expandable*/
-    emptyRow: string,
-  }),
-  /** Foot element for table */
-  footers: arrayOf(object),
-  /** Labels for headers in the table. Value of the key in headers match with the key name in rows */
-  headers: arrayOf(
-    shape({
-      key: string.isRequired,
-      label: node.isRequired,
-      cellProps: object,
-      headCellProps: object,
-    })
-  ).isRequired,
-  /** Compact table only takes spaced needed to display its content */
-  isCompact: bool,
-  /** If table has horizontal scrollbar */
-  isScrollable: bool,
-  /** Different colors for even and odd rows. */
-  isStriped: bool,
-  /** rows to print out in the table. */
-  rows: arrayOf(object).isRequired,
-};
-
-const defaultProps = {
-  expandableRowsCaptions: {
-    header: 'Rozšíriteľný',
-    emptyRow: 'Nerozšíriteľný riadok',
-  },
-};
-
-const CLASS_ROOT = 'table';
-
-const Table = ({
-  className,
-  caption,
-  headers,
-  rows,
-  footers,
-  isCompact,
-  isStriped,
-  isScrollable,
-  expandableRowsCaptions,
-  ...other
-}) => {
-  let tableRef = React.useRef(null);
-
-  React.useEffect(() => {
-    const table = new TableStatic(tableRef);
-
-    return () => {
-      table.destroy();
-    };
-  }, [tableRef]);
-
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--striped`]: isStriped,
-      [`${CLASS_ROOT}--compact`]: isCompact,
-    },
-    className
-  );
-
-  const captionId = generateId('caption');
-
-  const expandableRows = {
-    hasExpandableRows: rows.some(
-      row => row && row.expand && row.expand.length > 0
-    ),
-    expandableRowsCaptions,
-  };
-
-  const customRows = rows.map(row => {
-    if (row && row.expand) {
-      return {
-        ...row,
-        expand: row.expand.map(expandableRow => ({
-          ...expandableRow,
-          id: generateId('row'),
-        })),
-      };
-    }
-
-    return row;
-  });
-
-  const context = {
-    headers,
-    footers,
-    rows: customRows,
-    expandableRows,
-  };
-
-  const table = (
-    <TableContext.Provider value={context}>
-      <ConditionalWrapper
-        condition={isScrollable}
-        wrapper={
-          <div
-            className={`${CLASS_ROOT}-scrollable`}
-            role="group"
-            {...(caption && { 'aria-labelledby': captionId })}
-          />
-        }
-      >
-        <table
-          ref={ref => {
-            tableRef = ref;
-          }}
-          className={classes}
-          {...other}
-        >
-          {caption && (
-            <caption {...(isScrollable && { id: captionId })}>
-              {caption}
-            </caption>
-          )}
-          <Header />
-          <Rows />
-          <Footer />
-        </table>
-      </ConditionalWrapper>
-    </TableContext.Provider>
-  );
-
-  return table;
-};
-
-Table.propTypes = propTypes;
-Table.defaultProps = defaultProps;
-Table.displayName = 'Table';
-
-export default Table;

package/src/components/Table/Table.mdx

@@ -1,199 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-import Table from './';
-import {
-  headers,
-  rows,
-  unsortedHeaders,
-  ascendingHeaders,
-  descendingHeaders,
-  sortableRows,
-  ascendingRowsByDate,
-  descendingRowsByDate,
-  expandableTableRows,
-  footer,
-  scrollableHeaders,
-  scrollableRows,
-  shrinkHeaders,
-  shrinkRows,
-  fillHeaders,
-  fillRows,
-} from './docsData';
-
-export const defaultProps = {
-  headers,
-  rows,
-};
-
-# Table
-
-<Preview>
-  <Table {...defaultProps} caption={<h2 hasMdxLink={false}>Random data</h2>} />
-</Preview>
-
-## With footer
-
-<Preview>
-  <Table
-    caption={<h3 hasMdxLink={false}>Random data and footer</h3>}
-    {...defaultProps}
-    footers={footer}
-  />
-</Preview>
-
-## Striped
-
-<Preview>
-  <Table
-    {...defaultProps}
-    caption={<h3 hasMdxLink={false}>Random data with striped rows</h3>}
-    isStriped
-  />
-</Preview>
-
-## Shrink / fill cells
-
-<Preview>
-  <Table
-    headers={shrinkHeaders}
-    rows={shrinkRows}
-    caption={<h3 hasMdxLink={false}>Shrink cells to their minimum width</h3>}
-  />
-</Preview>
-
-<Preview>
-  <Table
-    headers={fillHeaders}
-    rows={fillRows}
-    caption={
-      <h3 hasMdxLink={false}>Fill cells to take maximum avialble space</h3>
-    }
-  />
-</Preview>
-
-## Scrollable
-
-Scrollable tables can get wider than their container and scroll horizontally.
-
-How to enable horizontal scrolling:
-
-- Wrap the table in a `<div class="table-scrollable" role="group" />`.
-
-  This enables the scrolling itself.
-
-- Put `data-table` attribute on the `<table />` element.
-
-  This initializes Table.static.js. It observes the table width and makes
-  the wrapping div focusable, when the table width exceeds the wrapping
-  div width and becomes horizontally scrollable.
-  This enables keyboard navigation support.
-
-- Add a table caption and reference it as label from the wrapping div
-  by adding `aria-labelledby="caption-id"`.
-
-  This enables screenreader support.
-
-<Preview>
-  <Table
-    data-table
-    headers={scrollableHeaders}
-    rows={scrollableRows}
-    caption={<h3 hasMdxLink={false}>Scrollable on all viewports</h3>}
-    isScrollable
-  />
-</Preview>
-
-## Sortable
-
-Sortable tables only provide necessary (accessible) markup and styles.
-
-The sorting functionality itself and changing appropriate attributes and text labels
-must be managed by application authors.
-
-The following example shows three example states of sorting by date.
-
-<Preview>
-  <Table
-    caption={<h3 hasMdxLink={false}>Random unsorted data</h3>}
-    headers={unsortedHeaders}
-    rows={sortableRows}
-  />
-  <Table
-    caption={<h3 hasMdxLink={false}>Random sorted data (ascending by Date)</h3>}
-    headers={ascendingHeaders}
-    rows={ascendingRowsByDate}
-  />
-  <Table
-    caption={
-      <h3 hasMdxLink={false}>Random sorted data (descending by Date)</h3>
-    }
-    headers={descendingHeaders}
-    rows={descendingRowsByDate}
-  />
-</Preview>
-
-## Expandable rows
-
-Expandable rows functionality is automatically initialised, on tables
-with `data-table` attribute for `button` elements with `data-subrow-toggle`
-attribute present. Clicking a button expands all rows referenced in `aria-controls`
-and switches it's `aria-expanded` attribute.
-
-<Preview>
-  <Table
-    data-table
-    caption={<h3 hasMdxLink={false}>Random data</h3>}
-    headers={headers}
-    rows={expandableTableRows}
-  />
-</Preview>
-
-## Responsive tables
-
-When building a responsive table which changes CSS display properties of its
-cells or rows, apply `data-table="responsive"` attribute to the `<table />` element.
-`Table.static.js` takes over and sets appropriate `role` attributes. This is necessary
-because browsers tend to destroy semantics on tables that have their CSS display
-properties altered.
-
-- `table` gets `role="table"`
-- `thead`, `tbody` and `tfoot` gets `role="rowgroup"`
-- `tr` gets `role="row"`
-- `td` gets `role="cell"`
-- `th` gets `role="columnheader"`
-- `th[scope=row]` gets `role="rowheader"`
-
-The Table component does not provide any example styles for responsive tables.
-
-## JS module reference
-
-`Table.static.js` provides:
-
-- [expandable-rows](#expandable-rows) functionality
-- attribute management for screenreader and keyboard support in [scrollable tables](#scrollable)
-- assigning aria roles to [responsive tables](#responsive-tables)
-
-All elements with `[data-tables]` will be initialised automatically.
-
-### Custom initialization
-
-```javascript
-const myTable = new window.ODS.modules.Table(
-  document.getElementById('my-table'),
-  config
-);
-```
-
-#### Default config
-
-```javascript
-{
-  expandButtonSelector: '[data-subrow-toggle]', // enable expanding rows for these buttons
-  scrollableContainerSelector: '.table-scrollable', // observe scrollable table width compared to this container
-  responsiveTableSelector: `[data-table="responsive"]`, // implicitly apply aria roles if the table matches this selector
-}
-```
-
-## Props
-
-<ComponentDocs title="<Table />" component={Table} />

package/src/components/Table/Table.static.js

@@ -1,129 +0,0 @@
-import ResizeObserver from 'resize-observer-polyfill';
-
-import toggle from '../../scripts/modules/toggleUtil';
-
-export const defaultConfig = {
-  expandButtonSelector: '[data-subrow-toggle]',
-  scrollableContainerSelector: '.table-scrollable',
-  responsiveTableSelector: `[data-table="responsive"]`,
-};
-
-export default class Table {
-  constructor(element, config) {
-    this.element = element;
-
-    this.config = { ...defaultConfig, ...config };
-
-    this.addRole = this.addRole.bind(this);
-    this.addARIA = this.addARIA.bind(this);
-    this.onExpandClick = this.onExpandClick.bind(this);
-
-    this.expandButtons = [];
-    this.scrollableContainer = null;
-
-    this.element.ODS_Table = this;
-
-    this.init();
-
-    return this;
-  }
-
-  addRole(selector, role) {
-    const items = Array.from(this.element.querySelectorAll(selector));
-
-    items.forEach(item => {
-      item.setAttribute('role', role);
-    });
-  }
-
-  addARIA() {
-    try {
-      this.element.setAttribute('role', 'table');
-      this.addRole('thead, tbody, tfoot', 'rowgroup');
-      this.addRole('tr', 'row');
-      this.addRole('td', 'cell');
-      this.addRole('th', 'columnheader');
-      this.addRole('th[scope=row]', 'rowheader');
-      // caption role not needed as it is not a real role and
-      // browsers do not dump their own role with display block
-    } catch (e) {
-      console.log('Table.addARIA(): ' + e);
-    }
-  }
-
-  onExpandClick(e) {
-    const button = e.currentTarget;
-    const ariaControls = button.getAttribute('aria-controls') ?? '';
-    const controlRows = this.element.querySelectorAll(
-      ariaControls
-        .split(' ')
-        .map(id => `#${id}`)
-        .join(',')
-    );
-
-    toggle({
-      element: button,
-      attribute: 'aria-expanded',
-    });
-
-    controlRows.forEach(row => {
-      toggle({
-        element: row,
-        attribute: 'hidden',
-      });
-    });
-  }
-
-  resizeObserver = new ResizeObserver(entries => {
-    const containerRect = this.scrollableContainer.getBoundingClientRect();
-
-    entries.forEach(entry => {
-      if (entry.contentRect.width > containerRect.width) {
-        this.scrollableContainer.setAttribute('tabindex', '0');
-      } else {
-        this.scrollableContainer.removeAttribute('tabindex');
-      }
-    });
-  });
-
-  init() {
-    this.expandButtons = Array.from(
-      this.element.querySelectorAll(this.config.expandButtonSelector)
-    );
-
-    this.expandButtons.forEach(button => {
-      button.addEventListener('click', this.onExpandClick);
-    });
-
-    if (this.element.matches(this.config.responsiveTableSelector)) {
-      this.addARIA();
-    }
-    this.maybeInitScrollable();
-  }
-
-  maybeInitScrollable() {
-    this.scrollableContainer = this.element.closest(
-      this.config.scrollableContainerSelector
-    );
-    return (
-      this.scrollableContainer && this.resizeObserver.observe(this.element)
-    );
-  }
-
-  destroy() {
-    this.expandButtons.forEach(button => {
-      button.removeEventListener('click', this.onExpandClick);
-    });
-
-    this.expandButtons = [];
-  }
-
-  update() {
-    this.destroy();
-    this.init();
-  }
-
-  static getInstance(el) {
-    return el && el.ODS_Table ? el.ODS_Table : null;
-  }
-}

package/src/components/Table/TableContext.js

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export default React.createContext();