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

package/src/components/Table/Table.mdx

@@ -0,0 +1,199 @@
+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.ts

@@ -0,0 +1,146 @@
+import toggle from "../../scripts/modules/toggleUtil";
+
+interface TableConfig {
+  expandButtonSelector: string;
+  scrollableContainerSelector: string;
+  responsiveTableSelector: string;
+}
+
+export const defaultConfig: TableConfig = {
+  expandButtonSelector: "[data-subrow-toggle]",
+  scrollableContainerSelector: ".table-scrollable",
+  responsiveTableSelector: `[data-table="responsive"]`,
+};
+
+export default class Table {
+  private element: HTMLElement;
+  private config: TableConfig;
+  private expandButtons: HTMLElement[];
+  private scrollableContainer: HTMLElement | null;
+  private resizeObserver: ResizeObserver;
+
+  constructor(element: HTMLElement, config?: Partial<TableConfig>) {
+    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 as any).ODS_Table = this;
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      if (!this.scrollableContainer) return;
+
+      const containerRect = this.scrollableContainer.getBoundingClientRect();
+
+      entries.forEach((entry) => {
+        if (entry.contentRect.width > containerRect.width) {
+          this.scrollableContainer?.setAttribute("tabindex", "0");
+        } else {
+          this.scrollableContainer?.removeAttribute("tabindex");
+        }
+      });
+    });
+
+    this.init();
+
+    return this;
+  }
+
+  private addRole(selector: string, role: string): void {
+    const items = Array.from(this.element.querySelectorAll(selector));
+
+    items.forEach((item) => {
+      item.setAttribute("role", role);
+    });
+  }
+
+  private addARIA(): void {
+    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);
+    }
+  }
+
+  private onExpandClick(e: Event): void {
+    const button = e.currentTarget as HTMLElement;
+    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 as HTMLElement,
+        attribute: "hidden",
+      });
+    });
+  }
+
+  private init(): void {
+    this.expandButtons = Array.from(
+      this.element.querySelectorAll<HTMLElement>(
+        this.config.expandButtonSelector,
+      ),
+    );
+
+    this.expandButtons.forEach((button) => {
+      button.addEventListener("click", this.onExpandClick);
+    });
+
+    if (this.element.matches(this.config.responsiveTableSelector)) {
+      this.addARIA();
+    }
+    this.maybeInitScrollable();
+  }
+
+  private maybeInitScrollable(): boolean | undefined {
+    this.scrollableContainer = this.element.closest<HTMLElement>(
+      this.config.scrollableContainerSelector,
+    );
+    if (this.scrollableContainer) {
+      this.resizeObserver.observe(this.element);
+      return true;
+    }
+    return undefined;
+  }
+
+  public destroy(): void {
+    this.expandButtons.forEach((button) => {
+      button.removeEventListener("click", this.onExpandClick);
+    });
+
+    this.resizeObserver.disconnect();
+
+    this.expandButtons = [];
+  }
+
+  public update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  static getInstance(el: HTMLElement): Table | null {
+    return el && (el as any).ODS_Table ? (el as any).ODS_Table : null;
+  }
+}

package/src/components/Table/Table.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import React, { useId } from "react";
+import cx from "classnames";
+
+import ConditionalWrapper from "../../utils/ConditionalWrapper";
+import { useStatic } from "../../utils/hooks";
+
+import { Header } from "./Header";
+import TableContext from "./TableContext";
+import { Rows } from "./Rows";
+import { Footer } from "./Footer";
+import TableStatic from "./Table.static";
+import { TableHeader, TableRow, ExpandableRowsCaptions } from "./types";
+
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  /** 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?: React.ReactNode;
+  expandableRowsCaptions?: ExpandableRowsCaptions;
+  /** Foot element for table */
+  footers?: TableRow[];
+  /** Labels for headers in the table. Value of the key in headers match with the key name in rows */
+  headers: TableHeader[];
+  /** Compact table only takes spaced needed to display its content */
+  isCompact?: boolean;
+  /** If table has horizontal scrollbar */
+  isScrollable?: boolean;
+  /** Different colors for even and odd rows. */
+  isStriped?: boolean;
+  /** rows to print out in the table. */
+  rows: TableRow[];
+  className?: string;
+  /** Sets color scheme */
+  colorScheme?: "dark" | "light";
+}
+
+const CLASS_ROOT = "table";
+
+const Table: React.FC<TableProps> = ({
+  className,
+  caption,
+  headers,
+  rows,
+  footers,
+  isCompact,
+  isStriped,
+  isScrollable,
+  colorScheme,
+  expandableRowsCaptions = {
+    header: "Rozšíriteľný",
+    emptyRow: "Nerozšíriteľný riadok",
+  },
+  ...other
+}) => {
+  const [tableRef] = useStatic(TableStatic);
+  const idPrefix = useId();
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--striped`]: isStriped,
+      [`${CLASS_ROOT}--compact`]: isCompact,
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
+    },
+    className,
+  );
+
+  const captionId = `${idPrefix}-caption`;
+
+  const expandableRows = {
+    hasExpandableRows: rows.some(
+      (row) => row && row.expand && row.expand.length > 0,
+    ),
+    expandableRowsCaptions,
+  };
+
+  const customRows = rows.map((row, rowIndex) => {
+    if (row && row.expand) {
+      return {
+        ...row,
+        expand: row.expand.map((expandableRow, expandIndex) => ({
+          ...expandableRow,
+          id: `${idPrefix}-row-${rowIndex}-${expandIndex}`,
+        })),
+      };
+    }
+
+    return row;
+  });
+
+  const context = {
+    headers,
+    footers,
+    rows: customRows,
+    expandableRows,
+  };
+
+  const table = (
+    <TableContext.Provider value={context}>
+      <ConditionalWrapper
+        condition={isScrollable || false}
+        wrapper={
+          <div
+            className={`${CLASS_ROOT}-scrollable`}
+            role="group"
+            {...(caption && { "aria-labelledby": captionId })}
+          />
+        }
+      >
+        <table ref={tableRef} className={classes} {...other}>
+          {caption && (
+            <caption {...(isScrollable && { id: captionId })}>
+              {caption}
+            </caption>
+          )}
+          <Header />
+          <Rows />
+          <Footer />
+        </table>
+      </ConditionalWrapper>
+    </TableContext.Provider>
+  );
+
+  return table;
+};
+
+Table.displayName = "Table";
+
+export { Table };

package/src/components/Table/TableContext.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TableContextType } from "./types";
+
+const TableContext = React.createContext<TableContextType>({
+  headers: [],
+  rows: [],
+});
+
+export default TableContext;

package/src/components/Table/docsData.ts

@@ -0,0 +1,210 @@
+interface CellValue {
+  value: string;
+  rawValue?: number;
+}
+
+interface TableHeader {
+  key: string;
+  label: string;
+  isSortable?: boolean;
+  sort?: "none" | "ascending" | "descending";
+  cellProps?: {
+    className?: string;
+  };
+}
+
+interface TableRow {
+  [key: string]: string | number | CellValue | Array<any>;
+}
+
+export const headers: TableHeader[] = [
+  {
+    key: "col1",
+    label: "No.",
+  },
+  {
+    key: "col2",
+    label: "Lorem",
+  },
+  {
+    key: "col3",
+    label: "Ipsum",
+  },
+  {
+    key: "col4",
+    label: "Dolor",
+    cellProps: {
+      className: "align-right",
+    },
+  },
+];
+
+export const rows: TableRow[] = [
+  {
+    col1: { value: "1" },
+    col2: "Et fugiat",
+    col3: "Voluptate dolore",
+    col4: "579",
+  },
+  {
+    col1: "2",
+    col2: "Quis deserunt",
+    col3: "Aliqua sint laboris ut",
+    col4: "814",
+  },
+  {
+    col1: "3",
+    col2: "Voluptate dolore",
+    col3: "Aliqua sint laboris ut",
+    col4: "436",
+  },
+];
+
+const dateHeader: TableHeader = {
+  key: "date",
+  label: "Date",
+  isSortable: true,
+  sort: "none",
+};
+
+const sortableHeaders = [...headers];
+
+export const unsortedHeaders: TableHeader[] = [dateHeader, ...sortableHeaders];
+
+export const ascendingHeaders: TableHeader[] = [
+  { ...dateHeader, sort: "ascending" },
+  ...sortableHeaders,
+];
+
+export const descendingHeaders: TableHeader[] = [
+  { ...dateHeader, sort: "descending" },
+  ...sortableHeaders,
+];
+
+export const sortableRows = rows.map((row) => {
+  const date = new Date(
+    Date.UTC(2017, 12, Math.floor(Math.random() * 31), 0, 0, 0),
+  );
+  const formattedDate: CellValue = {
+    value: date.toLocaleDateString("en", {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    }),
+    rawValue: date.getTime(),
+  };
+  return {
+    ...row,
+    date: formattedDate,
+  };
+});
+
+export const ascendingRowsByDate = [...sortableRows].sort(
+  (a, b) => (a.date as CellValue).rawValue! - (b.date as CellValue).rawValue!,
+);
+
+export const descendingRowsByDate = [...sortableRows].sort(
+  (a, b) => (b.date as CellValue).rawValue! - (a.date as CellValue).rawValue!,
+);
+
+export const expandableTableRows: TableRow[] = [
+  ...rows.map((r, i) => ({ ...r, col1: "" + (1 + i) })),
+].map((row, index) => ({
+  ...row,
+  expand: new Array(index + 1).fill({
+    col1: "",
+    col2: "test",
+    col3: "",
+    col4: "436",
+  }),
+}));
+
+expandableTableRows[2] = {
+  col1: "3",
+  col2: "Voluptate dolore",
+  col3: "Aliqua sint laboris ut",
+  col4: "436",
+};
+
+export const footer: TableRow[] = [
+  {
+    col1: "",
+    col2: "",
+    col3: "lorem ipsum",
+    col4: "3525",
+  },
+];
+
+export const scrollableHeaders: TableHeader[] = [
+  ...headers,
+  {
+    key: "col5",
+    label:
+      "Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
+    cellProps: { className: "text-nowrap" },
+  },
+];
+
+export const scrollableRows: TableRow[] = [
+  ...rows.map((row) => {
+    return {
+      ...row,
+      col5: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.",
+    };
+  }),
+];
+
+export const shrinkHeaders: TableHeader[] = [
+  {
+    key: "col1",
+    label: "Deafult column",
+  },
+  {
+    key: "col2",
+    label: "Shrink",
+    cellProps: { className: "table__cell--shrink" },
+  },
+];
+
+export const shrinkRows: TableRow[] = [
+  {
+    col1: "Et fugiat",
+    col2: "1",
+  },
+  {
+    col1: "Quis deserunt",
+    col2: "2",
+  },
+  {
+    col1: "Voluptate dolore",
+    col2: "3",
+  },
+];
+
+export const fillHeaders: TableHeader[] = [
+  {
+    key: "col1",
+    label: "Deafult column",
+  },
+  {
+    key: "col2",
+    label: "Fill all available space",
+    cellProps: { className: "table__cell--fill" },
+  },
+];
+
+export const fillRows: TableRow[] = [
+  {
+    col1: "Et fugiat",
+    col2: "1",
+  },
+  {
+    col1: "Quis deserunt",
+    col2: "2",
+  },
+  {
+    col1: "Voluptate dolore",
+    col2: "3",
+  },
+];

package/src/components/Table/index.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+
+export { Table } from "./Table";
+export { Footer } from "./Footer";

package/src/components/Table/styles/config.scss

@@ -0,0 +1,4 @@
+$arrow-size: 5px;
+$striped-color: var(--color-background-secondary);
+$normal-border-size: 1px;
+$fat-border-size: 2px;