@windstream/react-shared-components 0.1.93 → 0.1.95

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);
+    });
+  });
+});

package/src/contentful/blocks/email-input-block/index.test.tsx

@@ -0,0 +1,213 @@
+import { EmailInputBlock } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("EmailInputBlock", () => {
+  const defaultProps = {
+    onSubmit: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders with default props", () => {
+    const { container } = render(<EmailInputBlock {...defaultProps} />);
+    expect(container.querySelector("#email-input")).toBeInTheDocument();
+  });
+
+  it("renders custom anchorId", () => {
+    const { container } = render(
+      <EmailInputBlock {...defaultProps} anchorId="custom-anchor" />
+    );
+    expect(container.querySelector("#custom-anchor")).toBeInTheDocument();
+  });
+
+  it("renders title when provided", () => {
+    render(<EmailInputBlock {...defaultProps} title="Join us" />);
+    expect(screen.getByText("Join us")).toBeInTheDocument();
+    expect(screen.getByText("Join us").tagName).toBe("H1");
+  });
+
+  it("does not render title when not provided", () => {
+    const { container } = render(<EmailInputBlock {...defaultProps} />);
+    expect(container.querySelector("h1")).not.toBeInTheDocument();
+  });
+
+  it("renders subTitle when provided", () => {
+    render(<EmailInputBlock {...defaultProps} subTitle="Stay updated" />);
+    expect(screen.getByText("Stay updated")).toBeInTheDocument();
+    expect(screen.getByText("Stay updated").tagName).toBe("H2");
+  });
+
+  it("does not render subTitle when not provided", () => {
+    const { container } = render(<EmailInputBlock {...defaultProps} />);
+    expect(container.querySelector("h2")).not.toBeInTheDocument();
+  });
+
+  it("renders emailInputDescription when provided", () => {
+    render(
+      <EmailInputBlock {...defaultProps} emailInputDescription="Sign up now" />
+    );
+    expect(screen.getByText("Sign up now")).toBeInTheDocument();
+  });
+
+  it("renders caption when provided", () => {
+    render(<EmailInputBlock {...defaultProps} caption="No spam" />);
+    expect(screen.getByText("No spam")).toBeInTheDocument();
+  });
+
+  it("does not render caption when not provided", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    expect(screen.queryByText("No spam")).not.toBeInTheDocument();
+  });
+
+  it("uses default placeholder text", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    expect(
+      screen.getByPlaceholderText("Enter your email here")
+    ).toBeInTheDocument();
+  });
+
+  it("uses custom placeholder text", () => {
+    render(<EmailInputBlock {...defaultProps} inputPlaceholder="Your email" />);
+    expect(screen.getByPlaceholderText("Your email")).toBeInTheDocument();
+  });
+
+  it("calls onSubmit with email on valid submission", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    const input = screen.getByPlaceholderText("Enter your email here");
+    fireEvent.change(input, { target: { value: "test@example.com" } });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(defaultProps.onSubmit).toHaveBeenCalledWith({
+      email: "test@example.com",
+    });
+  });
+
+  it("clears email after successful submission", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    const input = screen.getByPlaceholderText(
+      "Enter your email here"
+    ) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "test@example.com" } });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(input.value).toBe("");
+  });
+
+  it("shows error for invalid email", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    const input = screen.getByPlaceholderText("Enter your email here");
+    fireEvent.change(input, { target: { value: "invalid" } });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(
+      screen.getByText("Please enter a valid email address.")
+    ).toBeInTheDocument();
+    expect(defaultProps.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("clears error when user types after error", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    const input = screen.getByPlaceholderText("Enter your email here");
+    fireEvent.change(input, { target: { value: "invalid" } });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(
+      screen.getByText("Please enter a valid email address.")
+    ).toBeInTheDocument();
+
+    fireEvent.change(input, { target: { value: "a" } });
+    expect(
+      screen.queryByText("Please enter a valid email address.")
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows success feedback after valid submission", () => {
+    render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
+    const input = screen.getByPlaceholderText("Enter your email here");
+    fireEvent.change(input, { target: { value: "user@test.com" } });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(screen.getByText("Thanks!")).toBeInTheDocument();
+  });
+
+  it("hides success feedback when user types again", () => {
+    render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
+    const input = screen.getByPlaceholderText("Enter your email here");
+    fireEvent.change(input, { target: { value: "user@test.com" } });
+    fireEvent.click(screen.getByText("Sign me up"));
+    expect(screen.getByText("Thanks!")).toBeInTheDocument();
+
+    fireEvent.change(input, { target: { value: "x" } });
+    expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+  });
+
+  it("does not show success feedback without successFeedback prop", () => {
+    render(<EmailInputBlock {...defaultProps} />);
+    const input = screen.getByPlaceholderText("Enter your email here");
+    fireEvent.change(input, { target: { value: "user@test.com" } });
+    fireEvent.click(screen.getByText("Sign me up"));
+    // No success text rendered
+    expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+  });
+
+  it("applies green background by default", () => {
+    const { container } = render(<EmailInputBlock {...defaultProps} />);
+    const inner = container.querySelector(".bg-bg-fill-success");
+    expect(inner).toBeInTheDocument();
+  });
+
+  it("applies navy background class", () => {
+    const { container } = render(
+      <EmailInputBlock {...defaultProps} backgroundColor="navy" />
+    );
+    expect(container.querySelector(".bg-bg-fill-inverse")).toBeInTheDocument();
+  });
+
+  it("applies blue background class", () => {
+    const { container } = render(
+      <EmailInputBlock {...defaultProps} backgroundColor="blue" />
+    );
+    expect(container.querySelector(".bg-bg-fill-brand")).toBeInTheDocument();
+  });
+
+  it("applies yellow background class", () => {
+    const { container } = render(
+      <EmailInputBlock {...defaultProps} backgroundColor="yellow" />
+    );
+    expect(
+      container.querySelector(".bg-bg-fill-brand-accent")
+    ).toBeInTheDocument();
+  });
+
+  it("applies white background class", () => {
+    const { container } = render(
+      <EmailInputBlock {...defaultProps} backgroundColor="white" />
+    );
+    expect(container.querySelector(".bg-white")).toBeInTheDocument();
+  });
+
+  it("uses white text for green/blue/navy backgrounds", () => {
+    render(
+      <EmailInputBlock
+        {...defaultProps}
+        backgroundColor="navy"
+        title="Navy title"
+      />
+    );
+    expect(screen.getByText("Navy title").className).toContain("text-white");
+  });
+
+  it("uses dark text for white/yellow backgrounds", () => {
+    render(
+      <EmailInputBlock
+        {...defaultProps}
+        backgroundColor="yellow"
+        title="Yellow title"
+      />
+    );
+    expect(screen.getByText("Yellow title").className).toContain("text-text");
+  });
+
+  it("uses custom ctaText", () => {
+    render(<EmailInputBlock {...defaultProps} ctaText="Subscribe" />);
+    expect(screen.getByText("Subscribe")).toBeInTheDocument();
+  });
+});

package/src/contentful/blocks/email-input-block/index.tsx

@@ -20,19 +20,18 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
 
   const bgClasses: Record<string, string> = {
     navy: "bg-bg-fill-inverse",
-    green: "bg-bg-fill-success",
+    green: "bg-bg-fill-brand",
     blue: "bg-bg-fill-brand",
     yellow: "bg-bg-fill-brand-accent",
-    white: "bg-white",
+    white: "bg-bg",
   };
 
-  const currentBgClass =
-    bgClasses[backgroundColor as keyof typeof bgClasses] || bgClasses.green;
+  const normalizedBg = (backgroundColor as string)?.toLowerCase?.() || "green";
+  const bgColorClass =
+    bgClasses[normalizedBg as keyof typeof bgClasses] || bgClasses.green;
 
   // Determine if text should be white based on background
-  const textWhite = ["green", "blue", "navy"].includes(
-    backgroundColor as string
-  );
+  const textWhite = ["green", "blue", "navy"].includes(normalizedBg);
   const textColor = textWhite ? "text-white" : "text-text";
 
   const [email, setEmail] = useState("");
@@ -56,41 +55,47 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   };
 
   return (
-    <section id={anchorId} className="w-full px-4 py-8 md:px-0">
+    <section id={anchorId} className="w-full px-4 !pt-8 md:!pt-20 md:px-0">
       <div
-        className={`mx-auto max-w-[1200px] overflow-hidden rounded-[32px] md:rounded-[20px] ${currentBgClass} flex flex-col items-start p-8 md:p-16`}
+        className={`mx-auto max-w-[1200px] overflow-hidden !rounded-[20px] md:rounded-[20px] flex flex-col items-start !px-5 !pt-6 !pb-10 md:!p-10 md:!pt-12 !h-[344px] md:!w-auto md:!h-[367px] ${bgColorClass}`}
+        data-testid="email-input-blocck"
       >
-        <div className="lg:w-[548px]">
-          {title && (
-            <h1 className={`text-heading1 font-black ${textColor}`}>{title}</h1>
-          )}
-          {subTitle && (
-            <h2 className={`text-heading1 font-black ${textColor}`}>
-              {subTitle}
-            </h2>
-          )}
+        <div className="w-full">
+          <div className="lg:w-[548px]">
+            {title && (
+              <h1 className={`mb-3 text-[2.25rem] leading-[2.5rem] font-black md:text-heading1 md:font-black ${textColor}`}>{title}</h1>
+            )}
+            {subTitle && (
+              <h2 className={`mb-3 text-heading1 font-black ${textColor}`}>
+                {subTitle}
+              </h2>
+            )}
 
-          {emailInputDescription && (
-            <p className={`mb-10 text-subheading1 opacity-95 ${textColor}`}>
-              {emailInputDescription}
-            </p>
-          )}
+            {emailInputDescription && (
+              <p className={`!mb-4 md:!mb-16 text-xl leading-7 font-medium md:text-subheading1 md:!leading-8 md:!font-bold opacity-95 ${textColor}`}>
+                {emailInputDescription}
+              </p>
+            )}
+          </div>
 
-          <div className="max-w-2xl flex w-full items-center overflow-hidden rounded-3xl border border-transparent bg-white p-1.5 shadow-xl transition-all md:p-2">
-            <input
-              type="email"
-              placeholder={inputPlaceholder}
-              value={email}
-              onChange={e => {
-                setEmail(e.target.value);
-                if (emailError) setEmailError("");
-                if (formSubmitted) setFormSubmitted(false);
-              }}
-              className="w-full flex-grow bg-transparent px-6 py-3 text-lg font-medium text-text outline-none placeholder:text-input-icon-placeholder md:py-4"
-            />
+          <div className="relative max-w-[548px] flex w-full flex-col items-center sm:flex-row sm:overflow-hidden sm:rounded-3xl sm:border-2 sm:!border-gray-600 sm:bg-white sm:p-1.5 sm:shadow-xl sm:transition-all md:!h-[75px] md:p-2">
+            <div className="w-full !rounded-lg border border-transparent bg-white p-1.5 shadow-md sm:border-0 sm:p-0 sm:rounded-none sm:shadow-none">
+              <input
+                type="email"
+                placeholder={inputPlaceholder}
+                value={email}
+                onChange={e => {
+                  setEmail(e.target.value);
+                  if (emailError) setEmailError("");
+                  if (formSubmitted) setFormSubmitted(false);
+                }}
+                className="w-full flex-grow bg-transparent !pl-4 pr-6 py-3 text-[1rem] leading-none md:text-base font-normal text-text outline-none placeholder:input-text-placeholder md:py-4"
+              />
+            </div>
             <Button
               buttonLabel={ctaText}
               buttonVariant="primary_inverse"
+              buttonClassName="capitalize-first whitespace-nowrap rounded-2xl px-8 !text-lg mt-3 w-full sm:mt-0 sm:w-auto sm:absolute sm:right-[8px] sm:top-[calc(50%-28px)]"
               onClick={handleOnSubmit}
             />
           </div>