@orangesk/orange-design-system 3.6.0 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "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.3",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -39,7 +39,7 @@
     "html-react-parser": "6.1.7",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.3.2",
+    "next": "16.3.3",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.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.0",
     "@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/user-event": "^14.6.6",
+    "@types/node": "26.4.0",
     "@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.0",
     "@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.10.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "30.0.1",
     "lint-staged": "17.3.0",
     "playwright": "^1.62.1",
     "prettier": "^3.9.6",
-    "rollup": "^4.62.4",
+    "rollup": "^4.63.0",
     "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 {
@@ -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;
     }
   }
 }

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/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;
       }
     }