@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/accordion/index.tsx

@@ -1,112 +1,114 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { AccordionItem, AccordionProps, ThemeKey } from "./types";
-
-import { Accordion as AccordionComponent } from "@shared/components/accordion";
-import { Divider } from "@shared/components/divider";
-import { Text } from "@shared/components/text";
-
-export const Accordion: React.FC<AccordionProps> = ({
-  items,
-  title,
-  anchorId,
-  background = "white",
-  enableHeading = false,
-  maxWidth = true,
-  initialExpandedItems: initialExpandedItemsProp = [],
-  hashAutoExpand = false,
-  descriptionMaxWidth = "max-w-[980px]",
-  itemContainerClassName,
-}) => {
-  const [expandedItems, setExpandedItems] = useState<string[]>(
-    initialExpandedItemsProp
-  );
-
-  useEffect(() => {
-    if (hashAutoExpand && typeof window !== "undefined") {
-      const hash = window.location.hash;
-      if (hash) {
-        const expandItemId = hash.substring(hash.indexOf("#") + 1);
-        setExpandedItems(prev => {
-          if (prev.includes(expandItemId)) return prev;
-          return [...prev, expandItemId];
-        });
-      }
-    }
-  }, [hashAutoExpand]);
-
-  const handleToggle = (itemAnchorId: string) => {
-    setExpandedItems(prev =>
-      prev.includes(itemAnchorId)
-        ? prev.filter(id => id !== itemAnchorId)
-        : [...prev, itemAnchorId]
-    );
-  };
-
-  const bgColorClasses: Record<ThemeKey, string> = {
-    blue: "bg-[#07B2E2]",
-    green: "bg-[#26B170]",
-    yellow: "bg-[#F5FF1E]",
-    purple: "bg-[#931D69]",
-    white: "bg-white",
-    navy: "bg-[#00002D]",
-    cream500: "bg-[#FFFEEF]",
-  };
-
-  return (
-    <section
-      id={anchorId}
-      className={`${bgColorClasses[background]} flex flex-col px-5 pb-20 pt-4 md:px-10`}
-    >
-      <div className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}>
-        <Text
-          as={enableHeading ? "h1" : "h2"}
-          className="heading2 mb-10 pt-12 text-left text-text md:heading1 lg:text-center"
-        >
-          {title}
-        </Text>
-        <div className={`pt-6 md:pt-10 ${itemContainerClassName ?? ""}`}>
-          {items?.map((item: AccordionItem, index: number) => {
-            const itemKey = item.anchorId || `item-${index}`;
-            const isOpen = item.anchorId
-              ? expandedItems.includes(item.anchorId)
-              : undefined;
-
-            return (
-              <div
-                key={itemKey}
-                id={item.anchorId}
-                className="snap-start scroll-mt-48 lg:scroll-mt-60"
-              >
-                <AccordionComponent
-                  title={item.title}
-                  defaultOpen={isOpen}
-                  containerClassName="border-none"
-                  buttonClassName="p-0 label1"
-                  titleClassName="label3 md:label1 text-text"
-                  className="p-0 pt-6 text-text"
-                  iconClassName="text-icon"
-                  borderRadiusNone={true}
-                  openOnlyOnDesktop={false}
-                  {...(item.anchorId && {
-                    onClick: () => handleToggle(item.anchorId!),
-                  })}
-                >
-                  <div className={descriptionMaxWidth}>
-                    <Text as="div">{item.description}</Text>
-                  </div>
-                </AccordionComponent>
-                {index < items.length - 1 && (
-                  <Divider key={`divider-${index}`} className="my-6 md:my-10" />
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Accordion;
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { AccordionItem, AccordionProps, ThemeKey } from "./types";
+
+import { Accordion as AccordionComponent } from "@shared/components/accordion";
+import { Divider } from "@shared/components/divider";
+import { Text } from "@shared/components/text";
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  title,
+  anchorId,
+  background = "white",
+  enableHeading = false,
+  maxWidth = true,
+  initialExpandedItems: initialExpandedItemsProp = [],
+  hashAutoExpand = false,
+  descriptionMaxWidth = "max-w-[980px]",
+  itemContainerClassName,
+}) => {
+  const [expandedItems, setExpandedItems] = useState<string[]>(
+    initialExpandedItemsProp
+  );
+
+  useEffect(() => {
+    if (hashAutoExpand && typeof window !== "undefined") {
+      const hash = window.location.hash;
+      if (hash) {
+        const expandItemId = hash.substring(hash.indexOf("#") + 1);
+        setExpandedItems(prev => {
+          if (prev.includes(expandItemId)) return prev;
+          return [...prev, expandItemId];
+        });
+      }
+    }
+  }, [hashAutoExpand]);
+
+  /* istanbul ignore next -- passed to AccordionComponent which does not forward onClick */
+  const handleToggle = (itemAnchorId: string) => {
+    setExpandedItems(prev =>
+      prev.includes(itemAnchorId)
+        ? prev.filter(id => id !== itemAnchorId)
+        : [...prev, itemAnchorId]
+    );
+  };
+
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+    cream500: "bg-[#FFFEEF]",
+  };
+
+  return (
+    <section
+      id={anchorId}
+      className={`${bgColorClasses[background]} flex flex-col px-5 pb-20 pt-4 md:px-10`}
+    >
+      <div className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}>
+        <Text
+          as={enableHeading ? "h1" : "h2"}
+          className="heading2 mb-10 pt-12 text-left text-text md:heading1 lg:text-center"
+        >
+          {title}
+        </Text>
+        <div className={`pt-6 md:pt-10 ${itemContainerClassName ?? ""}`}>
+          {items?.map((item: AccordionItem, index: number) => {
+            const itemKey = item.anchorId || `item-${index}`;
+            const isOpen = item.anchorId
+              ? expandedItems.includes(item.anchorId)
+              : undefined;
+
+            return (
+              <div
+                key={itemKey}
+                id={item.anchorId}
+                className="snap-start scroll-mt-48 lg:scroll-mt-60"
+              >
+                <AccordionComponent
+                  title={item.title}
+                  defaultOpen={isOpen}
+                  containerClassName="border-none"
+                  buttonClassName="p-0 label1"
+                  titleClassName="label3 md:label1 text-text"
+                  className="p-0 pt-6 text-text"
+                  iconClassName="text-icon"
+                  borderRadiusNone={true}
+                  openOnlyOnDesktop={false}
+                  {...(item.anchorId && {
+                    onClick: /* istanbul ignore next */ () =>
+                      handleToggle(item.anchorId!),
+                  })}
+                >
+                  <div className={descriptionMaxWidth}>
+                    <Text as="div">{item.description}</Text>
+                  </div>
+                </AccordionComponent>
+                {index < items.length - 1 && (
+                  <Divider key={`divider-${index}`} className="my-6 md:my-10" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Accordion;

package/src/contentful/blocks/accordion/types.ts

@@ -1,34 +1,34 @@
-import React from "react";
-
-export type AccordionItem = {
-  anchorId?: string;
-  title: string;
-  description: React.ReactNode;
-};
-
-export type AccordionProps = {
-  /** Section-level anchor ID applied to the outer <section> element */
-  anchorId?: string;
-  title: string;
-  enableHeading?: boolean;
-  background?: ThemeKey;
-  items: AccordionItem[];
-  maxWidth?: boolean;
-  /** Array of anchorIds that should be expanded on mount */
-  initialExpandedItems?: string[];
-  /** Enable URL hash auto-expand on mount */
-  hashAutoExpand?: boolean;
-  /** Max-width class for item descriptions (default: "max-w-[980px]") */
-  descriptionMaxWidth?: string;
-  /** Custom class for the accordion list wrapper */
-  itemContainerClassName?: string;
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy"
-  | "cream500";
+import React from "react";
+
+export type AccordionItem = {
+  anchorId?: string;
+  title: string;
+  description: React.ReactNode;
+};
+
+export type AccordionProps = {
+  /** Section-level anchor ID applied to the outer <section> element */
+  anchorId?: string;
+  title: string;
+  enableHeading?: boolean;
+  background?: ThemeKey;
+  items: AccordionItem[];
+  maxWidth?: boolean;
+  /** Array of anchorIds that should be expanded on mount */
+  initialExpandedItems?: string[];
+  /** Enable URL hash auto-expand on mount */
+  hashAutoExpand?: boolean;
+  /** Max-width class for item descriptions (default: "max-w-[980px]") */
+  descriptionMaxWidth?: string;
+  /** Custom class for the accordion list wrapper */
+  itemContainerClassName?: string;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy"
+  | "cream500";

package/src/contentful/blocks/address-input-banner/index.test.tsx

@@ -0,0 +1,132 @@
+import { AddressInputBanner } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("AddressInputBanner", () => {
+  const defaultProps = {
+    title: "Check availability",
+    isVisible: true,
+    navHeight: 64,
+  };
+
+  it("renders title when visible", () => {
+    render(<AddressInputBanner {...defaultProps} />);
+    expect(screen.getByText("Check availability")).toBeInTheDocument();
+  });
+
+  it("returns null when isVisible is false", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} isVisible={false} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("applies sticky top style from navHeight", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} navHeight={80} />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.style.top).toBe("80px");
+  });
+
+  it("applies yellow variant styles by default", () => {
+    const { container } = render(<AddressInputBanner {...defaultProps} />);
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-brand-accent");
+    expect(div.className).toContain("text-text");
+  });
+
+  it("applies white variant styles", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="white" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-white");
+  });
+
+  it("applies navy variant styles", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="navy" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-inverse");
+    expect(div.className).toContain("text-text-inverse");
+  });
+
+  it("applies green variant styles", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="green" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-success");
+    expect(div.className).toContain("text-text-inverse");
+  });
+
+  it("falls back to yellow for unknown variant", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="unknown" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-brand-accent");
+  });
+
+  it("is case-insensitive for variant", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="Navy" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-inverse");
+  });
+
+  it("renders renderCheckPlans output", () => {
+    const renderCheckPlans = jest.fn(() => (
+      <div data-testid="check-plans">Plans</div>
+    ));
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+    expect(screen.getByTestId("check-plans")).toBeInTheDocument();
+  });
+
+  it("calls renderCheckPlans with correct arguments", () => {
+    const renderCheckPlans = jest.fn(() => null);
+    const cta = {
+      buttonLabel: "See plans",
+      buttonVariant: "primary_brand",
+    } as any;
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        cta={cta}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+    expect(renderCheckPlans).toHaveBeenCalledWith({
+      ctaText: "See plans",
+      buttonVariant: "primary_brand",
+      showButtonAs: "solid",
+      cta,
+    });
+  });
+
+  it("uses default ctaLabel 'Check plans' when cta.buttonLabel is not provided", () => {
+    const renderCheckPlans = jest.fn(() => null);
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+    expect(renderCheckPlans).toHaveBeenCalledWith(
+      expect.objectContaining({ ctaText: "Check plans" })
+    );
+  });
+
+  it("does not crash without renderCheckPlans", () => {
+    const { container } = render(<AddressInputBanner {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

package/src/contentful/blocks/address-input-banner/index.tsx

@@ -1,52 +1,52 @@
-import { FC } from "react";
-import { AddressInputBannerProps } from "./types";
-
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-const variantStyles: Record<string, { bg: string; text: string }> = {
-  yellow: { bg: "bg-fill-brand-accent", text: "text" },
-  white: { bg: "white", text: "text" },
-  navy: { bg: "bg-fill-inverse", text: "text-inverse" },
-  green: { bg: "bg-fill-success", text: "text-inverse" },
-};
-
-export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
-  const {
-    title,
-    variant = "yellow",
-    cta,
-    navHeight,
-    isVisible,
-    renderCheckPlans,
-  } = props;
-
-  const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
-
-  if (!isVisible) return null;
-
-  const ctaLabel = cta?.buttonLabel || "Check plans";
-  const renderedCheckPlans = renderCheckPlans?.({
-    ctaText: ctaLabel,
-    buttonVariant: cta?.buttonVariant,
-    showButtonAs: "solid",
-    cta: cta,
-  });
-
-  return (
-    <div
-      style={{
-        top: `${navHeight}px`,
-      }}
-      className={cx(
-        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 bg-${style.bg} text-${style.text}`,
-        "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
-      )}
-    >
-      <Text className="label3 w-full text-center md:label1 lg:w-auto lg:text-left">
-        {title}
-      </Text>
-      {renderedCheckPlans}
-    </div>
-  );
-};
+import { FC } from "react";
+import { AddressInputBannerProps } from "./types";
+
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+const variantStyles: Record<string, { bg: string; text: string }> = {
+  yellow: { bg: "bg-fill-brand-accent", text: "text" },
+  white: { bg: "white", text: "text" },
+  navy: { bg: "bg-fill-inverse", text: "text-inverse" },
+  green: { bg: "bg-fill-success", text: "text-inverse" },
+};
+
+export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
+  const {
+    title,
+    variant = "yellow",
+    cta,
+    navHeight,
+    isVisible,
+    renderCheckPlans,
+  } = props;
+
+  const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
+
+  if (!isVisible) return null;
+
+  const ctaLabel = cta?.buttonLabel || "Check plans";
+  const renderedCheckPlans = renderCheckPlans?.({
+    ctaText: ctaLabel,
+    buttonVariant: cta?.buttonVariant,
+    showButtonAs: "solid",
+    cta: cta,
+  });
+
+  return (
+    <div
+      style={{
+        top: `${navHeight}px`,
+      }}
+      className={cx(
+        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 bg-${style.bg} text-${style.text}`,
+        "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
+      )}
+    >
+      <Text className="label3 w-full text-center md:label1 lg:w-auto lg:text-left">
+        {title}
+      </Text>
+      {renderedCheckPlans}
+    </div>
+  );
+};

package/src/contentful/blocks/address-input-banner/types.ts

@@ -1,14 +1,14 @@
-import React from "react";
-
-import { ButtonProps } from "@shared/contentful/blocks/button/types";
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export interface AddressInputBannerProps {
-  entryName?: string;
-  title: string;
-  variant?: string;
-  cta?: ButtonProps;
-  navHeight?: number;
-  isVisible?: boolean;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-}
+import React from "react";
+
+import { ButtonProps } from "@shared/contentful/blocks/button/types";
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export interface AddressInputBannerProps {
+  entryName?: string;
+  title: string;
+  variant?: string;
+  cta?: ButtonProps;
+  navHeight?: number;
+  isVisible?: boolean;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+}