@nok-integration/storefront-react 0.19.16 → 0.19.17

package/dist/index.d.ts

@@ -1253,12 +1253,15 @@ declare const CategoryPage: z.ZodObject<{
     }>, z.ZodObject<{
         kind: z.ZodLiteral<"lifestyle_image">;
         images: z.ZodArray<z.ZodString, "many">;
+        videos: z.ZodOptional<z.ZodArray<z.ZodNullable<z.ZodString>, "many">>;
     }, "strip", z.ZodTypeAny, {
         kind: "lifestyle_image";
         images: string[];
+        videos?: (string | null)[] | undefined;
     }, {
         kind: "lifestyle_image";
         images: string[];
+        videos?: (string | null)[] | undefined;
     }>, z.ZodObject<{
         kind: z.ZodLiteral<"grid">;
         title: z.ZodOptional<z.ZodString>;
@@ -1719,6 +1722,7 @@ declare const CategoryPage: z.ZodObject<{
     } | {
         kind: "lifestyle_image";
         images: string[];
+        videos?: (string | null)[] | undefined;
     } | {
         kind: "grid";
         products: {
@@ -1931,6 +1935,7 @@ declare const CategoryPage: z.ZodObject<{
     } | {
         kind: "lifestyle_image";
         images: string[];
+        videos?: (string | null)[] | undefined;
     } | {
         kind: "grid";
         products: {
@@ -2381,6 +2386,7 @@ declare function createClient(options: ClientOptions): {
             } | {
                 kind: "lifestyle_image";
                 images: string[];
+                videos?: (string | null)[] | undefined;
             } | {
                 kind: "grid";
                 products: {
@@ -3460,15 +3466,30 @@ export declare function isDuplicateOrder(err: unknown): boolean;
 export declare function isUnauthorized(err: unknown): boolean;
 
 /**
- * Full-width editorial image, swipeable when the CMS supplies more than one.
+ * Full-width editorial band, swipeable when the CMS supplies more than one slide.
  *
  * It previously rendered `images[0]` and dropped the rest, which is a silent failure of
  * the worst kind: the block takes an array, an author publishes three, and nothing on the
  * screen says the other two exist.
+ *
+ * **A slide is a picture or a clip, and the picture is the clip's poster.** The pairing is
+ * positional and comes off the wire that way, so `images[i]` is what shows for slide `i`
+ * until its video decodes, and all that shows when motion is reduced — the same rule the
+ * shop entry's slides follow. `priority` stays on the image path only: a band this far
+ * down the page has no business fetching a megabyte before it is anywhere near the screen,
+ * and `ShopVideo` starts its own download when the slide comes into view.
  */
-export declare function LifestyleImage({ images }: {
+export declare function LifestyleImage({ images, videos }: LifestyleImageProps): JSX.Element | null;
+
+declare interface LifestyleImageProps {
     images: string[];
-}): JSX.Element | null;
+    /**
+     * Parallel to `images`: the clip for the slide at the same index, `null` where that
+     * slide is a still. Absent for a band of stills, which is every band published before
+     * contracts 2.51.0.
+     */
+    videos?: (string | null)[];
+}
 
 /** Editorial text band between PCP sections. */
 export declare function LifestyleText({ text, align }: LifestyleTextProps): JSX.Element;

package/dist/index.mjs

@@ -4343,7 +4343,8 @@ function requireContent() {
     });
     exports.LifestyleImageBlock = zod_1.z.object({
       kind: zod_1.z.literal("lifestyle_image"),
-      images: zod_1.z.array(common_1.Url).min(1)
+      images: zod_1.z.array(common_1.Url).min(1),
+      videos: zod_1.z.array(common_1.Url.nullable()).optional()
     });
     exports.GridBlock = zod_1.z.object({
       kind: zod_1.z.literal("grid"),
@@ -10205,14 +10206,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     })]
   });
 }
-const hero$1 = "_hero_1glho_10";
-const image$2 = "_image_1glho_42";
-const scrim$1 = "_scrim_1glho_70";
-const fade = "_fade_1glho_94";
-const text$2 = "_text_1glho_108";
-const title$5 = "_title_1glho_146";
-const subtitle$2 = "_subtitle_1glho_157";
-const noImage = "_noImage_1glho_172";
+const hero$1 = "_hero_wguje_10";
+const image$2 = "_image_wguje_42";
+const scrim$1 = "_scrim_wguje_70";
+const fade = "_fade_wguje_94";
+const text$2 = "_text_wguje_108";
+const title$5 = "_title_wguje_155";
+const subtitle$2 = "_subtitle_wguje_166";
+const noImage = "_noImage_wguje_181";
 const styles$9 = {
   hero: hero$1,
   image: image$2,
@@ -10290,7 +10291,7 @@ const styles$7 = {
   dot: dot$1,
   dotActive: dotActive$1
 };
-function LifestyleImage({ images }) {
+function LifestyleImage({ images, videos }) {
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
   useEffect(() => {
@@ -10310,17 +10311,25 @@ function LifestyleImage({ images }) {
       children: [jsx("ul", {
         className: styles$7.track,
         ref: trackRef,
-        children: images.map((src, i) => jsx("li", {
-          className: styles$7.slide,
-          children: jsx(ShopImage, {
-            src,
-            alt: "",
-            fill: true,
-            sizes: "(max-width: 480px) 100vw, 480px",
-            className: styles$7.image,
-            priority: i === 0
-          })
-        }, src))
+        children: images.map((src, i) => {
+          const clip = videos?.[i];
+          return jsx("li", {
+            className: styles$7.slide,
+            children: clip ? jsx(ShopVideo, {
+              src: clip,
+              poster: src,
+              fill: true,
+              className: styles$7.image
+            }) : jsx(ShopImage, {
+              src,
+              alt: "",
+              fill: true,
+              sizes: "(max-width: 480px) 100vw, 480px",
+              className: styles$7.image,
+              priority: i === 0
+            })
+          }, src);
+        })
       }), images.length > 1 && jsx("div", {
         className: styles$7.dots,
         "aria-hidden": "true",
@@ -10508,7 +10517,8 @@ function Block({ block }) {
       });
     case "lifestyle_image":
       return jsx(LifestyleImage, {
-        images: block.images
+        images: block.images,
+        videos: block.videos
       });
     case "grid":
       return jsxs("div", {

package/dist/standalone/storefront.mjs

@@ -4343,7 +4343,8 @@ function requireContent() {
     });
     exports.LifestyleImageBlock = zod_1.z.object({
       kind: zod_1.z.literal("lifestyle_image"),
-      images: zod_1.z.array(common_1.Url).min(1)
+      images: zod_1.z.array(common_1.Url).min(1),
+      videos: zod_1.z.array(common_1.Url.nullable()).optional()
     });
     exports.GridBlock = zod_1.z.object({
       kind: zod_1.z.literal("grid"),
@@ -10205,14 +10206,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     })]
   });
 }
-const hero$1 = "_hero_1glho_10";
-const image$2 = "_image_1glho_42";
-const scrim$1 = "_scrim_1glho_70";
-const fade = "_fade_1glho_94";
-const text$2 = "_text_1glho_108";
-const title$5 = "_title_1glho_146";
-const subtitle$2 = "_subtitle_1glho_157";
-const noImage = "_noImage_1glho_172";
+const hero$1 = "_hero_wguje_10";
+const image$2 = "_image_wguje_42";
+const scrim$1 = "_scrim_wguje_70";
+const fade = "_fade_wguje_94";
+const text$2 = "_text_wguje_108";
+const title$5 = "_title_wguje_155";
+const subtitle$2 = "_subtitle_wguje_166";
+const noImage = "_noImage_wguje_181";
 const styles$9 = {
   hero: hero$1,
   image: image$2,
@@ -10290,7 +10291,7 @@ const styles$7 = {
   dot: dot$1,
   dotActive: dotActive$1
 };
-function LifestyleImage({ images }) {
+function LifestyleImage({ images, videos }) {
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
   useEffect(() => {
@@ -10310,17 +10311,25 @@ function LifestyleImage({ images }) {
       children: [jsx("ul", {
         className: styles$7.track,
         ref: trackRef,
-        children: images.map((src, i) => jsx("li", {
-          className: styles$7.slide,
-          children: jsx(ShopImage, {
-            src,
-            alt: "",
-            fill: true,
-            sizes: "(max-width: 480px) 100vw, 480px",
-            className: styles$7.image,
-            priority: i === 0
-          })
-        }, src))
+        children: images.map((src, i) => {
+          const clip = videos?.[i];
+          return jsx("li", {
+            className: styles$7.slide,
+            children: clip ? jsx(ShopVideo, {
+              src: clip,
+              poster: src,
+              fill: true,
+              className: styles$7.image
+            }) : jsx(ShopImage, {
+              src,
+              alt: "",
+              fill: true,
+              sizes: "(max-width: 480px) 100vw, 480px",
+              className: styles$7.image,
+              priority: i === 0
+            })
+          }, src);
+        })
       }), images.length > 1 && jsx("div", {
         className: styles$7.dots,
         "aria-hidden": "true",
@@ -10508,7 +10517,8 @@ function Block({ block }) {
       });
     case "lifestyle_image":
       return jsx(LifestyleImage, {
-        images: block.images
+        images: block.images,
+        videos: block.videos
       });
     case "grid":
       return jsxs("div", {

package/dist/standalone/styles.css

@@ -3107,7 +3107,7 @@
 ._oos_1hv16_66 {
   color: var(--color-state-surface-critical-default);
 }
-._hero_1glho_10 {
+._hero_wguje_10 {
   --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
   position: relative;
   height: var(--hero-height);
@@ -3115,15 +3115,15 @@
   background: var(--color-surface-default);
   margin-bottom: calc(var(--hero-height) * -237 / 812);
 }
-._image_1glho_42 {
+._image_wguje_42 {
   position: absolute;
   inset: 0;
 }
-._image_1glho_42 img {
+._image_wguje_42 img {
   object-fit: cover;
   object-position: top center;
 }
-._scrim_1glho_70 {
+._scrim_wguje_70 {
   position: absolute;
   inset: 0;
   background:
@@ -3133,7 +3133,7 @@
       rgba(0, 0, 0, 0.1) 45%,
       rgba(0, 0, 0, 0) 70%);
 }
-._fade_1glho_94 {
+._fade_wguje_94 {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -3146,19 +3146,19 @@
       rgba(8, 14, 18, 0.65) 55%,
       var(--color-surface-default) 100%);
 }
-._text_1glho_108 {
+._text_wguje_108 {
   position: absolute;
-  top: max(var(--space-12), calc(106px - var(--hero-top, 0px)));
+  top: max(0px, calc(var(--space-12) - var(--hero-top, 0px)));
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-8);
-  padding: var(--space-12) var(--space-24) var(--space-24);
+  padding: 0 var(--space-24) var(--space-24);
   text-align: center;
 }
-._title_1glho_146 {
+._title_wguje_155 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -3168,7 +3168,7 @@
   color: #f9fafa;
   text-wrap: balance;
 }
-._subtitle_1glho_157 {
+._subtitle_wguje_166 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -3177,18 +3177,18 @@
   font-weight: var(--font-weight-regular);
   color: #f9fafa;
 }
-._noImage_1glho_172 {
+._noImage_wguje_181 {
   height: auto;
   min-height: 0;
   max-height: none;
   margin-bottom: 0;
 }
-._noImage_1glho_172 ._text_1glho_108 {
+._noImage_wguje_181 ._text_wguje_108 {
   position: static;
   padding-top: var(--space-24);
 }
-._noImage_1glho_172 ._title_1glho_146,
-._noImage_1glho_172 ._subtitle_1glho_157 {
+._noImage_wguje_181 ._title_wguje_155,
+._noImage_wguje_181 ._subtitle_wguje_166 {
   color: var(--color-text-default);
 }
 ._text_1saw4_6 {

package/dist/styles.css

@@ -3107,7 +3107,7 @@
 ._oos_1hv16_66 {
   color: var(--color-state-surface-critical-default);
 }
-._hero_1glho_10 {
+._hero_wguje_10 {
   --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
   position: relative;
   height: var(--hero-height);
@@ -3115,15 +3115,15 @@
   background: var(--color-surface-default);
   margin-bottom: calc(var(--hero-height) * -237 / 812);
 }
-._image_1glho_42 {
+._image_wguje_42 {
   position: absolute;
   inset: 0;
 }
-._image_1glho_42 img {
+._image_wguje_42 img {
   object-fit: cover;
   object-position: top center;
 }
-._scrim_1glho_70 {
+._scrim_wguje_70 {
   position: absolute;
   inset: 0;
   background:
@@ -3133,7 +3133,7 @@
       rgba(0, 0, 0, 0.1) 45%,
       rgba(0, 0, 0, 0) 70%);
 }
-._fade_1glho_94 {
+._fade_wguje_94 {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -3146,19 +3146,19 @@
       rgba(8, 14, 18, 0.65) 55%,
       var(--color-surface-default) 100%);
 }
-._text_1glho_108 {
+._text_wguje_108 {
   position: absolute;
-  top: max(var(--space-12), calc(106px - var(--hero-top, 0px)));
+  top: max(0px, calc(var(--space-12) - var(--hero-top, 0px)));
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-8);
-  padding: var(--space-12) var(--space-24) var(--space-24);
+  padding: 0 var(--space-24) var(--space-24);
   text-align: center;
 }
-._title_1glho_146 {
+._title_wguje_155 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -3168,7 +3168,7 @@
   color: #f9fafa;
   text-wrap: balance;
 }
-._subtitle_1glho_157 {
+._subtitle_wguje_166 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -3177,18 +3177,18 @@
   font-weight: var(--font-weight-regular);
   color: #f9fafa;
 }
-._noImage_1glho_172 {
+._noImage_wguje_181 {
   height: auto;
   min-height: 0;
   max-height: none;
   margin-bottom: 0;
 }
-._noImage_1glho_172 ._text_1glho_108 {
+._noImage_wguje_181 ._text_wguje_108 {
   position: static;
   padding-top: var(--space-24);
 }
-._noImage_1glho_172 ._title_1glho_146,
-._noImage_1glho_172 ._subtitle_1glho_157 {
+._noImage_wguje_181 ._title_wguje_155,
+._noImage_wguje_181 ._subtitle_wguje_166 {
   color: var(--color-text-default);
 }
 ._text_1saw4_6 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.16",
+  "version": "0.19.17",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",