@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Table/Table.tsx

@@ -1,17 +1,16 @@
 "use client";
 
-import React, { useId } from "react";
 import cx from "classnames";
+import React, { useId } from "react";
 
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
 import { useStatic } from "../../utils/hooks";
-
+import { Footer } from "./Footer";
 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";
+import TableContext from "./TableContext";
+import { ExpandableRowsCaptions, TableHeader, TableRow } 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. */
@@ -23,6 +22,8 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   headers: TableHeader[];
   /** Compact table only takes spaced needed to display its content */
   isCompact?: boolean;
+  /** Enable responsive card layout below md breakpoint for better accessibility */
+  isResponsive?: boolean;
   /** If table has horizontal scrollbar */
   isScrollable?: boolean;
   /** Different colors for even and odd rows. */
@@ -30,8 +31,6 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   /** rows to print out in the table. */
   rows: TableRow[];
   className?: string;
-  /** Sets color scheme */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "table";
@@ -43,9 +42,9 @@ const Table: React.FC<TableProps> = ({
   rows,
   footers,
   isCompact,
+  isResponsive,
   isStriped,
   isScrollable,
-  colorScheme,
   expandableRowsCaptions = {
     header: "Rozšíriteľný",
     emptyRow: "Nerozšíriteľný riadok",
@@ -60,8 +59,7 @@ const Table: React.FC<TableProps> = ({
     {
       [`${CLASS_ROOT}--striped`]: isStriped,
       [`${CLASS_ROOT}--compact`]: isCompact,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
+      [`${CLASS_ROOT}--responsive`]: isResponsive,
     },
     className,
   );
@@ -94,6 +92,7 @@ const Table: React.FC<TableProps> = ({
     footers,
     rows: customRows,
     expandableRows,
+    isResponsive,
   };
 
   const table = (
@@ -108,7 +107,12 @@ const Table: React.FC<TableProps> = ({
           />
         }
       >
-        <table ref={tableRef} className={classes} {...other}>
+        <table
+          ref={tableRef}
+          className={classes}
+          {...(isResponsive && { "data-table": "responsive" })}
+          {...other}
+        >
           {caption && (
             <caption {...(isScrollable && { id: captionId })}>
               {caption}

package/src/components/Table/TableContext.ts

@@ -6,6 +6,7 @@ import { TableContextType } from "./types";
 const TableContext = React.createContext<TableContextType>({
   headers: [],
   rows: [],
+  isResponsive: false,
 });
 
 export default TableContext;

package/src/components/Table/docsData.ts

@@ -142,7 +142,6 @@ export const scrollableHeaders: TableHeader[] = [
     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" },
   },
 ];
 
@@ -208,3 +207,28 @@ export const fillRows: TableRow[] = [
     col2: "3",
   },
 ];
+
+export const responsiveHeaders: TableHeader[] = [
+  {
+    key: "account",
+    label: "Účel spracovania",
+  },
+  {
+    key: "legal",
+    label: "Právny základ a doba spracovania",
+  },
+];
+
+export const responsiveRows: TableRow[] = [
+  {
+    account: "Mesačný poplatok (bez Digitálnej odmeny)",
+    legal:
+      "Právny základ - Súhlas (čl. 6 ods. 1 písm. a) GDPR) a zmluva (čl. 6 ods. 1 písm. b) GDPR) a oprávnený záujem (čl. 6 ods. 1 písm. f) GDPR). Všeobecná doba uchovávania – Počas trvania zmluvného vzťahu.",
+  },
+  {
+    account:
+      "Online predaj tovarov a poskytovanie doplnkových a asistenčných služieb",
+    legal:
+      "Právny základ - Zmluva (čl. 6 ods. 1 písm. b) GDPR) a oprávnený záujem (čl. 6 ods. 1 písm. f) GDPR). Všeobecná doba uchovávania – Počas trvania zmluvného vzťahu a uplynutia záručnej doby na predaný tovar.",
+  },
+];

package/src/components/Table/index.ts

@@ -1,2 +1,2 @@
-export { Table } from "./Table";
 export { Footer } from "./Footer";
+export { Table } from "./Table";

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

@@ -1,26 +1,28 @@
+@use "sass:map";
 @use "./config";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
-@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/config" as typography;
 
 @mixin base {
   width: 100%;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   color: var(--color-text-default);
-  background-color: var(--color-background-primary);
 }
 
 @mixin cells {
-  padding: space.get("small") space.get("small") space.get("small") 0;
+  padding: space.get("medium");
   vertical-align: middle;
-  font-size: inherit;
-  line-height: inherit;
+  @include generate.responsive-css-map(
+    map.get(typography.$body-text, "default")
+  );
 }
 
 @mixin header-cells {
   vertical-align: bottom;
   text-align: left;
-  border-bottom: config.$fat-border-size solid var(--color-border-strong);
+  border-bottom: config.$fat-border-size solid var(--color-border-contrast);
   font-weight: 700;
 }
 
@@ -37,10 +39,6 @@
   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);
 }
@@ -63,6 +61,11 @@
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+
+  td,
+  th {
+    white-space: nowrap;
+  }
 }
 
 @mixin sort-button {
@@ -113,3 +116,40 @@
 @mixin compact {
   width: auto;
 }
+
+@mixin responsive-table {
+  thead {
+    display: none;
+  }
+
+  tbody,
+  tbody tr,
+  tbody td {
+    display: block;
+  }
+
+  tbody tr {
+    padding: space.get("small") 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  tbody td {
+    padding: space.get("medium") 0;
+    border-bottom: none;
+    text-align: left !important;
+
+    &:before {
+      content: attr(data-label);
+      display: block;
+      font-weight: 700;
+      margin-bottom: space.get("xsmall");
+    }
+
+    &:first-child {
+      padding-left: 0;
+    }
+  }
+}

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

@@ -27,10 +27,6 @@
       @include mixins.body-header-cells;
     }
 
-    tr > *:first-of-type {
-      @include mixins.rows-first-cell;
-    }
-
     tbody + tbody {
       @include mixins.body-sibling;
     }
@@ -47,6 +43,12 @@
       @include mixins.compact;
     }
 
+    &--responsive {
+      @include breakpoint.get("md", "down") {
+        @include mixins.responsive-table;
+      }
+    }
+
     @each $breakpoint in ("default", "sm", "md", "lg", "xl", "xxl") {
       @include breakpoint.get($breakpoint, "down") {
         &-scrollable#{generate.variant-name($breakpoint)} {

package/src/components/Table/tests/{Footer.unit.test.js → Footer.unit.test.jsx}

@@ -1,7 +1,6 @@
 import { render } from "@testing-library/react";
-
-import TableContext from "../TableContext";
 import { Footer } from "../Footer";
+import TableContext from "../TableContext";
 
 describe("rendering Footer", () => {
   const footers = [

package/src/components/Table/tests/{Header.unit.test.js → Header.unit.test.jsx}

@@ -1,7 +1,6 @@
 import { render } from "@testing-library/react";
-
-import TableContext from "../TableContext";
 import { Header } from "../Header.tsx";
+import TableContext from "../TableContext";
 
 describe("rendering Header", () => {
   const headers = [

package/src/components/Table/tests/{Row.unit.test.js → Row.unit.test.jsx}

@@ -1,7 +1,6 @@
 import { render } from "@testing-library/react";
-
-import TableContext from "../TableContext";
 import { Row } from "../Row";
+import TableContext from "../TableContext";
 
 describe("rendering Row", () => {
   const expandrow = {

package/src/components/Table/tests/{Rows.unit.test.js → Rows.unit.test.jsx}

@@ -1,7 +1,6 @@
 import { render } from "@testing-library/react";
-
-import TableContext from "../TableContext";
 import { Rows } from "../Rows";
+import TableContext from "../TableContext";
 
 describe("rendering Rows", () => {
   const rows = [

package/src/components/Table/tests/{Table.conformance.test.js → Table.conformance.test.jsx}

@@ -1,21 +1,21 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import "../../../../__mocks__/resizeObserverMock";
 import { Table } from "../";
 import {
-  headers,
-  rows,
-  unsortedHeaders,
   ascendingHeaders,
-  descendingHeaders,
-  sortableRows,
   ascendingRowsByDate,
+  descendingHeaders,
   descendingRowsByDate,
   expandableTableRows,
   footer,
+  headers,
+  rows,
   scrollableHeaders,
   scrollableRows,
+  sortableRows,
+  unsortedHeaders,
 } from "../docsData";
 
 const defaultProps = {
@@ -64,7 +64,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "attribute-boolean-style": "off", "valid-id": "off" },
+    rules: {
+      "attribute-boolean-style": "off",
+      "valid-id": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

package/src/components/Table/tests/{Table.unit.test.js → Table.unit.test.jsx}

@@ -1,4 +1,4 @@
-import { render, fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import "../../../../__mocks__/resizeObserverMock";
 import { Table } from "../Table";
@@ -51,37 +51,6 @@ describe("rendering Table", () => {
       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", () => {

package/src/components/Table/types.ts

@@ -37,4 +37,5 @@ export interface TableContextType {
   rows: TableRow[];
   footers?: TableRow[];
   expandableRows?: ExpandableRows;
+  isResponsive?: boolean;
 }

package/src/components/Tabs/Tabs.static.ts

@@ -13,12 +13,19 @@ export const configDocs = {
 };
 
 export default class Tabs {
+  private static readonly SCROLL_ALIGNMENT_TOLERANCE = 1;
+  private static readonly SCROLL_EDGE_TOLERANCE = 1;
+
   private element: HTMLElement;
   private config: TabsConfig;
   private tabs: HTMLElement[];
   private tabPanels: (HTMLElement | null)[];
   private activeTabIndex: number | null;
   private rovingTabindex: RovingTabindex | null;
+  private resizeObserver: ResizeObserver | null;
+  private horizontalScrollHandler: () => void;
+  private resizeHandler: () => void;
+  private viewportElement: HTMLElement | null;
 
   constructor(element: HTMLElement, config?: Partial<TabsConfig>) {
     this.element = element;
@@ -29,9 +36,14 @@ export default class Tabs {
     this.activeTabIndex = null;
 
     this.rovingTabindex = null;
+    this.resizeObserver = null;
+    this.viewportElement = null;
 
     this.handleClick = this.handleClick.bind(this);
     this.handleTabFocus = this.handleTabFocus.bind(this);
+    this.horizontalScrollHandler =
+      this.updateHorizontalOverflowState.bind(this);
+    this.resizeHandler = this.updateHorizontalOverflowState.bind(this);
 
     (this.element as any).ODS_Tabs = this;
 
@@ -73,13 +85,17 @@ export default class Tabs {
     }
 
     if (this.activeTabIndex !== null) {
-      this.toggleTabPanel(this.tabPanels[this.activeTabIndex], "on");
+      this.setActiveTab(this.activeTabIndex);
     } else if (this.tabs.length > 0) {
       this.activateNthTab(0);
     }
+
+    this.setupOverflowObserver();
   }
 
   destroy(): void {
+    this.teardownOverflowObserver();
+
     this.tabs.map((tab) => {
       tab.removeEventListener("click", this.handleClick);
       tab.removeEventListener("focus", this.handleTabFocus);
@@ -94,6 +110,66 @@ export default class Tabs {
     (this.element as any).ODS_Tabs = null;
   }
 
+  private setupOverflowObserver(): void {
+    this.teardownOverflowObserver();
+
+    this.viewportElement = this.element.parentElement?.classList.contains(
+      "tab-list__viewport",
+    )
+      ? this.element.parentElement
+      : null;
+
+    this.element.addEventListener("scroll", this.horizontalScrollHandler, {
+      passive: true,
+    });
+    window.addEventListener("resize", this.resizeHandler);
+
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(this.resizeHandler);
+      this.resizeObserver.observe(this.element);
+      this.tabs.forEach((tab) => this.resizeObserver?.observe(tab));
+    }
+
+    this.updateHorizontalOverflowState();
+  }
+
+  private teardownOverflowObserver(): void {
+    this.element.removeEventListener("scroll", this.horizontalScrollHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+
+    if (this.viewportElement) {
+      this.viewportElement.classList.remove(
+        "has-left-overflow",
+        "has-right-overflow",
+      );
+      this.viewportElement = null;
+    }
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  private updateHorizontalOverflowState(): void {
+    if (!this.viewportElement) return;
+
+    const maxScrollLeft = this.element.scrollWidth - this.element.clientWidth;
+    const hasOverflow = maxScrollLeft > Tabs.SCROLL_EDGE_TOLERANCE;
+    const atStart = this.element.scrollLeft <= Tabs.SCROLL_EDGE_TOLERANCE;
+    const atEnd =
+      this.element.scrollLeft >= maxScrollLeft - Tabs.SCROLL_EDGE_TOLERANCE;
+
+    this.viewportElement.classList.toggle(
+      "has-left-overflow",
+      hasOverflow && !atStart,
+    );
+    this.viewportElement.classList.toggle(
+      "has-right-overflow",
+      hasOverflow && !atEnd,
+    );
+  }
+
   update(): void {
     this.destroy();
     this.init();
@@ -105,31 +181,80 @@ export default class Tabs {
   private isSelected = (el: HTMLElement): boolean =>
     el.getAttribute("aria-selected") === "true";
 
-  private handleClick(e: MouseEvent): void {
-    const clickedTab = e.currentTarget as HTMLElement;
-
-    if (clickedTab.hasAttribute("aria-disabled")) {
-      e.preventDefault();
-      return;
-    }
-
+  private setActiveTab(index: number, forceCenter: boolean = false): void {
     this.tabs.map((tab, i) => {
-      if (tab === clickedTab) {
+      if (i === index) {
         this.activeTabIndex = i;
         return this.toggleTab(tab, "on");
       }
       return this.toggleTab(tab, "off");
     });
 
-    this.tabPanels.map((tabPanel) => {
-      if (
-        tabPanel &&
-        tabPanel.getAttribute("id") === clickedTab.getAttribute("aria-controls")
-      ) {
+    this.tabPanels.map((tabPanel, i) => {
+      if (i === index) {
         return this.toggleTabPanel(tabPanel, "on");
       }
       return this.toggleTabPanel(tabPanel, "off");
     });
+
+    const activeTab = this.tabs[index];
+    if (activeTab) {
+      this.scrollTabIntoView(activeTab, forceCenter);
+    }
+  }
+
+  private scrollTabIntoView(
+    activeTab: HTMLElement,
+    forceCenter: boolean = false,
+  ): void {
+    const maxScrollLeft = Math.max(
+      0,
+      this.element.scrollWidth - this.element.clientWidth,
+    );
+    const contentRect = this.element.getBoundingClientRect();
+    const itemRect = activeTab.getBoundingClientRect();
+    const itemCenterWithinContent =
+      itemRect.left -
+      contentRect.left +
+      this.element.scrollLeft +
+      itemRect.width / 2;
+    const targetScrollLeft =
+      itemCenterWithinContent - this.element.clientWidth / 2;
+    const behavior = window.innerWidth < 768 ? "auto" : "smooth";
+    const nextScrollLeft = Math.min(
+      maxScrollLeft,
+      Math.max(0, targetScrollLeft),
+    );
+
+    const isAlreadyAligned =
+      Math.abs(this.element.scrollLeft - nextScrollLeft) <=
+      Tabs.SCROLL_ALIGNMENT_TOLERANCE;
+    if (!forceCenter && isAlreadyAligned) return;
+
+    if (typeof this.element.scrollTo === "function") {
+      this.element.scrollTo({
+        left: nextScrollLeft,
+        behavior,
+      });
+      return;
+    }
+
+    this.element.scrollLeft = nextScrollLeft;
+    this.updateHorizontalOverflowState();
+  }
+
+  private handleClick(e: MouseEvent): void {
+    const clickedTab = e.currentTarget as HTMLElement;
+
+    if (clickedTab.hasAttribute("aria-disabled")) {
+      e.preventDefault();
+      return;
+    }
+
+    const clickedIndex = this.tabs.findIndex((tab) => tab === clickedTab);
+    if (clickedIndex >= 0) {
+      this.setActiveTab(clickedIndex, true);
+    }
   }
 
   private toggleTab(el: HTMLElement, state: "on" | "off"): void {
@@ -161,25 +286,27 @@ export default class Tabs {
   }
 
   activateNthTab(index: number): void {
-    this.tabs.map((tab, i) => {
-      if (i === index) {
-        this.activeTabIndex = i;
-        return this.toggleTab(tab, "on");
-      }
-      return this.toggleTab(tab, "off");
-    });
-
-    this.tabPanels.map((tabPanel, i) => {
-      if (i === index) {
-        return this.toggleTabPanel(tabPanel, "on");
-      }
-      return this.toggleTabPanel(tabPanel, "off");
-    });
+    this.setActiveTab(index, true);
   }
 
-  private handleTabFocus(): void {
+  private handleTabFocus(event: FocusEvent): void {
     if (this.rovingTabindex && !this.rovingTabindex.isActive) {
       this.rovingTabindex.init();
     }
+
+    const focusedTab = event.currentTarget as HTMLElement | null;
+    if (focusedTab && this.shouldCenterFocusedTab(focusedTab)) {
+      this.scrollTabIntoView(focusedTab);
+    }
+  }
+
+  private shouldCenterFocusedTab(focusedTab: HTMLElement): boolean {
+    if (typeof focusedTab.matches !== "function") return true;
+
+    try {
+      return focusedTab.matches(":focus-visible");
+    } catch {
+      return true;
+    }
   }
 }