@orangesk/orange-design-system 3.6.0 → 3.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -27,7 +27,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.3.2",
+    "@next/mdx": "16.3.4",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -39,11 +39,11 @@
     "html-react-parser": "6.1.7",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.3.2",
+    "next": "16.3.4",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
-    "query-string": "^9.5.0",
+    "query-string": "^9.5.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-element-to-jsx-string": "^17.0.1",
@@ -52,7 +52,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "14.1.0",
+    "swiper": "14.2.0",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -71,16 +71,16 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.62.4",
+    "@rollup/rollup-darwin-arm64": "^4.63.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "7.0.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.5",
-    "@types/node": "26.2.0",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "26.4.1",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.5",
     "@types/wnumb": "^1.2.3",
-    "@vitejs/plugin-react": "6.0.5",
+    "@vitejs/plugin-react": "6.1.1",
     "@vitest/browser": "^4.1.11",
     "@vitest/browser-playwright": "^4.1.11",
     "@vitest/coverage-v8": "^4.1.11",
@@ -88,18 +88,18 @@
     "canvas": "^3.2.3",
     "fs-extra": "^11.4.0",
     "glob": "13.0.6",
-    "html-validate": "11.8.0",
+    "html-validate": "11.12.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "30.0.1",
-    "lint-staged": "17.3.0",
+    "lint-staged": "17.4.1",
     "playwright": "^1.62.1",
     "prettier": "^3.9.6",
-    "rollup": "^4.62.4",
+    "rollup": "^4.63.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.5.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.102.0",
+    "sass": "^1.103.1",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
     "vitest": "^4.1.11",
@@ -113,11 +113,12 @@
   "scripts": {
     "dev": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next dev",
     "build": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next build && npm run sprite",
-    "build:bundle": "pnpm run build:scss-exports && pnpm exec rollup -c && pnpm run build:megamenu && pnpm run build:footer",
+    "build:bundle": "pnpm run build:scss-exports && pnpm exec rollup -c && pnpm run build:megamenu && pnpm run build:footer && pnpm run verify:production-bundle",
     "build:preview-iframe": "node scripts/build-preview-iframe-bundle.mjs",
     "build:megamenu": "pnpm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs",
     "dev:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs --watch",
     "build:footer": "pnpm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs",
+    "verify:production-bundle": "node scripts/verify-production-bundle.mjs",
     "dev:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs --watch",
     "build:scss-exports": "node scripts/build-scss-exports.js",
     "build:search-index": "node scripts/mdx-search-index.js",

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

@@ -28,6 +28,14 @@
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
+
+  @include breakpoint.get("sm", "down") {
+    &:not(.body-banner--large) {
+      .body-banner__button .btn {
+        width: 100%;
+      }
+    }
+  }
 }
 
 @mixin content {
@@ -46,7 +54,7 @@
   width: 100%;
   display: flex;
   padding: space.get("large");
-  gap: convert.to-rem(60px);
+  gap: convert.to-rem(30px);
 
   > div:not(.body-banner__button) {
     flex: 1;
@@ -72,6 +80,10 @@
   padding: 0 !important;
   flex-shrink: 0;
 
+  @include breakpoint.get("sm", "down") {
+    width: 100%;
+  }
+
   img,
   svg {
     max-height: convert.to-rem(120px);
@@ -79,7 +91,9 @@
     margin: space.get("large") 0 space.get("large") space.get("large") !important;
 
     @include breakpoint.get("sm", "down") {
-      margin: convert.to-rem(15px) 0 convert.to-rem(15px) convert.to-rem(15px) !important;
+      width: calc(100% - #{convert.to-rem(30px)});
+      max-height: none;
+      margin: convert.to-rem(15px) !important;
     }
   }
 }
@@ -102,18 +116,20 @@
   }
 
   .body-banner__image {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+
     > * {
       width: fit-content;
       max-width: 100%;
-      height: 100%;
+      height: auto;
     }
 
     img {
       width: 100%;
-      height: 100%;
+      height: auto;
       max-height: none;
-      object-fit: cover;
-      object-position: center;
       margin: 0 !important;
       display: block;
     }

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

@@ -14,7 +14,10 @@ const example = (
       size="large"
       buttonText="Get Started"
       image={
-        <img src="https://picsum.photos/seed/test/640/380" alt="Large banner" />
+        <img
+          src="https://placehold.co/640x480?text=Large+banner"
+          alt="Large banner"
+        />
       }
     >
       <h3>Large Banner Example</h3>
@@ -27,7 +30,7 @@ const example = (
       buttonText="Discover"
       image={
         <img
-          src="https://picsum.photos/seed/test2/640/380"
+          src="https://placehold.co/640x480?text=Accent+banner"
           alt="Accent banner"
         />
       }
@@ -42,7 +45,7 @@ const example = (
       buttonText="Explore"
       image={
         <img
-          src="https://picsum.photos/seed/test3/640/380"
+          src="https://placehold.co/640x480?text=Subtle+banner"
           alt="Subtle banner"
         />
       }
@@ -62,7 +65,7 @@ const example = (
       buttonText="Start Now"
       image={
         <img
-          src="https://picsum.photos/seed/test4/640/380"
+          src="https://placehold.co/640x480?text=Primary+banner"
           alt="Primary banner"
         />
       }

package/src/components/Countdown/Countdown.shared.ts

@@ -106,6 +106,7 @@ export abstract class BaseCountdownStatic {
   observer?: IntersectionObserver;
   private instanceKey: string;
   private defaultConfig: CountdownConfig;
+  private configOverrides: Partial<CountdownConfig>;
 
   constructor(
     element: HTMLElement,
@@ -118,6 +119,7 @@ export abstract class BaseCountdownStatic {
     this.element = element;
     this.defaultConfig = options.defaultConfig;
     this.instanceKey = options.instanceKey;
+    this.configOverrides = { ...(config ?? {}) };
     this.config = { ...options.defaultConfig, ...(config ?? {}) };
     this.liveRegion = null;
 
@@ -183,7 +185,7 @@ export abstract class BaseCountdownStatic {
     this.config = {
       ...this.defaultConfig,
       ...elementConfig,
-      ...this.config,
+      ...this.configOverrides,
     };
 
     this.liveRegion = this.getLiveRegion();
@@ -208,8 +210,8 @@ export abstract class BaseCountdownStatic {
     this.stop();
     this.observer?.disconnect();
     this.destroyElements();
-    this.config = {
-      ...this.config,
+    this.configOverrides = {
+      ...this.configOverrides,
       ...(config ?? {}),
     };
     this.init();

package/src/components/Countdown/Countdown.static.ts

@@ -123,7 +123,7 @@ export default class CountdownStatic extends BaseCountdownStatic {
       return;
     }
 
-    if (!topLabel.textContent) {
+    if (!topLabel.textContent || topLabel.textContent === "00") {
       this.setLeafValue(leaf, value);
       return;
     }

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

@@ -45,6 +45,25 @@ describe("Countdown static behavior", () => {
     vi.useRealTimers();
   });
 
+  it("sets all value layers on initial render", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));
+
+    const { container } = render(
+      <Countdown targetDate="2026-07-25T01:02:03.000Z" />,
+    );
+
+    const values = Array.from(
+      container
+        .querySelectorAll(".countdown__unit")[0]
+        .querySelectorAll(".countdown__value"),
+    ).map((element) => element.textContent);
+
+    expect(values).toEqual(["01", "01", "01", "01"]);
+
+    vi.useRealTimers();
+  });
+
   it("switches day label based on remaining value", () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));

package/src/components/Countdown/tests/CountdownTag.static.test.jsx

@@ -4,6 +4,35 @@ import { CountdownTag } from "../CountdownTag";
 import CountdownTagStatic from "../CountdownTag.static";
 
 describe("CountdownTag static behavior", () => {
+  it("initializes target date from data-countdown-config", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));
+
+    const element = document.createElement("div");
+    element.setAttribute(
+      "data-countdown-config",
+      JSON.stringify({
+        targetDate: "2026-07-24T00:00:59.000Z",
+        units: ["seconds"],
+      }),
+    );
+    element.innerHTML = `
+      <span data-countdown-unit="seconds">
+        <span data-countdown-tag-value="true">00</span>
+        <span class="countdown-tag__label"></span>
+      </span>
+    `;
+
+    new CountdownTagStatic(element);
+
+    expect(
+      element.querySelector("[data-countdown-tag-value]"),
+    ).toHaveTextContent("59");
+
+    CountdownTagStatic.getInstance(element)?.destroy();
+    vi.useRealTimers();
+  });
+
   it("updates visible value from current time", () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date("2026-07-24T00:00:00.000Z"));

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

@@ -100,11 +100,9 @@ $tile-unsized-icon-selector: build-unsized-icon-selector(">.icon") + ", " +
 
 @mixin tile-action-icon {
   flex-shrink: 0;
-  width: convert.to-rem(24px);
-  height: convert.to-rem(24px);
+  --icon-size: #{convert.to-rem(24px)};
 
   @include breakpoint.get("sm") {
-    width: convert.to-rem(32px);
-    height: convert.to-rem(32px);
+    --icon-size: #{convert.to-rem(32px)};
   }
 }

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

@@ -23,7 +23,15 @@
         @include mixins.tile-action;
       }
 
-      .tile__body > .icon:last-child {
+      .tile__body
+        > .icon:last-child:not(
+          .icon--small,
+          .icon--medium,
+          .icon--large,
+          .icon--xlarge,
+          .icon--xxlarge,
+          .icon--huge
+        ) {
         @include mixins.tile-action-icon;
       }
     }