@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/contentful/blocks/cta-callout/index.test.tsx

@@ -0,0 +1,244 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { CtaCallout } from "./index";
+import { CtaCalloutProps } from "./types";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as, ...props }: any) => {
+    const Tag = as || "span";
+    return <Tag {...props}>{children}</Tag>;
+  },
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  Button: (props: any) => (
+    <button
+      data-testid="cta-button"
+      data-size={JSON.stringify(props.size)}
+      data-href={props.href}
+    >
+      {props.buttonLabel || props.children}
+    </button>
+  ),
+}));
+
+describe("CtaCallout", () => {
+  const defaultProps: CtaCalloutProps = {
+    title: "Get Started Today",
+    subTitle: "Best Internet Plans",
+    description: <p>Choose the plan that works for you.</p>,
+    button: { buttonLabel: "Shop Now", href: "/shop" },
+    background: "white",
+    color: "dark",
+    contentAlignment: "center",
+    descriptionAlignment: "center",
+  };
+
+  it("renders the component", () => {
+    const { container } = render(<CtaCallout {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it("renders title as h2 by default", () => {
+    render(<CtaCallout {...defaultProps} />);
+    const title = screen.getByText("Get Started Today");
+    expect(title.tagName).toBe("H2");
+  });
+
+  it("renders title as h1 when enableHeading is true", () => {
+    render(<CtaCallout {...defaultProps} enableHeading={true} />);
+    const title = screen.getByText("Get Started Today");
+    expect(title.tagName).toBe("H1");
+  });
+
+  it("renders subtitle as h3", () => {
+    render(<CtaCallout {...defaultProps} />);
+    const subtitle = screen.getByText("Best Internet Plans");
+    expect(subtitle.tagName).toBe("H3");
+  });
+
+  it("renders description", () => {
+    render(<CtaCallout {...defaultProps} />);
+    expect(
+      screen.getByText("Choose the plan that works for you.")
+    ).toBeInTheDocument();
+  });
+
+  it("renders the button", () => {
+    render(<CtaCallout {...defaultProps} />);
+    expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+  });
+
+  it("does not render title when not provided", () => {
+    render(<CtaCallout {...defaultProps} title={undefined} />);
+    expect(screen.queryByText("Get Started Today")).not.toBeInTheDocument();
+  });
+
+  it("does not render subtitle when not provided", () => {
+    render(<CtaCallout {...defaultProps} subTitle={undefined} />);
+    expect(screen.queryByText("Best Internet Plans")).not.toBeInTheDocument();
+  });
+
+  it("does not render description when not provided", () => {
+    render(<CtaCallout {...defaultProps} description={undefined} />);
+    expect(
+      screen.queryByText("Choose the plan that works for you.")
+    ).not.toBeInTheDocument();
+  });
+
+  describe("background colors", () => {
+    it("applies white background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="white" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg");
+    });
+
+    it("applies navy background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="navy" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-inverse");
+    });
+
+    it("applies blue background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="blue" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-brand");
+    });
+
+    it("applies green background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="green" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-success");
+    });
+
+    it("applies purple background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="purple" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-brand-tertiary");
+    });
+
+    it("applies yellow background class", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} background="yellow" />
+      );
+      expect(container.firstChild).toHaveClass("bg-bg-fill-brand-accent");
+    });
+  });
+
+  describe("text colors", () => {
+    it("applies dark text color", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} color="dark" />
+      );
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).toContain("text-text");
+    });
+
+    it("applies light text color", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} color="light" />
+      );
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).toContain("text-text-inverse");
+    });
+  });
+
+  describe("alignment", () => {
+    it("applies content alignment to title", () => {
+      render(<CtaCallout {...defaultProps} contentAlignment="left" />);
+      const title = screen.getByText("Get Started Today");
+      expect(title.className).toContain("text-left");
+    });
+
+    it("applies content alignment to subtitle", () => {
+      render(<CtaCallout {...defaultProps} contentAlignment="right" />);
+      const subtitle = screen.getByText("Best Internet Plans");
+      expect(subtitle.className).toContain("text-right");
+    });
+
+    it("applies description alignment", () => {
+      render(<CtaCallout {...defaultProps} descriptionAlignment="left" />);
+      const descWrapper = screen
+        .getByText("Choose the plan that works for you.")
+        .closest("div");
+      expect(descWrapper?.className).toContain("text-left");
+    });
+  });
+
+  describe("maxWidth", () => {
+    it("applies max-w-120 when maxWidth is true (default)", () => {
+      const { container } = render(<CtaCallout {...defaultProps} />);
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).toContain("max-w-120");
+      expect(inner?.className).toContain("mx-auto");
+    });
+
+    it("does not apply max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <CtaCallout {...defaultProps} maxWidth={false} />
+      );
+      const inner = container.querySelector(".flex.flex-col");
+      expect(inner?.className).not.toContain("max-w-120");
+    });
+  });
+
+  describe("button props", () => {
+    it("passes button props to Button component", () => {
+      render(<CtaCallout {...defaultProps} />);
+      const button = screen.getByTestId("cta-button");
+      expect(button).toHaveAttribute("data-href", "/shop");
+    });
+
+    it("passes size prop with base large", () => {
+      render(<CtaCallout {...defaultProps} />);
+      const button = screen.getByTestId("cta-button");
+      expect(button.dataset.size).toContain("large");
+    });
+
+    it("passes onModalButtonClick to Button", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <CtaCallout {...defaultProps} onModalButtonClick={onModalButtonClick} />
+      );
+      const button = screen.getByTestId("cta-button");
+      expect(button).toBeInTheDocument();
+    });
+
+    it("passes renderCheckPlans to Button", () => {
+      const renderCheckPlans = jest.fn();
+      render(
+        <CtaCallout {...defaultProps} renderCheckPlans={renderCheckPlans} />
+      );
+      const button = screen.getByTestId("cta-button");
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe("section rendering", () => {
+    it("has component-container class", () => {
+      const { container } = render(<CtaCallout {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("component-container");
+    });
+
+    it("has correct padding classes", () => {
+      const { container } = render(<CtaCallout {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("px-5");
+      expect(container.firstChild).toHaveClass("py-16");
+    });
+
+    it("button container has flex and justify-center", () => {
+      render(<CtaCallout {...defaultProps} />);
+      const buttonWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(buttonWrapper?.className).toContain("flex");
+      expect(buttonWrapper?.className).toContain("justify-center");
+    });
+  });
+});

package/src/contentful/blocks/cta-callout/index.tsx

@@ -1,73 +1,73 @@
-import React from "react";
-import { CtaCalloutProps, ThemeKey } from "./types";
-
-import { Text } from "@shared/components/text";
-import { Button } from "@shared/contentful/blocks/button";
-
-export const CtaCallout: React.FC<CtaCalloutProps> = ({
-  title,
-  background = "white",
-  button,
-  color,
-  contentAlignment,
-  description,
-  descriptionAlignment,
-  enableHeading,
-  subTitle,
-  maxWidth = true,
-  onModalButtonClick,
-  renderCheckPlans,
-}) => {
-  const bgColorClasses: Record<ThemeKey, string> = {
-    navy: "bg-bg-fill-inverse",
-    green: "bg-bg-fill-success",
-    blue: "bg-bg-fill-brand",
-    purple: "bg-bg-fill-brand-tertiary",
-    yellow: "bg-bg-fill-brand-accent",
-    white: "bg-bg",
-  };
-  return (
-    <div
-      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24`}
-    >
-      <div
-        className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
-      >
-        {title && (
-          <Text
-            as={enableHeading ? "h1" : "h2"}
-            className={`heading2 lg:heading1 text-${contentAlignment}`}
-          >
-            {title}
-          </Text>
-        )}
-        {subTitle && (
-          <Text
-            as="h3"
-            className={`subheading3 pt-2 lg:subheading1 lg:pt-3 text-${contentAlignment}`}
-          >
-            {subTitle}
-          </Text>
-        )}
-        {description && (
-          <div
-            className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment}`}
-          >
-            {description}
-          </div>
-        )}
-        {button || renderCheckPlans ? (
-          <div className="flex justify-center pt-5 lg:pt-14">
-            <Button
-              {...button}
-              renderCheckPlans={renderCheckPlans}
-              onModalButtonClick={onModalButtonClick}
-              size={{ base: "large" }}
-            />
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-};
-export default CtaCallout;
+import React from "react";
+import { CtaCalloutProps, ThemeKey } from "./types";
+
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful/blocks/button";
+
+export const CtaCallout: React.FC<CtaCalloutProps> = ({
+  title,
+  background = "white",
+  button,
+  color,
+  contentAlignment,
+  description,
+  descriptionAlignment,
+  enableHeading,
+  subTitle,
+  maxWidth = true,
+  onModalButtonClick,
+  renderCheckPlans,
+}) => {
+  const bgColorClasses: Record<ThemeKey, string> = {
+    navy: "bg-bg-fill-inverse",
+    green: "bg-bg-fill-success",
+    blue: "bg-bg-fill-brand",
+    purple: "bg-bg-fill-brand-tertiary",
+    yellow: "bg-bg-fill-brand-accent",
+    white: "bg-bg",
+  };
+  return (
+    <div
+      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24`}
+    >
+      <div
+        className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
+      >
+        {title && (
+          <Text
+            as={enableHeading ? "h1" : "h2"}
+            className={`heading2 lg:heading1 text-${contentAlignment}`}
+          >
+            {title}
+          </Text>
+        )}
+        {subTitle && (
+          <Text
+            as="h3"
+            className={`subheading3 pt-2 lg:subheading1 lg:pt-3 text-${contentAlignment}`}
+          >
+            {subTitle}
+          </Text>
+        )}
+        {description && (
+          <div
+            className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment}`}
+          >
+            {description}
+          </div>
+        )}
+        {button || renderCheckPlans ? (
+          <div className="flex justify-center pt-5 lg:pt-14">
+            <Button
+              {...button}
+              renderCheckPlans={renderCheckPlans}
+              onModalButtonClick={onModalButtonClick}
+              size={{ base: "large" }}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+export default CtaCallout;

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

@@ -1,26 +1,26 @@
-import React from "react";
-
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export type CtaCalloutProps = {
-  title?: string;
-  subTitle?: string;
-  enableHeading?: boolean;
-  color?: "dark" | "light";
-  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
-  description?: React.ReactNode;
-  descriptionAlignment?: "center" | "left" | "right";
-  contentAlignment?: "center" | "left" | "right";
-  button?: any;
-  maxWidth?: boolean;
-  onModalButtonClick?: (id?: string) => void;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy";
+import React from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export type CtaCalloutProps = {
+  title?: string;
+  subTitle?: string;
+  enableHeading?: boolean;
+  color?: "dark" | "light";
+  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
+  description?: React.ReactNode;
+  descriptionAlignment?: "center" | "left" | "right";
+  contentAlignment?: "center" | "left" | "right";
+  button?: any;
+  maxWidth?: boolean;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";

package/src/contentful/blocks/dynamic-tabs/index.test.tsx

@@ -0,0 +1,240 @@
+import React from "react";
+import { DynamicTabs } from "./index";
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("framer-motion", () => ({
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+  motion: {
+    div: ({ children, animate }: any) => (
+      <div data-testid="motion-div" style={{ opacity: animate?.opacity }}>
+        {children}
+      </div>
+    ),
+  },
+}));
+
+jest.mock("@shared/components/collapse", () => ({
+  Collapse: ({ open, children }: any) => (
+    <div data-testid="collapse" data-open={open}>
+      {open ? children : null}
+    </div>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name }: any) => (
+    <span data-testid="material-icon">{name}</span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, className }: any) => (
+    <span className={className}>{children}</span>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  Button: ({ children, onClick, buttonClassName }: any) => (
+    <button
+      data-testid="tab-button"
+      onClick={onClick}
+      className={buttonClassName}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("DynamicTabs", () => {
+  const defaultProps = {
+    tabs: {
+      items: [
+        { tabName: "Tab 1", anchorId: "tab-1", tabContent: { items: [] } },
+        { tabName: "Tab 2", anchorId: "tab-2", tabContent: { items: [] } },
+        { tabName: "Tab 3", anchorId: "tab-3", tabContent: { items: [] } },
+      ],
+    },
+    tabsContent: [
+      <div key="1">Content 1</div>,
+      <div key="2">Content 2</div>,
+      <div key="3">Content 3</div>,
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.location.hash = "";
+  });
+
+  describe("Rendering", () => {
+    it("renders all tab buttons", () => {
+      render(<DynamicTabs {...defaultProps} />);
+      expect(screen.getAllByText("Tab 1").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Tab 2").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Tab 3").length).toBeGreaterThan(0);
+    });
+
+    it("renders tab content", () => {
+      render(<DynamicTabs {...defaultProps} />);
+      expect(screen.getAllByText("Content 1").length).toBeGreaterThan(0);
+    });
+
+    it("renders title when provided", () => {
+      render(<DynamicTabs {...defaultProps} title="My Tabs" />);
+      expect(screen.getByText("My Tabs")).toBeInTheDocument();
+    });
+
+    it("renders subtitle when provided", () => {
+      render(<DynamicTabs {...defaultProps} subTitle="A subtitle" />);
+      expect(screen.getByText("A subtitle")).toBeInTheDocument();
+    });
+
+    it("does not render title section when no title or subtitle", () => {
+      const { container } = render(<DynamicTabs {...defaultProps} />);
+      expect(container.querySelector(".mb-8.mt-5")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Tab switching", () => {
+    it("switches tab content on click", () => {
+      render(<DynamicTabs {...defaultProps} />);
+      const tabButtons = screen.getAllByTestId("tab-button");
+      // Find a Tab 2 button and click it
+      const tab2Buttons = tabButtons.filter(btn => btn.textContent === "Tab 2");
+      fireEvent.click(tab2Buttons[0]);
+      // After clicking Tab 2, the motion-div for tab 2 should show opacity 1
+      const motionDivs = screen.getAllByTestId("motion-div");
+      expect(motionDivs.length).toBeGreaterThan(0);
+    });
+
+    it("first tab is active by default", () => {
+      render(<DynamicTabs {...defaultProps} />);
+      const tabButtons = screen.getAllByTestId("tab-button");
+      const firstTabBtn = tabButtons.find(btn => btn.textContent === "Tab 1");
+      expect(firstTabBtn?.className).toContain("border-b-2");
+    });
+  });
+
+  describe("Navigation type", () => {
+    it("renders tab view on desktop when navigationType is true", () => {
+      const { container } = render(
+        <DynamicTabs {...defaultProps} navigationType={true} />
+      );
+      // Desktop view should have the overflow-x-auto div in "hidden md:block"
+      const desktopBlock = container.querySelector(".hidden.md\\:block");
+      expect(desktopBlock).toBeInTheDocument();
+    });
+
+    it("renders sidebar view on desktop when navigationType is false", () => {
+      const { container } = render(
+        <DynamicTabs {...defaultProps} navigationType={false} />
+      );
+      const desktopBlock = container.querySelector(".hidden.md\\:block");
+      expect(desktopBlock).toBeInTheDocument();
+    });
+  });
+
+  describe("Mobile view", () => {
+    it("renders tab view on mobile when mobileSidebarTabType is true", () => {
+      const { container } = render(
+        <DynamicTabs {...defaultProps} mobileSidebarTabType={true} />
+      );
+      const mobileBlock = container.querySelector(".md\\:hidden");
+      expect(mobileBlock).toBeInTheDocument();
+    });
+
+    it("renders accordion view on mobile when mobileSidebarTabType is false", () => {
+      render(<DynamicTabs {...defaultProps} mobileSidebarTabType={false} />);
+      // Accordion uses Collapse component
+      const collapses = screen.getAllByTestId("collapse");
+      expect(collapses.length).toBeGreaterThan(0);
+    });
+
+    it("clicks accordion button to switch tabs", () => {
+      window.location.hash = "#tab-1";
+      const { container } = render(
+        <DynamicTabs {...defaultProps} mobileSidebarTabType={false} />
+      );
+      // Accordion buttons are inside the mobile container (.md\:hidden)
+      const mobileContainer = container.querySelector(".md\\:hidden");
+      const accordionButtons = mobileContainer!.querySelectorAll(
+        "[data-testid='tab-button']"
+      );
+      // Click the second accordion button (Tab 2)
+      fireEvent.click(accordionButtons[1]);
+      expect(window.location.hash).toBe("#tab-2");
+    });
+  });
+
+  describe("Sidebar view", () => {
+    it("clicks sidebar button to switch tabs", () => {
+      window.location.hash = "#tab-1";
+      const { container } = render(
+        <DynamicTabs {...defaultProps} navigationType={false} />
+      );
+      // Sidebar buttons are inside the desktop container (.hidden.md\:block)
+      const desktopContainer = container.querySelector(".hidden.md\\:block");
+      const sidebarButtons = desktopContainer!.querySelectorAll(
+        "[data-testid='tab-button']"
+      );
+      // Click the third sidebar button (Tab 3)
+      fireEvent.click(sidebarButtons[2]);
+      expect(window.location.hash).toBe("#tab-3");
+    });
+  });
+
+  describe("Hash navigation", () => {
+    it("sets tab based on URL hash", () => {
+      window.location.hash = "#tab-2";
+      render(<DynamicTabs {...defaultProps} />);
+      // After useEffect runs, tab 2 should be active
+      const tabButtons = screen.getAllByTestId("tab-button");
+      const tab2Btns = tabButtons.filter(btn => btn.textContent === "Tab 2");
+      // At least one Tab 2 button should have the active style
+      const hasActiveTab2 = tab2Btns.some(btn =>
+        btn.className.includes("border-b-2")
+      );
+      expect(hasActiveTab2).toBe(true);
+    });
+
+    it("updates hash on tab click when fragment exists", () => {
+      window.location.hash = "#tab-1";
+      render(<DynamicTabs {...defaultProps} />);
+      const tabButtons = screen.getAllByTestId("tab-button");
+      const tab2Btns = tabButtons.filter(btn => btn.textContent === "Tab 2");
+      fireEvent.click(tab2Btns[0]);
+      expect(window.location.hash).toBe("#tab-2");
+    });
+
+    it("listens to hashchange events", () => {
+      render(<DynamicTabs {...defaultProps} />);
+      act(() => {
+        window.location.hash = "#tab-3";
+        window.dispatchEvent(new HashChangeEvent("hashchange"));
+      });
+      const tabButtons = screen.getAllByTestId("tab-button");
+      const tab3Btns = tabButtons.filter(btn => btn.textContent === "Tab 3");
+      const hasActiveTab3 = tab3Btns.some(btn =>
+        btn.className.includes("border-b-2")
+      );
+      expect(hasActiveTab3).toBe(true);
+    });
+  });
+
+  describe("Empty state", () => {
+    it("renders without tabs", () => {
+      const { container } = render(<DynamicTabs />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it("renders without tabsContent", () => {
+      render(<DynamicTabs tabs={defaultProps.tabs} />);
+      expect(screen.getAllByTestId("tab-button").length).toBeGreaterThan(0);
+    });
+  });
+});