[GRAV-1370] [BpkOverlay] Add video overlay style (#3717)

* [GRAV-1370] Add video overlay style to BpkOverlay

* [GRAV-1370] update BpkOverlay snapshot

* [GRAV-1370] update video overlays

* Update BpkOverlay-test.tsx.snap

* Update BpkOverlay-test.tsx.snap

* [GRAV-1370] update example image ratio

Author: kirstybryce

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/2af45124245b6759/original/SOCIAL9.png';
 
 const getClassName = cssModules(STYLES);
 
@@ -198,6 +200,47 @@ const VignetteExample = () => {
   );
 };
 
+const VideoOverlayExamples = () => {
+  const overlayTypeTop = OVERLAY_TYPES.videoTop;
+  const overlayTypeBottom = OVERLAY_TYPES.videoBottom;
+  return (
+    <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={360 / 640}
+            />
+          </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={360 / 640}
+            />
+          </BpkOverlay>
+        </BpkOverlay>
+        <div className={getClassName('bpk-overlay-stories__overlay--name')}>
+          <BpkText textStyle={TEXT_STYLES.xl}>
+            {overlayTypeTop} & {overlayTypeBottom}
+          </BpkText>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const WithForegroundContentExample = () => (
   <BpkOverlay
     overlayType={OVERLAY_TYPES.solidHigh}
@@ -240,6 +283,7 @@ export {
   LeftExamples,
   RightExamples,
   VignetteExample,
+  VideoOverlayExamples,
   WithForegroundContentExample,
   MixedExample,
 };

examples/bpk-component-overlay/stories.tsx

@@ -24,6 +24,7 @@ import {
   BottomExamples,
   LeftExamples,
   RightExamples,
+  VideoOverlayExamples,
   VignetteExample,
   WithForegroundContentExample,
   MixedExample,
@@ -41,13 +42,14 @@ export const Bottom = BottomExamples;
 export const Left = LeftExamples;
 export const Right = RightExamples;
 export const Vignette = VignetteExample;
+export const VideoOverlays = VideoOverlayExamples;
 
 export const WithForegroundContent = WithForegroundContentExample;
 
 export const VisualTest = MixedExample;
 export const VisualTestWithZoom = {
   render: VisualTest,
   args: {
-    zoomEnabled: true
-  }
-}
+    zoomEnabled: true,
+  },
+};

packages/bpk-component-overlay/src/BpkOverlay.module.scss

@@ -159,5 +159,25 @@
     &--vignette {
       box-shadow: inset 0 0 50px rgba(tokens.$bpk-text-primary-day, 0.12);
     }
+
+    &--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%
+        );
+      }
+    }
   }
 }

packages/bpk-component-overlay/src/BpkOverlay.tsx

@@ -41,6 +41,8 @@ export const OVERLAY_TYPES = {
   rightMedium: 'rightMedium',
   rightHigh: 'rightHigh',
   vignette: 'vignette',
+  videoTop: 'videoTop',
+  videoBottom: 'videoBottom',
   off: 'off',
 } as const;
 
@@ -61,6 +63,8 @@ const overlayTypeClassSuffixes = {
   [OVERLAY_TYPES.rightMedium]: 'right-medium',
   [OVERLAY_TYPES.rightHigh]: 'right-high',
   [OVERLAY_TYPES.vignette]: 'vignette',
+  [OVERLAY_TYPES.videoTop]: 'video-top',
+  [OVERLAY_TYPES.videoBottom]: 'video-bottom',
   [OVERLAY_TYPES.off]: 'off',
 } as const;
 

packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap

@@ -274,6 +274,36 @@ 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={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