@orangesk/orange-design-system 3.7.0 → 3.9.0

package/src/components/StatusIndicator/tests/StatusIndicator.unit.test.jsx

@@ -0,0 +1,70 @@
+import { render } from "@testing-library/react";
+
+import * as components from "../../";
+
+describe("StatusIndicator", () => {
+  it("is available from the public component entry point", () => {
+    expect(components.StatusIndicator).toBeTypeOf("function");
+  });
+
+  it.each([
+    ["success", "status-indicator--success"],
+    ["warning", "status-indicator--warning"],
+    ["danger", "status-indicator--danger"],
+  ])("renders the %s type", (type, expectedClass) => {
+    const { getByText } = render(
+      <components.StatusIndicator type={type}>
+        {type}
+      </components.StatusIndicator>,
+    );
+
+    expect(getByText(type).closest(".status-indicator")).toHaveClass(
+      "status-indicator",
+      expectedClass,
+    );
+  });
+
+  it("renders a decorative marker before the label", () => {
+    const { getByTestId } = render(
+      <components.StatusIndicator data-testid="status" type="success">
+        Available
+      </components.StatusIndicator>,
+    );
+    const statusIndicator = getByTestId("status");
+    const marker = statusIndicator.firstElementChild;
+
+    expect(marker).toHaveClass("status-indicator__marker");
+    expect(marker).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("groups text and inline controls in one wrapping content item", () => {
+    const { getByTestId, getByRole } = render(
+      <components.StatusIndicator data-testid="status" type="danger">
+        Temporarily unavailable <button type="button">More information</button>
+      </components.StatusIndicator>,
+    );
+    const content = getByTestId("status").querySelector(
+      ".status-indicator__content",
+    );
+
+    expect(content).toHaveTextContent("Temporarily unavailable");
+    expect(content).toContainElement(
+      getByRole("button", { name: "More information" }),
+    );
+  });
+
+  it("passes native span props and additional classes", () => {
+    const { getByTestId } = render(
+      <components.StatusIndicator
+        className="custom-class"
+        data-testid="status"
+        type="warning"
+      >
+        Limited
+      </components.StatusIndicator>,
+    );
+
+    expect(getByTestId("status")).toHaveClass("custom-class");
+    expect(getByTestId("status")).toHaveTextContent("Limited");
+  });
+});

package/src/components/Table/Table.static.ts

@@ -1,5 +1,7 @@
 import toggle from "../../scripts/modules/toggleUtil";
 
+const SCROLLABLE_OVERFLOW_CLASS = "table-scrollable--overflowing";
+
 interface TableConfig {
   expandButtonSelector: string;
   scrollableContainerSelector: string;
@@ -32,18 +34,26 @@ export default class Table {
 
     (this.element as any).ODS_Table = this;
 
-    this.resizeObserver = new ResizeObserver((entries) => {
+    this.resizeObserver = new ResizeObserver(() => {
       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");
-        }
-      });
+      const overflowX = getComputedStyle(this.scrollableContainer).overflowX;
+      const canScroll = overflowX === "auto" || overflowX === "scroll";
+      const hasOverflow =
+        this.scrollableContainer.scrollWidth >
+        this.scrollableContainer.clientWidth;
+      const isScrollable = canScroll && hasOverflow;
+
+      this.scrollableContainer.classList.toggle(
+        SCROLLABLE_OVERFLOW_CLASS,
+        isScrollable,
+      );
+
+      if (isScrollable) {
+        this.scrollableContainer.setAttribute("tabindex", "0");
+      } else {
+        this.scrollableContainer.removeAttribute("tabindex");
+      }
     });
 
     this.init();
@@ -120,6 +130,7 @@ export default class Table {
     );
     if (this.scrollableContainer) {
       this.resizeObserver.observe(this.element);
+      this.resizeObserver.observe(this.scrollableContainer);
       return true;
     }
     return undefined;
@@ -131,6 +142,8 @@ export default class Table {
     });
 
     this.resizeObserver.disconnect();
+    this.scrollableContainer?.classList.remove(SCROLLABLE_OVERFLOW_CLASS);
+    this.scrollableContainer?.removeAttribute("tabindex");
 
     this.expandButtons = [];
   }

package/src/components/Table/Table.tsx

@@ -26,6 +26,8 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   isResponsive?: boolean;
   /** If table has horizontal scrollbar */
   isScrollable?: boolean;
+  /** Keep the first column visible while the table scrolls horizontally */
+  isFirstColumnPinned?: boolean;
   /** Different colors for even and odd rows. */
   isStriped?: boolean;
   /** rows to print out in the table. */
@@ -45,6 +47,7 @@ const Table: React.FC<TableProps> = ({
   isResponsive,
   isStriped,
   isScrollable,
+  isFirstColumnPinned,
   expandableRowsCaptions = {
     header: "Rozšíriteľný",
     emptyRow: "Nerozšíriteľný riadok",
@@ -60,11 +63,13 @@ const Table: React.FC<TableProps> = ({
       [`${CLASS_ROOT}--striped`]: isStriped,
       [`${CLASS_ROOT}--compact`]: isCompact,
       [`${CLASS_ROOT}--responsive`]: isResponsive,
+      [`${CLASS_ROOT}--pinned-first-column`]: isFirstColumnPinned,
     },
     className,
   );
 
   const captionId = `${idPrefix}-caption`;
+  const hasScrollableRegion = isScrollable || isFirstColumnPinned;
 
   const expandableRows = {
     hasExpandableRows: rows.some(
@@ -98,7 +103,7 @@ const Table: React.FC<TableProps> = ({
   const table = (
     <TableContext.Provider value={context}>
       <ConditionalWrapper
-        condition={isScrollable || false}
+        condition={hasScrollableRegion || false}
         wrapper={
           <div
             className={`${CLASS_ROOT}-scrollable`}
@@ -114,7 +119,7 @@ const Table: React.FC<TableProps> = ({
           {...other}
         >
           {caption && (
-            <caption {...(isScrollable && { id: captionId })}>
+            <caption {...(hasScrollableRegion && { id: captionId })}>
               {caption}
             </caption>
           )}

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

@@ -57,17 +57,33 @@
 }
 
 @mixin scrollable-wrapper {
+  container-type: inline-size;
   display: block;
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 
+  caption {
+    position: sticky;
+    left: 0;
+    width: 100cqw;
+  }
+
   td,
   th {
     white-space: nowrap;
   }
 }
 
+@mixin responsive-scrollable-wrapper {
+  overflow-x: visible;
+
+  td,
+  th {
+    white-space: normal;
+  }
+}
+
 @mixin sort-button {
   position: relative;
   display: inline-block;
@@ -117,6 +133,49 @@
   width: auto;
 }
 
+@mixin pinned-first-column {
+  tr > :first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: var(
+      --table-pinned-column-background,
+      var(--color-background-primary)
+    );
+
+    &::after {
+      content: "";
+      display: none;
+      position: absolute;
+      top: 0;
+      right: -12px;
+      bottom: 0;
+      width: 12px;
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, var(--color-text-default) 10%, transparent),
+        transparent
+      );
+      pointer-events: none;
+    }
+  }
+
+  thead > tr > :first-child {
+    z-index: 2;
+  }
+}
+
+@mixin unpin-first-column {
+  tr > :first-child {
+    position: static;
+    background: transparent;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
 @mixin responsive-table {
   thead {
     display: none;

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

@@ -38,20 +38,39 @@
 
     &--striped tbody tr:nth-of-type(odd) {
       @include mixins.odd-row;
+      --table-pinned-column-background: var(--color-background-secondary);
     }
 
     &--striped.background-secondary tbody tr:nth-of-type(odd),
     .background-secondary &--striped tbody tr:nth-of-type(odd) {
       background-color: config.$striped-color-on-secondary;
+      --table-pinned-column-background: var(--color-background-primary);
     }
 
     &--compact {
       @include mixins.compact;
     }
 
+    &--pinned-first-column {
+      @include mixins.pinned-first-column;
+    }
+
+    &--pinned-first-column.background-secondary,
+    .background-secondary &--pinned-first-column {
+      --table-pinned-column-background: var(--color-background-secondary);
+    }
+
+    &-scrollable--overflowing &--pinned-first-column tr > :first-child::after {
+      display: block;
+    }
+
     &--responsive {
       @include breakpoint.get("md", "down") {
         @include mixins.responsive-table;
+
+        &.table--pinned-first-column {
+          @include mixins.unpin-first-column;
+        }
       }
     }
 
@@ -63,6 +82,12 @@
       }
     }
 
+    @include breakpoint.get("md", "down") {
+      &-scrollable:has(> &--responsive) {
+        @include mixins.responsive-scrollable-wrapper;
+      }
+    }
+
     &__sort-button {
       @include mixins.sort-button;
 

package/src/components/Table/tests/Table.static.unit.test.jsx

@@ -0,0 +1,72 @@
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+
+import Table from "../Table.static";
+
+let resizeCallback;
+let observe;
+
+beforeEach(() => {
+  observe = vi.fn();
+  vi.stubGlobal(
+    "ResizeObserver",
+    vi.fn(function (callback) {
+      resizeCallback = callback;
+      this.observe = observe;
+      this.unobserve = vi.fn();
+      this.disconnect = vi.fn();
+    }),
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = "";
+});
+
+it("does not make a responsive non-scrolling wrapper focusable", () => {
+  document.body.innerHTML = `
+    <div class="table-scrollable table-scrollable--overflowing" style="overflow-x: visible" tabindex="0">
+      <table class="table table--responsive"></table>
+    </div>
+  `;
+  const table = document.querySelector("table");
+  const scrollableRegion = document.querySelector(".table-scrollable");
+  Object.defineProperties(scrollableRegion, {
+    clientWidth: { configurable: true, value: 400 },
+    scrollWidth: { configurable: true, value: 800 },
+  });
+  new Table(table);
+
+  resizeCallback([{ target: table, contentRect: { width: 800 } }]);
+
+  expect(scrollableRegion).not.toHaveAttribute("tabindex");
+  expect(scrollableRegion).not.toHaveClass("table-scrollable--overflowing");
+});
+
+it("marks a horizontally overflowing wrapper", () => {
+  document.body.innerHTML = `
+    <div class="table-scrollable" style="overflow-x: auto">
+      <table class="table table--pinned-first-column"></table>
+    </div>
+  `;
+  const table = document.querySelector("table");
+  const scrollableRegion = document.querySelector(".table-scrollable");
+  Object.defineProperties(scrollableRegion, {
+    clientWidth: { configurable: true, value: 400 },
+    scrollWidth: { configurable: true, value: 800 },
+  });
+  const instance = new Table(table);
+
+  expect(observe).toHaveBeenCalledWith(table);
+  expect(observe).toHaveBeenCalledWith(scrollableRegion);
+
+  resizeCallback([{ target: table, contentRect: { width: 800 } }]);
+
+  expect(scrollableRegion).toHaveClass("table-scrollable--overflowing");
+  expect(scrollableRegion).toHaveAttribute("tabindex", "0");
+
+  instance.destroy();
+
+  expect(scrollableRegion).not.toHaveClass("table-scrollable--overflowing");
+  expect(scrollableRegion).not.toHaveAttribute("tabindex");
+});

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

@@ -194,6 +194,39 @@ describe("rendering Table", () => {
       expect(getByTestId("test-id")).toHaveClass("table");
       expect(getByTestId("test-id")).toHaveClass("table--compact");
     });
+    it("pins the first column and enables overflow handling when isFirstColumnPinned is passed", () => {
+      const { container, getByTestId } = render(
+        <Table
+          data-testid="test-id"
+          headers={[]}
+          rows={[]}
+          isFirstColumnPinned
+        />,
+      );
+
+      expect(getByTestId("test-id")).toHaveClass("table--pinned-first-column");
+      expect(container.querySelector(".table-scrollable")).toContainElement(
+        getByTestId("test-id"),
+      );
+    });
+    it("labels the pinned-column scroll region with its caption", () => {
+      const { container } = render(
+        <Table
+          headers={[]}
+          rows={[]}
+          caption="Pinned table"
+          isFirstColumnPinned
+        />,
+      );
+      const scrollableRegion = container.querySelector(".table-scrollable");
+      const caption = container.querySelector("caption");
+
+      expect(caption).toHaveAttribute(
+        "id",
+        scrollableRegion.getAttribute("aria-labelledby"),
+      );
+      expect(caption).toHaveTextContent("Pinned table");
+    });
     it("renders div wrapper with class table-scrollable when isScrollable is passed", () => {
       const { container } = render(
         <Table headers={[]} rows={[]} isScrollable />,

package/src/components/index.ts

@@ -29,6 +29,7 @@ import { Controls } from "./Controls";
 import { Countdown, CountdownTag } from "./Countdown";
 import { Cover } from "./Cover";
 import { Divider } from "./Divider";
+import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from "./Drawer";
 import {
   Dropdown,
   DropdownDivider,
@@ -50,6 +51,8 @@ import {
   Message,
   Radio,
   RangeSlider,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   SelectionTile,
   TextArea,
@@ -89,6 +92,7 @@ import { Skeleton } from "./Skeleton";
 import { SkipLink } from "./SkipLink";
 import { SocialButton } from "./SocialButton";
 import { StarRating } from "./StarRating";
+import { StatusIndicator } from "./StatusIndicator";
 import { Stepbar } from "./Stepbar";
 import { Sticker } from "./Sticker";
 import { Table } from "./Table";
@@ -135,6 +139,10 @@ export {
   CountdownTag,
   Cover,
   Divider,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
   Dropdown,
   DropdownDivider,
   DropdownItem,
@@ -186,6 +194,8 @@ export {
   Radio,
   RangeSlider,
   Section,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   SelectionTile,
   Skeleton,
@@ -194,6 +204,7 @@ export {
   SpritePathContext,
   SpritePathProvider,
   StarRating,
+  StatusIndicator,
   Stepbar,
   Sticker,
   Tab,

package/src/styles/tokens/overlay.scss

@@ -0,0 +1,3 @@
+$background: color-mix(in srgb, var(--color-surface-contrast) 75%, transparent);
+
+$transition: 0.2s ease-out;

package/src/styles/typography/style.scss

@@ -1,7 +1,6 @@
 @use "../tools/generate";
 @use "config" as *;
 @use "mixins" as *;
-@use "sass:map" as sass-map;
 
 // Headings pre elementy h1, h2, h3 atď.
 @include headings-base($headings, "h$", $heading-base);
@@ -16,18 +15,6 @@
 @include body-text($body-text);
 @include readability();
 
-.caption {
-  @include generate.css-map(sass-map.get($caption, "default"));
-}
-
-.caption--small {
-  @include generate.css-map(sass-map.get($caption, "small"));
-}
-
-.caption--large {
-  @include generate.css-map(sass-map.get($caption, "large"));
-}
-
 ol,
 ul {
   @include list-base();

package/src/styles/utilities/border.scss

@@ -13,6 +13,10 @@
     }
   }
 
+  .border--dashed {
+    border-style: dashed;
+  }
+
   .border--gray {
     border-color: var(--color-border-subtle);
 

package/src/styles/utilities/border.styles.unit.test.jsx

@@ -0,0 +1,9 @@
+import * as sass from "sass";
+
+describe("Border utilities", () => {
+  it("changes the border style to dashed", () => {
+    const { css } = sass.compile("src/lib/style.scss");
+
+    expect(css).toMatch(/\.border--dashed \{\s+border-style: dashed;/);
+  });
+});

package/src/styles/utilities/text.scss

@@ -67,6 +67,18 @@
     );
   }
 
+  .caption {
+    @include generate.css-map(map.get(typographyConfig.$caption, "default"));
+  }
+
+  .caption--small {
+    @include generate.css-map(map.get(typographyConfig.$caption, "small"));
+  }
+
+  .caption--large {
+    @include generate.css-map(map.get(typographyConfig.$caption, "large"));
+  }
+
   .text-nowrap {
     white-space: nowrap !important;
   }

package/src/components/Alert/tests/Alert.visual.test.jsx

@@ -1,137 +0,0 @@
-import { beforeEach, describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Button } from "../../Button";
-import { Alert } from "../";
-
-describe("Alert visual regression", () => {
-  beforeEach(async () => {
-    await page.viewport(1280, 720);
-  });
-
-  test("Preview: title", async () => {
-    render(
-      <Alert data-testid="alert-title" title="Toto je jednoduchá sprava" />,
-    );
-
-    await expect(page.getByTestId("alert-title")).toMatchScreenshot(
-      "alert-preview-title",
-    );
-  });
-
-  test("Preview: title and description", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-description"
-        title="Dobre vediet!"
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-title-description")).toMatchScreenshot(
-      "alert-preview-title-description",
-    );
-  });
-
-  test("Preview: title and buttons", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-buttons"
-        title="Prosim prihlaste sa."
-        actionButtons={[
-          <Button key="login">Prihlasit sa</Button>,
-          <Button key="hide">Skryt</Button>,
-        ]}
-      />,
-    );
-
-    await expect(page.getByTestId("alert-title-buttons")).toMatchScreenshot(
-      "alert-preview-title-buttons",
-    );
-  });
-
-  test("Preview: title, description and buttons", async () => {
-    render(
-      <Alert
-        data-testid="alert-title-description-buttons"
-        title="Prihlasit sa je jednoduche a rozumne"
-        description="Napr. prihlaseni pouzivatelia vidia krajsie ceny."
-        actionButtons={<Button>Prihlasit sa</Button>}
-      />,
-    );
-
-    await expect(
-      page.getByTestId("alert-title-description-buttons"),
-    ).toMatchScreenshot("alert-preview-title-description-buttons");
-  });
-
-  test("Preview: success type", async () => {
-    render(
-      <Alert
-        data-testid="alert-success"
-        type="success"
-        title="Vyborne. Vsetko prebehlo rychlo a hladko"
-      />,
-    );
-
-    await expect(page.getByTestId("alert-success")).toMatchScreenshot(
-      "alert-preview-success",
-    );
-  });
-
-  test("Preview: warning type", async () => {
-    render(
-      <Alert
-        data-testid="alert-warning"
-        type="warning"
-        title="Na toto si daj pozor!"
-      />,
-    );
-
-    await expect(page.getByTestId("alert-warning")).toMatchScreenshot(
-      "alert-preview-warning",
-    );
-  });
-
-  test("Preview: danger type", async () => {
-    render(
-      <Alert data-testid="alert-danger" type="danger" title="Stala sa chyba" />,
-    );
-
-    await expect(page.getByTestId("alert-danger")).toMatchScreenshot(
-      "alert-preview-danger",
-    );
-  });
-
-  test("Preview: custom title renderer", async () => {
-    render(
-      <Alert
-        data-testid="alert-custom-title"
-        title="Prihlasit sa je jednoduche a rozumne"
-        renderTitle={(props) => (
-          <h3 className="alert__title mb-medium">{props.title}</h3>
-        )}
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-custom-title")).toMatchScreenshot(
-      "alert-preview-custom-title",
-    );
-  });
-
-  test("Preview: full width", async () => {
-    render(
-      <Alert
-        data-testid="alert-full-width"
-        isFullWidth
-        title="Dobre vediet!"
-        description="Popis toho co by bolo dobre vysvetlit. Aj na viac riadkov."
-      />,
-    );
-
-    await expect(page.getByTestId("alert-full-width")).toMatchScreenshot(
-      "alert-preview-full-width",
-    );
-  });
-});