@orangesk/orange-design-system 3.7.0 → 3.8.0

package/src/components/Forms/SegmentedControl/styles/style.scss

@@ -0,0 +1,35 @@
+@use "./mixins";
+
+@layer components {
+  .segmented-control {
+    @include mixins.base;
+
+    &__item {
+      @include mixins.item;
+
+      &:first-child {
+        @include mixins.first-item;
+      }
+
+      & + & {
+        @include mixins.adjacent-item;
+      }
+
+      &:last-child {
+        @include mixins.last-item;
+      }
+
+      &:has(:checked) {
+        @include mixins.selected;
+      }
+
+      &:has(:disabled) {
+        @include mixins.disabled;
+      }
+
+      .segmented-control--invalid &:has(input) {
+        @include mixins.invalid;
+      }
+    }
+  }
+}

package/src/components/Forms/SegmentedControl/tests/SegmentedControl.conformance.test.jsx

@@ -0,0 +1,36 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { Fieldset } from "../../Fieldset";
+import { Message } from "../../Message";
+import { SegmentedControl, SegmentedControlItem } from "..";
+
+it("is accessible as a labelled radio group with feedback", async () => {
+  const { container } = render(
+    <Fieldset legend="Payment method">
+      <SegmentedControl
+        name="payment-method"
+        isInvalid
+        aria-describedby="payment-method-error"
+      >
+        <SegmentedControlItem id="payment-card" value="card">
+          Card
+        </SegmentedControlItem>
+        <SegmentedControlItem id="payment-cash" value="cash">
+          Cash
+        </SegmentedControlItem>
+      </SegmentedControl>
+      <Message id="payment-method-error" type="error">
+        Choose a payment method.
+      </Message>
+    </Fieldset>,
+  );
+
+  expect(container).toHTMLValidate({
+    rules: {
+      "element-permitted-content": "off",
+      "no-redundant-for": "off",
+    },
+  });
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Forms/SegmentedControl/tests/SegmentedControl.unit.test.jsx

@@ -0,0 +1,125 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Fieldset } from "../../Fieldset";
+import { SegmentedControl, SegmentedControlItem } from "..";
+
+describe("SegmentedControl", () => {
+  it("renders any number of choices as one native radio group", () => {
+    render(
+      <Fieldset legend="Number type">
+        <SegmentedControl name="numberType">
+          <SegmentedControlItem id="number-new" value="new">
+            New number
+          </SegmentedControlItem>
+          <SegmentedControlItem id="number-existing" value="existing">
+            Existing number
+          </SegmentedControlItem>
+          <SegmentedControlItem id="number-transfer" value="transfer">
+            Transfer number
+          </SegmentedControlItem>
+        </SegmentedControl>
+      </Fieldset>,
+    );
+
+    const choices = screen.getAllByRole("radio");
+
+    expect(screen.getByRole("group", { name: "Number type" })).toContainElement(
+      choices[0],
+    );
+    expect(choices).toHaveLength(3);
+    expect(choices.map((choice) => choice.name)).toEqual([
+      "numberType",
+      "numberType",
+      "numberType",
+    ]);
+  });
+
+  it("selects an option through its label and preserves radio exclusivity", () => {
+    render(
+      <SegmentedControl name="delivery">
+        <SegmentedControlItem id="delivery-email" value="email">
+          Email
+        </SegmentedControlItem>
+        <SegmentedControlItem id="delivery-sms" value="sms">
+          SMS
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    const email = screen.getByRole("radio", { name: "Email" });
+    const sms = screen.getByRole("radio", { name: "SMS" });
+
+    fireEvent.click(screen.getByText("Email"));
+    expect(email).toBeChecked();
+
+    fireEvent.click(screen.getByText("SMS"));
+    expect(email).not.toBeChecked();
+    expect(sms).toBeChecked();
+  });
+
+  it("forwards native radio states and attributes", () => {
+    render(
+      <SegmentedControl name="plan" className="custom-control">
+        <SegmentedControlItem
+          id="plan-standard"
+          value="standard"
+          isChecked
+          isDisabled
+          inputProps={{ "aria-describedby": "plan-hint" }}
+          className="custom-item"
+        >
+          Standard
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    const choice = screen.getByRole("radio", { name: "Standard" });
+
+    expect(choice).toBeChecked();
+    expect(choice).toBeDisabled();
+    expect(choice).toHaveAttribute("value", "standard");
+    expect(choice).toHaveAttribute("aria-describedby", "plan-hint");
+    expect(choice.closest(".segmented-control")).toHaveClass("custom-control");
+    expect(choice.closest(".segmented-control__item")).toHaveClass(
+      "custom-item",
+    );
+  });
+
+  it("marks the whole radio group as invalid", () => {
+    render(
+      <SegmentedControl name="payment" isInvalid data-testid="payment-method">
+        <SegmentedControlItem id="payment-card" value="card" isChecked>
+          Card
+        </SegmentedControlItem>
+        <SegmentedControlItem id="payment-cash" value="cash">
+          Cash
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    expect(screen.getByTestId("payment-method")).toHaveClass(
+      "segmented-control--invalid",
+    );
+    for (const choice of screen.getAllByRole("radio")) {
+      expect(choice).toHaveAttribute("aria-invalid", "true");
+      expect(choice).toHaveClass("is-invalid");
+    }
+  });
+
+  it("associates group feedback with every radio", () => {
+    render(
+      <SegmentedControl name="contact" aria-describedby="contact-error">
+        <SegmentedControlItem id="contact-email" value="email">
+          Email
+        </SegmentedControlItem>
+        <SegmentedControlItem id="contact-phone" value="phone">
+          Phone
+        </SegmentedControlItem>
+      </SegmentedControl>,
+    );
+
+    for (const choice of screen.getAllByRole("radio")) {
+      expect(choice).toHaveAttribute("aria-describedby", "contact-error");
+    }
+  });
+});

package/src/components/Forms/index.ts

@@ -11,6 +11,7 @@ export { Label } from "./Label";
 export { Message } from "./Message";
 export { Radio } from "./Radio";
 export { RangeSlider } from "./RangeSlider";
+export { SegmentedControl, SegmentedControlItem } from "./SegmentedControl";
 export { Select } from "./Select";
 export { SelectionTile } from "./SelectionTile";
 export { TextArea } from "./TextArea";

package/src/components/Icon/index.ts

@@ -1,3 +1,4 @@
+export type { IconColor } from "./Icon";
 export { Icon } from "./Icon";
 export { Pictogram } from "./Pictogram";
 export { SpritePathContext, SpritePathProvider } from "./SpritePathContext";

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

@@ -17,6 +17,7 @@
 @use "../../Button/styles/mixins" as button;
 @use "../../Card/styles/mixins" as card;
 @use "../../../styles/typography/mixins" as typography;
+@use "../../../styles/tokens/overlay";
 
 @use "./config";
 
@@ -652,10 +653,16 @@
 
 @mixin subnav-item {
   display: flex;
-  gap: convert.to-rem(10px);
+  column-gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
+  > #{config.$class-root}__tag {
+    align-self: flex-start;
+  }
+
   a {
+    min-width: 0;
+
     &:hover,
     &:focus,
     &:focus-visible,
@@ -715,13 +722,9 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: color-mix(
-      in srgb,
-      var(--color-surface-contrast) 75%,
-      transparent
-    );
+    background-color: overlay.$background;
     opacity: 0;
-    transition: opacity 0.2s ease-out;
+    transition: opacity overlay.$transition;
   }
 
   &.is-active {
@@ -1135,11 +1138,7 @@
   left: 0;
   width: 100%;
   height: 0;
-  background-color: color-mix(
-    in srgb,
-    var(--color-surface-contrast) 75%,
-    transparent
-  );
+  background-color: overlay.$background;
   border: none;
   appearance: none;
   -webkit-appearance: none;
@@ -1148,8 +1147,8 @@
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 0.15s ease-out,
-    visibility 0.15s ease-out;
+    opacity overlay.$transition,
+    visibility overlay.$transition;
   outline: none;
 
   &.is-active {
@@ -1327,6 +1326,8 @@
 
 @mixin tag {
   @include tag.base;
+  flex: 0 0 auto;
+  white-space: nowrap;
   text-decoration: none !important;
 
   @each $name, $props in tagConfig.$sizes {

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;