@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/anchored-bottom-banner/index.test.tsx

@@ -0,0 +1,287 @@
+import { AnchoredBottomBanner } from "./index";
+
+import { act, render, screen } from "@testing-library/react";
+
+// Mock next/link
+jest.mock("next/link", () => {
+  // eslint-disable-next-line react/display-name
+  return ({ children, href, target, ...rest }: any) => (
+    <a href={href} target={target} {...rest}>
+      {children}
+    </a>
+  );
+});
+
+describe("AnchoredBottomBanner", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date("2026-05-19T12:00:00Z"));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("renders with default anchorId", () => {
+    const { container } = render(<AnchoredBottomBanner />);
+    expect(container.querySelector("#anchored-banner")).toBeInTheDocument();
+  });
+
+  it("renders with custom anchorId", () => {
+    const { container } = render(
+      <AnchoredBottomBanner anchorId="custom-banner" />
+    );
+    expect(container.querySelector("#custom-banner")).toBeInTheDocument();
+  });
+
+  it("renders ctaButtonLabel", () => {
+    render(<AnchoredBottomBanner ctaButtonLabel="Shop now" />);
+    expect(screen.getByText("Shop now")).toBeInTheDocument();
+  });
+
+  it("renders ctaSuffixText", () => {
+    render(<AnchoredBottomBanner ctaSuffixText="Limited time" />);
+    expect(screen.getByText("Limited time")).toBeInTheDocument();
+  });
+
+  it("renders iconName", () => {
+    render(<AnchoredBottomBanner iconName="local_offer" />);
+    expect(screen.getByText("local_offer")).toBeInTheDocument();
+  });
+
+  it("does not render icon when iconName is not provided", () => {
+    const { container } = render(<AnchoredBottomBanner />);
+    expect(
+      container.querySelector(".material-symbols-rounded")
+    ).not.toBeInTheDocument();
+  });
+
+  it("uses ctaButtonLink in the link href", () => {
+    render(<AnchoredBottomBanner ctaButtonLink="/offers" />);
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "/offers");
+  });
+
+  it("defaults link href to # when ctaButtonLink is not provided", () => {
+    render(<AnchoredBottomBanner />);
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "#");
+  });
+
+  it("uses ctaButtonTarget for link target", () => {
+    render(<AnchoredBottomBanner ctaButtonTarget="_blank" />);
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+
+  it("defaults link target to _self", () => {
+    render(<AnchoredBottomBanner />);
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("target", "_self");
+  });
+
+  // Background colors
+  it("applies yellow background by default (no backgroundColor)", () => {
+    const { container } = render(<AnchoredBottomBanner />);
+    const div = container.querySelector(".bg-bg-fill-brand-accent");
+    expect(div).toBeInTheDocument();
+  });
+
+  it("applies navy background", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="navy" />
+    );
+    expect(container.querySelector(".bg-bg-fill-inverse")).toBeInTheDocument();
+  });
+
+  it("applies green background", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="green" />
+    );
+    expect(container.querySelector(".bg-bg-fill-success")).toBeInTheDocument();
+  });
+
+  it("applies blue background", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="blue" />
+    );
+    expect(
+      container.querySelector(".bg-bg-fill-brand-supporting")
+    ).toBeInTheDocument();
+  });
+
+  it("applies purple background", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="purple" />
+    );
+    expect(
+      container.querySelector(".bg-bg-fill-brand-tertiary")
+    ).toBeInTheDocument();
+  });
+
+  it("applies white background", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="white" />
+    );
+    expect(container.querySelector(".bg-white")).toBeInTheDocument();
+  });
+
+  // Text colors
+  it("uses dark text for yellow/white/no background", () => {
+    const { container } = render(
+      <AnchoredBottomBanner ctaButtonLabel="Test" />
+    );
+    expect(container.querySelector(".text-text-primary")).toBeInTheDocument();
+  });
+
+  it("uses white text for dark backgrounds", () => {
+    const { container } = render(
+      <AnchoredBottomBanner backgroundColor="navy" ctaButtonLabel="Test" />
+    );
+    expect(container.querySelector(".text-white")).toBeInTheDocument();
+  });
+
+  // Box shadow
+  it("uses default shadow when boxShadow is not provided", () => {
+    const { container } = render(<AnchoredBottomBanner />);
+    const div = container.querySelector(
+      '[class*="shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"]'
+    );
+    expect(div).toBeInTheDocument();
+  });
+
+  it("uses boxShadow value when provided", () => {
+    const { container } = render(
+      <AnchoredBottomBanner boxShadow={true as any} />
+    );
+    const div = container.querySelector(
+      '[class*="shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"]'
+    );
+    expect(div).not.toBeInTheDocument();
+  });
+
+  // Countdown timer
+  it("shows countdown when timer is enabled and within range", () => {
+    const end = new Date("2026-05-19T13:00:00Z").toISOString();
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime={end}
+      />
+    );
+    // 1 hour remaining: 01H : 00M : 00
+    expect(screen.getByText(/01H : 00M : 00/)).toBeInTheDocument();
+  });
+
+  it("does not show countdown when timer is disabled", () => {
+    const end = new Date("2026-05-19T13:00:00Z").toISOString();
+    render(<AnchoredBottomBanner countdownEndDateTime={end} />);
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("does not show countdown before start time", () => {
+    const start = new Date("2026-05-19T14:00:00Z").toISOString();
+    const end = new Date("2026-05-19T15:00:00Z").toISOString();
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownStartDateTime={start}
+        countdownEndDateTime={end}
+      />
+    );
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("does not show countdown after end time", () => {
+    const end = new Date("2026-05-19T11:00:00Z").toISOString();
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime={end}
+      />
+    );
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("updates countdown every second", () => {
+    const end = new Date("2026-05-19T12:00:10Z").toISOString();
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime={end}
+      />
+    );
+    expect(screen.getByText(/00H : 00M : 10/)).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(screen.getByText(/00H : 00M : 09/)).toBeInTheDocument();
+  });
+
+  it("clears interval when countdown reaches zero", () => {
+    const end = new Date("2026-05-19T12:00:01Z").toISOString();
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime={end}
+      />
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    // After expiry, countdown should not show
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+  });
+
+  it("handles invalid countdownEndDateTime gracefully", () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {
+      /* noop */
+    });
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownEndDateTime="not-a-date"
+      />
+    );
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+    consoleSpy.mockRestore();
+  });
+
+  it("handles invalid countdownStartDateTime gracefully", () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {
+      /* noop */
+    });
+    const end = new Date("2026-05-19T13:00:00Z").toISOString();
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownStartDateTime="not-a-date"
+        countdownEndDateTime={end}
+      />
+    );
+    expect(screen.queryByText(/H :/)).not.toBeInTheDocument();
+    consoleSpy.mockRestore();
+  });
+
+  it("logs error when start is after end", () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation(() => {
+      /* noop */
+    });
+    const start = new Date("2026-05-19T15:00:00Z").toISOString();
+    const end = new Date("2026-05-19T13:00:00Z").toISOString();
+    render(
+      <AnchoredBottomBanner
+        enableCountdownTimer={true}
+        countdownStartDateTime={start}
+        countdownEndDateTime={end}
+      />
+    );
+    expect(consoleSpy).toHaveBeenCalledWith(
+      "Invalid countdown range: start must be before end",
+      expect.any(Object)
+    );
+    consoleSpy.mockRestore();
+  });
+});

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -1,181 +1,181 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { AnchoredBottomBannerProps } from "./types";
-import Link from "next/link";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-
-function parseCountdownDateTime(value?: string): number | undefined {
-  if (!value) return undefined;
-  const parsed = Date.parse(value);
-  if (!Number.isFinite(parsed)) {
-    console.error("Invalid countdown datetime", { value });
-    return undefined;
-  }
-  return parsed;
-}
-
-function formatCountdown(totalSeconds: number) {
-  const safeSeconds = Math.max(0, Math.floor(totalSeconds));
-  const hours = Math.floor(safeSeconds / 3600);
-  const minutes = Math.floor((safeSeconds % 3600) / 60);
-  const seconds = safeSeconds % 60;
-
-  return `${String(hours).padStart(2, "0")}H : ${String(minutes).padStart(2, "0")}M : ${String(seconds).padStart(2, "0")}`;
-}
-
-export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
-  ctaSuffixText,
-  backgroundColor,
-  iconName,
-  boxShadow,
-  ctaButtonLabel,
-  ctaButtonLink,
-  ctaButtonTarget,
-  anchorId = "anchored-banner",
-  enableCountdownTimer,
-  countdownStartDateTime,
-  countdownEndDateTime,
-}) => {
-  const backGroundColorClasses = {
-    navy: "bg-bg-fill-inverse",
-    green: "bg-bg-fill-success",
-    blue: "bg-bg-fill-brand-supporting",
-    purple: "bg-bg-fill-brand-tertiary",
-    yellow: "bg-bg-fill-brand-accent",
-    white: "bg-white",
-  };
-
-  const bgClass = backgroundColor
-    ? backGroundColorClasses[backgroundColor]
-    : "bg-bg-fill-brand-accent";
-
-  const isLightBackground =
-    backgroundColor === "yellow" ||
-    backgroundColor === "white" ||
-    !backgroundColor;
-  const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
-
-  // Memoize parsed timestamps so they aren't re-parsed every second
-  const endMs = useMemo(
-    () => parseCountdownDateTime(countdownEndDateTime),
-    [countdownEndDateTime]
-  );
-  const startMs = useMemo(
-    () => parseCountdownDateTime(countdownStartDateTime),
-    [countdownStartDateTime]
-  );
-
-  const isTimerValid = useMemo(() => {
-    if (!enableCountdownTimer || endMs === undefined) return false;
-    if (countdownStartDateTime && startMs === undefined) return false;
-    if (startMs !== undefined && startMs >= endMs) {
-      console.error("Invalid countdown range: start must be before end", {
-        countdownStartDateTime,
-        countdownEndDateTime,
-      });
-      return false;
-    }
-    return true;
-  }, [
-    enableCountdownTimer,
-    endMs,
-    startMs,
-    countdownStartDateTime,
-    countdownEndDateTime,
-  ]);
-
-  const [nowMs, setNowMs] = useState(() => Date.now());
-  const intervalRef = useRef<number | null>(null);
-
-  const clearTimer = useCallback(() => {
-    if (intervalRef.current !== null) {
-      window.clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!isTimerValid) {
-      clearTimer();
-      return;
-    }
-
-    intervalRef.current = window.setInterval(() => {
-      const now = Date.now();
-      // Auto-clear interval once countdown expires
-      if (endMs !== undefined && now >= endMs) {
-        clearTimer();
-      }
-      setNowMs(now);
-    }, 1000);
-
-    return clearTimer;
-  }, [isTimerValid, endMs, clearTimer]);
-
-  const countdown = useMemo(() => {
-    if (!isTimerValid || endMs === undefined) {
-      return { shouldShow: false, text: "" };
-    }
-
-    const isBeforeStart = startMs !== undefined && nowMs < startMs;
-    const isAfterEnd = nowMs >= endMs;
-    if (isBeforeStart || isAfterEnd) return { shouldShow: false, text: "" };
-
-    const remainingSeconds = (endMs - nowMs) / 1000;
-    return {
-      shouldShow: remainingSeconds > 0,
-      text: formatCountdown(remainingSeconds),
-    };
-  }, [isTimerValid, endMs, startMs, nowMs]);
-
-  return (
-    <section id={anchorId}>
-      <div
-        className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
-          boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
-        }`}
-      >
-        <Link
-          href={ctaButtonLink || "#"}
-          target={ctaButtonTarget || "_self"}
-          className="max-w-screen-xl w-full transition-all"
-        >
-          <div className="flex flex-col items-center justify-center gap-1 text-center font-black">
-            <div
-              className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
-            >
-              {iconName && (
-                <MaterialIcon
-                  name={
-                    iconName as React.ComponentProps<
-                      typeof MaterialIcon
-                    >["name"]
-                  }
-                  size={24}
-                  fill={1}
-                  className={`${textColorClass} align-text-bottom`}
-                />
-              )}
-              {countdown.shouldShow && (
-                <span className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text">
-                  {countdown.text}
-                </span>
-              )}
-              {countdown.shouldShow ? " " : null}
-              {ctaButtonLabel && ctaButtonLabel}{" "}
-              {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
-            </div>
-          </div>
-        </Link>
-      </div>
-    </section>
-  );
-};
-
-export default AnchoredBottomBanner;
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { AnchoredBottomBannerProps } from "./types";
+import Link from "next/link";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+
+function parseCountdownDateTime(value?: string): number | undefined {
+  if (!value) return undefined;
+  const parsed = Date.parse(value);
+  if (!Number.isFinite(parsed)) {
+    console.error("Invalid countdown datetime", { value });
+    return undefined;
+  }
+  return parsed;
+}
+
+function formatCountdown(totalSeconds: number) {
+  const safeSeconds = Math.max(0, Math.floor(totalSeconds));
+  const hours = Math.floor(safeSeconds / 3600);
+  const minutes = Math.floor((safeSeconds % 3600) / 60);
+  const seconds = safeSeconds % 60;
+
+  return `${String(hours).padStart(2, "0")}H : ${String(minutes).padStart(2, "0")}M : ${String(seconds).padStart(2, "0")}`;
+}
+
+export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
+  ctaSuffixText,
+  backgroundColor,
+  iconName,
+  boxShadow,
+  ctaButtonLabel,
+  ctaButtonLink,
+  ctaButtonTarget,
+  anchorId = "anchored-banner",
+  enableCountdownTimer,
+  countdownStartDateTime,
+  countdownEndDateTime,
+}) => {
+  const backGroundColorClasses = {
+    navy: "bg-bg-fill-inverse",
+    green: "bg-bg-fill-success",
+    blue: "bg-bg-fill-brand-supporting",
+    purple: "bg-bg-fill-brand-tertiary",
+    yellow: "bg-bg-fill-brand-accent",
+    white: "bg-white",
+  };
+
+  const bgClass = backgroundColor
+    ? backGroundColorClasses[backgroundColor]
+    : "bg-bg-fill-brand-accent";
+
+  const isLightBackground =
+    backgroundColor === "yellow" ||
+    backgroundColor === "white" ||
+    !backgroundColor;
+  const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
+
+  // Memoize parsed timestamps so they aren't re-parsed every second
+  const endMs = useMemo(
+    () => parseCountdownDateTime(countdownEndDateTime),
+    [countdownEndDateTime]
+  );
+  const startMs = useMemo(
+    () => parseCountdownDateTime(countdownStartDateTime),
+    [countdownStartDateTime]
+  );
+
+  const isTimerValid = useMemo(() => {
+    if (!enableCountdownTimer || endMs === undefined) return false;
+    if (countdownStartDateTime && startMs === undefined) return false;
+    if (startMs !== undefined && startMs >= endMs) {
+      console.error("Invalid countdown range: start must be before end", {
+        countdownStartDateTime,
+        countdownEndDateTime,
+      });
+      return false;
+    }
+    return true;
+  }, [
+    enableCountdownTimer,
+    endMs,
+    startMs,
+    countdownStartDateTime,
+    countdownEndDateTime,
+  ]);
+
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const intervalRef = useRef<number | null>(null);
+
+  const clearTimer = useCallback(() => {
+    if (intervalRef.current !== null) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isTimerValid) {
+      clearTimer();
+      return;
+    }
+
+    intervalRef.current = window.setInterval(() => {
+      const now = Date.now();
+      // Auto-clear interval once countdown expires
+      if (endMs !== undefined && now >= endMs) {
+        clearTimer();
+      }
+      setNowMs(now);
+    }, 1000);
+
+    return clearTimer;
+  }, [isTimerValid, endMs, clearTimer]);
+
+  const countdown = useMemo(() => {
+    if (!isTimerValid || endMs === undefined) {
+      return { shouldShow: false, text: "" };
+    }
+
+    const isBeforeStart = startMs !== undefined && nowMs < startMs;
+    const isAfterEnd = nowMs >= endMs;
+    if (isBeforeStart || isAfterEnd) return { shouldShow: false, text: "" };
+
+    const remainingSeconds = (endMs - nowMs) / 1000;
+    return {
+      shouldShow: remainingSeconds > 0,
+      text: formatCountdown(remainingSeconds),
+    };
+  }, [isTimerValid, endMs, startMs, nowMs]);
+
+  return (
+    <section id={anchorId}>
+      <div
+        className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
+          boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
+        }`}
+      >
+        <Link
+          href={ctaButtonLink || "#"}
+          target={ctaButtonTarget || "_self"}
+          className="max-w-screen-xl w-full transition-all"
+        >
+          <div className="flex flex-col items-center justify-center gap-1 text-center font-black">
+            <div
+              className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
+            >
+              {iconName && (
+                <MaterialIcon
+                  name={
+                    iconName as React.ComponentProps<
+                      typeof MaterialIcon
+                    >["name"]
+                  }
+                  size={24}
+                  fill={1}
+                  className={`${textColorClass} align-text-bottom`}
+                />
+              )}
+              {countdown.shouldShow && (
+                <span className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text">
+                  {countdown.text}
+                </span>
+              )}
+              {countdown.shouldShow ? " " : null}
+              {ctaButtonLabel && ctaButtonLabel}{" "}
+              {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
+            </div>
+          </div>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default AnchoredBottomBanner;

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -1,13 +1,13 @@
-export interface AnchoredBottomBannerProps {
-  ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue" | "white";
-  iconName?: string;
-  boxShadow?: boolean;
-  ctaButtonLabel?: string;
-  ctaButtonLink?: string;
-  ctaButtonTarget?: string;
-  anchorId?: string;
-  enableCountdownTimer?: boolean;
-  countdownStartDateTime?: string;
-  countdownEndDateTime?: string;
-}
+export interface AnchoredBottomBannerProps {
+  ctaSuffixText?: string;
+  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue" | "white";
+  iconName?: string;
+  boxShadow?: boolean;
+  ctaButtonLabel?: string;
+  ctaButtonLink?: string;
+  ctaButtonTarget?: string;
+  anchorId?: string;
+  enableCountdownTimer?: boolean;
+  countdownStartDateTime?: string;
+  countdownEndDateTime?: string;
+}