@orangesk/orange-design-system 2.0.0-beta.43 → 2.0.0-beta.45

package/src/components/Carousel/tests/Carousel.static.test.jsx

@@ -124,6 +124,12 @@ describe("Carousel Static - External Controls", () => {
   });
 
   describe("External Controls Initialization", () => {
+    it("should disable a11y scrollOnFocus to prevent focus-triggered slide jumps", () => {
+      const swiperConfig = Swiper.mock.calls[0]?.[1];
+
+      expect(swiperConfig?.a11y?.scrollOnFocus).toBe(false);
+    });
+
     it("should find and initialize external controls", () => {
       const prevButton = document.getElementById("prev-btn");
       const nextButton = document.getElementById("next-btn");
@@ -691,7 +697,76 @@ describe("Carousel Static - Auto-Disable Feature", () => {
       });
     });
 
-    it("should use right inset for bleed-right trailing offset", () => {
+    it("should disable bleed-right when slides fit wrapper despite right inset", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1200,
+      });
+
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      document.body.innerHTML = `
+        <div class="carousel carousel--bleed-right" data-carousel-id="test-carousel" id="test-carousel">
+          <div class="carousel__viewport-wrapper">
+            <div class="carousel__viewport">
+              <div class="carousel__track">
+                <div class="carousel__slide">Slide 1</div>
+                <div class="carousel__slide">Slide 2</div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel__pagination"></div>
+        </div>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+      const viewportWrapper = carouselElement.querySelector(
+        ".carousel__viewport-wrapper",
+      );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 1000,
+          bottom: 200,
+          left: 100,
+          width: 900,
+          height: 200,
+          x: 100,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(0);
+      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(0);
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
+
+    it("should keep wrapper-based bleed geometry without offsets", () => {
       const originalInnerWidth = window.innerWidth;
       Object.defineProperty(window, "innerWidth", {
         configurable: true,
@@ -726,6 +801,16 @@ describe("Carousel Static - Auto-Disable Feature", () => {
       const viewportWrapper = carouselElement.querySelector(
         ".carousel__viewport-wrapper",
       );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 800,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 1200,
+      });
 
       Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
         configurable: true,
@@ -744,16 +829,17 @@ describe("Carousel Static - Auto-Disable Feature", () => {
 
       carouselInstance = new Carousel(carouselElement);
 
-      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(120);
-      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(80);
+      expect(mockSwiperInstance.params.slidesOffsetBefore).toBe(0);
+      expect(mockSwiperInstance.params.slidesOffsetAfter).toBe(0);
+      expect(mockSwiperInstance.params.width).toBe(800);
       expect(
         carouselElement.style.getPropertyValue(
           "--carousel-bleed-viewport-width",
         ),
-      ).toBe("1000px");
+      ).toBe("880px");
       expect(
         carouselElement.style.getPropertyValue("--carousel-bleed-margin-left"),
-      ).toBe("-120px");
+      ).toBe("120px");
 
       Object.defineProperty(window, "innerWidth", {
         configurable: true,
@@ -761,5 +847,92 @@ describe("Carousel Static - Auto-Disable Feature", () => {
         value: originalInnerWidth,
       });
     });
+
+    it("should calculate bleed-right scrollbar drag from logical viewport, not shell width", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.slides.forEach((slide) => {
+        Object.defineProperty(slide, "offsetWidth", {
+          configurable: true,
+          value: 300,
+        });
+      });
+
+      mockSwiperInstance.params.slidesPerView = 1.2;
+      mockSwiperInstance.params.spaceBetween = 0;
+      mockSwiperInstance.width = 800;
+      mockSwiperInstance.progress = 0.5;
+      mockSwiperInstance.minTranslate = vi.fn(() => -300);
+      mockSwiperInstance.maxTranslate = vi.fn(() => 0);
+
+      const scrollbarEl = document.createElement("div");
+      const dragEl = document.createElement("div");
+      Object.defineProperty(scrollbarEl, "offsetWidth", {
+        configurable: true,
+        value: 200,
+      });
+
+      mockSwiperInstance.scrollbar = {
+        updateSize: vi.fn(),
+        el: scrollbarEl,
+        dragEl,
+      };
+
+      document.body.innerHTML = `
+        <div class="carousel carousel--bleed-right" data-carousel-id="test-carousel" id="test-carousel">
+          <div class="carousel__viewport-wrapper">
+            <div class="carousel__viewport">
+              <div class="carousel__track">
+                <div class="carousel__slide">Slide 1</div>
+                <div class="carousel__slide">Slide 2</div>
+                <div class="carousel__slide">Slide 3</div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel__pagination"></div>
+        </div>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+      const viewportWrapper = carouselElement.querySelector(
+        ".carousel__viewport-wrapper",
+      );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(carouselElement, "clientWidth", {
+        configurable: true,
+        value: 800,
+      });
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 1000,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 900,
+      });
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 1120,
+          bottom: 200,
+          left: 120,
+          width: 1000,
+          height: 200,
+          x: 120,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // Regression: drag must not become full width just because shell wrapper is wider than logical viewport.
+      expect(dragEl.style.width).not.toBe("200px");
+    });
   });
 });

package/src/components/Expander/Expander.tsx

@@ -25,6 +25,8 @@ interface ExpanderProps {
   children?: React.ReactNode;
   /** Expander takes full width of its container */
   isFullWidth?: boolean;
+  /** Position of trigger relative to content when opened */
+  placement?: "top" | "bottom";
   /** Group identifier for syncing multiple expanders together */
   toggleGroup?: string;
   /** Initial open state */
@@ -40,6 +42,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     renderSummary,
     renderSummaryOpened,
     isFullWidth,
+    placement = "bottom",
     toggleGroup,
     ...other
   } = props;
@@ -49,6 +52,7 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--fullwidth`]: isFullWidth,
+      [`${CLASS_ROOT}--placement-top`]: placement === "top",
     },
     className,
   );

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

@@ -51,6 +51,18 @@
       }
     }
 
+    &--placement-top {
+      &[open] {
+        display: flex;
+        flex-direction: column-reverse;
+
+        summary {
+          margin-top: space.get("large");
+          margin-bottom: 0;
+        }
+      }
+    }
+
     &[open] {
       svg[data-summary-icon] {
         transform: rotate(180deg) !important;

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

@@ -47,6 +47,10 @@ const example = (
     >
       Content
     </Expander>
+
+    <Expander summary="Open above trigger" placement="top">
+      Content
+    </Expander>
   </>
 );
 

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

@@ -184,4 +184,13 @@ describe("Expander", () => {
     );
     expect(getByTestId("test-id")).toHaveClass("expander--fullwidth");
   });
+
+  it("applies placement-top class when placement prop is top", () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details" placement="top">
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("expander--placement-top");
+  });
 });

package/src/components/Grid/Grid.tsx

@@ -5,17 +5,20 @@ import { genResponsiveClasses } from "../../utils";
 export type GridVAlign = "stretch" | "start" | "end" | "center";
 export type GridHAlign = "end" | "center" | "space-around" | "space-between";
 export type GridRowGapSize =
+  | "none"
+  | "xsmall"
   | "small"
   | "medium"
   | "large"
   | "xlarge"
-  | Record<string, "small" | "medium" | "large" | "xlarge">;
+  | Record<string, "none" | "xsmall" | "small" | "medium" | "large" | "xlarge">;
 export type GridColumnGapSize =
   | "none"
   | "small"
   | "default"
   | "large"
-  | Record<string, "none" | "small" | "default" | "large">;
+  | "xlarge"
+  | Record<string, "none" | "small" | "default" | "large" | "xlarge">;
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;

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

@@ -2,12 +2,13 @@
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ("small", "medium", "large", "xlarge");
-$grid-column-gap-sizes: ("none", "small", "default", "large");
+$grid-row-gap-sizes: ("none", "xsmall", "small", "medium", "large", "xlarge");
+$grid-column-gap-sizes: ("none", "small", "default", "large", "xlarge");
 
 $column-gap: (
   none: 0,
   small: space.get("xsmall"),
   default: space.get("small"),
   large: space.get("medium"),
+  xlarge: space.get("large"),
 );

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

@@ -52,16 +52,20 @@ describe("Grid", () => {
     expect(getByTestId("test-id")).toHaveClass("grid--justify-height");
   });
 
-  ["medium", "large", "xlarge"].forEach((rowGapSize) => {
-    it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
-      const { getByTestId } = render(
-        <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
-      );
-      expect(getByTestId("test-id")).toHaveClass(`grid-row-gap--${rowGapSize}`);
-    });
-  });
-
-  ["small", "large", "none"].forEach((columnGapSize) => {
+  ["none", "xsmall", "small", "medium", "large", "xlarge"].forEach(
+    (rowGapSize) => {
+      it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
+        const { getByTestId } = render(
+          <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(
+          `grid-row-gap--${rowGapSize}`,
+        );
+      });
+    },
+  );
+
+  ["small", "large", "xlarge", "none"].forEach((columnGapSize) => {
     it(`applies grid-column-gap--${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
       const { getByTestId } = render(
         <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
@@ -72,6 +76,32 @@ describe("Grid", () => {
     });
   });
 
+  it("applies responsive row gap classes when rowGapSize is object", () => {
+    const { getByTestId } = render(
+      <Grid
+        data-testid="test-id"
+        rowGapSize={{ xs: "medium", md: "xlarge" }}
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "grid-row-gap--medium",
+      "grid-row-gap--md-xlarge",
+    );
+  });
+
+  it("applies responsive column gap classes when columnGapSize is object", () => {
+    const { getByTestId } = render(
+      <Grid
+        data-testid="test-id"
+        columnGapSize={{ xs: "small", lg: "xlarge" }}
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass(
+      "grid-column-gap--small",
+      "grid-column-gap--lg-xlarge",
+    );
+  });
+
   it("merges additional className", () => {
     const { getByTestId } = render(
       <Grid data-testid="test-id" className="test-class" />,

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

@@ -15,18 +15,21 @@ $sizes: (
     font-size: convert.to-rem(14px) "!important",
     line-height: 1rem "!important",
     font-weight: 700,
+    border-width: 1px,
   ),
   small: (
     padding: convert.to-rem(2px) convert.to-rem(8px),
     font-size: convert.to-rem(12px) "!important",
     line-height: convert.to-rem(14px) "!important",
     font-weight: 400,
+    border-width: 2px,
   ),
   large: (
     padding: convert.to-rem(11px) convert.to-rem(15px),
     font-size: convert.to-rem(16px) "!important",
     line-height: convert.to-rem(18px) "!important",
     font-weight: 700,
+    border-width: 2px,
   ),
 );
 
@@ -83,7 +86,8 @@ $colors: (
   "transparent": (
     background-color: transparent,
     color: var(--color-text-default),
-    border: 1px solid var(--color-border-strong),
+    border-color: var(--color-border-strong),
+    border-style: solid,
   ),
 );
 

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

@@ -19,7 +19,8 @@
 }
 
 @mixin color-transparent() {
-  border: 1px solid var(--color-border-strong);
+  border-color: var(--color-border-strong);
+  border-style: solid;
 }
 
 @mixin buttton-disabled($is-icon: false) {

package/src/styles/base/globals.scss

@@ -31,6 +31,7 @@ html,
 body {
   padding: 0;
   margin: 0;
+  -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }
 

package/src/styles/export/base.js

@@ -2,7 +2,7 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "font-family": "OrangeSK Neue, Arial, Helvetica Neue, sans-serif",
+  "font-family": "OrangeSK Neue, Helvetica Neue, Helvetica, Arial, sans-serif",
   "font-size": "16px",
   "line-height": "1.25",
   "background": "var(--color-background-primary)",

package/src/styles/tokens/base.scss

@@ -1,7 +1,7 @@
 @use "sass:color" as sasscolor;
 @use "./color";
 
-$font-family: "OrangeSK Neue", Arial, "Helvetica Neue", sans-serif;
+$font-family: "OrangeSK Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-size: 16px;
 $line-height: 1.25;