From efc6b38a255055d7ee25d9a67095fcb2c76b8160 Mon Sep 17 00:00:00 2001
From: Kirsty Bryce <kirstybryce25@gmail.com>
Date: Fri, 17 Jan 2025 18:54:19 +0100
Subject: [PATCH 1/6] [GRAV-1370] Add video overlay style to BpkOverlay

---
 examples/bpk-component-overlay/examples.js    | 19 +++++++++++++++++++
 examples/bpk-component-overlay/stories.tsx    |  8 +++++---
 .../src/BpkOverlay.module.scss                | 10 ++++++++++
 .../bpk-component-overlay/src/BpkOverlay.tsx  |  2 ++
 4 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/examples/bpk-component-overlay/examples.js b/examples/bpk-component-overlay/examples.js
index 41079fb47b..d5d6d24c73 100644
--- a/examples/bpk-component-overlay/examples.js
+++ b/examples/bpk-component-overlay/examples.js
@@ -29,6 +29,8 @@ import STYLES from './examples.module.scss';
 
 const IMAGE_SRC =
   'https://content.skyscnr.com/m/1c8c6338a92a7a94/original/matt-hardy-6ArTTluciuA-unsplash.jpg';
+const VIDEO_IMG_SRC =
+  'https://content.skyscnr.com/m/ecf210e9214ce0/original/37866_PH_20211029_001_story.jpg';
 
 const getClassName = cssModules(STYLES);
 
@@ -198,6 +200,22 @@ const VignetteExample = () => {
   );
 };
 
+const VideoOverlayExample = () => {
+  const overlayType = OVERLAY_TYPES.videoOverlay;
+  return (
+    <div className={getClassName('bpk-overlay-stories__overlay-story')}>
+      <BpkOverlay overlayType={overlayType}>
+        <BpkImage src={VIDEO_IMG_SRC} altText="Mountains" aspectRatio={0.6} />
+      </BpkOverlay>
+      <div className={getClassName('bpk-overlay-stories__overlay--name')}>
+        <BpkText textStyle={TEXT_STYLES.xl}>
+          {OverlayName({ overlayType })}
+        </BpkText>
+      </div>
+    </div>
+  );
+};
+
 const WithForegroundContentExample = () => (
   <BpkOverlay
     overlayType={OVERLAY_TYPES.solidHigh}
@@ -240,6 +258,7 @@ export {
   LeftExamples,
   RightExamples,
   VignetteExample,
+  VideoOverlayExample,
   WithForegroundContentExample,
   MixedExample,
 };
diff --git a/examples/bpk-component-overlay/stories.tsx b/examples/bpk-component-overlay/stories.tsx
index c7ca048e2c..8ae2e2a357 100644
--- a/examples/bpk-component-overlay/stories.tsx
+++ b/examples/bpk-component-overlay/stories.tsx
@@ -24,6 +24,7 @@ import {
   BottomExamples,
   LeftExamples,
   RightExamples,
+  VideoOverlayExample,
   VignetteExample,
   WithForegroundContentExample,
   MixedExample,
@@ -41,6 +42,7 @@ export const Bottom = BottomExamples;
 export const Left = LeftExamples;
 export const Right = RightExamples;
 export const Vignette = VignetteExample;
+export const VideoOverlay = VideoOverlayExample;
 
 export const WithForegroundContent = WithForegroundContentExample;
 
@@ -48,6 +50,6 @@ export const VisualTest = MixedExample;
 export const VisualTestWithZoom = {
   render: VisualTest,
   args: {
-    zoomEnabled: true
-  }
-}
+    zoomEnabled: true,
+  },
+};
diff --git a/packages/bpk-component-overlay/src/BpkOverlay.module.scss b/packages/bpk-component-overlay/src/BpkOverlay.module.scss
index 416d6c4270..7982b3a31a 100644
--- a/packages/bpk-component-overlay/src/BpkOverlay.module.scss
+++ b/packages/bpk-component-overlay/src/BpkOverlay.module.scss
@@ -159,5 +159,15 @@
     &--vignette {
       box-shadow: inset 0 0 50px rgba(tokens.$bpk-text-primary-day, 0.12);
     }
+
+    &--video-overlay {
+      background: linear-gradient(
+        180deg,
+        rgba(tokens.$bpk-text-primary-day, 0.45) 0%,
+        rgba(tokens.$bpk-text-primary-day, 0) 40%,
+        rgba(tokens.$bpk-text-primary-day, 0) 60%,
+        rgba(tokens.$bpk-text-primary-day, 0.9) 100%
+      );
+    }
   }
 }
diff --git a/packages/bpk-component-overlay/src/BpkOverlay.tsx b/packages/bpk-component-overlay/src/BpkOverlay.tsx
index 7045406a6d..68c2b212a3 100644
--- a/packages/bpk-component-overlay/src/BpkOverlay.tsx
+++ b/packages/bpk-component-overlay/src/BpkOverlay.tsx
@@ -41,6 +41,7 @@ export const OVERLAY_TYPES = {
   rightMedium: 'rightMedium',
   rightHigh: 'rightHigh',
   vignette: 'vignette',
+  videoOverlay: 'videoOverlay',
   off: 'off',
 } as const;
 
@@ -61,6 +62,7 @@ const overlayTypeClassSuffixes = {
   [OVERLAY_TYPES.rightMedium]: 'right-medium',
   [OVERLAY_TYPES.rightHigh]: 'right-high',
   [OVERLAY_TYPES.vignette]: 'vignette',
+  [OVERLAY_TYPES.videoOverlay]: 'video-overlay',
   [OVERLAY_TYPES.off]: 'off',
 } as const;
 

From 77e687d013115e72d75aa8e4765695f48080790c Mon Sep 17 00:00:00 2001
From: Kirsty Bryce <58072716+kirstybryce@users.noreply.github.com>
Date: Mon, 20 Jan 2025 16:48:09 +0100
Subject: [PATCH 2/6] [GRAV-1370] update BpkOverlay snapshot

---
 .../src/__snapshots__/BpkOverlay-test.tsx.snap    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap b/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
index 59df6a3f2e..3142b17e7f 100644
--- a/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
+++ b/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
@@ -274,6 +274,21 @@ exports[`BpkOverlay should render correctly with overlayType={topMedium} 1`] = `
 </DocumentFragment>
 `;
 
+exports[`BpkOverlay should render correctly with overlayType={videoOverlay} 1`] = `
+<DocumentFragment>
+  <div
+    class="bpk-overlay__wrapper"
+  >
+    <span>
+      Backpack
+    </span>
+    <div
+      class="bpk-overlay__overlay bpk-overlay__overlay--video-overlay"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`BpkOverlay should render correctly with overlayType={vignette} 1`] = `
 <DocumentFragment>
   <div

From f7bf08a66704714dbe49088840064c4e3f4e1c77 Mon Sep 17 00:00:00 2001
From: Kirsty Bryce <58072716+kirstybryce@users.noreply.github.com>
Date: Tue, 21 Jan 2025 13:58:34 +0100
Subject: [PATCH 3/6] [GRAV-1370] update video overlays

---
 examples/bpk-component-overlay/examples.js    | 49 ++++++++++++++-----
 examples/bpk-component-overlay/stories.tsx    |  4 +-
 .../src/BpkOverlay.module.scss                | 26 +++++++---
 .../bpk-component-overlay/src/BpkOverlay.tsx  |  6 ++-
 4 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/examples/bpk-component-overlay/examples.js b/examples/bpk-component-overlay/examples.js
index d5d6d24c73..4e17c474eb 100644
--- a/examples/bpk-component-overlay/examples.js
+++ b/examples/bpk-component-overlay/examples.js
@@ -30,7 +30,7 @@ import STYLES from './examples.module.scss';
 const IMAGE_SRC =
   'https://content.skyscnr.com/m/1c8c6338a92a7a94/original/matt-hardy-6ArTTluciuA-unsplash.jpg';
 const VIDEO_IMG_SRC =
-  'https://content.skyscnr.com/m/ecf210e9214ce0/original/37866_PH_20211029_001_story.jpg';
+  'https://content.skyscnr.com/m/2af45124245b6759/original/SOCIAL9.png';
 
 const getClassName = cssModules(STYLES);
 
@@ -200,17 +200,42 @@ const VignetteExample = () => {
   );
 };
 
-const VideoOverlayExample = () => {
-  const overlayType = OVERLAY_TYPES.videoOverlay;
+const VideoOverlayExamples = () => {
+  const overlayTypeTop = OVERLAY_TYPES.videoTop;
+  const overlayTypeBottom = OVERLAY_TYPES.videoBottom;
   return (
-    <div className={getClassName('bpk-overlay-stories__overlay-story')}>
-      <BpkOverlay overlayType={overlayType}>
-        <BpkImage src={VIDEO_IMG_SRC} altText="Mountains" aspectRatio={0.6} />
-      </BpkOverlay>
-      <div className={getClassName('bpk-overlay-stories__overlay--name')}>
-        <BpkText textStyle={TEXT_STYLES.xl}>
-          {OverlayName({ overlayType })}
-        </BpkText>
+    <div className={getClassName('bpk-overlay-stories')}>
+      {[overlayTypeTop, overlayTypeBottom].map((overlayType) => (
+        <div className={getClassName('bpk-overlay-stories__overlay-story')}>
+          <BpkOverlay overlayType={overlayType}>
+            <BpkImage
+              src={VIDEO_IMG_SRC}
+              altText="Sail boat"
+              aspectRatio={0.6}
+            />
+          </BpkOverlay>
+          <div className={getClassName('bpk-overlay-stories__overlay--name')}>
+            <BpkText textStyle={TEXT_STYLES.xl}>
+              {OverlayName({ overlayType })}
+            </BpkText>
+          </div>
+        </div>
+      ))}
+      <div className={getClassName('bpk-overlay-stories__overlay-story')}>
+        <BpkOverlay overlayType={overlayTypeTop}>
+          <BpkOverlay overlayType={overlayTypeBottom}>
+            <BpkImage
+              src={VIDEO_IMG_SRC}
+              altText="Sail boat"
+              aspectRatio={0.6}
+            />
+          </BpkOverlay>
+        </BpkOverlay>
+        <div className={getClassName('bpk-overlay-stories__overlay--name')}>
+          <BpkText textStyle={TEXT_STYLES.xl}>
+            {overlayTypeTop} & {overlayTypeBottom}
+          </BpkText>
+        </div>
       </div>
     </div>
   );
@@ -258,7 +283,7 @@ export {
   LeftExamples,
   RightExamples,
   VignetteExample,
-  VideoOverlayExample,
+  VideoOverlayExamples,
   WithForegroundContentExample,
   MixedExample,
 };
diff --git a/examples/bpk-component-overlay/stories.tsx b/examples/bpk-component-overlay/stories.tsx
index 8ae2e2a357..5dafd30fa4 100644
--- a/examples/bpk-component-overlay/stories.tsx
+++ b/examples/bpk-component-overlay/stories.tsx
@@ -24,7 +24,7 @@ import {
   BottomExamples,
   LeftExamples,
   RightExamples,
-  VideoOverlayExample,
+  VideoOverlayExamples,
   VignetteExample,
   WithForegroundContentExample,
   MixedExample,
@@ -42,7 +42,7 @@ export const Bottom = BottomExamples;
 export const Left = LeftExamples;
 export const Right = RightExamples;
 export const Vignette = VignetteExample;
-export const VideoOverlay = VideoOverlayExample;
+export const VideoOverlays = VideoOverlayExamples;
 
 export const WithForegroundContent = WithForegroundContentExample;
 
diff --git a/packages/bpk-component-overlay/src/BpkOverlay.module.scss b/packages/bpk-component-overlay/src/BpkOverlay.module.scss
index 7982b3a31a..30e668e39f 100644
--- a/packages/bpk-component-overlay/src/BpkOverlay.module.scss
+++ b/packages/bpk-component-overlay/src/BpkOverlay.module.scss
@@ -160,14 +160,24 @@
       box-shadow: inset 0 0 50px rgba(tokens.$bpk-text-primary-day, 0.12);
     }
 
-    &--video-overlay {
-      background: linear-gradient(
-        180deg,
-        rgba(tokens.$bpk-text-primary-day, 0.45) 0%,
-        rgba(tokens.$bpk-text-primary-day, 0) 40%,
-        rgba(tokens.$bpk-text-primary-day, 0) 60%,
-        rgba(tokens.$bpk-text-primary-day, 0.9) 100%
-      );
+    &--video {
+      &-top {
+        background: linear-gradient(
+          180deg,
+          rgba(tokens.$bpk-text-primary-day, 0.45) 0%,
+          rgba(tokens.$bpk-text-primary-day, 0) 40%,
+          rgba(tokens.$bpk-text-primary-day, 0) 100%
+        );
+      }
+
+      &-bottom {
+        background: linear-gradient(
+          180deg,
+          rgba(tokens.$bpk-text-primary-day, 0) 0%,
+          rgba(tokens.$bpk-text-primary-day, 0) 60%,
+          rgba(tokens.$bpk-text-primary-day, 0.9) 100%
+        );
+      }
     }
   }
 }
diff --git a/packages/bpk-component-overlay/src/BpkOverlay.tsx b/packages/bpk-component-overlay/src/BpkOverlay.tsx
index 68c2b212a3..30bdd11bfd 100644
--- a/packages/bpk-component-overlay/src/BpkOverlay.tsx
+++ b/packages/bpk-component-overlay/src/BpkOverlay.tsx
@@ -41,7 +41,8 @@ export const OVERLAY_TYPES = {
   rightMedium: 'rightMedium',
   rightHigh: 'rightHigh',
   vignette: 'vignette',
-  videoOverlay: 'videoOverlay',
+  videoTop: 'videoTop',
+  videoBottom: 'videoBottom',
   off: 'off',
 } as const;
 
@@ -62,7 +63,8 @@ const overlayTypeClassSuffixes = {
   [OVERLAY_TYPES.rightMedium]: 'right-medium',
   [OVERLAY_TYPES.rightHigh]: 'right-high',
   [OVERLAY_TYPES.vignette]: 'vignette',
-  [OVERLAY_TYPES.videoOverlay]: 'video-overlay',
+  [OVERLAY_TYPES.videoTop]: 'video-top',
+  [OVERLAY_TYPES.videoBottom]: 'video-bottom',
   [OVERLAY_TYPES.off]: 'off',
 } as const;
 

From f77fae640faf52c63ca19788ab119ab7eb8db715 Mon Sep 17 00:00:00 2001
From: Kirsty Bryce <58072716+kirstybryce@users.noreply.github.com>
Date: Tue, 21 Jan 2025 14:00:09 +0100
Subject: [PATCH 4/6] Update BpkOverlay-test.tsx.snap

---
 .../__snapshots__/BpkOverlay-test.tsx.snap    | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap b/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
index 3142b17e7f..bb683c346e 100644
--- a/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
+++ b/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
@@ -274,6 +274,21 @@ exports[`BpkOverlay should render correctly with overlayType={topMedium} 1`] = `
 </DocumentFragment>
 `;
 
+exports[`BpkOverlay should render correctly with overlayType={videoBottom} 1`] = `
+<DocumentFragment>
+  <div
+    class="bpk-overlay__wrapper"
+  >
+    <span>
+      Backpack
+    </span>
+    <div
+      class="bpk-overlay__overlay bpk-overlay__overlay--video-bottom"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`BpkOverlay should render correctly with overlayType={videoOverlay} 1`] = `
 <DocumentFragment>
   <div
@@ -289,6 +304,21 @@ exports[`BpkOverlay should render correctly with overlayType={videoOverlay} 1`]
 </DocumentFragment>
 `;
 
+exports[`BpkOverlay should render correctly with overlayType={videoTop} 1`] = `
+<DocumentFragment>
+  <div
+    class="bpk-overlay__wrapper"
+  >
+    <span>
+      Backpack
+    </span>
+    <div
+      class="bpk-overlay__overlay bpk-overlay__overlay--video-top"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`BpkOverlay should render correctly with overlayType={vignette} 1`] = `
 <DocumentFragment>
   <div

From 3022ed8a85f3f326c7ba2ae60f9ea91082e11f7b Mon Sep 17 00:00:00 2001
From: Kirsty Bryce <58072716+kirstybryce@users.noreply.github.com>
Date: Tue, 21 Jan 2025 14:01:35 +0100
Subject: [PATCH 5/6] Update BpkOverlay-test.tsx.snap

---
 .../src/__snapshots__/BpkOverlay-test.tsx.snap    | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap b/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
index bb683c346e..eb52f7ad03 100644
--- a/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
+++ b/packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
@@ -289,21 +289,6 @@ exports[`BpkOverlay should render correctly with overlayType={videoBottom} 1`] =
 </DocumentFragment>
 `;
 
-exports[`BpkOverlay should render correctly with overlayType={videoOverlay} 1`] = `
-<DocumentFragment>
-  <div
-    class="bpk-overlay__wrapper"
-  >
-    <span>
-      Backpack
-    </span>
-    <div
-      class="bpk-overlay__overlay bpk-overlay__overlay--video-overlay"
-    />
-  </div>
-</DocumentFragment>
-`;
-
 exports[`BpkOverlay should render correctly with overlayType={videoTop} 1`] = `
 <DocumentFragment>
   <div

From 01a29fbd0d7c0f2d5abf5ec95c8bf842e6c2de33 Mon Sep 17 00:00:00 2001
From: Kirsty Bryce <58072716+kirstybryce@users.noreply.github.com>
Date: Tue, 21 Jan 2025 15:19:49 +0100
Subject: [PATCH 6/6] [GRAV-1370] update example image ratio

---
 examples/bpk-component-overlay/examples.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/bpk-component-overlay/examples.js b/examples/bpk-component-overlay/examples.js
index 4e17c474eb..677b23ce90 100644
--- a/examples/bpk-component-overlay/examples.js
+++ b/examples/bpk-component-overlay/examples.js
@@ -211,7 +211,7 @@ const VideoOverlayExamples = () => {
             <BpkImage
               src={VIDEO_IMG_SRC}
               altText="Sail boat"
-              aspectRatio={0.6}
+              aspectRatio={360 / 640}
             />
           </BpkOverlay>
           <div className={getClassName('bpk-overlay-stories__overlay--name')}>
@@ -227,7 +227,7 @@ const VideoOverlayExamples = () => {
             <BpkImage
               src={VIDEO_IMG_SRC}
               altText="Sail boat"
-              aspectRatio={0.6}
+              aspectRatio={360 / 640}
             />
           </BpkOverlay>
         </BpkOverlay>