@windstream/react-shared-components 0.1.94 → 0.1.95

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

@@ -1,218 +1,218 @@
-import Accordion from "./index";
-import { AccordionItem } from "./types";
-
-import { fireEvent, render, screen } from "@testing-library/react";
-
-const items: AccordionItem[] = [
-  { anchorId: "item-1", title: "First Question", description: "Answer one" },
-  { anchorId: "item-2", title: "Second Question", description: "Answer two" },
-  { anchorId: "item-3", title: "Third Question", description: "Answer three" },
-];
-
-describe("Contentful Accordion", () => {
-  beforeEach(() => {
-    Object.defineProperty(window, "location", {
-      writable: true,
-      value: { hash: "" },
-    });
-  });
-
-  it("renders the title as h2 by default", () => {
-    render(<Accordion items={items} title="FAQ" />);
-    const heading = screen.getByText("FAQ");
-    expect(heading.tagName).toBe("H2");
-  });
-
-  it("renders the title as h1 when enableHeading is true", () => {
-    render(<Accordion items={items} title="FAQ" enableHeading={true} />);
-    const heading = screen.getByText("FAQ");
-    expect(heading.tagName).toBe("H1");
-  });
-
-  it("renders all accordion item titles", () => {
-    render(<Accordion items={items} title="FAQ" />);
-    expect(screen.getByText("First Question")).toBeInTheDocument();
-    expect(screen.getByText("Second Question")).toBeInTheDocument();
-    expect(screen.getByText("Third Question")).toBeInTheDocument();
-  });
-
-  it("renders item descriptions", () => {
-    render(<Accordion items={items} title="FAQ" />);
-    expect(screen.getByText("Answer one")).toBeInTheDocument();
-    expect(screen.getByText("Answer two")).toBeInTheDocument();
-    expect(screen.getByText("Answer three")).toBeInTheDocument();
-  });
-
-  it("applies anchorId to the section", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" anchorId="faq-section" />
-    );
-    expect(container.querySelector("#faq-section")).toBeInTheDocument();
-  });
-
-  it("applies white background by default", () => {
-    const { container } = render(<Accordion items={items} title="FAQ" />);
-    expect(container.querySelector(".bg-white")).toBeInTheDocument();
-  });
-
-  it("applies navy background", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" background="navy" />
-    );
-    expect(
-      container.querySelector('section[class*="bg-[#00002D]"]')
-    ).toBeInTheDocument();
-  });
-
-  it("applies blue background", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" background="blue" />
-    );
-    expect(
-      container.querySelector('section[class*="bg-[#07B2E2]"]')
-    ).toBeInTheDocument();
-  });
-
-  it("applies green background", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" background="green" />
-    );
-    expect(
-      container.querySelector('section[class*="bg-[#26B170]"]')
-    ).toBeInTheDocument();
-  });
-
-  it("applies yellow background", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" background="yellow" />
-    );
-    expect(
-      container.querySelector('section[class*="bg-[#F5FF1E]"]')
-    ).toBeInTheDocument();
-  });
-
-  it("applies purple background", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" background="purple" />
-    );
-    expect(
-      container.querySelector('section[class*="bg-[#931D69]"]')
-    ).toBeInTheDocument();
-  });
-
-  it("applies cream500 background", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" background="cream500" />
-    );
-    expect(
-      container.querySelector('section[class*="bg-[#FFFEEF]"]')
-    ).toBeInTheDocument();
-  });
-
-  it("applies maxWidth class by default", () => {
-    const { container } = render(<Accordion items={items} title="FAQ" />);
-    expect(container.querySelector(".max-w-120")).toBeInTheDocument();
-  });
-
-  it("does not apply maxWidth class when maxWidth is false", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" maxWidth={false} />
-    );
-    expect(container.querySelector(".max-w-120")).not.toBeInTheDocument();
-  });
-
-  it("renders dividers between items but not after the last", () => {
-    const { container } = render(<Accordion items={items} title="FAQ" />);
-    const dividers = container.querySelectorAll(
-      ".bg-bg-surface-tertiary-active"
-    );
-    expect(dividers).toHaveLength(items.length - 1);
-  });
-
-  it("expands items in initialExpandedItems", () => {
-    render(
-      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
-    );
-    const arrowsUp = screen.getAllByText("keyboard_arrow_up");
-    expect(arrowsUp.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it("auto-expands item matching URL hash when hashAutoExpand is true", () => {
-    Object.defineProperty(window, "location", {
-      writable: true,
-      value: { hash: "#item-2" },
-    });
-    render(<Accordion items={items} title="FAQ" hashAutoExpand={true} />);
-    expect(document.getElementById("item-2")).toBeInTheDocument();
-  });
-
-  it("does not auto-expand when hashAutoExpand is false", () => {
-    Object.defineProperty(window, "location", {
-      writable: true,
-      value: { hash: "#item-2" },
-    });
-    render(<Accordion items={items} title="FAQ" hashAutoExpand={false} />);
-    const arrowsDown = screen.getAllByText("keyboard_arrow_down");
-    expect(arrowsDown.length).toBe(items.length);
-  });
-
-  it("does not duplicate item in expandedItems if already present", () => {
-    Object.defineProperty(window, "location", {
-      writable: true,
-      value: { hash: "#item-1" },
-    });
-    render(
-      <Accordion
-        items={items}
-        title="FAQ"
-        hashAutoExpand={true}
-        initialExpandedItems={["item-1"]}
-      />
-    );
-    expect(document.getElementById("item-1")).toBeInTheDocument();
-  });
-
-  it("applies itemContainerClassName", () => {
-    const { container } = render(
-      <Accordion items={items} title="FAQ" itemContainerClassName="gap-4" />
-    );
-    expect(container.querySelector(".gap-4")).toBeInTheDocument();
-  });
-
-  it("applies descriptionMaxWidth class", () => {
-    const { container } = render(
-      <Accordion
-        items={items}
-        title="FAQ"
-        descriptionMaxWidth="max-w-[500px]"
-      />
-    );
-    expect(container.querySelector(".max-w-\\[500px\\]")).toBeInTheDocument();
-  });
-
-  it("sets id on items with anchorId", () => {
-    render(<Accordion items={items} title="FAQ" />);
-    expect(document.getElementById("item-1")).toBeInTheDocument();
-    expect(document.getElementById("item-2")).toBeInTheDocument();
-  });
-
-  it("handles items without anchorId using index as key", () => {
-    const noAnchorItems: AccordionItem[] = [
-      { title: "Q1", description: "A1" },
-      { title: "Q2", description: "A2" },
-    ];
-    render(<Accordion items={noAnchorItems} title="FAQ" />);
-    expect(screen.getByText("Q1")).toBeInTheDocument();
-    expect(screen.getByText("Q2")).toBeInTheDocument();
-  });
-
-  it("toggles expanded state when an accordion item button is clicked", () => {
-    render(
-      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
-    );
-    const buttons = screen.getAllByRole("button");
-    fireEvent.click(buttons[0]);
-    fireEvent.click(buttons[0]);
-    expect(screen.getByText("First Question")).toBeInTheDocument();
-  });
-});
+import Accordion from "./index";
+import { AccordionItem } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+const items: AccordionItem[] = [
+  { anchorId: "item-1", title: "First Question", description: "Answer one" },
+  { anchorId: "item-2", title: "Second Question", description: "Answer two" },
+  { anchorId: "item-3", title: "Third Question", description: "Answer three" },
+];
+
+describe("Contentful Accordion", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "" },
+    });
+  });
+
+  it("renders the title as h2 by default", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    const heading = screen.getByText("FAQ");
+    expect(heading.tagName).toBe("H2");
+  });
+
+  it("renders the title as h1 when enableHeading is true", () => {
+    render(<Accordion items={items} title="FAQ" enableHeading={true} />);
+    const heading = screen.getByText("FAQ");
+    expect(heading.tagName).toBe("H1");
+  });
+
+  it("renders all accordion item titles", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    expect(screen.getByText("First Question")).toBeInTheDocument();
+    expect(screen.getByText("Second Question")).toBeInTheDocument();
+    expect(screen.getByText("Third Question")).toBeInTheDocument();
+  });
+
+  it("renders item descriptions", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    expect(screen.getByText("Answer one")).toBeInTheDocument();
+    expect(screen.getByText("Answer two")).toBeInTheDocument();
+    expect(screen.getByText("Answer three")).toBeInTheDocument();
+  });
+
+  it("applies anchorId to the section", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" anchorId="faq-section" />
+    );
+    expect(container.querySelector("#faq-section")).toBeInTheDocument();
+  });
+
+  it("applies white background by default", () => {
+    const { container } = render(<Accordion items={items} title="FAQ" />);
+    expect(container.querySelector(".bg-white")).toBeInTheDocument();
+  });
+
+  it("applies navy background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="navy" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#00002D]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies blue background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="blue" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#07B2E2]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies green background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="green" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#26B170]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies yellow background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="yellow" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#F5FF1E]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies purple background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="purple" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#931D69]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies cream500 background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="cream500" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#FFFEEF]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies maxWidth class by default", () => {
+    const { container } = render(<Accordion items={items} title="FAQ" />);
+    expect(container.querySelector(".max-w-120")).toBeInTheDocument();
+  });
+
+  it("does not apply maxWidth class when maxWidth is false", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" maxWidth={false} />
+    );
+    expect(container.querySelector(".max-w-120")).not.toBeInTheDocument();
+  });
+
+  it("renders dividers between items but not after the last", () => {
+    const { container } = render(<Accordion items={items} title="FAQ" />);
+    const dividers = container.querySelectorAll(
+      ".bg-bg-surface-tertiary-active"
+    );
+    expect(dividers).toHaveLength(items.length - 1);
+  });
+
+  it("expands items in initialExpandedItems", () => {
+    render(
+      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
+    );
+    const arrowsUp = screen.getAllByText("keyboard_arrow_up");
+    expect(arrowsUp.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("auto-expands item matching URL hash when hashAutoExpand is true", () => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "#item-2" },
+    });
+    render(<Accordion items={items} title="FAQ" hashAutoExpand={true} />);
+    expect(document.getElementById("item-2")).toBeInTheDocument();
+  });
+
+  it("does not auto-expand when hashAutoExpand is false", () => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "#item-2" },
+    });
+    render(<Accordion items={items} title="FAQ" hashAutoExpand={false} />);
+    const arrowsDown = screen.getAllByText("keyboard_arrow_down");
+    expect(arrowsDown.length).toBe(items.length);
+  });
+
+  it("does not duplicate item in expandedItems if already present", () => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "#item-1" },
+    });
+    render(
+      <Accordion
+        items={items}
+        title="FAQ"
+        hashAutoExpand={true}
+        initialExpandedItems={["item-1"]}
+      />
+    );
+    expect(document.getElementById("item-1")).toBeInTheDocument();
+  });
+
+  it("applies itemContainerClassName", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" itemContainerClassName="gap-4" />
+    );
+    expect(container.querySelector(".gap-4")).toBeInTheDocument();
+  });
+
+  it("applies descriptionMaxWidth class", () => {
+    const { container } = render(
+      <Accordion
+        items={items}
+        title="FAQ"
+        descriptionMaxWidth="max-w-[500px]"
+      />
+    );
+    expect(container.querySelector(".max-w-\\[500px\\]")).toBeInTheDocument();
+  });
+
+  it("sets id on items with anchorId", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    expect(document.getElementById("item-1")).toBeInTheDocument();
+    expect(document.getElementById("item-2")).toBeInTheDocument();
+  });
+
+  it("handles items without anchorId using index as key", () => {
+    const noAnchorItems: AccordionItem[] = [
+      { title: "Q1", description: "A1" },
+      { title: "Q2", description: "A2" },
+    ];
+    render(<Accordion items={noAnchorItems} title="FAQ" />);
+    expect(screen.getByText("Q1")).toBeInTheDocument();
+    expect(screen.getByText("Q2")).toBeInTheDocument();
+  });
+
+  it("toggles expanded state when an accordion item button is clicked", () => {
+    render(
+      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
+    );
+    const buttons = screen.getAllByRole("button");
+    fireEvent.click(buttons[0]);
+    fireEvent.click(buttons[0]);
+    expect(screen.getByText("First Question")).toBeInTheDocument();
+  });
+});

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

@@ -1,114 +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]);
-
-  /* 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;
+"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;