@windstream/react-shared-components 0.2.28 → 0.2.30

package/src/contentful/blocks/primary-hero/index.tsx

@@ -31,6 +31,8 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     hideOnMobileCta2,
     textColor = "light",
     logoLockup,
+    heroVideo,
+    heroVideoMobile,
   } = props;
 
   const isButtonType = (cta: any) => {
@@ -46,13 +48,31 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     isButtonType(primaryCta1) &&
     isButtonType(primaryCta2);
 
+  const desktopVideoUrl = heroVideo?.url?.trim();
+  const mobileVideoUrl = heroVideoMobile?.url?.trim();
+  const hasDesktopVideo = !!desktopVideoUrl;
+  const hasMobileVideo = !!mobileVideoUrl;
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
   const textColorClass = textColor === "light" ? " text-white" : " text-text";
   return (
-    <div className="component-container p-5 xl:flex xl:min-h-[724px] xl:items-center xl:p-0 xl:py-4">
+    <div className="component-container relative overflow-hidden p-5 xl:flex xl:min-h-[724px] xl:items-center xl:p-0 xl:py-4">
+      {hasDesktopVideo ? (
+        <video
+          autoPlay={true}
+          muted={true}
+          loop={true}
+          playsInline={true}
+          preload="auto"
+          aria-label={heroVideo?.title || title || "Hero background video"}
+          className="absolute inset-0 z-0 hidden h-full w-full object-fill xl:block"
+          data-testid="hero-background-video-desktop"
+        >
+          <source src={desktopVideoUrl} type="video/mp4" />
+        </video>
+      ) : null}
       <div
         className={cx(
-          "primary-hero-container mx-auto flex w-full flex-col sm:items-center sm:text-center xl:h-full xl:max-w-120 xl:flex-row xl:items-center xl:justify-between xl:gap-4 xl:text-left"
+          "primary-hero-container relative z-10 mx-auto flex w-full flex-col sm:items-center sm:text-center xl:h-full xl:max-w-120 xl:flex-row xl:items-center xl:justify-between xl:gap-4 xl:text-left"
         )}
       >
         {/* Left column: navy background, headline, body, address, button, link */}
@@ -235,29 +255,46 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         {/* mobile hero image and bottom link */}
         <div className="xl:hidden">
           <div className={"relative my-8"}>
-            {badgeImage ? (
-              <NextImage
-                src={badgeImage}
-                alt={"Badge"}
-                className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
-                width={104}
-                height={104}
-                quality={90}
-                loading="eager"
-              />
-            ) : null}
-            {carouselImages && carouselImages[0] ? (
-              <NextImage
-                src={carouselImages[0]}
-                alt={"Hero"}
+            {hasMobileVideo ? (
+              <video
+                autoPlay={true}
+                muted={true}
+                loop={true}
+                playsInline={true}
+                preload="auto"
+                aria-label={heroVideoMobile?.title || title || "Hero video"}
                 className="aspect-[1.71:1] sm:aspect-[1.41:1] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
-                width={1024}
-                height={600}
-                sizes="100vw"
-                quality={90}
-                loading="eager"
-              />
-            ) : null}
+                data-testid="hero-video-mobile"
+              >
+                <source src={mobileVideoUrl} type="video/mp4" />
+              </video>
+            ) : (
+              <>
+                {badgeImage ? (
+                  <NextImage
+                    src={badgeImage}
+                    alt={"Badge"}
+                    className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
+                    width={104}
+                    height={104}
+                    quality={90}
+                    loading="eager"
+                  />
+                ) : null}
+                {carouselImages && carouselImages[0] ? (
+                  <NextImage
+                    src={carouselImages[0]}
+                    alt={"Hero"}
+                    className="aspect-[1.71:1] sm:aspect-[1.41:1] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
+                    width={1024}
+                    height={600}
+                    sizes="100vw"
+                    quality={90}
+                    loading="eager"
+                  />
+                ) : null}
+              </>
+            )}
           </div>
 
           {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
@@ -291,30 +328,32 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         </div>
 
         {/* Right column: bright blue background, diagonal top edge, hero image */}
-        <div className={cx("relative hidden xl:block")}>
-          {badgeImage ? (
-            <NextImage
-              src={badgeImage}
-              alt={"Badge"}
-              className="absolute -left-26 top-18 aspect-square w-52 object-cover object-center"
-              width={208}
-              height={208}
-              quality={90}
-              loading="eager"
-            />
-          ) : null}
-          {carouselImages && carouselImages[0] ? (
-            <NextImage
-              src={carouselImages[0]}
-              alt={"Hero"}
-              className="aspect-square rounded-[40px] object-cover object-center"
-              width={600}
-              height={600}
-              quality={90}
-              loading="eager"
-            />
-          ) : null}
-        </div>
+        {!hasDesktopVideo ? (
+          <div className={cx("relative hidden xl:block")}>
+            {badgeImage ? (
+              <NextImage
+                src={badgeImage}
+                alt={"Badge"}
+                className="absolute -left-26 top-18 aspect-square w-52 object-cover object-center"
+                width={208}
+                height={208}
+                quality={90}
+                loading="eager"
+              />
+            ) : null}
+            {carouselImages && carouselImages[0] ? (
+              <NextImage
+                src={carouselImages[0]}
+                alt={"Hero"}
+                className="aspect-square rounded-[40px] object-cover object-center"
+                width={600}
+                height={600}
+                quality={90}
+                loading="eager"
+              />
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );

package/src/contentful/blocks/primary-hero/types.ts

@@ -2,6 +2,11 @@ import React from "react";
 
 import { CheckPlansProps } from "@shared/types/micro-components";
 
+export type PrimaryHeroVideo = {
+  url?: string;
+  title?: string;
+};
+
 export type PrimaryHeroProps = {
   title: string;
   showAsHeading?: boolean;
@@ -28,6 +33,8 @@ export type PrimaryHeroProps = {
   secondaryCta?: any;
   bottomLink?: any;
   carouselImages?: string[];
+  heroVideo?: PrimaryHeroVideo;
+  heroVideoMobile?: PrimaryHeroVideo;
   squareImage?: boolean;
   badgeImage?: string;
   textColor?: "light" | "dark";