@windstream/react-shared-components 0.2.32 → 0.2.34

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

@@ -0,0 +1,227 @@
+import React from "react";
+import { VideoLink } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("./contentful-video-embed", () => ({
+  ContentfulVideoEmbed: ({ videoAssetUrl, autoplay }: any) => (
+    <div
+      data-testid="contentful-video-embed"
+      data-video-asset-url={videoAssetUrl}
+      data-autoplay={autoplay}
+    />
+  ),
+}));
+
+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) => (
+    <div
+      data-testid="youtube-embed"
+      data-link={link}
+      data-autoplay={autoplay}
+    />
+  ),
+}));
+
+jest.mock("./helper", () => ({
+  PlayButton: ({ isHovered }: any) => (
+    <div data-testid="play-button" data-hovered={isHovered} />
+  ),
+}));
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt }: any) => (
+    <img data-testid="next-image" src={src} alt={alt} />
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+const clickVideoSection = (container: HTMLElement) => {
+  fireEvent.click(container.querySelector(".video-section")!);
+};
+
+describe("VideoLink", () => {
+  it("renders nothing when videoLink is undefined", () => {
+    const { container } = render(<VideoLink />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders nothing when videoLink has neither link nor videoAssetUrl", () => {
+    const { container } = render(
+      <VideoLink videoLink={{ image: "thumb.jpg" }} />
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders nothing when videoSourceType is 'contentful' but videoAssetUrl is missing", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{ videoSourceType: "contentful", image: "thumb.jpg" }}
+      />
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders preview image and play button when videoLink has link and image", () => {
+    render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+        }}
+      />
+    );
+    expect(screen.getByTestId("play-button")).toBeInTheDocument();
+    expect(screen.getByAltText("Video preview")).toBeInTheDocument();
+  });
+
+  it("does not render preview image when videoLink.image is missing", () => {
+    render(
+      <VideoLink videoLink={{ link: "https://youtube.com/watch?v=123" }} />
+    );
+    expect(screen.queryByAltText("Video preview")).not.toBeInTheDocument();
+  });
+
+  it("shows youtube embed inline on click for a youtube link", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+        }}
+      />
+    );
+    clickVideoSection(container);
+    expect(screen.getByTestId("youtube-embed")).toBeInTheDocument();
+  });
+
+  it("shows vimeo embed inline on click for a vimeo link", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{ link: "https://vimeo.com/123", image: "thumb.jpg" }}
+      />
+    );
+    clickVideoSection(container);
+    expect(screen.getByTestId("vimeo-embed")).toBeInTheDocument();
+  });
+
+  it("shows the contentful embed when videoSourceType is 'contentful'", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          videoSourceType: "contentful",
+          videoAssetUrl: "https://videos.ctfassets.net/space/asset/sample.mp4",
+          image: "thumb.jpg",
+        }}
+      />
+    );
+    clickVideoSection(container);
+    expect(screen.getByTestId("contentful-video-embed")).toHaveAttribute(
+      "data-video-asset-url",
+      "https://videos.ctfassets.net/space/asset/sample.mp4"
+    );
+  });
+
+  it("shows popup overlay when videoPopup is true and playing", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+          videoPopup: true,
+        }}
+      />
+    );
+    clickVideoSection(container);
+    expect(container.querySelector(".fixed")).toBeInTheDocument();
+  });
+
+  it("does not render inline embed when videoPopup is true", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+          videoPopup: true,
+        }}
+      />
+    );
+    clickVideoSection(container);
+    expect(container.querySelector(".fixed")).toBeInTheDocument();
+  });
+
+  it("renders inline (not popup) when videoPopup is not provided", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+        }}
+      />
+    );
+    clickVideoSection(container);
+    expect(container.querySelector(".fixed")).not.toBeInTheDocument();
+    expect(screen.getByTestId("youtube-embed")).toBeInTheDocument();
+  });
+
+  it("closes popup on overlay click", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+          videoPopup: true,
+        }}
+      />
+    );
+    clickVideoSection(container);
+    fireEvent.click(container.querySelector(".fixed")!);
+    expect(container.querySelector(".fixed")).not.toBeInTheDocument();
+  });
+
+  it("does not close popup when clicking inside the popup content", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+          videoPopup: true,
+        }}
+      />
+    );
+    clickVideoSection(container);
+    fireEvent.click(container.querySelector(".max-w-6xl")!);
+    expect(container.querySelector(".fixed")).toBeInTheDocument();
+  });
+
+  it("handles hover state on the video section", () => {
+    const { container } = render(
+      <VideoLink
+        videoLink={{
+          link: "https://youtube.com/watch?v=123",
+          image: "thumb.jpg",
+        }}
+      />
+    );
+    const videoSection = container.querySelector(".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"
+    );
+  });
+});

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

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { ContentfulVideoEmbed } from "./contentful-video-embed";
+import { PlayButton } from "./helper";
+import { VideoLinkComponentProps } from "./types";
+import { VimeoEmbed } from "./vimeo-embed";
+import { YoutubeEmbed } from "./youtube-embed";
+
+import { NextImage } from "@shared/components/next-image";
+import { cx } from "@shared/utils";
+
+// Owns all video state (active/hover) so ImagePromoBar stays state-free for video.
+export const VideoLink: React.FC<VideoLinkComponentProps> = ({
+  videoLink,
+  imageWidth = 660,
+  imageHeight = 660,
+  useOriginalImageAspectRatio = false,
+}) => {
+  const [activeVideo, setActiveVideo] = useState("");
+  const [isHovered, setIsHovered] = useState(false);
+
+  const videoSourceType = videoLink?.videoSourceType;
+  const videoHref =
+    (videoSourceType === "contentful"
+      ? videoLink?.videoAssetUrl
+      : videoLink?.link) ?? "";
+
+  if (!videoHref) {
+    return null;
+  }
+
+  const videoPopup = videoLink?.videoPopup ?? false;
+  const isPlaying = Boolean(activeVideo && activeVideo === videoHref);
+
+  const handlePlayClick = () => {
+    setActiveVideo(videoHref);
+  };
+
+  const handleCloseVideo = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setActiveVideo("");
+  };
+
+  const embedSelector = () => {
+    if (videoSourceType === "contentful") {
+      return (
+        <ContentfulVideoEmbed
+          videoAssetUrl={videoLink?.videoAssetUrl}
+          videoAssetType={videoLink?.videoAssetType}
+          image={videoLink?.image}
+          title={videoLink?.title}
+          description={videoLink?.description}
+          autoplay={isPlaying}
+        />
+      );
+    }
+    if (videoHref.includes("vimeo")) {
+      return <VimeoEmbed link={videoHref} autoplay={isPlaying} />;
+    }
+    return <YoutubeEmbed link={videoHref} autoplay={isPlaying} />;
+  };
+  const contentVideo = embedSelector();
+
+  return (
+    <>
+      <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>
+
+      {/* 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>
+      )}
+    </>
+  );
+};
+
+export default VideoLink;
+
+export { ContentfulVideoEmbed } from "./contentful-video-embed";
+export { PlayButton } from "./helper";
+export { VimeoEmbed } from "./vimeo-embed";
+export { YoutubeEmbed } from "./youtube-embed";
+
+export type {
+  PlayButtonProps,
+  VideoEmbedProps,
+  VideoLinkComponentProps,
+  VideoLinkProps,
+} from "./types";

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

@@ -0,0 +1,28 @@
+export type VideoLinkProps = {
+  image?: string;
+  videoPopup?: boolean;
+  link?: string;
+  videoSourceType?: "youtube" | "contentful";
+  videoAssetUrl?: string;
+  videoAssetType?: string;
+  title?: string;
+  description?: string;
+};
+
+export type VideoEmbedProps = {
+  containerClassName?: string;
+  autoplay?: boolean;
+  debug?: boolean;
+} & VideoLinkProps;
+
+export type VideoLinkComponentProps = {
+  videoLink?: VideoLinkProps;
+  imageWidth?: number;
+  imageHeight?: number;
+  useOriginalImageAspectRatio?: boolean;
+};
+
+export type PlayButtonProps = {
+  isHovered?: boolean;
+  containerClassName?: string;
+};

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

@@ -7,6 +7,7 @@ import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
 
 export function BlogGridBase({
   title = "recent articles",
+  description,
   paginatedArticles,
   totalArticles,
   currentPage,
@@ -37,10 +38,14 @@ export function BlogGridBase({
     >
       {/* Controls bar */}
       <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
+        {description && (
+          <Text as="p" className="body1 mb-4 w-full text-center md:mb-6">
+            {description}
+          </Text>
+        )}
         <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
           {title}
         </Text>
-
         {categoryOptions.length > 0 && (
           <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
             {/* Showing count */}

package/src/contentful/blocks/blogs-grid-base/types.ts

@@ -18,6 +18,7 @@ export interface BlogCardProps {
 
 export interface BlogGridBaseProps {
   title?: string;
+  description?: string;
   paginatedArticles: BlogCardProps[];
   totalArticles: number;
   currentPage: number;

package/src/contentful/blocks/button/index.test.tsx

@@ -283,6 +283,58 @@ describe("Button", () => {
       fireEvent.click(screen.getByTestId("link"));
       expect(onModalButtonClick).toHaveBeenCalledWith("tab1");
     });
+
+    it("prevents anchor navigation and opens modal when href is present and clickToOpen is 'modal'", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          buttonLabel="Open"
+          href="https://example.com"
+          clickToOpen="modal"
+          tabmodalNameToOpen="my-modal"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      // fireEvent.click returns false when a handler called preventDefault().
+      const notCancelled = fireEvent.click(screen.getByTestId("brand-button"));
+      expect(notCancelled).toBe(false);
+      expect(onModalButtonClick).toHaveBeenCalledWith("my-modal");
+    });
+
+    it("prevents anchor navigation when href is present and clickToOpen is 'clickId'", () => {
+      const scrollIntoView = jest.fn();
+      const targetEl = document.createElement("div");
+      targetEl.scrollIntoView = scrollIntoView;
+      const getElementByIdSpy = jest
+        .spyOn(document, "getElementById")
+        .mockReturnValue(targetEl);
+      render(
+        <Button
+          buttonLabel="Scroll"
+          href="https://example.com"
+          clickToOpen="clickId"
+          idNameToOpen="section-1"
+        />
+      );
+      const notCancelled = fireEvent.click(screen.getByTestId("brand-button"));
+      expect(notCancelled).toBe(false);
+      expect(scrollIntoView).toHaveBeenCalled();
+      getElementByIdSpy.mockRestore();
+    });
+
+    it("does not prevent anchor navigation for a normal href link", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          buttonLabel="Go"
+          href="https://example.com"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      const notCancelled = fireEvent.click(screen.getByTestId("brand-button"));
+      expect(notCancelled).toBe(true);
+      expect(onModalButtonClick).not.toHaveBeenCalled();
+    });
   });
 
   describe("preserveQueryParameters", () => {

package/src/contentful/blocks/button/index.tsx

@@ -84,22 +84,27 @@ export const Button: React.FC<ButtonProps> = props => {
     }
   }
 
-  function handleModalClick() {
+  function handleModalClick(
+    event?: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) {
     if (clickToOpen === "modal") {
+      // Prevent the anchor's href from navigating so the CTA only opens the modal.
+      event?.preventDefault();
       onModalButtonClick?.(tabmodalNameToOpen);
     }
     if (clickToOpen === "clickId") {
+      event?.preventDefault();
       handleClickId();
     }
   }
 
   function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
-    handleModalClick();
+    handleModalClick(event);
     onClick?.(event);
   }
 
   function buttonClick(event: React.MouseEvent<HTMLButtonElement>) {
-    handleModalClick();
+    handleModalClick(event);
     onClick?.(event);
   }