@orangesk/orange-design-system 3.7.0 → 3.8.0

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/Carousel/CHANGELOG.md

@@ -1,11 +0,0 @@
-- **BREAKING**: Migrated `Carousel` component from Glider.js to Swiper.js library
-  - Replaced `@lighting-beetle/glider-js` dependency with `swiper`
-  - Updated `CarouselConfig` interface to extend `SwiperOptions` instead of Glider config
-  - Changed initialization from `new Glider()` to `new Swiper()` with required modules (Navigation, Pagination, Scrollbar, A11y)
-  - Updated prop name from `gliderOptions` to `swiperOptions` in React component
-  - Enhanced keyboard navigation support for pagination buttons (Arrow keys, Home/End, Tab navigation)
-  - Added tooltip position updates on slide changes for better tooltip integration
-  - Improved accessibility with proper ARIA attributes and Slovak language messages
-  - Updated slide classes from glider-specific to swiper-specific (`swiper-slide`, `swiper-wrapper`)
-  - Modified breakpoint configuration format to match Swiper's API
-  - Added automatic element detection and configuration for navigation, pagination, and scrollbar