@orangesk/orange-design-system 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -55,7 +55,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.2.9",
+    "@next/mdx": "16.2.10",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -67,11 +67,11 @@
     "html-react-parser": "6.1.3",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.2.9",
+    "next": "16.2.10",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
-    "query-string": "^9.4.0",
+    "query-string": "^9.4.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-element-to-jsx-string": "^17.0.1",
@@ -80,7 +80,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "12.2.0",
+    "swiper": "14.0.1",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -114,15 +114,15 @@
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/ui": "^4.1.9",
     "canvas": "^3.2.3",
-    "fs-extra": "^11.3.5",
+    "fs-extra": "^11.3.6",
     "glob": "13.0.6",
-    "html-validate": "11.5.3",
+    "html-validate": "11.5.4",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "29.1.1",
     "lint-staged": "17.0.8",
     "playwright": "^1.61.1",
-    "prettier": "^3.8.4",
+    "prettier": "^3.9.4",
     "rollup": "^4.62.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",

package/src/assets/icons/add.svg

@@ -1 +1,4 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M46.667 33.333h18A4.333 4.333 0 0 1 69 37.667V42a4.331 4.331 0 0 1-4.333 4.667h-18v18A4.333 4.333 0 0 1 42.333 69h-4.666a4.333 4.333 0 0 1-4.334-4.333v-18h-18A4.335 4.335 0 0 1 11 42v-4.333c0-2.334 2-4.334 4.334-4.334h18v-18c0-2.666 2-4.666 4.333-4.666h4.666a4.333 4.333 0 0 1 4.334 4.666v18Z" /></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M27 21H40V27H27V40H21V27H8V21H21V8H27V21Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/close.svg

@@ -1,5 +1,5 @@
-<svg width="80" height="80" viewBox="0 0 80 80"
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M59.9997 66.6666L33.333 39.9999L59.9997 13.3333L66.6663 19.9999L46.6663 39.9999L66.6663 59.9999L59.9997 66.6666Z" />
-  <path d="M19.9997 13.3333L46.6663 39.9999L19.9997 66.6666L13.333 59.9999L33.333 39.9999L13.333 19.9999L19.9997 13.3333Z" />
+  <path d="M36 40L20 24L36 8L40 12L28 24L40 36L36 40Z" fill="currentColor"/>
+  <path d="M12 8L28 24L12 40L8 36L20 24L8 12L12 8Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/menu.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewbox="0 0 80 80" ><path  d="M13.333 16.667h53.333v6.666H13.333v-6.666ZM13.333 36.667h53.333v6.666H13.333v-6.666ZM13.333 56.667h53.333v6.666H13.333v-6.666Z"/></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 8H42V13.9998H6V8ZM6 21H42V27H6V21ZM6 34.0002H42V40H6V34.0002Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/pause.svg

@@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M16.5 5.5L16.5 18.5H13.5L13.5 5.5L16.5 5.5Z" fill="currentColor"/>
-  <path d="M10.5 5.5L10.5 18.5H7.5L7.5 5.5L10.5 5.5Z" fill="currentColor"/>
+  <path d="M33 11L33 37H27L27 11L33 11Z" fill="currentColor"/>
+  <path d="M21 11L21 37H15L15 11L21 11Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/play.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M18.5 11.9997L8 18.0619L8 5.9375L18.5 11.9997Z" fill="currentColor"/>
+  <path d="M37 24.0003L16 36.1247L16 11.876L37 24.0003Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/remove.svg

@@ -1 +1,4 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M64.634 32.667H15.367C12.9 32.667 10.9 34.7 10.9 37.2v4.533c0 2.5 2 4.5 4.467 4.5h49.3c2.467 0 4.467-2 4.467-4.5V37.2c0-2.5-2-4.533-4.467-4.533h-.033Z" /></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 21H40V27H8V21Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/search.svg

@@ -1 +1,4 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M77.66 70.66 55.996 49A29.984 29.984 0 1 0 49 56l21.664 21.66a2.405 2.405 0 0 0 3.392 0l3.608-3.608c.447-.451.698-1.06.698-1.696 0-.635-.255-1.245-.702-1.696ZM31.584 51.976a20.39 20.39 0 1 1 0-40.78 20.39 20.39 0 0 1 0 40.78Z" /></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22 5C31.3888 5 39 12.6112 39 22C39 25.6106 37.8725 28.9569 35.9531 31.71L43.8496 39.6064L39.6064 43.8496L31.7109 35.9531C28.9578 37.8728 25.6109 39 22 39C12.6112 39 5 31.3888 5 22C5 12.6112 12.6112 5 22 5ZM22 11C15.9249 11 11 15.9249 11 22C11 28.0751 15.9249 33 22 33C28.0751 33 33 28.0751 33 22C33 15.9249 28.0751 11 22 11Z" fill="currentColor"/>
+</svg>

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

@@ -17,7 +17,11 @@
     [style*="--color-fill"],
     [style*="--color-surface"]
   ) {
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid var(--color-border-strong);
+  }
+
+  &.background-accent {
+    border: 1px solid var(--color-border-accent);
   }
 
   &.grid {

package/src/components/Carousel/Carousel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
 import { useStatic } from "@/utils/hooks";
 import { Icon } from "../Icon";
 import CarouselStatic from "./Carousel.static";
@@ -18,11 +18,15 @@ import {
   CLASS_VIEWPORT_WRAPPER,
 } from "./constants";
 
-interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+type CarouselRenderItem<T> = (item: T, index: number) => ReactNode;
+
+interface CarouselProps<T = ReactNode> extends HTMLAttributes<HTMLDivElement> {
   /** Swiper.js (https://swiperjs.com/) options object */
   swiperOptions?: Record<string, any>;
   /** Carousel items */
-  items: ReactNode[];
+  items: T[];
+  /** Render carousel item content */
+  renderItems?: CarouselRenderItem<T>;
   /** Always show scrollbar and hide dots */
   showScrollbar?: boolean;
   /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
@@ -30,23 +34,37 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-const Carousel: React.FC<CarouselProps> = ({
+const isCarouselItemElement = (
+  item: ReactNode,
+): item is ReactElement<React.ComponentProps<typeof CarouselItem>> =>
+  React.isValidElement(item) && item.type === CarouselItem;
+
+const Carousel = <T,>({
   className,
   swiperOptions,
   items,
+  renderItems,
   showScrollbar = false,
   bleedRight = false,
   ...other
-}) => {
+}: CarouselProps<T>) => {
   const [carouselRef] = useStatic(CarouselStatic);
   const { ["data-swiper-options"]: _dataSwiperOptionsAttr, ...domProps } =
     other as HTMLAttributes<HTMLDivElement> & {
       "data-swiper-options"?: string;
     };
 
-  const carouselItems = items.map((item, i) => (
-    <CarouselItem key={i.toString()}>{item}</CarouselItem>
-  ));
+  const carouselItems = items.map((item, i) => {
+    const content = renderItems ? renderItems(item, i) : (item as ReactNode);
+
+    if (isCarouselItemElement(content)) {
+      return React.cloneElement(content, {
+        key: content.key ?? i.toString(),
+      });
+    }
+
+    return <CarouselItem key={i.toString()}>{content}</CarouselItem>;
+  });
 
   const classes = cx(CLASS_ROOT, className, {
     [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
@@ -113,4 +131,5 @@ const Carousel: React.FC<CarouselProps> = ({
 
 Carousel.displayName = "Carousel";
 
+export type { CarouselProps };
 export { Carousel };

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

@@ -1,6 +1,7 @@
 import { render } from "@testing-library/react";
 
 import { Carousel } from "../Carousel";
+import { CarouselItem } from "../CarouselItem";
 
 //items is required
 describe("rendering Carousel", () => {
@@ -137,6 +138,34 @@ describe("rendering Carousel", () => {
         expect(slides[i].querySelector("p").textContent).toBe(`item${i + 1}`);
       }
     });
+    it("uses renderItems callback when provided", () => {
+      const data = [{ title: "item1" }, { title: "item2" }, { title: "item3" }];
+      const { container } = render(
+        <Carousel
+          items={data}
+          renderItems={(item, index) => <p>{`${index + 1}-${item.title}`}</p>}
+        />,
+      );
+      const slides = container.getElementsByClassName("carousel__slide");
+      for (let i = 0; i < data.length; i++) {
+        expect(slides[i].querySelector("p").textContent).toBe(
+          `${i + 1}-${data[i].title}`,
+        );
+      }
+    });
+    it("does not double-wrap CarouselItem elements", () => {
+      const items = [
+        <CarouselItem key="item1" data-testid="slide-1">
+          item1
+        </CarouselItem>,
+      ];
+      const { container, getByTestId } = render(<Carousel items={items} />);
+
+      expect(container.getElementsByClassName("carousel__slide").length).toBe(
+        1,
+      );
+      expect(getByTestId("slide-1").textContent).toBe("item1");
+    });
   });
   describe("swiperOptions prop", () => {
     const items = [

package/src/components/Forms/Autocomplete/styles/mixins.scss

@@ -7,7 +7,7 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 1000;
+  z-index: 1;
   float: left;
   width: 100%;
   max-height: $height;
@@ -56,7 +56,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: 1001;
+    z-index: 2;
   }
 
   &:first-child {
@@ -73,6 +73,7 @@
 
 @mixin wrapper {
   position: relative;
+  isolation: isolate;
   width: 100%;
   max-width: convert.to-rem(350px);
 }

package/src/components/Forms/Autocomplete/tests/Autocomplete.styles.unit.test.jsx

@@ -0,0 +1,20 @@
+import path from "path";
+import sass from "sass";
+
+describe("Autocomplete styles", () => {
+  it("keeps autocomplete menu inside local stacking context", () => {
+    const result = sass.compile(
+      path.resolve(
+        process.cwd(),
+        "src/components/Forms/Autocomplete/styles/style.scss",
+      ),
+    );
+
+    expect(result.css).toContain(".autocomplete__wrapper");
+    expect(result.css).toContain("isolation: isolate;");
+    expect(result.css).toContain(".autocomplete__menu");
+    expect(result.css).toContain("z-index: 1;");
+    expect(result.css).toContain(".autocomplete__option::before");
+    expect(result.css).toContain("z-index: 2;");
+  });
+});

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

@@ -18,7 +18,7 @@ $color-palette: (
   ),
 
   gray: (
-    background-color: var(--color-surface-subtle),
+    background-color: var(--color-background-secondary),
     border-color: var(--color-border-strong),
   ),
 );

package/src/components/index.ts

@@ -19,7 +19,7 @@ import {
 } from "./Button";
 import { Buttons } from "./Buttons";
 import { Card, CardProductHeader, CardSection } from "./Card";
-import { Carousel } from "./Carousel";
+import { Carousel, CarouselItem } from "./Carousel";
 import { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
@@ -121,6 +121,7 @@ export {
   Carousel,
   CarouselHero,
   CarouselHeroItem,
+  CarouselItem,
   CarouselPromotions,
   CartTable,
   Checkbox,

package/src/styles/typography/mixins.scss

@@ -19,6 +19,10 @@
   max-width: none;
 }
 
+@mixin text-relaxed {
+  max-inline-size: clamp(40rem, 75vw, 70rem);
+}
+
 @mixin headings-base($heading-config, $selector-pattern, $base-styles) {
   $selector: ();
 

package/src/styles/utilities/text.scss

@@ -152,4 +152,7 @@
   .text-narrow {
     @include typographyMixins.text-narrow;
   }
+  .text-relaxed {
+    @include typographyMixins.text-relaxed;
+  }
 }