@windstream/react-shared-components 0.2.42 → 0.2.43

package/src/contentful/blocks/blogs-grid/index.test.tsx

@@ -14,17 +14,31 @@ jest.mock("next/navigation", () => ({
 }));
 
 jest.mock("@shared/components/pagination", () => ({
-  Pagination: ({ currentPage, totalPages, onPageChange, ariaLabel }: any) => (
+  Pagination: ({
+    currentPage,
+    totalPages,
+    onPageChange,
+    getPageHref,
+    ariaLabel,
+  }: any) => (
     <nav aria-label={ariaLabel} data-testid="pagination">
       <span>
         Page {currentPage} of {totalPages}
       </span>
-      <button data-testid="page-next" onClick={() => onPageChange(2)}>
+      <a
+        data-testid="page-next"
+        href={getPageHref?.(2)}
+        onClick={() => onPageChange(2)}
+      >
         Next
-      </button>
-      <button data-testid="page-first" onClick={() => onPageChange(1)}>
+      </a>
+      <a
+        data-testid="page-first"
+        href={getPageHref?.(1)}
+        onClick={() => onPageChange(1)}
+      >
         First
-      </button>
+      </a>
     </nav>
   ),
 }));
@@ -222,21 +236,38 @@ describe("BlogGrid", () => {
   });
 
   describe("Pagination", () => {
-    it("navigates with page param on page change", () => {
+    it("builds page href with page param", () => {
       render(<BlogGrid {...defaultProps} />);
-      fireEvent.click(screen.getByTestId("page-next"));
-      expect(mockPush).toHaveBeenCalledWith("/blog?page=2", { scroll: false });
+      expect(screen.getByTestId("page-next")).toHaveAttribute(
+        "href",
+        "/blog?page=2"
+      );
+    });
+
+    it("removes page param when building href for page 1", () => {
+      mockSearchParams = new URLSearchParams("page=2");
+      render(<BlogGrid {...defaultProps} currentPage={2} />);
+      expect(screen.getByTestId("page-first")).toHaveAttribute("href", "/blog");
+    });
+
+    it("keeps other params when building page href", () => {
+      mockSearchParams = new URLSearchParams("category=tech");
+      render(<BlogGrid {...defaultProps} />);
+      expect(screen.getByTestId("page-first")).toHaveAttribute(
+        "href",
+        "/blog?category=tech"
+      );
+    });
+
+    it("scrolls to top when currentPage changes", () => {
+      const { rerender } = render(<BlogGrid {...defaultProps} />);
+      expect(window.scrollTo).not.toHaveBeenCalled();
+      rerender(<BlogGrid {...defaultProps} currentPage={2} />);
       expect(window.scrollTo).toHaveBeenCalledWith({
         top: 0,
         behavior: "smooth",
       });
     });
-
-    it("removes page param when navigating to page 1", () => {
-      render(<BlogGrid {...defaultProps} currentPage={2} />);
-      fireEvent.click(screen.getByTestId("page-first"));
-      expect(mockPush).toHaveBeenCalledWith("/blog?", { scroll: false });
-    });
   });
 
   describe("Cover image handling", () => {

package/src/contentful/blocks/email-input-block/index.test.tsx

@@ -99,24 +99,27 @@ describe("EmailInputBlock", () => {
     const input = screen.getByPlaceholderText("Enter your email here");
     fireEvent.change(input, { target: { value: "invalid" } });
     fireEvent.click(screen.getByText("Sign me up"));
-    expect(
-      screen.getByText("Please enter a valid email address.")
-    ).toBeInTheDocument();
+    expect(screen.getByText("Invalid email address")).toBeInTheDocument();
+    expect(defaultProps.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows required error for empty email", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(screen.getByText("Email is required")).toBeInTheDocument();
     expect(defaultProps.onSubmit).not.toHaveBeenCalled();
   });
 
-  it("clears error when user types after error", () => {
+  it("clears error when user types a valid email after error", () => {
     render(<EmailInputBlock {...defaultProps} />);
     const input = screen.getByPlaceholderText("Enter your email here");
     fireEvent.change(input, { target: { value: "invalid" } });
     fireEvent.click(screen.getByText("Sign me up"));
-    expect(
-      screen.getByText("Please enter a valid email address.")
-    ).toBeInTheDocument();
+    expect(screen.getByText("Invalid email address")).toBeInTheDocument();
 
-    fireEvent.change(input, { target: { value: "a" } });
+    fireEvent.change(input, { target: { value: "user@test.com" } });
     expect(
-      screen.queryByText("Please enter a valid email address.")
+      screen.queryByText("Invalid email address")
     ).not.toBeInTheDocument();
   });
 
@@ -148,62 +151,50 @@ describe("EmailInputBlock", () => {
     expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
   });
 
-  it("applies green background by default", () => {
+  it("applies green theme background by default", () => {
     const { container } = render(<EmailInputBlock {...defaultProps} />);
-    const inner = container.querySelector(".bg-bg-fill-success");
-    expect(inner).toBeInTheDocument();
-  });
-
-  it("applies navy background class", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} backgroundColor="navy" />
-    );
-    expect(container.querySelector(".bg-bg-fill-inverse")).toBeInTheDocument();
+    expect(container.querySelector(".bg-bg-fill-brand")).toBeInTheDocument();
   });
 
-  it("applies blue background class", () => {
+  it("applies blue theme background class", () => {
     const { container } = render(
-      <EmailInputBlock {...defaultProps} backgroundColor="blue" />
+      <EmailInputBlock {...defaultProps} themeColor="blue" />
     );
-    expect(container.querySelector(".bg-bg-fill-brand")).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-bg-fill-brand-supporting")
+    ).toBeInTheDocument();
   });
 
-  it("applies yellow background class", () => {
+  it("applies purple theme background class", () => {
     const { container } = render(
-      <EmailInputBlock {...defaultProps} backgroundColor="yellow" />
+      <EmailInputBlock {...defaultProps} themeColor="purple" />
     );
     expect(
-      container.querySelector(".bg-bg-fill-brand-accent")
+      container.querySelector(".bg-bg-fill-brand-tertiary")
     ).toBeInTheDocument();
   });
 
-  it("applies white background class", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} backgroundColor="white" />
-    );
-    expect(container.querySelector(".bg-white")).toBeInTheDocument();
+  it("applies white outer background class by default", () => {
+    const { container } = render(<EmailInputBlock {...defaultProps} />);
+    expect(container.querySelector("section")).toHaveClass("bg-bg");
   });
 
-  it("uses white text for green/blue/navy backgrounds", () => {
+  it("uses white text for dark themes", () => {
     render(
-      <EmailInputBlock
-        {...defaultProps}
-        backgroundColor="navy"
-        title="Navy title"
-      />
+      <EmailInputBlock {...defaultProps} themeColor="blue" title="Blue title" />
     );
-    expect(screen.getByText("Navy title").className).toContain("text-white");
+    expect(screen.getByText("Blue title").className).toContain("text-white");
   });
 
-  it("uses dark text for white/yellow backgrounds", () => {
+  it("uses dark text for the white theme", () => {
     render(
       <EmailInputBlock
         {...defaultProps}
-        backgroundColor="yellow"
-        title="Yellow title"
+        themeColor="white"
+        title="White title"
       />
     );
-    expect(screen.getByText("Yellow title").className).toContain("text-text");
+    expect(screen.getByText("White title").className).toContain("text-text");
   });
 
   it("uses custom ctaText", () => {

package/src/contentful/blocks/find-kinetic/index.test.tsx

@@ -260,12 +260,13 @@ describe("FindKinetic", () => {
       expect(screen.queryAllByRole("list")).toHaveLength(0);
     });
 
-    it("renders two column layout for mobile and three for desktop", () => {
+    it("renders two column layout for mobile, three for tablet and four for desktop", () => {
       const { container } = render(<FindKinetic list={mockList} />);
       const lists = container.querySelectorAll("ul");
-      expect(lists).toHaveLength(2);
+      expect(lists).toHaveLength(3);
       expect(lists[0]).toHaveClass("grid-cols-2");
       expect(lists[1]).toHaveClass("md:grid-cols-3");
+      expect(lists[2]).toHaveClass("xl:grid-cols-4");
     });
 
     it("rearranges items in column-major order for 2-col layout", () => {

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

@@ -89,7 +89,6 @@ const defaultProps: ImagePromoBarProps = {
   cta: null,
   secondaryCta: null,
   ctaDisclaimer: null,
-  videoLink: { link: "", image: "", videoPopup: false },
   maxWidth: true,
   color: "light",
 };
@@ -182,15 +181,15 @@ describe("ImagePromoBar", () => {
       const { container } = render(
         <ImagePromoBar {...defaultProps} mediaPosition={true} />
       );
-      expect(container.innerHTML).toContain("lg:flex-row-reverse");
+      expect(container.innerHTML).toContain("xl:flex-row-reverse");
     });
 
     it("applies lg:flex-row when mediaPosition is false", () => {
       const { container } = render(
         <ImagePromoBar {...defaultProps} mediaPosition={false} />
       );
-      expect(container.innerHTML).toContain("lg:flex-row");
-      expect(container.innerHTML).not.toContain("lg:flex-row-reverse");
+      expect(container.innerHTML).toContain("xl:flex-row");
+      expect(container.innerHTML).not.toContain("xl:flex-row-reverse");
     });
   });
 
@@ -276,22 +275,68 @@ describe("ImagePromoBar", () => {
   });
 
   describe("Image", () => {
-    it("renders NextImage when image is provided", () => {
+    it("renders the plain image when there is no videoLink content", () => {
       render(
         <ImagePromoBar {...defaultProps} image="https://img.test/hero.jpg" />
       );
-      const img = screen.getByTestId("next-image");
-      expect(img).toHaveAttribute("src", "https://img.test/hero.jpg");
+      expect(screen.getByTestId("next-image")).toHaveAttribute(
+        "src",
+        "https://img.test/hero.jpg"
+      );
     });
 
-    it("does not render image section when image is empty", () => {
+    it("does not render the image section when image is empty", () => {
       render(<ImagePromoBar {...defaultProps} image="" />);
       expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
     });
+
+    it("does not render the plain image when videoLink has a valid href", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          image="https://img.test/hero.jpg"
+          videoLink={{ link: "https://youtube.com/watch?v=123" }}
+        />
+      );
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+
+    it("does not render the plain image when videoLink has its own poster image, even without a valid href", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          image="https://img.test/hero.jpg"
+          videoLink={{ image: "thumb.jpg" }}
+        />
+      );
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+
+    it("renders the plain image when no videoLink is attached at all", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          image="https://img.test/hero.jpg"
+          videoLink={undefined}
+        />
+      );
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("suppresses the plain image when an empty videoLink object is attached (VideoLink owns its own fallback from there)", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          image="https://img.test/hero.jpg"
+          videoLink={{}}
+        />
+      );
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
   });
 
   describe("Video", () => {
-    it("renders VideoLink when videoLink is provided", () => {
+    it("always renders VideoLink, passing videoLink through", () => {
       render(
         <ImagePromoBar
           {...defaultProps}
@@ -317,7 +362,7 @@ describe("ImagePromoBar", () => {
       );
     });
 
-    it("renders VideoLink even when videoLink has no link (VideoLink owns the gating)", () => {
+    it("still renders VideoLink when videoLink has no valid href (VideoLink owns its own poster fallback)", () => {
       render(<ImagePromoBar {...defaultProps} videoLink={{}} />);
       expect(screen.getByTestId("video-link")).toBeInTheDocument();
     });

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

@@ -36,6 +36,8 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   renderCheckPlans,
   enableAnimation = false,
 }) => {
+  const hasVideoLink = Boolean(videoLink);
+
   return (
     <div className="component-container shared-component-ipb pb-16 pt-16">
       <div
@@ -161,8 +163,8 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             )}
           </div>
           <aside className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
-            {/* Media Section */}
-            {image && (
+            {/* Media Section: only when no Video Link is attached at all */}
+            {image && !hasVideoLink && (
               <div
                 className={cx(
                   !useOriginalImageAspectRatio
@@ -196,6 +198,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               imageWidth={imageWidth}
               imageHeight={imageHeight}
               useOriginalImageAspectRatio={useOriginalImageAspectRatio}
+              isAboveTheFold={isAboveTheFold}
             />
           </aside>
         </div>

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

@@ -22,7 +22,7 @@ export type ImagePromoBarProps = {
   cta: any;
   secondaryCta: any;
   ctaDisclaimer: React.ReactNode;
-  videoLink: VideoLinkProps;
+  videoLink?: VideoLinkProps;
   maxWidth?: boolean;
   color: "light" | "dark";
   enableAnimation?: boolean;

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

@@ -52,12 +52,28 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const mobileVideoUrl = heroVideoMobile?.url?.trim();
   const hasDesktopVideo = !!desktopVideoUrl;
   const hasMobileVideo = !!mobileVideoUrl;
+  const normalizeImageUrl = (url?: string) =>
+    url?.startsWith("//") ? `https:${url}` : url;
+  const badgeImageUrl = normalizeImageUrl(badgeImage);
+  const heroImageUrl = normalizeImageUrl(carouselImages?.[0]);
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
   const baseTextColorClass = textColor === "dark" ? "text-text" : "text-white";
   const textColorClass =
     hasDesktopVideo && textColor === "dark"
       ? `${baseTextColorClass} xl:text-white`
       : baseTextColorClass;
+  const Badge = ({ className }: { className: string }) =>
+    badgeImageUrl ? (
+      <NextImage
+        src={badgeImageUrl}
+        alt="Badge"
+        className={className}
+        width={208}
+        height={208}
+        quality={90}
+        loading="eager"
+      />
+    ) : null;
   return (
     <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 ? (
@@ -267,23 +283,26 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         <div className="w-full xl:hidden">
           <div className={"relative my-8"}>
             {hasMobileVideo ? (
-              <video
-                autoPlay={true}
-                muted={true}
-                loop={true}
-                playsInline={true}
-                preload="auto"
-                aria-label={heroVideoMobile?.title || title || "Hero video"}
-                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" />
-              </video>
+              <div className="relative">
+                <video
+                  autoPlay={true}
+                  muted={true}
+                  loop={true}
+                  playsInline={true}
+                  preload="auto"
+                  aria-label={heroVideoMobile?.title || title || "Hero video"}
+                  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" />
+                </video>
+                <Badge className="absolute left-5 top-5 z-10 aspect-square w-26 object-cover object-center" />
+              </div>
             ) : (
               <>
                 {badgeImage ? (
                   <NextImage
-                    src={badgeImage}
+                    src={badgeImageUrl || ""}
                     alt={"Badge"}
                     className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
                     width={104}
@@ -292,9 +311,9 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                     loading="eager"
                   />
                 ) : null}
-                {carouselImages && carouselImages[0] ? (
+                {heroImageUrl ? (
                   <NextImage
-                    src={carouselImages[0]}
+                    src={heroImageUrl}
                     alt={"Hero"}
                     className="h-[205px] w-full rounded-[40px] object-cover object-center sm:h-[420px]"
                     width={1024}
@@ -339,32 +358,25 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         </div>
 
         {/* Right column: bright blue background, diagonal top edge, hero image */}
-        {!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
+          className={cx(
+            "relative hidden xl:block",
+            hasDesktopVideo && "h-[600px] w-[600px]"
+          )}
+        >
+          <Badge className="absolute -left-26 top-18 z-10 aspect-square w-52 object-cover object-center" />
+          {!hasDesktopVideo && heroImageUrl ? (
+            <NextImage
+              src={heroImageUrl}
+              alt={"Hero"}
+              className="aspect-square rounded-[40px] object-cover object-center"
+              width={600}
+              height={600}
+              quality={90}
+              loading="eager"
+            />
+          ) : null}
+        </div>
       </div>
     </div>
   );

package/src/hooks/contentful/use-contentful-rich-text.test.tsx

@@ -549,9 +549,10 @@ describe("useContentfulRichText", () => {
     const { container } = render(<>{result.current}</>);
     expect(container.querySelector("h1")).toHaveTextContent("H1");
     expect(container.querySelector("h2")).toHaveTextContent("H2");
-    // h3-h6 all render as h3 per defaultOptions
-    const h3s = container.querySelectorAll("h3");
-    expect(h3s.length).toBe(4);
+    expect(container.querySelector("h3")).toHaveTextContent("H3");
+    expect(container.querySelector("h4")).toHaveTextContent("H4");
+    expect(container.querySelector("h5")).toHaveTextContent("H5");
+    expect(container.querySelector("h6")).toHaveTextContent("H6");
   });
 
   it("renders unordered list", () => {