Feat/BOOK-240 hero video

Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Christel Westerberg

packages/design-system/lib/components/VideoPlayer/Button/button.module.css

@@ -18,8 +18,13 @@
 
   @media (hover: hover) {
     &:hover .iconWrapper {
-      background-color: var(--Component-Button-Inverted-Fill-Hover);
-      color: var(--Component-Button-Inverted-On-fill-Hover);
+      background:
+        linear-gradient(
+          0deg,
+          var(--Component-Button-Inverted-Fill-Hover) 0%,
+          var(--Component-Button-Inverted-Fill-Hover) 100%
+        ),
+        var(--Component-Button-Inverted-Fill-Default);
     }
   }
 

packages/design-system/lib/components/VideoPlayer/index.tsx

@@ -22,6 +22,7 @@ interface VideoPlayerProps extends VariantProps<typeof variants> {
   captions?: Caption[]
   focalPoint?: FocalPoint
   autoPlay?: boolean
+  hasOverlay?: boolean
 }
 
 export function VideoPlayer({
@@ -31,6 +32,7 @@ export function VideoPlayer({
   className,
   variant = 'inline',
   autoPlay,
+  hasOverlay,
 }: VideoPlayerProps) {
   const intl = useIntl()
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -84,7 +86,13 @@ export function VideoPlayer({
   const showMuteButton = variant === 'inline' && isActivated
 
   return (
-    <div className={cx(classNames, { [styles.isActivated]: isActivated })}>
+    <div
+      className={cx(
+        classNames,
+        { [styles.isActivated]: isActivated },
+        { [styles.hasOverlay]: hasOverlay }
+      )}
+    >
       <video
         ref={videoRef}
         className={styles.video}

packages/design-system/lib/components/VideoPlayer/videoPlayer.module.css

@@ -5,6 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 0;
 
   &.inline {
     border-radius: var(--Corner-radius-md);
@@ -22,6 +23,18 @@
       right: var(--Space-x2);
     }
   }
+
+  &.hasOverlay::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(31, 28, 27, 0.25) 48.08%,
+      rgba(31, 28, 27, 0.8) 100%
+    );
+  }
 }
 
 .video {
@@ -32,17 +45,30 @@
 
 .playButton {
   position: absolute;
+  z-index: 1;
 }
 
 .muteButton {
   position: absolute;
   top: var(--Space-x2);
   right: var(--Space-x2);
+  z-index: 1;
 }
 
 @media screen and (min-width: 768px) {
-  .videoPlayer.hero .playButton {
-    bottom: var(--Space-x4);
-    right: var(--Space-x4);
+  .videoPlayer {
+    &.hero .playButton {
+      bottom: var(--Space-x4);
+      right: var(--Space-x4);
+    }
+
+    &.hasOverlay::after {
+      background: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(31, 28, 27, 0.25) 53.8%,
+        rgba(31, 28, 27, 0.74) 97.6%
+      );
+    }
   }
 }