@orangesk/orange-design-system 3.6.2 → 3.8.0

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

@@ -4,6 +4,38 @@ import "@testing-library/jest-dom/vitest";
 import { Megamenu, MegamenuBlog } from "../";
 
 describe("Megamenu logo markup", () => {
+  it("separates top links from the language switcher without a spacer item", () => {
+    const { container } = render(<Megamenu notSticky />);
+    const topContent = container.querySelector(".megamenu__top-content");
+    const lists = topContent?.querySelectorAll(":scope > ul");
+
+    expect(lists).toHaveLength(2);
+    expect(lists?.[1]).toHaveAttribute("aria-label", "Výber jazyka");
+    expect(
+      topContent?.querySelector(".megamenu__nav-spacer"),
+    ).not.toBeInTheDocument();
+    expect(
+      topContent?.querySelector(".megamenu__nav-item--push"),
+    ).toHaveTextContent("Velké firmy");
+  });
+
+  it("pushes mobile utility controls after the main logo", () => {
+    const { container, rerender } = render(<Megamenu notSticky />);
+    const mainLogoItem = container.querySelector(
+      ".megamenu__main .megamenu__nav-item--main:first-child",
+    );
+
+    expect(mainLogoItem).toHaveClass("megamenu__nav-item--push");
+
+    rerender(<MegamenuBlog notSticky />);
+
+    expect(
+      container.querySelector(
+        ".megamenu__main .megamenu__nav-item--main:first-child",
+      ),
+    ).toHaveClass("megamenu__nav-item--push");
+  });
+
   it("is sticky by default and supports disabling stickiness", () => {
     const { container, rerender } = render(<Megamenu />);
     const nav = container.querySelector("[data-megamenu]");

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

@@ -1,10 +1,11 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/color";
+@use "../../../styles/tokens/overlay";
 @use "../../../styles/tools/convert";
 
-$overlay-bg-color: rgba(0, 0, 0, 0.4) !default;
+$overlay-bg-color: overlay.$background !default;
 $overlay-z-index: 500 !default;
-$overlay-e: 0.4s ease 0s !default;
+$overlay-e: overlay.$transition !default;
 
 $overlay: (
   background-color: $overlay-bg-color,

package/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,29 @@
+import cx from "classnames";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
+
+export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+  type: "success" | "warning" | "danger";
+}
+
+const CLASS_ROOT = "status-indicator";
+
+const StatusIndicator: React.FC<StatusIndicatorProps> = ({
+  children,
+  className,
+  type,
+  ...other
+}) => (
+  <span
+    className={cx(CLASS_ROOT, `${CLASS_ROOT}--${type}`, className)}
+    {...other}
+  >
+    <span className={`${CLASS_ROOT}__marker`} aria-hidden="true" />
+    <span className={`${CLASS_ROOT}__content`}>{children}</span>
+  </span>
+);
+
+StatusIndicator.displayName = "StatusIndicator";
+
+export { StatusIndicator };

package/src/components/StatusIndicator/index.ts

@@ -0,0 +1,2 @@
+export type { StatusIndicatorProps } from "./StatusIndicator";
+export { StatusIndicator } from "./StatusIndicator";

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

@@ -0,0 +1,12 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$base: (
+  column-gap: space.get("xsmall"),
+);
+
+$marker: (
+  width: convert.to-rem(12px),
+  height: convert.to-rem(12px),
+  margin-top: convert.to-rem(3px),
+);

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

@@ -0,0 +1,36 @@
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/config" as typography;
+@use "./config";
+
+@mixin base($config: config.$base) {
+  display: inline-flex;
+  align-items: flex-start;
+
+  @include generate.css-map($config);
+  @include generate.css-map(typography.$caption, "default");
+}
+
+@mixin marker($config: config.$marker) {
+  flex: 0 0 auto;
+  border-radius: 50%;
+
+  @include generate.css-map($config);
+}
+
+@mixin content() {
+  min-width: 0;
+}
+
+@mixin marker-types() {
+  .status-indicator--success & {
+    background-color: var(--color-icon-positive);
+  }
+
+  .status-indicator--warning & {
+    background-color: var(--color-icon-warning);
+  }
+
+  .status-indicator--danger & {
+    background-color: var(--color-icon-negative);
+  }
+}

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

@@ -0,0 +1,16 @@
+@use "./mixins";
+
+@layer components {
+  .status-indicator {
+    @include mixins.base();
+
+    &__marker {
+      @include mixins.marker();
+      @include mixins.marker-types();
+    }
+
+    &__content {
+      @include mixins.content();
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { StatusIndicator } from "../";
+
+const example = (
+  <>
+    <StatusIndicator type="success">Available</StatusIndicator>
+    <StatusIndicator type="warning">Limited availability</StatusIndicator>
+    <StatusIndicator type="danger">Unavailable</StatusIndicator>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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,7 +51,10 @@ import {
   Message,
   Radio,
   RangeSlider,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
+  SelectionTile,
   TextArea,
   TextInput,
 } from "./Forms";
@@ -88,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";
@@ -134,6 +139,10 @@ export {
   CountdownTag,
   Cover,
   Divider,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
   Dropdown,
   DropdownDivider,
   DropdownItem,
@@ -185,13 +194,17 @@ export {
   Radio,
   RangeSlider,
   Section,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
+  SelectionTile,
   Skeleton,
   SkipLink,
   SocialButton,
   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;