@windstream/react-shared-components 0.1.94 → 0.1.96

package/src/contentful/blocks/callout/types.ts

@@ -1,78 +1,78 @@
-import type { ReactNode } from "react";
-import type { ButtonProps } from "../button/types";
-
-import type { AnimationType } from "@shared/components/animation-wrapper";
-
-export type CalloutCardType = "simple" | "blog" | "fullImage" | "floatingImage";
-
-export type CalloutCtaProps = ButtonProps & {
-  label?: string;
-};
-
-export type CalloutItem = {
-  /**
-   * Optional per-item card type. When provided, overrides the top-level
-   * `cardType` for this single item — enables mixed card variants in one
-   * Callout (e.g. one full-image + two simple cards).
-   */
-  cardType?: CalloutCardType;
-  // Permissive shape — concrete card components validate their own subset.
-  [key: string]: any;
-};
-
-export type CalloutProps = {
-  /** Outer `<section>` id — anchor link target. */
-  anchorId?: string;
-  title?: string;
-  enableHeading?: boolean;
-  subtitle?: string;
-  description?: string;
-  finePrint?: ReactNode;
-  cta?: CalloutCtaProps;
-  applyBoxShadow?: boolean;
-  cardStackingMobile?: boolean;
-  bottomText?: string;
-  color?: "dark" | "light";
-  /**
-   * When `true` (default) cards are laid out in a responsive Tailwind
-   * grid sized by `maxCardsPerRow`. When `false` the cards stretch
-   * full-width and stack vertically (no inner widths).
-   *
-   * Accepts a string for backward compatibility with legacy consumers
-   * that pass a Tailwind width class (e.g. "w-1/2"); any truthy value
-   * enables grid mode — the string itself is not applied.
-   */
-  cardsWidth?: boolean | string;
-  maxCardsPerRow?: number;
-  noGutter?: boolean;
-  items: CalloutItem[];
-  maxWidth?: boolean;
-  /** Top-level card type used when an item does not specify its own. */
-  cardType?: CalloutCardType;
-  /**
-   * Background color token. When omitted the section has no background
-   * (preserves prior behavior for existing 0.1.70 consumers).
-   */
-  backgroundColor?:
-    | "cream500"
-    | "gray100"
-    | "white"
-    | "transparent"
-    | "blue"
-    | "green"
-    | "navy"
-    | "purple"
-    | "yellow";
-  /** Raw background CSS value (overrides `backgroundColor` when present). */
-  background?: string;
-  /** Inline text color override applied to the heading region. */
-  textColor?: string;
-  /** Extra class names for the outer <section>. */
-  containerClassName?: string;
-  /** Extra class names for the inner content wrapper. */
-  innerClassName?: string;
-  /** Disable card hover/tap animations. */
-  disableAnimation?: boolean;
-  /** Animation type(s) applied to each card. */
-  animationType?: AnimationType | AnimationType[];
-};
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../button/types";
+
+import type { AnimationType } from "@shared/components/animation-wrapper";
+
+export type CalloutCardType = "simple" | "blog" | "fullImage" | "floatingImage";
+
+export type CalloutCtaProps = ButtonProps & {
+  label?: string;
+};
+
+export type CalloutItem = {
+  /**
+   * Optional per-item card type. When provided, overrides the top-level
+   * `cardType` for this single item — enables mixed card variants in one
+   * Callout (e.g. one full-image + two simple cards).
+   */
+  cardType?: CalloutCardType;
+  // Permissive shape — concrete card components validate their own subset.
+  [key: string]: any;
+};
+
+export type CalloutProps = {
+  /** Outer `<section>` id — anchor link target. */
+  anchorId?: string;
+  title?: string;
+  enableHeading?: boolean;
+  subtitle?: string;
+  description?: string;
+  finePrint?: ReactNode;
+  cta?: CalloutCtaProps;
+  applyBoxShadow?: boolean;
+  cardStackingMobile?: boolean;
+  bottomText?: string;
+  color?: "dark" | "light";
+  /**
+   * When `true` (default) cards are laid out in a responsive Tailwind
+   * grid sized by `maxCardsPerRow`. When `false` the cards stretch
+   * full-width and stack vertically (no inner widths).
+   *
+   * Accepts a string for backward compatibility with legacy consumers
+   * that pass a Tailwind width class (e.g. "w-1/2"); any truthy value
+   * enables grid mode — the string itself is not applied.
+   */
+  cardsWidth?: boolean | string;
+  maxCardsPerRow?: number;
+  noGutter?: boolean;
+  items: CalloutItem[];
+  maxWidth?: boolean;
+  /** Top-level card type used when an item does not specify its own. */
+  cardType?: CalloutCardType;
+  /**
+   * Background color token. When omitted the section has no background
+   * (preserves prior behavior for existing 0.1.70 consumers).
+   */
+  backgroundColor?:
+    | "cream500"
+    | "gray100"
+    | "white"
+    | "transparent"
+    | "blue"
+    | "green"
+    | "navy"
+    | "purple"
+    | "yellow";
+  /** Raw background CSS value (overrides `backgroundColor` when present). */
+  background?: string;
+  /** Inline text color override applied to the heading region. */
+  textColor?: string;
+  /** Extra class names for the outer <section>. */
+  containerClassName?: string;
+  /** Extra class names for the inner content wrapper. */
+  innerClassName?: string;
+  /** Disable card hover/tap animations. */
+  disableAnimation?: boolean;
+  /** Animation type(s) applied to each card. */
+  animationType?: AnimationType | AnimationType[];
+};

package/src/contentful/blocks/cards/Cards.stories.tsx

@@ -1,23 +1,23 @@
-import { Cards } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Cards> = {
-  title: "Contentful Blocks/Cards",
-  component: Cards,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful cards block.",
-      },
-    },
-  },
-  args: { fields: {} },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Cards } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Cards> = {
+  title: "Contentful Blocks/Cards",
+  component: Cards,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful cards block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,218 +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"
-      );
-    });
-  });
-});
+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"
+      );
+    });
+  });
+});