@windstream/react-shared-components 0.1.93 → 0.1.95

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

@@ -0,0 +1,263 @@
+import React from "react";
+import { ProductCard } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/button", () => ({
+  Button: ({ children, onClick, className }: any) => (
+    <button
+      data-testid="feature-toggle"
+      onClick={onClick}
+      className={className}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/checklist", () => ({
+  Checklist: ({ items }: any) => (
+    <ul data-testid="checklist">
+      {items?.map((item: any, i: number) => (
+        <li key={i}>{item}</li>
+      ))}
+    </ul>
+  ),
+}));
+
+jest.mock("@shared/components/image", () => ({
+  Image: ({ src, alt, width, height }: any) => (
+    <img
+      data-testid="badge-image"
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/select-plan-button", () => ({
+  SelectPlanButton: ({ onSelect, speed }: any) => (
+    <button data-testid="select-plan-btn" onClick={onSelect}>
+      Select {speed}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("ProductCard", () => {
+  const defaultProps = {
+    planName: "Kinetic 500",
+    planSubtext: "Up to 500 Mbps",
+    speed: "500",
+    price: "49.99",
+    description: "Fast internet for your home",
+    features: ["Wi-Fi included", "No data caps"],
+    onCtaClick: jest.fn(),
+    hostType: "residential" as const,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Rendering", () => {
+    it("renders the article element", () => {
+      const { container } = render(<ProductCard {...defaultProps} />);
+      expect(container.querySelector("article")).toBeInTheDocument();
+    });
+
+    it("renders plan name", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.getByText("Kinetic 500")).toBeInTheDocument();
+    });
+
+    it("renders plan subtext", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.getByText("Up to 500 Mbps")).toBeInTheDocument();
+    });
+
+    it("renders price dollar sign", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.getByText("$")).toBeInTheDocument();
+    });
+
+    it("renders price whole number", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.getByText("49")).toBeInTheDocument();
+    });
+
+    it("renders price decimal and /mo", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.getByText("99/mo")).toBeInTheDocument();
+    });
+
+    it("renders description", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(
+        screen.getByText("Fast internet for your home")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Best Value", () => {
+    it("renders best value banner when bestValue is true", () => {
+      render(<ProductCard {...defaultProps} bestValue={true} />);
+      expect(screen.getByText("best value")).toBeInTheDocument();
+    });
+
+    it("renders custom best value text", () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          bestValue={true}
+          bestValueText="Top pick"
+        />
+      );
+      expect(screen.getByText("Top pick")).toBeInTheDocument();
+    });
+
+    it("does not render best value banner by default", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.queryByText("best value")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Theme", () => {
+    it("applies light theme by default", () => {
+      const { container } = render(<ProductCard {...defaultProps} />);
+      const card = container.querySelector("article > div");
+      expect(card?.className).toContain("bg-bg");
+    });
+
+    it("applies dark theme classes", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} theme="dark" />
+      );
+      const card = container.querySelector("article > div");
+      expect(card?.className).toContain("bg-bg-fill-inverse");
+    });
+  });
+
+  describe("Features", () => {
+    it("renders features section when features are provided", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.getByTestId("checklist")).toBeInTheDocument();
+    });
+
+    it("does not render features section when features is empty", () => {
+      render(<ProductCard {...defaultProps} features={[]} />);
+      expect(screen.queryByTestId("checklist")).not.toBeInTheDocument();
+    });
+
+    it("renders features title", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(
+        screen.getByText("Business Ready Internet features")
+      ).toBeInTheDocument();
+    });
+
+    it("renders custom features title", () => {
+      render(<ProductCard {...defaultProps} featuresTitle="Custom features" />);
+      expect(screen.getByText("Custom features")).toBeInTheDocument();
+    });
+  });
+
+  describe("Expand/Collapse", () => {
+    it("toggles internal expanded state on click", () => {
+      const { container } = render(<ProductCard {...defaultProps} />);
+      const toggleBtn = screen.getByTestId("feature-toggle");
+      fireEvent.click(toggleBtn);
+      // Check the features container shows opacity-100
+      const featuresDiv = container.querySelector(".opacity-100");
+      expect(featuresDiv).toBeInTheDocument();
+    });
+
+    it("uses controlled expanded state when provided", () => {
+      const { container } = render(
+        <ProductCard {...defaultProps} isExpanded={true} />
+      );
+      const featuresDiv = container.querySelector(".opacity-100");
+      expect(featuresDiv).toBeInTheDocument();
+    });
+
+    it("calls onToggleExpand when provided", () => {
+      const onToggleExpand = jest.fn();
+      render(<ProductCard {...defaultProps} onToggleExpand={onToggleExpand} />);
+      fireEvent.click(screen.getByTestId("feature-toggle"));
+      expect(onToggleExpand).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Gift Badge", () => {
+    it("renders gift badges when provided", () => {
+      const giftBadge = [{ title: "Free router", icon: "/router.png" }] as any;
+      render(<ProductCard {...defaultProps} giftBadge={giftBadge} />);
+      expect(screen.getByText("Free router")).toBeInTheDocument();
+      expect(screen.getByAltText("Free router")).toBeInTheDocument();
+    });
+
+    it("does not render gift badges when not provided", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.queryByText("Free router")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Inner Badge", () => {
+    it("renders inner badge with pipe-separated text", () => {
+      const innerBadge = { badgeText: "Bold|Normal", badgeIcon: "/icon.png" };
+      render(
+        <ProductCard
+          {...defaultProps}
+          isExpanded={true}
+          innerBadge={innerBadge}
+        />
+      );
+      expect(screen.getByText("Bold")).toBeInTheDocument();
+      expect(screen.getByText("Normal")).toBeInTheDocument();
+    });
+
+    it("renders inner badge without pipe as bold", () => {
+      const innerBadge = { badgeText: "Simple Badge", badgeIcon: "/icon.png" };
+      render(
+        <ProductCard
+          {...defaultProps}
+          isExpanded={true}
+          innerBadge={innerBadge}
+        />
+      );
+      expect(screen.getByText("Simple Badge")).toBeInTheDocument();
+    });
+  });
+
+  describe("CTA", () => {
+    it("renders SelectPlanButton", () => {
+      render(<ProductCard {...defaultProps} />);
+      expect(screen.getByTestId("select-plan-btn")).toBeInTheDocument();
+    });
+
+    it("calls onCtaClick when CTA is clicked", () => {
+      render(<ProductCard {...defaultProps} />);
+      fireEvent.click(screen.getByTestId("select-plan-btn"));
+      expect(defaultProps.onCtaClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,364 @@
+import React from "react";
+import { SimpleCard } 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, style }: any) => (
+    <Tag className={className} style={style}>
+      {children}
+    </Tag>
+  ),
+}));
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, className, ...rest }: any) => (
+    <a href={href} className={className} {...rest}>
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+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(" "),
+}));
+
+jest.mock("@shared/utils/speed-card-bg", () => ({
+  SpeedCardBg: (color: string) => `<svg>${color}</svg>`,
+}));
+
+describe("SimpleCard", () => {
+  const defaultCard = {
+    title: "Simple Card Title",
+    body: "Card body content",
+    image: "/image.jpg",
+    imageAlt: "Card image",
+  };
+
+  describe("Rendering", () => {
+    it("renders the section element", () => {
+      const { container } = render(<SimpleCard card={defaultCard} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.getByText("Simple Card Title")).toBeInTheDocument();
+    });
+
+    it("renders body", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.getByText("Card body content")).toBeInTheDocument();
+    });
+
+    it("renders aria-labelledby with title", () => {
+      const { container } = render(<SimpleCard card={defaultCard} />);
+      expect(container.querySelector("section")).toHaveAttribute(
+        "aria-labelledby",
+        "callout-Simple Card Title"
+      );
+    });
+
+    it("does not set aria-labelledby when no title", () => {
+      const { container } = render(<SimpleCard card={{ body: "No title" }} />);
+      expect(container.querySelector("section")).not.toHaveAttribute(
+        "aria-labelledby"
+      );
+    });
+  });
+
+  describe("Image views", () => {
+    it("renders icon-sized image by default when image is provided", () => {
+      render(<SimpleCard card={defaultCard} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toBeInTheDocument();
+    });
+
+    it("renders full image when imageView is 'full'", () => {
+      const card = { ...defaultCard, imageView: "full" as const };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("renders margin image when imageView is 'margin'", () => {
+      const card = { ...defaultCard, imageView: "margin" as const };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("renders standard-sized image", () => {
+      const card = {
+        ...defaultCard,
+        imageView: "standard" as const,
+        imageWidth: 120,
+        imageHeight: 120,
+      };
+      render(<SimpleCard card={card} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("width", "120");
+      expect(img).toHaveAttribute("height", "120");
+    });
+
+    it("renders inset image view", () => {
+      const card = { ...defaultCard, imageView: "inset" as const };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("does not render image when image is not provided", () => {
+      render(<SimpleCard card={{ title: "No Image" }} />);
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA", () => {
+    it("renders CTA button when cta is provided", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Learn More", href: "/learn" },
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("does not render CTA when not provided", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+
+    it("wraps title in link when cta has href", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<SimpleCard card={card} />);
+      const titleLink = screen.getByText("Simple Card Title").closest("a");
+      expect(titleLink).toHaveAttribute("href", "/click");
+    });
+  });
+
+  describe("CTA Bottom (location CTA)", () => {
+    it("renders ctaBottom link when provided", () => {
+      const card = {
+        ...defaultCard,
+        ctaBottom: { title: "Location", href: "/location" },
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Location")).toBeInTheDocument();
+    });
+
+    it("does not render ctaBottom when not provided", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.queryByText("location_on")).not.toBeInTheDocument();
+    });
+
+    it("renders location_on icon with ctaBottom", () => {
+      const card = {
+        ...defaultCard,
+        ctaBottom: { title: "Store", href: "/store" },
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("location_on")).toBeInTheDocument();
+    });
+  });
+
+  describe("Working hours and phone", () => {
+    it("renders working hours table", () => {
+      const card = {
+        ...defaultCard,
+        workingHours: ["Mon-Fri|9am-5pm", "Sat|10am-2pm"],
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Mon-Fri")).toBeInTheDocument();
+      expect(screen.getByText("9am-5pm")).toBeInTheDocument();
+    });
+
+    it("renders phone numbers", () => {
+      const card = {
+        ...defaultCard,
+        phoneNumber: ["(555) 123-4567"],
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("(555) 123-4567")).toBeInTheDocument();
+    });
+
+    it("creates tel: link for phone numbers", () => {
+      const card = {
+        ...defaultCard,
+        phoneNumber: ["(555) 123-4567"],
+      };
+      render(<SimpleCard card={card} />);
+      const phoneLink = screen.getByText("(555) 123-4567").closest("a");
+      expect(phoneLink).toHaveAttribute("href", "tel:5551234567");
+    });
+  });
+
+  describe("Rich text", () => {
+    it("renders richText when provided", () => {
+      const card = { ...defaultCard, richText: "Rich text content" };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Rich text content")).toBeInTheDocument();
+    });
+  });
+
+  describe("Title location", () => {
+    it("renders titleLocation when provided", () => {
+      const card = { ...defaultCard, titleLocation: "Downtown" };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Downtown")).toBeInTheDocument();
+    });
+  });
+
+  describe("Shadow", () => {
+    it("applies shadow class when shadow is true", () => {
+      const card = { ...defaultCard, shadow: true };
+      const { container } = render(<SimpleCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "shadow-card"
+      );
+    });
+  });
+
+  describe("Background colors", () => {
+    it("applies background color class from map", () => {
+      const card = { ...defaultCard, backgroundColor: "blue" };
+      const { container } = render(<SimpleCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "bg-fill-brand"
+      );
+    });
+
+    it("applies dynamic background color when applyCardBackgroundColor is true", () => {
+      const card = {
+        ...defaultCard,
+        applyCardBackgroundColor: true,
+        backgroundColor: "#FF0000",
+        imageView: "icon" as const,
+      };
+      const { container } = render(<SimpleCard card={card} />);
+      const section = container.querySelector("section") as HTMLElement;
+      // jsdom doesn't fully support CSS variables in style, check the attribute directly
+      const styleAttr = section.getAttribute("style") || "";
+      expect(styleAttr).toContain("--scc-bg");
+    });
+
+    it("applies dynamic text color when applyCardBackgroundColor is true", () => {
+      const card = {
+        ...defaultCard,
+        applyCardBackgroundColor: true,
+        textColor: "#FFFFFF",
+        imageView: "icon" as const,
+      };
+      const { container } = render(<SimpleCard card={card} />);
+      const section = container.querySelector("section") as HTMLElement;
+      const styleAttr = section.getAttribute("style") || "";
+      expect(styleAttr).toContain("--scc-fg");
+    });
+  });
+
+  describe("Background image (pinwheel)", () => {
+    it("applies background image when showBackgroundImage and pinwheelColor", () => {
+      const card = {
+        ...defaultCard,
+        applyCardBackgroundColor: true,
+        backgroundColor: "#000",
+        showBackgroundImage: true,
+        pinwheelColor: "Blue-#307998",
+        imageView: "icon" as const,
+      };
+      const { container } = render(<SimpleCard card={card} />);
+      const section = container.querySelector("section") as HTMLElement;
+      expect(section.style.backgroundImage).toContain("data:image/svg+xml");
+    });
+  });
+
+  describe("Layout props", () => {
+    it("applies lgWidth class", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} lgWidth="lg:w-1/3" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "lg:w-1/3"
+      );
+    });
+
+    it("applies mdWidth class", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} mdWidth="md:w-1/2" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "md:w-1/2"
+      );
+    });
+
+    it("applies custom className", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} className="custom-class" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "custom-class"
+      );
+    });
+
+    it("applies custom style", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} style={{ margin: "10px" }} />
+      );
+      const section = container.querySelector("section") as HTMLElement;
+      expect(section.style.margin).toBe("10px");
+    });
+  });
+
+  describe("Image alignment", () => {
+    it("uses iconAlignment for icon position", () => {
+      const card = {
+        ...defaultCard,
+        iconAlignment: "center" as const,
+        imageView: "icon" as const,
+      };
+      render(<SimpleCard card={card} />);
+      const iconWrapper = screen.getByTestId("next-image").parentElement;
+      expect(iconWrapper?.style.justifyContent).toBe("center");
+    });
+
+    it("falls back to imageAlignment when iconAlignment not set", () => {
+      const card = {
+        ...defaultCard,
+        imageAlignment: "right" as const,
+        imageView: "icon" as const,
+      };
+      render(<SimpleCard card={card} />);
+      const iconWrapper = screen.getByTestId("next-image").parentElement;
+      expect(iconWrapper?.style.justifyContent).toBe("right");
+    });
+  });
+});

package/src/contentful/blocks/cards/simple-card/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button } from "../../button";
-import { backgroundColorMap, Item, SimpleCardProps } from "./types";
+import { backgroundColorMap, SimpleCardProps } from "./types";
 
 import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";