@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/cards/blog-card/index.test.tsx

@@ -0,0 +1,218 @@
+import React from "react";
+import { BlogCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock next/link
+jest.mock("next/link", () => {
+  const MockLink = ({ children, href, className, ...rest }: any) => (
+    <a href={href} className={className} {...rest}>
+      {children}
+    </a>
+  );
+  MockLink.displayName = "MockNextLink";
+  return MockLink;
+});
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name }: any) => (
+    <span data-testid="material-icon" data-name={name}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, className, ...rest }: any) => (
+    <span className={className} {...rest}>
+      {children}
+    </span>
+  ),
+}));
+
+describe("BlogCard", () => {
+  const defaultProps = {
+    href: "/blog/test-post",
+    title: "Test Blog Post",
+    description: "A description of the post",
+    date: "Jan 15, 2026",
+    category: "Technology",
+  };
+
+  describe("Rendering", () => {
+    it("renders the article element", () => {
+      const { container } = render(<BlogCard {...defaultProps} />);
+      expect(container.querySelector("article")).toBeInTheDocument();
+    });
+
+    it("renders title as a link", () => {
+      render(<BlogCard {...defaultProps} />);
+      expect(screen.getByText("Test Blog Post")).toBeInTheDocument();
+      expect(screen.getByText("Test Blog Post").closest("a")).toHaveAttribute(
+        "href",
+        "/blog/test-post"
+      );
+    });
+
+    it("renders description", () => {
+      render(<BlogCard {...defaultProps} />);
+      expect(screen.getByText("A description of the post")).toBeInTheDocument();
+    });
+
+    it("renders category", () => {
+      render(<BlogCard {...defaultProps} />);
+      expect(screen.getByText("Technology")).toBeInTheDocument();
+    });
+
+    it("renders date", () => {
+      render(<BlogCard {...defaultProps} />);
+      expect(screen.getByText("Jan 15, 2026")).toBeInTheDocument();
+    });
+
+    it("renders dot separator between category and date", () => {
+      render(<BlogCard {...defaultProps} />);
+      expect(screen.getByText("•")).toBeInTheDocument();
+    });
+
+    it("renders read more link", () => {
+      render(<BlogCard {...defaultProps} />);
+      expect(screen.getByText("Read more")).toBeInTheDocument();
+    });
+
+    it("renders custom readMoreText", () => {
+      render(<BlogCard {...defaultProps} readMoreText="Continue reading" />);
+      expect(screen.getByText("Continue reading")).toBeInTheDocument();
+    });
+
+    it("does not render date separator when date is not provided", () => {
+      render(<BlogCard {...defaultProps} date={undefined} />);
+      expect(screen.queryByText("•")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Image", () => {
+    it("renders img element when image is provided", () => {
+      const image = {
+        src: "/test.jpg",
+        alt: "Test image",
+        width: 400,
+        height: 300,
+      };
+      const { container } = render(
+        <BlogCard {...defaultProps} image={image} />
+      );
+      const img = container.querySelector("img");
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute("src", "/test.jpg");
+      expect(img).toHaveAttribute("alt", "Test image");
+    });
+
+    it("renders custom imageComponent when provided", () => {
+      const image = {
+        src: "/test.jpg",
+        alt: "Custom image",
+        width: 400,
+        height: 300,
+      };
+      const CustomImage = (props: any) => (
+        <img data-testid="custom-image" {...props} />
+      );
+      render(
+        <BlogCard
+          {...defaultProps}
+          image={image}
+          imageComponent={CustomImage}
+        />
+      );
+      expect(screen.getByTestId("custom-image")).toBeInTheDocument();
+    });
+
+    it("renders placeholder when no image is provided", () => {
+      const { container } = render(<BlogCard {...defaultProps} />);
+      const placeholder = container.querySelector("[aria-hidden='true']");
+      expect(placeholder).toBeInTheDocument();
+    });
+  });
+
+  describe("Layout", () => {
+    it("applies grid layout by default", () => {
+      const { container } = render(<BlogCard {...defaultProps} />);
+      const article = container.querySelector("article");
+      expect(article?.className).toContain("flex h-full flex-col");
+    });
+
+    it("applies non-grid layout when asGrid is false", () => {
+      const { container } = render(
+        <BlogCard {...defaultProps} asGrid={false} />
+      );
+      const article = container.querySelector("article");
+      expect(article?.className).toContain("callout-card");
+    });
+
+    it("applies lgWidth and mdWidth in non-grid mode", () => {
+      const { container } = render(
+        <BlogCard
+          {...defaultProps}
+          asGrid={false}
+          lgWidth="lg:w-1/3"
+          mdWidth="md:w-1/2"
+        />
+      );
+      const article = container.querySelector("article");
+      expect(article?.className).toContain("lg:w-1/3");
+      expect(article?.className).toContain("md:w-1/2");
+    });
+
+    it("applies data-section-type attribute", () => {
+      const { container } = render(<BlogCard {...defaultProps} />);
+      const article = container.querySelector("article");
+      expect(article).toHaveAttribute("data-section-type", "blog-card");
+    });
+
+    it("applies data-section-index attribute", () => {
+      const { container } = render(<BlogCard {...defaultProps} index={2} />);
+      const article = container.querySelector("article");
+      expect(article).toHaveAttribute("data-section-index", "2");
+    });
+  });
+
+  describe("Optional props", () => {
+    it("renders without title", () => {
+      const { container } = render(
+        <BlogCard {...defaultProps} title={undefined} />
+      );
+      expect(container.querySelector("article")).toBeInTheDocument();
+    });
+
+    it("renders without description", () => {
+      const { container } = render(
+        <BlogCard {...defaultProps} description={undefined} />
+      );
+      expect(container.querySelector("article")).toBeInTheDocument();
+    });
+
+    it("sets aria-label on read more link", () => {
+      render(<BlogCard {...defaultProps} />);
+      const links = screen.getAllByRole("link");
+      const readMoreLink = links.find(link =>
+        link.getAttribute("aria-label")?.includes("Read more")
+      );
+      expect(readMoreLink).toHaveAttribute(
+        "aria-label",
+        "Read more about Test Blog Post"
+      );
+    });
+
+    it("uses fallback aria-label when title is not provided", () => {
+      render(<BlogCard {...defaultProps} title={undefined} />);
+      const links = screen.getAllByRole("link");
+      const readMoreLink = links.find(link =>
+        link.getAttribute("aria-label")?.includes("Read more")
+      );
+      expect(readMoreLink).toHaveAttribute(
+        "aria-label",
+        "Read more about this article"
+      );
+    });
+  });
+});

package/src/contentful/blocks/cards/floating-image-card/index.test.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { FloatingImageCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt, width, height, className, onClick }: any) => (
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      onClick={onClick}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("../../button", () => ({
+  Button: ({ children, linkClassName, ...rest }: any) => (
+    <button data-testid="cta-button" className={linkClassName}>
+      {rest.buttonLabel || children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("FloatingImageCard", () => {
+  const defaultCard = {
+    title: "Card Title",
+    header: "Card Header",
+    body: "Card body content",
+    image: { href: "/image.jpg", title: "Test Image", width: 400, height: 285 },
+  };
+
+  describe("Rendering", () => {
+    it("renders the section element", () => {
+      const { container } = render(<FloatingImageCard card={defaultCard} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+    });
+
+    it("renders header text", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      expect(screen.getByText("Card Header")).toBeInTheDocument();
+    });
+
+    it("renders body text", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      expect(screen.getByText("Card body content")).toBeInTheDocument();
+    });
+
+    it("renders image when provided", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("src", "/image.jpg");
+      expect(img).toHaveAttribute("alt", "Test Image");
+    });
+
+    it("does not render image when not provided", () => {
+      render(<FloatingImageCard card={{ ...defaultCard, image: undefined }} />);
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+
+    it("does not render header when not provided", () => {
+      render(
+        <FloatingImageCard card={{ ...defaultCard, header: undefined }} />
+      );
+      expect(screen.queryByText("Card Header")).not.toBeInTheDocument();
+    });
+
+    it("does not render body when not provided", () => {
+      render(<FloatingImageCard card={{ ...defaultCard, body: undefined }} />);
+      expect(screen.queryByText("Card body content")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA", () => {
+    it("renders CTA button when cta is provided", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Learn More", href: "/learn" },
+      };
+      render(<FloatingImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("does not render CTA when not provided", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA alignment", () => {
+    it("applies left alignment by default", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<FloatingImageCard card={card} />);
+      const ctaWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(ctaWrapper?.className).toContain("justify-start");
+    });
+
+    it("applies center alignment", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+        ctaAlignment: "center" as const,
+      };
+      render(<FloatingImageCard card={card} />);
+      const ctaWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(ctaWrapper?.className).toContain("justify-center");
+    });
+
+    it("applies right alignment", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+        ctaAlignment: "right" as const,
+      };
+      render(<FloatingImageCard card={card} />);
+      const ctaWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(ctaWrapper?.className).toContain("justify-end");
+    });
+  });
+
+  describe("PromoBar mode", () => {
+    it("renders only image when isPromoBarImg is true", () => {
+      const card = {
+        ...defaultCard,
+        isPromoBarImg: true,
+      };
+      const { container } = render(<FloatingImageCard card={card} />);
+      expect(container.querySelector("section")).not.toBeInTheDocument();
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("returns null when isPromoBarImg is true and no image", () => {
+      const card = {
+        ...defaultCard,
+        image: undefined,
+        isPromoBarImg: true,
+      };
+      const { container } = render(<FloatingImageCard card={card} />);
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe("Image link", () => {
+    it("makes image clickable when imageLink is provided", () => {
+      const windowOpen = jest.spyOn(window, "open").mockImplementation();
+      const card = {
+        ...defaultCard,
+        imageLink: "https://example.com",
+      };
+      render(<FloatingImageCard card={card} />);
+      const img = screen.getByTestId("next-image");
+      img.click();
+      expect(windowOpen).toHaveBeenCalledWith("https://example.com", "_blank");
+      windowOpen.mockRestore();
+    });
+  });
+
+  describe("Layout props", () => {
+    it("applies lgWidth class", () => {
+      const { container } = render(
+        <FloatingImageCard card={defaultCard} lgWidth="lg:w-1/3" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "lg:w-1/3"
+      );
+    });
+
+    it("applies mdWidth class", () => {
+      const { container } = render(
+        <FloatingImageCard card={defaultCard} mdWidth="md:w-1/2" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "md:w-1/2"
+      );
+    });
+
+    it("applies shadow class when shadow is true", () => {
+      const card = { ...defaultCard, shadow: true };
+      const { container } = render(<FloatingImageCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "shadow-card"
+      );
+    });
+  });
+});

package/src/contentful/blocks/cards/full-image-card/index.test.tsx

@@ -0,0 +1,216 @@
+import React from "react";
+import { FullImageCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt, width, height, className }: any) => (
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, className, tabIndex, target, ...rest }: any) => (
+    <a
+      href={href}
+      className={className}
+      tabIndex={tabIndex}
+      target={target}
+      {...rest}
+    >
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("../../button", () => ({
+  Button: ({ children, linkClassName, buttonLabel }: any) => (
+    <button data-testid="cta-button" className={linkClassName}>
+      {buttonLabel || children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("FullImageCard", () => {
+  const defaultCard = {
+    title: "Card Title",
+    description: "Card description",
+    image: { href: "/image.jpg", title: "Card Image", width: 400, height: 280 },
+  };
+
+  describe("Rendering", () => {
+    it("renders the section element", () => {
+      const { container } = render(<FullImageCard card={defaultCard} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.getByText("Card Title")).toBeInTheDocument();
+    });
+
+    it("renders description", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.getByText("Card description")).toBeInTheDocument();
+    });
+
+    it("renders image when provided", () => {
+      render(<FullImageCard card={defaultCard} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("src", "/image.jpg");
+    });
+
+    it("does not render image when not provided", () => {
+      render(<FullImageCard card={{ title: "No Image" }} />);
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+
+    it("does not render title when not provided", () => {
+      render(<FullImageCard card={{ description: "Desc only" }} />);
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+    });
+
+    it("does not render description when not provided", () => {
+      render(<FullImageCard card={{ title: "Title only" }} />);
+      expect(screen.queryByText("Card description")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Caption", () => {
+    it("renders caption when provided", () => {
+      const card = { ...defaultCard, caption: "A note" };
+      render(<FullImageCard card={card} />);
+      expect(screen.getByText("A note")).toBeInTheDocument();
+    });
+
+    it("does not render caption when not provided", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.queryByText("A note")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA", () => {
+    it("renders CTA button when cta is provided", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Learn More", href: "/learn" },
+      };
+      render(<FullImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("does not render CTA when not provided", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+
+    it("wraps title in link when cta href is present", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<FullImageCard card={card} />);
+      const titleLink = screen.getByText("Card Title").closest("a");
+      expect(titleLink).toHaveAttribute("href", "/click");
+    });
+
+    it("wraps image in link when cta href is present", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<FullImageCard card={card} />);
+      const imgLink = screen.getByTestId("next-image").closest("a");
+      expect(imgLink).toHaveAttribute("href", "/click");
+    });
+  });
+
+  describe("Link prop", () => {
+    it("uses link href for image and title when no cta", () => {
+      const card = {
+        ...defaultCard,
+        link: { href: "/link-target", target: "_blank" as const },
+      };
+      render(<FullImageCard card={card} />);
+      const imgLink = screen.getByTestId("next-image").closest("a");
+      expect(imgLink).toHaveAttribute("href", "/link-target");
+    });
+  });
+
+  describe("Layout props", () => {
+    it("applies lgWidth class", () => {
+      const { container } = render(
+        <FullImageCard card={defaultCard} lgWidth="lg:w-1/3" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "lg:w-1/3"
+      );
+    });
+
+    it("applies mdWidth class", () => {
+      const { container } = render(
+        <FullImageCard card={defaultCard} mdWidth="md:w-1/2" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "md:w-1/2"
+      );
+    });
+
+    it("applies shadow by default", () => {
+      const { container } = render(<FullImageCard card={defaultCard} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "shadow-card"
+      );
+    });
+
+    it("does not apply shadow when shadow is false", () => {
+      const card = { ...defaultCard, shadow: false };
+      const { container } = render(<FullImageCard card={card} />);
+      expect(container.querySelector("section")?.className).not.toContain(
+        "shadow-card"
+      );
+    });
+
+    it("applies custom className", () => {
+      const card = { ...defaultCard, className: "my-class" };
+      const { container } = render(<FullImageCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "my-class"
+      );
+    });
+
+    it("applies anchorId as section id", () => {
+      const card = { ...defaultCard, anchorId: "my-card" };
+      const { container } = render(<FullImageCard card={card} />);
+      expect(container.querySelector("section")).toHaveAttribute(
+        "id",
+        "my-card"
+      );
+    });
+
+    it("uses default anchorId FullImageCard", () => {
+      const { container } = render(<FullImageCard card={defaultCard} />);
+      expect(container.querySelector("section")).toHaveAttribute(
+        "id",
+        "FullImageCard"
+      );
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { Cards } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+}));
+
+describe("Cards", () => {
+  it("renders the Cards component", () => {
+    render(<Cards fields={{}} />);
+    expect(screen.getByText("Cards")).toBeInTheDocument();
+  });
+
+  it("renders a div wrapper", () => {
+    const { container } = render(<Cards fields={{}} />);
+    expect(container.querySelector("div")).toBeInTheDocument();
+  });
+
+  it("renders with empty fields object", () => {
+    const { container } = render(<Cards fields={{}} />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it("renders Text component with Cards text", () => {
+    render(<Cards fields={{}} />);
+    const text = screen.getByText("Cards");
+    expect(text).toBeInTheDocument();
+    expect(text.tagName).toBe("SPAN");
+  });
+
+  it("exports default Cards component", async () => {
+    const mod = await import("./index");
+    expect(mod.default).toBeDefined();
+  });
+});