@windstream/react-shared-components 0.2.41 → 0.2.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/animation-wrapper/index.test.tsx

@@ -359,7 +359,7 @@ describe("AnimationWrapper", () => {
         expect(transition.duration).toBe(1);
       });
 
-      it("uses custom whileHover even without animationType", () => {
+      it("merges custom whileHover with the default animation preset", () => {
         render(
           <AnimationWrapper
             disableAnimation={false}
@@ -372,10 +372,10 @@ describe("AnimationWrapper", () => {
         const whileHover = JSON.parse(
           el.getAttribute("data-while-hover") || "{}"
         );
-        expect(whileHover).toEqual({ rotate: 10 });
+        expect(whileHover).toEqual({ scale: 1.05, rotate: 10 });
       });
 
-      it("uses custom whileTap without animationType", () => {
+      it("merges custom whileTap with the default animation preset", () => {
         render(
           <AnimationWrapper disableAnimation={false} whileTap={{ rotate: -5 }}>
             <div data-testid="child">Tap</div>
@@ -383,10 +383,10 @@ describe("AnimationWrapper", () => {
         );
         const el = screen.getByTestId("child");
         const whileTap = JSON.parse(el.getAttribute("data-while-tap") || "{}");
-        expect(whileTap).toEqual({ rotate: -5 });
+        expect(whileTap).toEqual({ scale: 0.95, rotate: -5 });
       });
 
-      it("uses custom transition without animationType", () => {
+      it("merges custom transition with the default animation preset", () => {
         render(
           <AnimationWrapper
             disableAnimation={false}
@@ -399,7 +399,7 @@ describe("AnimationWrapper", () => {
         const transition = JSON.parse(
           el.getAttribute("data-transition") || "{}"
         );
-        expect(transition).toEqual({ delay: 0.5 });
+        expect(transition).toEqual({ duration: 0.15, delay: 0.5 });
       });
     });
 

package/src/components/link/index.test.tsx

@@ -155,14 +155,14 @@ describe("Link", () => {
       expect(el).toHaveAttribute("target", "_blank");
     });
 
-    it("adds rel=noopener noreferrer for external links", () => {
+    it("adds rel=noopener for external links", () => {
       render(
         <Link href="https://example.com" external={true}>
           External
         </Link>
       );
       const el = screen.getByText("External").closest("a");
-      expect(el).toHaveAttribute("rel", "noopener noreferrer");
+      expect(el).toHaveAttribute("rel", "noopener");
     });
 
     it("does not add target for disabled external links", () => {

package/src/components/link/index.tsx

@@ -88,7 +88,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       ...(external &&
         !disabled && {
           target: "_blank",
-          rel: "noopener noreferrer",
+          rel: "noopener",
         }),
       ...(disabled && {
         "aria-disabled": true,

package/src/components/video-link/index.test.tsx

@@ -55,20 +55,59 @@ describe("VideoLink", () => {
     expect(container.innerHTML).toBe("");
   });
 
-  it("renders nothing when videoLink has neither link nor videoAssetUrl", () => {
+  it("renders nothing when there is no video and no image to fall back to", () => {
+    const { container } = render(<VideoLink videoLink={{}} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders the video link's own poster as a static image when there is no video", () => {
+    render(<VideoLink videoLink={{ image: "thumb.jpg" }} />);
+    const img = screen.getByAltText("section-image");
+    expect(img).toHaveAttribute("src", "thumb.jpg");
+    expect(screen.queryByTestId("play-button")).not.toBeInTheDocument();
+  });
+
+  it("ignores an unrelated fallbackImage-like prop - only videoLink.image is used as the poster", () => {
+    const { container } = render(
+      // @ts-expect-error - fallbackImage is intentionally not a supported prop
+      <VideoLink videoLink={{}} fallbackImage="https://img.test/hero.jpg" />
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders nothing when videoSourceType is 'contentful' but videoAssetUrl is missing and there is no image", () => {
     const { container } = render(
-      <VideoLink videoLink={{ image: "thumb.jpg" }} />
+      <VideoLink videoLink={{ videoSourceType: "contentful" }} />
     );
     expect(container.innerHTML).toBe("");
   });
 
-  it("renders nothing when videoSourceType is 'contentful' but videoAssetUrl is missing", () => {
+  it("falls back to videoLink.link when videoSourceType is 'contentful' but videoAssetUrl is missing", () => {
     const { container } = render(
+      <VideoLink
+        videoLink={{
+          videoSourceType: "contentful",
+          link: "https://youtube.com/watch?v=123",
+        }}
+      />
+    );
+    clickVideoSection(container);
+    expect(screen.getByTestId("youtube-embed")).toHaveAttribute(
+      "data-link",
+      "https://youtube.com/watch?v=123"
+    );
+  });
+
+  it("falls back to the poster when videoSourceType is 'contentful' but videoAssetUrl is missing", () => {
+    render(
       <VideoLink
         videoLink={{ videoSourceType: "contentful", image: "thumb.jpg" }}
       />
     );
-    expect(container.innerHTML).toBe("");
+    expect(screen.getByAltText("section-image")).toHaveAttribute(
+      "src",
+      "thumb.jpg"
+    );
   });
 
   it("renders preview image and play button when videoLink has link and image", () => {

package/src/components/video-link/index.tsx

@@ -14,6 +14,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   imageWidth = 660,
   imageHeight = 660,
   useOriginalImageAspectRatio = false,
+  isAboveTheFold = false,
 }) => {
   const [activeVideo, setActiveVideo] = useState("");
   const [isHovered, setIsHovered] = useState(false);
@@ -24,8 +25,35 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
       ? videoLink?.videoAssetUrl
       : videoLink?.link) ?? "";
 
+  // The video's own poster - never the promo bar's plain image field.
+  const posterImage = videoLink?.image;
+
   if (!videoHref) {
-    return null;
+    if (!posterImage) {
+      return null;
+    }
+    return (
+      <div
+        className={cx(
+          !useOriginalImageAspectRatio
+            ? "relative aspect-[16/9] w-full overflow-hidden rounded-image lg:h-[486px] xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
+            : "overflow-hidden rounded-image"
+        )}
+      >
+        <NextImage
+          src={posterImage}
+          alt="section-image"
+          priority={isAboveTheFold}
+          fill={!useOriginalImageAspectRatio}
+          width={!useOriginalImageAspectRatio ? undefined : imageWidth || 660}
+          height={!useOriginalImageAspectRatio ? undefined : imageHeight || 660}
+          sizes="(max-width: 430px) 100vw, (max-width: 834px) 100vw, 50vw"
+          className={cx(
+            !useOriginalImageAspectRatio ? "object-cover" : "w-full"
+          )}
+        />
+      </div>
+    );
   }
 
   const videoPopup = videoLink?.videoPopup ?? false;
@@ -46,7 +74,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
         <ContentfulVideoEmbed
           videoAssetUrl={videoLink?.videoAssetUrl}
           videoAssetType={videoLink?.videoAssetType}
-          image={videoLink?.image}
+          image={posterImage}
           title={videoLink?.title}
           description={videoLink?.description}
           autoplay={isPlaying}
@@ -79,9 +107,9 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
             "relative w-full transition-opacity duration-300"
           )}
         >
-          {videoLink?.image && (
+          {posterImage && (
             <NextImage
-              src={videoLink.image}
+              src={posterImage}
               alt="Video preview"
               width={imageWidth || 660}
               height={imageHeight || 660}

package/src/components/video-link/types.ts

@@ -20,6 +20,7 @@ export type VideoLinkComponentProps = {
   imageWidth?: number;
   imageHeight?: number;
   useOriginalImageAspectRatio?: boolean;
+  isAboveTheFold?: boolean;
 };
 
 export type PlayButtonProps = {

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;