@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/contentful/blocks/cards/simple-card/types.ts

@@ -1,71 +1,71 @@
-import type { CSSProperties, ReactNode } from "react";
-import type { ButtonProps } from "../../button/types";
-
-export type PinwheelColor =
-  | "Blue-#307998"
-  | "Green-#209A61"
-  | "Orange-#DE7E0A"
-  | "Purple-#7E1458"
-  | (string & {});
-
-export type SimpleCardCtaBottom = {
-  title?: string;
-  href?: string;
-};
-
-export type Item = {
-  title?: string;
-  image?: string;
-  imageAlt?: string;
-  imageWidth?: number;
-  imageHeight?: number;
-  imageAlignment?: "left" | "right" | "center";
-  iconAlignment?: "left" | "right" | "center";
-  /**
-   * Layout variant for the image. `standard` / `icon` render an inline
-   * icon above the content. `full` renders a full-bleed top image.
-   * `margin` is `full` with horizontal padding.
-   */
-  imageView?: "standard" | "icon" | "full" | "margin" | "inset";
-  body?: ReactNode;
-  /** Optional secondary rich-text region (port of local `richText`). */
-  richText?: ReactNode;
-  cta?: ButtonProps;
-  ctaAlignment?: "left" | "right" | "center";
-  /** Top "location" CTA, rendered above the title with a `location_on` icon. */
-  ctaBottom?: SimpleCardCtaBottom;
-  ctaAlignmentBottom?: "left" | "right" | "center";
-  /** Legacy token-based card background (mapped via `backgroundColorMap`). */
-  backgroundColor?: string;
-  /** Raw color value used when `applyCardBackgroundColor` is true. */
-  applyCardBackgroundColor?: boolean;
-  textColor?: string;
-  showBackgroundImage?: boolean;
-  pinwheelColor?: PinwheelColor;
-  /** On `lg:` and up, lays out icon + content side-by-side. */
-  imageToRichTextAlignment?: boolean;
-  /** Bold label between title and the phone/hours table. */
-  titleLocation?: string;
-  phoneNumber?: string[];
-  /** Each entry uses a `label|value` separator. */
-  workingHours?: string[];
-  shadow?: boolean;
-};
-
-export type SimpleCardProps = {
-  card: Item;
-  lgWidth?: string;
-  mdWidth?: string;
-  className?: string;
-  contentClassName?: string;
-  style?: CSSProperties;
-};
-
-export const backgroundColorMap: Record<string, string> = {
-  blue: "bg-fill-brand",
-  green: "bg-fill-brand-accent",
-  navy: "bg-fill-inverse",
-  purple: "bg-fill-brand-tertiary",
-  white: "bg-white",
-  yellow: "bg-[#F5FF1E]",
-};
+import type { CSSProperties, ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+export type PinwheelColor =
+  | "Blue-#307998"
+  | "Green-#209A61"
+  | "Orange-#DE7E0A"
+  | "Purple-#7E1458"
+  | (string & {});
+
+export type SimpleCardCtaBottom = {
+  title?: string;
+  href?: string;
+};
+
+export type Item = {
+  title?: string;
+  image?: string;
+  imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  imageAlignment?: "left" | "right" | "center";
+  iconAlignment?: "left" | "right" | "center";
+  /**
+   * Layout variant for the image. `standard` / `icon` render an inline
+   * icon above the content. `full` renders a full-bleed top image.
+   * `margin` is `full` with horizontal padding.
+   */
+  imageView?: "standard" | "icon" | "full" | "margin" | "inset";
+  body?: ReactNode;
+  /** Optional secondary rich-text region (port of local `richText`). */
+  richText?: ReactNode;
+  cta?: ButtonProps;
+  ctaAlignment?: "left" | "right" | "center";
+  /** Top "location" CTA, rendered above the title with a `location_on` icon. */
+  ctaBottom?: SimpleCardCtaBottom;
+  ctaAlignmentBottom?: "left" | "right" | "center";
+  /** Legacy token-based card background (mapped via `backgroundColorMap`). */
+  backgroundColor?: string;
+  /** Raw color value used when `applyCardBackgroundColor` is true. */
+  applyCardBackgroundColor?: boolean;
+  textColor?: string;
+  showBackgroundImage?: boolean;
+  pinwheelColor?: PinwheelColor;
+  /** On `lg:` and up, lays out icon + content side-by-side. */
+  imageToRichTextAlignment?: boolean;
+  /** Bold label between title and the phone/hours table. */
+  titleLocation?: string;
+  phoneNumber?: string[];
+  /** Each entry uses a `label|value` separator. */
+  workingHours?: string[];
+  shadow?: boolean;
+};
+
+export type SimpleCardProps = {
+  card: Item;
+  lgWidth?: string;
+  mdWidth?: string;
+  className?: string;
+  contentClassName?: string;
+  style?: CSSProperties;
+};
+
+export const backgroundColorMap: Record<string, string> = {
+  blue: "bg-fill-brand",
+  green: "bg-fill-brand-accent",
+  navy: "bg-fill-inverse",
+  purple: "bg-fill-brand-tertiary",
+  white: "bg-white",
+  yellow: "bg-[#F5FF1E]",
+};

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

@@ -1,180 +1,180 @@
-import React from "react";
-import { TestimonialCard } from "./index";
-
-import { render, screen } from "@testing-library/react";
-
-jest.mock("@shared/components/material-icon", () => ({
-  MaterialIcon: ({ name, className }: any) => (
-    <span data-testid="material-icon" className={className}>
-      {name}
-    </span>
-  ),
-}));
-
-jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
-  ),
-}));
-
-jest.mock("next/image", () => {
-  const MockImage = ({ src, alt, className }: any) => (
-    <img data-testid="avatar-image" src={src} alt={alt} className={className} />
-  );
-  return MockImage;
-});
-
-jest.mock(
-  "clsx",
-  () =>
-    (...args: any[]) =>
-      args.flat().filter(Boolean).join(" ")
-);
-
-describe("TestimonialCard", () => {
-  const defaultProps = {
-    title: "Great Service",
-    quote: "This is an amazing product!",
-    rating: 4,
-    author: "John Doe",
-    role: "CEO",
-  };
-
-  describe("Rendering", () => {
-    it("renders the figure element", () => {
-      const { container } = render(<TestimonialCard {...defaultProps} />);
-      expect(container.querySelector("figure")).toBeInTheDocument();
-    });
-
-    it("renders title", () => {
-      render(<TestimonialCard {...defaultProps} />);
-      expect(screen.getByText("Great Service")).toBeInTheDocument();
-    });
-
-    it("renders quote", () => {
-      render(<TestimonialCard {...defaultProps} />);
-      expect(
-        screen.getByText("This is an amazing product!")
-      ).toBeInTheDocument();
-    });
-
-    it("renders author name", () => {
-      render(<TestimonialCard {...defaultProps} />);
-      expect(screen.getByText("John Doe")).toBeInTheDocument();
-    });
-
-    it("renders author role", () => {
-      render(<TestimonialCard {...defaultProps} />);
-      expect(screen.getByText("CEO")).toBeInTheDocument();
-    });
-  });
-
-  describe("Rating", () => {
-    it("renders 5 star icons", () => {
-      render(<TestimonialCard {...defaultProps} rating={4} />);
-      const icons = screen.getAllByTestId("material-icon");
-      expect(icons).toHaveLength(5);
-    });
-
-    it("applies filled class to rated stars", () => {
-      render(<TestimonialCard {...defaultProps} rating={3} />);
-      const icons = screen.getAllByTestId("material-icon");
-      const filledIcons = icons.filter(icon =>
-        icon.className.includes("text-text")
-      );
-      expect(filledIcons.length).toBe(3);
-    });
-
-    it("applies unfilled class to remaining stars", () => {
-      render(<TestimonialCard {...defaultProps} rating={3} />);
-      const icons = screen.getAllByTestId("material-icon");
-      const unfilledIcons = icons.filter(icon =>
-        icon.className.includes("text-gray-300")
-      );
-      expect(unfilledIcons.length).toBe(2);
-    });
-
-    it("does not render rating section when rating is undefined", () => {
-      render(<TestimonialCard {...defaultProps} rating={undefined} />);
-      expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
-    });
-
-    it("renders rating aria-label", () => {
-      const { container } = render(
-        <TestimonialCard {...defaultProps} rating={4} />
-      );
-      const ratingDiv = container.querySelector("[aria-label]");
-      expect(ratingDiv).toHaveAttribute("aria-label", "Rating: 4 out of 5");
-    });
-  });
-
-  describe("Avatar", () => {
-    it("renders avatar image when avatarUrl is provided", () => {
-      render(<TestimonialCard {...defaultProps} avatarUrl="/avatar.jpg" />);
-      expect(screen.getByTestId("avatar-image")).toBeInTheDocument();
-      expect(screen.getByTestId("avatar-image")).toHaveAttribute(
-        "src",
-        "/avatar.jpg"
-      );
-    });
-
-    it("renders initials when avatarUrl is not provided", () => {
-      render(<TestimonialCard {...defaultProps} />);
-      expect(screen.getByText("J")).toBeInTheDocument();
-    });
-  });
-
-  describe("Active state", () => {
-    it("applies active styles when isActive is true", () => {
-      const { container } = render(
-        <TestimonialCard {...defaultProps} isActive={true} />
-      );
-      const figure = container.querySelector("figure");
-      expect(figure?.className).toContain("bg-bg-surface-secondary");
-      expect(figure?.className).toContain("shadow-drop");
-    });
-
-    it("applies inactive styles when isActive is false", () => {
-      const { container } = render(
-        <TestimonialCard {...defaultProps} isActive={false} />
-      );
-      const figure = container.querySelector("figure");
-      expect(figure?.className).toContain("opacity-40");
-    });
-
-    it("defaults to inactive", () => {
-      const { container } = render(<TestimonialCard {...defaultProps} />);
-      const figure = container.querySelector("figure");
-      expect(figure?.className).toContain("opacity-40");
-    });
-  });
-
-  describe("Custom className", () => {
-    it("applies custom className", () => {
-      const { container } = render(
-        <TestimonialCard {...defaultProps} className="custom-card" />
-      );
-      const figure = container.querySelector("figure");
-      expect(figure?.className).toContain("custom-card");
-    });
-  });
-
-  describe("Author section", () => {
-    it("does not render author section when author is not provided", () => {
-      const { container } = render(
-        <TestimonialCard
-          title="Test"
-          quote="Quote"
-          rating={5}
-          author={undefined}
-        />
-      );
-      expect(container.querySelector("figcaption")).not.toBeInTheDocument();
-    });
-
-    it("renders figcaption when author is provided", () => {
-      const { container } = render(<TestimonialCard {...defaultProps} />);
-      expect(container.querySelector("figcaption")).toBeInTheDocument();
-    });
-  });
-});
+import React from "react";
+import { TestimonialCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("next/image", () => {
+  const MockImage = ({ src, alt, className }: any) => (
+    <img data-testid="avatar-image" src={src} alt={alt} className={className} />
+  );
+  return MockImage;
+});
+
+jest.mock(
+  "clsx",
+  () =>
+    (...args: any[]) =>
+      args.flat().filter(Boolean).join(" ")
+);
+
+describe("TestimonialCard", () => {
+  const defaultProps = {
+    title: "Great Service",
+    quote: "This is an amazing product!",
+    rating: 4,
+    author: "John Doe",
+    role: "CEO",
+  };
+
+  describe("Rendering", () => {
+    it("renders the figure element", () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      expect(container.querySelector("figure")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("Great Service")).toBeInTheDocument();
+    });
+
+    it("renders quote", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(
+        screen.getByText("This is an amazing product!")
+      ).toBeInTheDocument();
+    });
+
+    it("renders author name", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+    });
+
+    it("renders author role", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("CEO")).toBeInTheDocument();
+    });
+  });
+
+  describe("Rating", () => {
+    it("renders 5 star icons", () => {
+      render(<TestimonialCard {...defaultProps} rating={4} />);
+      const icons = screen.getAllByTestId("material-icon");
+      expect(icons).toHaveLength(5);
+    });
+
+    it("applies filled class to rated stars", () => {
+      render(<TestimonialCard {...defaultProps} rating={3} />);
+      const icons = screen.getAllByTestId("material-icon");
+      const filledIcons = icons.filter(icon =>
+        icon.className.includes("text-text")
+      );
+      expect(filledIcons.length).toBe(3);
+    });
+
+    it("applies unfilled class to remaining stars", () => {
+      render(<TestimonialCard {...defaultProps} rating={3} />);
+      const icons = screen.getAllByTestId("material-icon");
+      const unfilledIcons = icons.filter(icon =>
+        icon.className.includes("text-gray-300")
+      );
+      expect(unfilledIcons.length).toBe(2);
+    });
+
+    it("does not render rating section when rating is undefined", () => {
+      render(<TestimonialCard {...defaultProps} rating={undefined} />);
+      expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
+    });
+
+    it("renders rating aria-label", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} rating={4} />
+      );
+      const ratingDiv = container.querySelector("[aria-label]");
+      expect(ratingDiv).toHaveAttribute("aria-label", "Rating: 4 out of 5");
+    });
+  });
+
+  describe("Avatar", () => {
+    it("renders avatar image when avatarUrl is provided", () => {
+      render(<TestimonialCard {...defaultProps} avatarUrl="/avatar.jpg" />);
+      expect(screen.getByTestId("avatar-image")).toBeInTheDocument();
+      expect(screen.getByTestId("avatar-image")).toHaveAttribute(
+        "src",
+        "/avatar.jpg"
+      );
+    });
+
+    it("renders initials when avatarUrl is not provided", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("J")).toBeInTheDocument();
+    });
+  });
+
+  describe("Active state", () => {
+    it("applies active styles when isActive is true", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} isActive={true} />
+      );
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("bg-bg-surface-secondary");
+      expect(figure?.className).toContain("shadow-drop");
+    });
+
+    it("applies inactive styles when isActive is false", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} isActive={false} />
+      );
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("opacity-40");
+    });
+
+    it("defaults to inactive", () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("opacity-40");
+    });
+  });
+
+  describe("Custom className", () => {
+    it("applies custom className", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} className="custom-card" />
+      );
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("custom-card");
+    });
+  });
+
+  describe("Author section", () => {
+    it("does not render author section when author is not provided", () => {
+      const { container } = render(
+        <TestimonialCard
+          title="Test"
+          quote="Quote"
+          rating={5}
+          author={undefined}
+        />
+      );
+      expect(container.querySelector("figcaption")).not.toBeInTheDocument();
+    });
+
+    it("renders figcaption when author is provided", () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      expect(container.querySelector("figcaption")).toBeInTheDocument();
+    });
+  });
+});