@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

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;

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

@@ -0,0 +1,115 @@
+@use "./config";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+@mixin base {
+  width: 100%;
+  margin-bottom: space.get();
+  color: var(--color-text-default);
+  background-color: var(--color-background-primary);
+}
+
+@mixin cells {
+  padding: space.get("small") space.get("small") space.get("small") 0;
+  vertical-align: middle;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+@mixin header-cells {
+  vertical-align: bottom;
+  text-align: left;
+  border-bottom: config.$fat-border-size solid var(--color-border-strong);
+  font-weight: 700;
+}
+
+@mixin rows {
+  line-height: space.get("medium");
+  border-bottom: config.$normal-border-size solid var(--color-border-strong);
+}
+
+@mixin header-rows {
+  border-bottom-width: config.$fat-border-size;
+}
+
+@mixin body-header-cells {
+  font-weight: 400;
+}
+
+@mixin rows-first-cell {
+  padding-left: space.get("small");
+}
+
+@mixin body-sibling {
+  border-top: config.$fat-border-size solid var(--color-border-strong);
+}
+
+@mixin footer-rows {
+  border-bottom-width: 0;
+  border-top: config.$fat-border-size solid var(--color-border-contrast);
+
+  &:not(:first-child) {
+    border-top-color: var(--color-border-strong);
+  }
+}
+
+@mixin odd-row {
+  background-color: config.$striped-color;
+}
+
+@mixin scrollable-wrapper {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@mixin sort-button {
+  position: relative;
+  display: inline-block;
+  width: space.get();
+  height: space.get();
+  vertical-align: bottom;
+  cursor: pointer;
+}
+
+@mixin sort-arrows-base {
+  content: "";
+  position: absolute;
+  left: space.get("xsmall");
+  border-left: config.$arrow-size solid transparent;
+  border-right: config.$arrow-size solid transparent;
+  transition: opacity 0.1s ease 0s;
+}
+
+@mixin sort-arrow-up {
+  top: 4px;
+  border-bottom: config.$arrow-size solid var(--color-border-contrast);
+}
+
+@mixin sort-arrow-down {
+  top: 12px;
+  border-top: config.$arrow-size solid var(--color-border-contrast);
+}
+
+@mixin sorted-arrow {
+  opacity: 0.3;
+}
+
+@mixin subrow {
+  background-color: var(--color-surface-subtle);
+}
+
+@mixin expanded-icon {
+  transform: rotate(180deg);
+}
+
+@mixin expand-padding {
+  padding-top: 4px !important;
+  padding-bottom: 0 !important;
+}
+
+@mixin compact {
+  width: auto;
+}

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

@@ -0,0 +1,103 @@
+@use "./mixins";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
+
+@layer components {
+  .table {
+    @include mixins.base;
+
+    td,
+    th {
+      @include mixins.cells;
+    }
+
+    thead th {
+      @include mixins.header-cells;
+    }
+
+    tr {
+      @include mixins.rows;
+    }
+
+    thead > tr {
+      @include mixins.header-rows;
+    }
+
+    tbody > th {
+      @include mixins.body-header-cells;
+    }
+
+    tr > *:first-of-type {
+      @include mixins.rows-first-cell;
+    }
+
+    tbody + tbody {
+      @include mixins.body-sibling;
+    }
+
+    > tfoot > tr {
+      @include mixins.footer-rows;
+    }
+
+    &--striped tbody tr:nth-of-type(odd) {
+      @include mixins.odd-row;
+    }
+
+    &--compact {
+      @include mixins.compact;
+    }
+
+    @each $breakpoint in ("default", "sm", "md", "lg", "xl", "xxl") {
+      @include breakpoint.get($breakpoint, "down") {
+        &-scrollable#{generate.variant-name($breakpoint)} {
+          @include mixins.scrollable-wrapper;
+        }
+      }
+    }
+
+    &__sort-button {
+      @include mixins.sort-button;
+
+      &::before,
+      &::after {
+        @include mixins.sort-arrows-base;
+      }
+
+      &::before {
+        @include mixins.sort-arrow-up;
+      }
+
+      &::after {
+        @include mixins.sort-arrow-down;
+      }
+
+      [aria-sort="descending"] &::before {
+        @include mixins.sorted-arrow;
+      }
+
+      [aria-sort="ascending"] &::after {
+        @include mixins.sorted-arrow;
+      }
+    }
+
+    &__subrow {
+      @include mixins.subrow;
+    }
+
+    button[aria-expanded="true"] > svg {
+      @include mixins.expanded-icon;
+    }
+
+    &__cell--expand {
+      @include mixins.expand-padding;
+    }
+
+    &__cell--shrink {
+      width: 0.1%;
+    }
+
+    &__cell--fill {
+      width: 100%;
+    }
+  }
+}

package/src/components/Table/tests/Cell.unit.test.js

@@ -0,0 +1,59 @@
+import { render } from "@testing-library/react";
+
+import { Cell } from "../Cell";
+
+// table, tbody and tr to prevent warning
+describe("rendering Cell", () => {
+  describe("initial state", () => {
+    it("has default tag td", () => {
+      const { getByTestId } = render(
+        <table>
+          <tbody>
+            <tr>
+              <Cell data-testid="test-id" />
+            </tr>
+          </tbody>
+        </table>,
+      );
+      expect(getByTestId("test-id").tagName).toBe("TD");
+    });
+  });
+  describe("initial state", () => {
+    it("has tag th when tag prop is set to th", () => {
+      const { getByTestId } = render(
+        <table>
+          <tbody>
+            <tr>
+              <Cell data-testid="test-id" tag="th" />
+            </tr>
+          </tbody>
+        </table>,
+      );
+      expect(getByTestId("test-id").tagName).toBe("TH");
+    });
+    it("has class when className is set", () => {
+      const { getByTestId } = render(
+        <table>
+          <tbody>
+            <tr>
+              <Cell data-testid="test-id" className="test-class" />
+            </tr>
+          </tbody>
+        </table>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("renders children", () => {
+      const { getByText } = render(
+        <table>
+          <tbody>
+            <tr>
+              <Cell data-testid="test-id">test</Cell>
+            </tr>
+          </tbody>
+        </table>,
+      );
+      expect(getByText("test")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Table/tests/Footer.unit.test.js

@@ -0,0 +1,70 @@
+import { render } from "@testing-library/react";
+
+import TableContext from "../TableContext";
+import { Footer } from "../Footer";
+
+describe("rendering Footer", () => {
+  const footers = [
+    {
+      key1: "row1",
+      key2: "row1",
+    },
+    {
+      key1: "row2",
+      key2: "row2",
+      expand: [
+        {
+          key1: "row2-expand",
+          key2: "row2-expand",
+        },
+      ],
+    },
+  ];
+  const headers = [
+    {
+      key: "key1",
+      label: "header-1",
+    },
+    {
+      key: "key2",
+      label: "header-2",
+      cellProps: {
+        className: "test-cellprop",
+      },
+    },
+  ];
+  let footer;
+
+  beforeEach(() => {
+    footer = render(
+      <TableContext.Provider
+        value={{
+          headers: headers,
+          footers: footers,
+          expandableRows: { hasExpandableRows: true },
+        }}
+      >
+        <table>
+          <Footer />
+        </table>
+      </TableContext.Provider>,
+    );
+  });
+  it("renders multiple rows", () => {
+    const { container } = footer;
+    expect(container.querySelectorAll("tr").length).toBe(2);
+  });
+  it("renders cells text content", () => {
+    const { getAllByText } = footer;
+    expect(getAllByText("row1").length).toBe(2);
+    expect(getAllByText("row2").length).toBe(2);
+  });
+  it("footer row can be expandable - have span with text Zobraziť 1 súvisiaci riadok inside button when expand length is 1", () => {
+    const { getAllByText } = footer;
+    expect(
+      getAllByText("row2")[0]
+        .parentElement.querySelector("button")
+        .querySelector("span").textContent,
+    ).toBe("Zobraziť 1 súvisiaci riadok");
+  });
+});