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

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

@@ -0,0 +1,296 @@
+import { render, fireEvent } from "@testing-library/react";
+
+import "../../../../__mocks__/resizeObserverMock";
+import { Table } from "../Table";
+
+describe("rendering Table", () => {
+  const footers = [
+    {
+      col1: "footer1-1",
+      col2: "footer1-2",
+    },
+  ];
+  const headers = [
+    {
+      key: "col1",
+      label: "header1",
+      isSortable: true,
+      cellProps: {
+        className: "test-cellprop",
+      },
+    },
+    {
+      key: "col2",
+      label: "header2",
+      headCellProps: {
+        className: "test-headcell",
+      },
+    },
+  ];
+  const rows = [
+    {
+      col1: "row1-1",
+      col2: "row1-2",
+    },
+    {
+      col1: "row2-1",
+      col2: "row2-2",
+      expand: [
+        {
+          col1: "row2-expand-1",
+          col2: "row2-expand-2",
+        },
+      ],
+    },
+  ];
+  describe("initial state", () => {
+    it("renders table with class table", () => {
+      const { getByTestId } = render(
+        <Table data-testid="test-id" headers={[]} rows={[]} />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("TABLE");
+      expect(getByTestId("test-id")).toHaveClass("table");
+    });
+    it("applies dark colorScheme class", () => {
+      const { getByTestId } = render(
+        <Table
+          data-testid="test-id"
+          headers={[]}
+          rows={[]}
+          colorScheme="dark"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+      expect(getByTestId("test-id")).not.toHaveClass("is-light");
+    });
+    it("applies light colorScheme class", () => {
+      const { getByTestId } = render(
+        <Table
+          data-testid="test-id"
+          headers={[]}
+          rows={[]}
+          colorScheme="light"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("is-light");
+      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
+    });
+    it("does not apply colorScheme class by default", () => {
+      const { getByTestId } = render(
+        <Table data-testid="test-id" headers={[]} rows={[]} />,
+      );
+      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
+      expect(getByTestId("test-id")).not.toHaveClass("is-light");
+    });
+  });
+  describe("testing headers", () => {
+    it("renders headers", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("header1")).toBeInTheDocument();
+      expect(getByText("header2")).toBeInTheDocument();
+    });
+    it("header1 has class test-cellprop", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("header1")).toBeInTheDocument();
+      expect(getByText("header1")).toHaveClass("test-cellprop");
+    });
+    it("header1 has aria-sort attribute set to none", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("header1")).toBeInTheDocument();
+      expect(getByText("header1").getAttribute("aria-sort")).toBe("none");
+    });
+    it("header1 has button with class table__sort-button", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("header1")).toBeInTheDocument();
+      expect(getByText("header1").querySelector("button")).toBeInTheDocument();
+      expect(getByText("header1").querySelector("button")).toHaveClass(
+        "table__sort-button",
+      );
+    });
+    it("header2 has class test-headcell", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("header2")).toBeInTheDocument();
+      expect(getByText("header2")).toHaveClass("test-headcell");
+    });
+    it("has additional header cell with class table__cell--shrink when rows are expendable", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+      const headerCells = container.querySelectorAll("th");
+      const exapandableColumn = headerCells[headerCells.length - 1];
+      expect(exapandableColumn).toHaveClass("table__cell--shrink");
+    });
+  });
+  describe("testing rows", () => {
+    it("renders rows", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("row1-1")).toBeInTheDocument();
+      expect(getByText("row1-2")).toBeInTheDocument();
+      expect(getByText("row2-1")).toBeInTheDocument();
+      expect(getByText("row2-2")).toBeInTheDocument();
+    });
+    it("renders expanded rows", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("row2-expand-1")).toBeInTheDocument();
+      expect(getByText("row2-expand-2")).toBeInTheDocument();
+    });
+    it("rows in first column have class test-cellprop from header", () => {
+      const { getByText } = render(<Table headers={headers} rows={rows} />);
+      expect(getByText("row1-1")).toHaveClass("test-cellprop");
+      expect(getByText("row2-1")).toHaveClass("test-cellprop");
+      expect(getByText("row2-expand-1")).toHaveClass("test-cellprop");
+    });
+    it("expandable row has td cell with class table__cell--shrink", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+      expect(
+        container
+          .querySelector("tbody")
+          .querySelectorAll("tr")[1]
+          .querySelectorAll("td")[2],
+      ).toHaveClass("table__cell--shrink");
+    });
+    it("td cell with class table__cell--shrink has button with generated aria-controls", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+      const ariaControl = container
+        .querySelector("tbody")
+        .querySelectorAll("tr")[1]
+        .querySelectorAll("td")[2]
+        .querySelector("button")
+        .getAttribute("aria-controls");
+      // React 18's useId() generates values with unique prefixes
+      expect(ariaControl).toContain("-row-1-0");
+    });
+    it("td cell with class table__cell--shrink has button with text Zobraziť 1 súvisiaci riadok", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+
+      expect(
+        container
+          .querySelector("tbody")
+          .querySelectorAll("tr")[1]
+          .querySelectorAll("td")[2]
+          .querySelector("button").textContent,
+      ).toBe("Zobraziť 1 súvisiaci riadok");
+    });
+    it("expandable row has class table__subrow", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+      expect(
+        container.querySelector("tbody").querySelectorAll("tr")[2],
+      ).toHaveClass("table__subrow");
+    });
+    it("expandable row has attribute hidden", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+      expect(
+        container.querySelector("tbody").querySelectorAll("tr")[2].hidden,
+      ).toBe(true);
+    });
+    it("expandable row has id same as aria-controls attribute of corresponding expand button", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+      expect(
+        container.querySelector("tbody").querySelectorAll("tr")[2].id,
+      ).toBe(
+        container
+          .querySelector("tbody")
+          .querySelectorAll("tr")[1]
+          .querySelectorAll("td")[2]
+          .querySelector("button")
+          .getAttribute("aria-controls"),
+      );
+    });
+  });
+  describe("testing other props", () => {
+    it("renders footer", () => {
+      const { getByText } = render(
+        <Table headers={headers} rows={[]} footers={footers} />,
+      );
+      expect(getByText("footer1-1")).toBeInTheDocument();
+      expect(getByText("footer1-2")).toBeInTheDocument();
+    });
+    it("first footer column has class test-cellprop from header", () => {
+      const { getByText } = render(
+        <Table headers={headers} rows={[]} footers={footers} />,
+      );
+      expect(getByText("footer1-1")).toHaveClass("test-cellprop");
+    });
+    it("table has class table--striped when isStripped is passed", () => {
+      const { getByTestId } = render(
+        <Table data-testid="test-id" headers={[]} rows={[]} isStriped />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("TABLE");
+      expect(getByTestId("test-id")).toHaveClass("table");
+      expect(getByTestId("test-id")).toHaveClass("table--striped");
+    });
+    it("table has class table--compact when isStripped is passed", () => {
+      const { getByTestId } = render(
+        <Table data-testid="test-id" headers={[]} rows={[]} isCompact />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("TABLE");
+      expect(getByTestId("test-id")).toHaveClass("table");
+      expect(getByTestId("test-id")).toHaveClass("table--compact");
+    });
+    it("renders div wrapper with class table-scrollable when isScrollable is passed", () => {
+      const { container } = render(
+        <Table headers={[]} rows={[]} isScrollable />,
+      );
+      expect(container.getElementsByClassName("table-scrollable").length).toBe(
+        1,
+      );
+      expect(
+        container.getElementsByClassName("table-scrollable")[0].tagName,
+      ).toBe("DIV");
+    });
+    it("div wrapper with class table-scrollable has role group", () => {
+      const { container } = render(
+        <Table headers={[]} rows={[]} isScrollable />,
+      );
+      expect(container.getElementsByClassName("table-scrollable").length).toBe(
+        1,
+      );
+      expect(
+        container
+          .getElementsByClassName("table-scrollable")[0]
+          .getAttribute("role"),
+      ).toBe("group");
+    });
+    it("div wrapper with class table-scrollable has generated aria-labelledby", () => {
+      const { container } = render(
+        <Table headers={[]} rows={[]} isScrollable caption="text-caption" />,
+      );
+      const scrollableDiv =
+        container.getElementsByClassName("table-scrollable")[0];
+      expect(scrollableDiv).toBeTruthy();
+      const ariaLabelledBy = scrollableDiv.getAttribute("aria-labelledby");
+      expect(ariaLabelledBy).toBeTruthy();
+      // React 18's useId() generates values with special format
+      expect(ariaLabelledBy).toContain("-caption");
+    });
+    it("renders caption inside caption element", () => {
+      const { container } = render(
+        <Table headers={[]} rows={[]} caption="test-caption" />,
+      );
+      expect(container.querySelector("caption").textContent).toBe(
+        "test-caption",
+      );
+    });
+    it("renders caption inside caption element", () => {
+      const { container } = render(
+        <Table headers={[]} rows={[]} caption="test-caption" />,
+      );
+      expect(container.querySelector("caption").textContent).toBe(
+        "test-caption",
+      );
+    });
+  });
+  describe("fire events", () => {
+    it("expandable row is visible after its corresponding button click", () => {
+      const { container } = render(<Table headers={headers} rows={rows} />);
+      fireEvent.click(
+        container
+          .querySelector("tbody")
+          .querySelectorAll("tr")[1]
+          .querySelectorAll("td")[2]
+          .querySelector("button"),
+      );
+      expect(
+        container.querySelector("tbody").querySelectorAll("tr")[2].hidden,
+      ).toBe(false);
+    });
+  });
+});

package/src/components/Table/types.ts

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface CellValue {
+  value: React.ReactNode;
+  rawValue?: number | string;
+  [key: string]: any;
+}
+
+export interface TableHeader {
+  key: string;
+  label: React.ReactNode;
+  isSortable?: boolean;
+  sort?: "none" | "ascending" | "descending";
+  cellProps?: React.HTMLAttributes<HTMLTableCellElement>;
+  headCellProps?: React.HTMLAttributes<HTMLTableCellElement>;
+}
+
+export interface TableRow {
+  [key: string]: React.ReactNode | CellValue | TableRow[] | boolean | undefined;
+  expand?: TableRow[];
+  isExpanded?: boolean;
+  id?: string;
+}
+
+export interface ExpandableRowsCaptions {
+  header: string;
+  emptyRow: string;
+}
+
+export interface ExpandableRows {
+  hasExpandableRows: boolean;
+  expandableRowsCaptions?: ExpandableRowsCaptions;
+}
+
+export interface TableContextType {
+  headers: TableHeader[];
+  rows: TableRow[];
+  footers?: TableRow[];
+  expandableRows?: ExpandableRows;
+}

package/src/components/Tabs/Tabs.tsx

@@ -8,10 +8,8 @@ import { Tab } from "./Tab";
 import TabsStatic from "./Tabs.static";
 
 export const variants = ["standard", "light"] as const;
-export const colours = ["default", "inverse"] as const;
 
 export type TabsVariant = (typeof variants)[number];
-export type TabsColour = (typeof colours)[number];
 
 // Define the expected props for TabPanel children
 export interface TabPanelProps {
@@ -29,7 +27,7 @@ interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   /** Additional classes for tabs header. */
   classesTabNav?: string;
   /** Color theme for the tabs */
-  colour?: TabsColour;
+  colorScheme?: "dark" | "light";
   /** All tabs have equal width inside a full-width container */
   hasEqualTabWidth?: boolean;
   /** Fullwidth container */
@@ -46,12 +44,12 @@ const Tabs: React.FC<TabsProps> = ({
   activeTabIndex = 0,
   className,
   classesTabNav,
-  colour = "default",
   isFullWidth,
   isLink,
   hasEqualTabWidth,
   variant = "standard",
   children,
+  colorScheme,
   ...other
 }) => {
   const CLASS_TABNAV = "tab-list";
@@ -60,8 +58,9 @@ const Tabs: React.FC<TabsProps> = ({
     CLASS_TABNAV,
     { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
     { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
-    { [`${CLASS_TABNAV}--inverse`]: colour === "inverse" },
     { [`${CLASS_TABNAV}--light`]: variant === "light" },
+    { "is-dark": colorScheme === "dark" },
+    { "is-light": colorScheme === "light" },
     classesTabNav,
     className,
   );

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

@@ -1,78 +1,59 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 
 $outline-width: convert.to-rem(2px);
 $negative-outline-width: $outline-width * -1;
 
 $tablist-spacing: (
-  margin: $negative-outline-width $negative-outline-width (space.get() + $negative-outline-width) $negative-outline-width,
+  margin: $negative-outline-width $negative-outline-width
+    (
+      space.get() + $negative-outline-width,
+    )
+    $negative-outline-width,
   padding: $outline-width,
 );
 
 $tab: (
-  'default': (
-    default: (
-      color: color.$black,
-      box-shadow: inset 0 -2px 0 0 color.$black,
-    ),
-    active: (
-      color: color.$orange,
-      box-shadow: (
-        inset -2px 0 0 0 color.$black,
-        inset 0 2px 0 0 color.$black,
-        inset 2px 0 0 0 color.$black,
-      ),
-    ),
-    hover: (
-      color: color.$orange,
-    ),
-    disabled: (
-      color: color.$gray-500,
-    )
+  default: (
+    color: var(--color-text-default),
+    box-shadow: inset 0 -2px 0 0 var(--color-border-contrast),
   ),
-  'inverse': (
-    default: (
-      color: color.$white,
-      box-shadow: inset 0 -2px 0 0 color.$white,
-    ),
-    active: (
-      color: color.$orange,
-      box-shadow: (
-        inset -2px 0 0 0 color.$white,
-        inset 0 2px 0 0 color.$white,
-        inset 2px 0 0 0 color.$white,
-      ),
-    ),
-    hover: (
-      color: color.$orange,
+  active: (
+    color: var(--color-text-accent),
+    box-shadow: (
+      inset -2px 0 0 0 var(--color-border-contrast),
+      inset 0 2px 0 0 var(--color-border-contrast),
+      inset 2px 0 0 0 var(--color-border-contrast),
     ),
-    disabled: (
-      color: color.$gray-600,
-    )
+  ),
+  hover: (
+    color: var(--color-text-accent),
+  ),
+  disabled: (
+    color: var(--color-surface-moderate),
   ),
 );
 
 $tab-light: (
   default: (
-    box-shadow: none !important,
+    box-shadow: none "!important",
   ),
   active: (
-    box-shadow: inset 0 -4px 0 0 color.$orange !important,
+    box-shadow: inset 0 -4px 0 0 var(--color-border-accent) "!important",
   ),
   hover: (
-    box-shadow: none !important,
+    box-shadow: none "!important",
   ),
   disabled: (
-    box-shadow: none !important,
-  )
+    box-shadow: none "!important",
+  ),
 );
 
 $tab-sizes: (
   default: (
-    padding: space.get('small') space.get(),
+    padding: space.get("small") space.get(),
   ),
   large: (
-    padding: space.get('small') space.get(),
+    padding: space.get("small") space.get(),
   ),
 );

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

@@ -1,8 +1,7 @@
-@use './config';
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
+@use "./config";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
 
 @mixin list-base($spacing: config.$tablist-spacing) {
   position: relative;
@@ -43,39 +42,35 @@
   @include base.focusring-flush;
 }
 
-@mixin color-variant($variant, $config: config.$tab) {
-  @include generate.css-map($config, $variant, 'default');
+@mixin color-variant($config: config.$tab) {
+  @include generate.css-map($config, "default");
 
-  &[aria-selected='true'] {
-    @include generate.css-map($config, $variant, 'active');
+  &[aria-selected="true"] {
+    @include generate.css-map($config, "active");
   }
 
   &:hover {
-    @include generate.css-map(config.$tab, $variant, 'hover');
+    @include generate.css-map(config.$tab, "hover");
   }
 
-  &[aria-disabled='true'] {
-    @include generate.css-map(config.$tab, $variant, 'disabled');
+  &[aria-disabled="true"] {
+    @include generate.css-map(config.$tab, "disabled");
   }
 }
 
-@mixin inverse-variant {
-  @include generate.css-map(config.$tab-light, 'default');  
-}
-
 @mixin tab-light {
-  @include generate.css-map(config.$tab-light, 'default');
+  @include generate.css-map(config.$tab-light, "default");
 
   &:hover {
-    @include generate.css-map(config.$tab-light, 'hover');
+    @include generate.css-map(config.$tab-light, "hover");
   }
 
-  &[aria-selected='true'] {
-    @include generate.css-map(config.$tab-light, 'active');
+  &[aria-selected="true"] {
+    @include generate.css-map(config.$tab-light, "active");
   }
-  
-  &[aria-disabled='true'] {
-    @include generate.css-map(config.$tab-light, 'disabled');
+
+  &[aria-disabled="true"] {
+    @include generate.css-map(config.$tab-light, "disabled");
   }
 }
 
@@ -90,15 +85,11 @@
 @mixin underline {
   flex: 1 1 auto;
   max-width: none;
-  box-shadow: inset 0 -2px 0 0 color.$black;
-}
-
-@mixin underline-inverse {
-  box-shadow: inset 0 -2px 0 0 color.$white;
+  box-shadow: inset 0 -2px 0 0 var(--color-border-contrast);
 }
 
 @mixin underline-light {
-  box-shadow: inset 0 -1px 0 0 color.$gray-500;
+  box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate);
 }
 
 @mixin list-equal-item {

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

@@ -1,64 +1,56 @@
 @use "./config";
 @use "./mixins";
-@use "../../../styles/tokens/color";
 @use "../../../styles/tools/generate";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/typography/mixins" as typography;
 
-.tab-list {
-  $this: &;
+@layer components {
+  .tab-list {
+    $this: &;
 
-  @include typography.list-unstyled;
-  @include mixins.list-base;
+    @include typography.list-unstyled;
+    @include mixins.list-base;
 
-  &--equal {
-    @include mixins.list-equal;
-  }
-
-  &__item {
-    @include mixins.list-item;
-
-    #{$this}--equal & {
-      @include mixins.list-equal-item;
-    }
-
-    #{$this}--light & {
-      @include mixins.underline-light;
+    &--equal {
+      @include mixins.list-equal;
     }
-  }
 
-  &__tab {
-    @include mixins.tab;
-    @include mixins.color-variant("default");
+    &__item {
+      @include mixins.list-item;
 
-    @each $size, $props in config.$tab-sizes {
-      &#{generate.variant-name($size)} {
-        @include mixins.tab-size($size);
+      #{$this}--equal & {
+        @include mixins.list-equal-item;
       }
-    }
-    #{$this}--light & {
-      @include mixins.tab-light;
-    }
 
-    #{$this}--light#{$this}--equal & {
-      @include mixins.tab-centered;
+      #{$this}--light & {
+        @include mixins.underline-light;
+      }
     }
 
-    .bg-black &,
-    #{$this}--inverse & {
-      @include mixins.color-variant("inverse");
-    }
-  }
+    &__tab {
+      @include mixins.tab;
+      @include mixins.color-variant;
 
-  &__hr {
-    @include mixins.underline;
+      @each $size, $props in config.$tab-sizes {
+        &#{generate.variant-name($size)} {
+          @include mixins.tab-size($size);
+        }
+      }
+      #{$this}--light & {
+        @include mixins.tab-light;
+      }
 
-    #{$this}--light & {
-      @include mixins.underline-light;
+      #{$this}--light#{$this}--equal & {
+        @include mixins.tab-centered;
+      }
     }
 
-    #{$this}--inverse & {
-      @include mixins.underline-inverse;
+    &__hr {
+      @include mixins.underline;
+
+      #{$this}--light & {
+        @include mixins.underline-light;
+      }
     }
   }
 }

package/src/components/Tabs/tests/Tabs.unit.test.js

@@ -99,6 +99,14 @@ describe("rendering Tabs", () => {
         }
       }
     });
+    it("has class is-dark when colorScheme is set to dark", () => {
+      const { getByTestId } = render(<TabsExample colorScheme="dark" />);
+      expect(getByTestId("test-id")).toHaveClass("is-dark");
+    });
+    it("has class is-light when colorScheme is set to light", () => {
+      const { getByTestId } = render(<TabsExample colorScheme="light" />);
+      expect(getByTestId("test-id")).toHaveClass("is-light");
+    });
   });
   describe("checking fireEvents", () => {
     it("click in disabled tab button doesnt cause change", () => {