@windstream/react-shared-components 0.2.33 → 0.2.35

package/src/contentful/blocks/image-promo-bar/index.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ImagePromoBar } from "./index";
 import { ImagePromoBarProps } from "./types";
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
 jest.mock("../button", () => ({
   __esModule: true,
@@ -25,24 +25,11 @@ jest.mock("../button", () => ({
   ),
 }));
 
-jest.mock("./helper", () => ({
-  PlayButton: ({ isHovered }: any) => (
-    <div data-testid="play-button" data-hovered={isHovered} />
-  ),
-}));
-
-jest.mock("./vimeo-embed", () => ({
-  VimeoEmbed: ({ link, autoplay }: any) => (
-    <div data-testid="vimeo-embed" data-link={link} data-autoplay={autoplay} />
-  ),
-}));
-
-jest.mock("./youtube-embed", () => ({
-  YoutubeEmbed: ({ link, autoplay }: any) => (
+jest.mock("@shared/components/video-link", () => ({
+  VideoLink: ({ videoLink }: any) => (
     <div
-      data-testid="youtube-embed"
-      data-link={link}
-      data-autoplay={autoplay}
+      data-testid="video-link"
+      data-link={videoLink?.link || videoLink?.videoAssetUrl || ""}
     />
   ),
 }));
@@ -304,109 +291,7 @@ describe("ImagePromoBar", () => {
   });
 
   describe("Video", () => {
-    it("renders video section with play button when videoLink has link and image", () => {
-      render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            image: "thumb.jpg",
-          }}
-        />
-      );
-      expect(screen.getByTestId("play-button")).toBeInTheDocument();
-      expect(screen.getByAltText("Video preview")).toBeInTheDocument();
-    });
-
-    it("shows youtube embed on click for youtube link", () => {
-      render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            image: "thumb.jpg",
-            videoPopup: false,
-          }}
-        />
-      );
-      fireEvent.click(
-        screen.getByTestId("play-button").closest(".video-section")!
-      );
-      expect(screen.getByTestId("youtube-embed")).toBeInTheDocument();
-    });
-
-    it("shows vimeo embed on click for vimeo link", () => {
-      render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://vimeo.com/123",
-            image: "thumb.jpg",
-            videoPopup: false,
-          }}
-        />
-      );
-      fireEvent.click(
-        screen.getByTestId("play-button").closest(".video-section")!
-      );
-      expect(screen.getByTestId("vimeo-embed")).toBeInTheDocument();
-    });
-
-    it("shows popup overlay when videoPopup is true and playing", () => {
-      const { container } = render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            image: "thumb.jpg",
-            videoPopup: true,
-          }}
-        />
-      );
-      fireEvent.click(
-        screen.getByTestId("play-button").closest(".video-section")!
-      );
-      expect(container.querySelector(".fixed")).toBeInTheDocument();
-    });
-
-    it("closes popup on overlay click", () => {
-      const { container } = render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            image: "thumb.jpg",
-            videoPopup: true,
-          }}
-        />
-      );
-      fireEvent.click(
-        screen.getByTestId("play-button").closest(".video-section")!
-      );
-      fireEvent.click(container.querySelector(".fixed")!);
-      expect(container.querySelector(".fixed")).not.toBeInTheDocument();
-    });
-
-    it("does not close popup when clicking inside video container", () => {
-      const { container } = render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            image: "thumb.jpg",
-            videoPopup: true,
-          }}
-        />
-      );
-      fireEvent.click(
-        screen.getByTestId("play-button").closest(".video-section")!
-      );
-      const inner = container.querySelector(".max-w-6xl");
-      fireEvent.click(inner!);
-      expect(container.querySelector(".fixed")).toBeInTheDocument();
-    });
-
-    it("handles hover state on video section", () => {
+    it("renders VideoLink when videoLink is provided", () => {
       render(
         <ImagePromoBar
           {...defaultProps}
@@ -416,93 +301,25 @@ describe("ImagePromoBar", () => {
           }}
         />
       );
-      const videoSection = screen
-        .getByTestId("play-button")
-        .closest(".video-section")!;
-      fireEvent.mouseEnter(videoSection);
-      expect(screen.getByTestId("play-button")).toHaveAttribute(
-        "data-hovered",
-        "true"
-      );
-      fireEvent.mouseLeave(videoSection);
-      expect(screen.getByTestId("play-button")).toHaveAttribute(
-        "data-hovered",
-        "false"
-      );
+      expect(screen.getByTestId("video-link")).toBeInTheDocument();
     });
 
-    it("does not render video section when videoLink.link is empty", () => {
-      const { container } = render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{ link: "", image: "thumb.jpg" }}
-        />
-      );
-      expect(container.querySelector(".video-section")).not.toBeInTheDocument();
-    });
-
-    it("does not render video preview image when videoLink.image is missing", () => {
+    it("passes the videoLink prop through to VideoLink", () => {
       render(
         <ImagePromoBar
           {...defaultProps}
-          videoLink={{ link: "https://youtube.com/watch?v=123" }}
+          videoLink={{ link: "https://vimeo.com/123", image: "thumb.jpg" }}
         />
       );
-      expect(screen.queryByAltText("Video preview")).not.toBeInTheDocument();
-    });
-
-    it("handles videoLink being undefined", () => {
-      const { container } = render(
-        <ImagePromoBar {...defaultProps} videoLink={undefined as any} />
+      expect(screen.getByTestId("video-link")).toHaveAttribute(
+        "data-link",
+        "https://vimeo.com/123"
       );
-      expect(container.querySelector(".video-section")).not.toBeInTheDocument();
     });
 
-    it("handles videoLink with no videoPopup property (defaults to false)", () => {
-      const { container } = render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            image: "thumb.jpg",
-          }}
-        />
-      );
-      fireEvent.click(container.querySelector(".video-section")!);
-      // Should show inline embed, not popup
-      expect(container.querySelector(".fixed")).not.toBeInTheDocument();
-      expect(screen.getByTestId("youtube-embed")).toBeInTheDocument();
-    });
-
-    it("does not render inline embed when videoPopup is true", () => {
-      const { container } = render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            image: "thumb.jpg",
-            videoPopup: true,
-          }}
-        />
-      );
-      fireEvent.click(container.querySelector(".video-section")!);
-      // Popup renders, inline section hidden via the !videoPopup && isPlaying condition
-      expect(container.querySelector(".fixed")).toBeInTheDocument();
-    });
-
-    it("does not render contentVideo embed when videoLink has no image", () => {
-      const { container } = render(
-        <ImagePromoBar
-          {...defaultProps}
-          videoLink={{
-            link: "https://youtube.com/watch?v=123",
-            videoPopup: false,
-          }}
-        />
-      );
-      fireEvent.click(container.querySelector(".video-section")!);
-      // contentVideo is null when videoImage is falsy
-      expect(screen.queryByTestId("youtube-embed")).not.toBeInTheDocument();
+    it("renders VideoLink even when videoLink has no link (VideoLink owns the gating)", () => {
+      render(<ImagePromoBar {...defaultProps} videoLink={{}} />);
+      expect(screen.getByTestId("video-link")).toBeInTheDocument();
     });
   });
 });

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -1,15 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button } from "../button";
-import { PlayButton } from "./helper";
 import { ImagePromoBarProps } from "./types";
-import { VimeoEmbed } from "./vimeo-embed";
-import { YoutubeEmbed } from "./youtube-embed";
 
 import { Checklist } from "@shared/components/checklist";
 import { Image } from "@shared/components/image";
 import { Link } from "@shared/components/link";
 import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
+import { VideoLink } from "@shared/components/video-link";
 import { cx } from "@shared/utils";
 
 export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
@@ -38,32 +36,6 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   renderCheckPlans,
   enableAnimation = false,
 }) => {
-  const [activeVideo, setActiveVideo] = useState("");
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handlePlayClick = () => {
-    setActiveVideo(videoLink?.link ?? "");
-  };
-
-  const handleCloseVideo = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setActiveVideo("");
-  };
-
-  const videoHref = videoLink?.link ?? "";
-  const videoImage = videoLink?.image;
-  const videoPopup = videoLink?.videoPopup ?? false;
-  const isPlaying = Boolean(activeVideo && activeVideo === videoHref);
-
-  const embedSelector = () => {
-    if (videoHref.includes("vimeo")) {
-      return <VimeoEmbed link={videoHref} autoplay={isPlaying} />;
-    } else {
-      return <YoutubeEmbed link={videoHref} autoplay={isPlaying} />;
-    }
-  };
-  const contentVideo = videoLink && videoImage ? embedSelector() : null;
-
   return (
     <div className="component-container shared-component-ipb pb-16 pt-16">
       <div
@@ -219,72 +191,16 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               </div>
             )}
             {/* Video Link Section */}
-            {videoLink?.link && (
-              <div
-                className={cx(
-                  "video-section relative w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
-                  !isPlaying && "hover:ring-2 hover:ring-border-focus"
-                )}
-                onClick={handlePlayClick}
-                onMouseEnter={() => setIsHovered(true)}
-                onMouseLeave={() => setIsHovered(false)}
-              >
-                {/* Preview Image & Play Button */}
-                <div
-                  className={cx(
-                    isPlaying && !videoPopup && "hidden",
-                    isPlaying && !videoPopup ? "opacity-0" : "opacity-100",
-                    "relative w-full transition-opacity duration-300"
-                  )}
-                >
-                  {videoLink.image && (
-                    <NextImage
-                      src={videoLink.image}
-                      alt="Video preview"
-                      width={imageWidth || 660}
-                      height={imageHeight || 660}
-                      sizes="(max-width: 430px) 100vw, (max-width: 834px) 100vw, 50vw"
-                      className="h-auto w-full rounded-image"
-                    />
-                  )}
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    <PlayButton isHovered={isHovered} />
-                  </div>
-                </div>
-
-                {/* Inline Player (if not popup) */}
-                {!videoPopup && isPlaying && (
-                  <div
-                    className={cx(
-                      "aspect-[16/9] w-full overflow-hidden rounded-image transition-opacity duration-300",
-                      isPlaying ? "opacity-100" : "opacity-0",
-                      !useOriginalImageAspectRatio &&
-                        "xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
-                    )}
-                  >
-                    {contentVideo}
-                  </div>
-                )}
-              </div>
-            )}
+            <VideoLink
+              videoLink={videoLink}
+              imageWidth={imageWidth}
+              imageHeight={imageHeight}
+              useOriginalImageAspectRatio={useOriginalImageAspectRatio}
+            />
           </aside>
         </div>
       </div>
 
-      {/* Video Popup Overlay */}
-      {videoPopup && isPlaying && (
-        <div
-          className="fixed inset-0 top-20 z-[100] flex items-center justify-center bg-black/80 p-4 transition-all duration-300"
-          onClick={handleCloseVideo}
-        >
-          <div
-            className="max-w-6xl aspect-video w-full overflow-hidden rounded-3xl bg-black shadow-2xl md:w-4/6"
-            onClick={e => e.stopPropagation()}
-          >
-            {contentVideo}
-          </div>
-        </div>
-      )}
       {disclaimer && (
         <div className="mt-10 flex justify-center xl:mt-18">
           <div>{disclaimer}</div>

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -1,19 +1,8 @@
 import React from "react";
 
+import { VideoLinkProps } from "@shared/components/video-link";
 import { CheckPlansProps } from "@shared/types/micro-components";
 
-export type VideoLinkProps = {
-  image?: string;
-  videoPopup?: boolean;
-  link?: string;
-};
-
-export type VideoEmbedProps = {
-  containerClassName?: string;
-  autoplay?: boolean;
-  debug?: boolean;
-} & VideoLinkProps;
-
 export type ImagePromoBarProps = {
   brow: string;
   enableHeading: boolean;
@@ -41,8 +30,3 @@ export type ImagePromoBarProps = {
   onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 };
-
-export type PlayButtonProps = {
-  isHovered?: boolean;
-  containerClassName?: string;
-};

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

@@ -285,6 +285,27 @@ describe("PrimaryHero", () => {
   });
 
   describe("Pricing description disclaimer", () => {
+    it("renders pricingDescription with subheading and responsive alignment classes", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          pricingDescription="Building a new home? Contact us to see if you're eligible for Kinetic Internet."
+        />
+      );
+
+      const pricingText = screen.getByText(
+        "Building a new home? Contact us to see if you're eligible for Kinetic Internet."
+      );
+
+      expect(pricingText).toBeInTheDocument();
+      expect(pricingText).toHaveClass("subheading1");
+      expect(pricingText).toHaveClass(
+        "text-left",
+        "sm:text-center",
+        "xl:text-left"
+      );
+    });
+
     it("renders pricingDescriptionDisclaimer (desktop and mobile)", () => {
       render(
         <PrimaryHero
@@ -300,7 +321,6 @@ describe("PrimaryHero", () => {
       expect(screen.queryByText("Taxes apply")).not.toBeInTheDocument();
     });
   });
-
   describe("Images", () => {
     it("renders carousel image (mobile and desktop)", () => {
       render(

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

@@ -55,7 +55,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
   const textColorClass = textColor === "light" ? " text-white" : " text-text";
   return (
-    <div className="component-container relative overflow-hidden 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-4 sm:px-6 sm:py-12 xl:flex xl:min-h-[724px] xl:items-center xl:px-10">
       {hasDesktopVideo ? (
         <video
           autoPlay={true}
@@ -72,13 +72,13 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
       ) : null}
       <div
         className={cx(
-          "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"
+          "primary-hero-container relative z-10 mx-auto flex w-full max-w-[626px] 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 */}
         <div
           className={cx(
-            `relative flex flex-col ${textColorClass} sm:w-[485px]`
+            `relative flex flex-col ${textColorClass} w-full xl:w-[485px]`
           )}
         >
           <div className="flex flex-col gap-5 lg:gap-6">
@@ -126,15 +126,19 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
 
             {pricingDescription ? (
               <Text
-                data-cy="hero-pricing-disclaimer"
-                className={cx("text-left sm:text-center xl:text-left")}
+                data-cy="hero-pricing-description"
+                className={cx("subheading1", "text-left sm:text-center xl:text-left")}
               >
                 {pricingDescription}
               </Text>
             ) : null}
 
             {pricingDescriptionDisclaimer ? (
-              <Text data-cy="hero-pricing-disclaimer" as="p" className="body3">
+              <Text
+                data-cy="hero-pricing-disclaimer"
+                as="p"
+                className={cx("body3", "text-left sm:text-center xl:text-left")}
+              >
                 {pricingDescriptionDisclaimer}
               </Text>
             ) : null}
@@ -169,7 +173,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             <div className="flex flex-col gap-3">
               {/* desktop CTA */}
               {showCtasSideBySide ? (
-                <div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4">
+                <div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4 xl:justify-start">
                   <div className={cx(hideOnMobileCta1 && "hidden md:block")}>
                     <Button
                       {...primaryCta1}
@@ -221,7 +225,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   )}
                 </>
               )}
-              {secondaryCtaPrefix && secondaryCta ? (
+              {secondaryCtaPrefix || secondaryCta ? (
                 <div className="hidden md:flex">
                   {secondaryCtaPrefix && (
                     <Text as="span" className="body2 mr-1">
@@ -253,7 +257,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         </div>
 
         {/* mobile hero image and bottom link */}
-        <div className="xl:hidden">
+        <div className="w-full xl:hidden">
           <div className={"relative my-8"}>
             {hasMobileVideo ? (
               <video
@@ -263,7 +267,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 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]"
+                className="h-[350px] w-full rounded-[40px] object-cover object-center sm:h-[420px] md:h-[520px]"
                 data-testid="hero-video-mobile"
               >
                 <source src={mobileVideoUrl} type="video/mp4" />
@@ -285,7 +289,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   <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]"
+                    className="h-[205px] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
                     width={1024}
                     height={600}
                     sizes="100vw"
@@ -297,16 +301,6 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             )}
           </div>
 
-          {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
-            <div className="md:hidden">
-              <Button
-                {...bottomLink}
-                onModalButtonClick={onModalButtonClick}
-                linkClassName={`body3 ${textColorClass}`}
-              />
-            </div>
-          )}
-
           {secondaryCtaPrefix || secondaryCta ? (
             <div
               className={`flex flex-wrap items-center ${textColorClass} md:hidden`}
@@ -325,6 +319,16 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               )}
             </div>
           ) : null}
+
+          {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
+            <div className="md:hidden">
+              <Button
+                {...bottomLink}
+                onModalButtonClick={onModalButtonClick}
+                linkClassName={`body3 ${textColorClass}`}
+              />
+            </div>
+          )}
         </div>
 
         {/* Right column: bright blue background, diagonal top edge, hero image */}