@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/accordion/Accordion.stories.mocks.tsx

@@ -1,128 +1,128 @@
-import { AccordionItem } from "./types";
-
-/* ------------
-   DEFAULT FAQs (3 – plain text only)
---------------- */
-
-export const FAQ_ITEMS: AccordionItem[] = [
-  {
-    title: "How much speed do I need in my home?",
-    description:
-      "The amount of internet speed or bandwidth you need in your home significantly depends on your usage and the number of devices connected to the internet. Connected devices don’t only mean computers and tablets; they include TVs used for streaming, gaming consoles, smart watches, phones, home security cameras and doorbells, home assistants, baby monitors, wireless speakers, and more. Every connected device pulls from your home’s internet bandwidth.",
-  },
-  {
-    title: "Do I qualify for any promotional offers?",
-    description:
-      "Be sure to register for updates, promotional offers, and special discounts in the form provided. You’ll be able to enjoy an improved internet experience and benefit from newer, faster, and more advanced fiber technology.",
-  },
-  {
-    title: "How fast is Kinetic internet?",
-    description:
-      "Kinetic offers high internet speeds ranging from 200 Mbps up to Fiber Gig speeds of 1000 Mbps.",
-  },
-];
-
-/* --------------
-   RICH TEXT FAQs (4 – JSX formatted)
------------------ */
-
-export const RICH_FAQ_ITEMS: AccordionItem[] = [
-  {
-    title: "How do I check my Windstream email?",
-    description: (
-      <>
-        <p>
-          <strong>Already have a windstream.net account?</strong>
-        </p>
-
-        <p>You can check your windstream.net emails in the following ways:</p>
-
-        <ol className="ml-6 list-decimal">
-          <li>
-            Go to <strong>www.windstream.net</strong> and click{" "}
-            <strong>Email</strong> in the top‑right of the menu bar.
-          </li>
-          <li>Use an email application on a smartphone.</li>
-          <li>Use an email client on a computer.</li>
-        </ol>
-
-        <p className="mt-4">
-          <strong>OR</strong>
-        </p>
-
-        <p>
-          Log in to <strong>Go Kinetic</strong>, navigate to{" "}
-          <strong>Other Services</strong>, then select{" "}
-          <strong>View and Manage Email</strong>.
-        </p>
-
-        <p className="mt-4">
-          <strong>Wanting to set up a new .net email account?</strong>
-        </p>
-
-        <ul className="ml-6 list-disc">
-          <li>
-            If you do not already have a windstream.net email account, new
-            windstream.net email addresses are no longer being created.
-          </li>
-          <li>
-            You can set up a free email account using platforms like{" "}
-            <strong>Gmail</strong> or <strong>Yahoo</strong>.
-          </li>
-        </ul>
-      </>
-    ),
-  },
-  {
-    title: "How much speed do I need in my home?",
-    description: (
-      <>
-        <p>
-          For a household with <strong>4+ internet users</strong> who use the
-          web for online gaming, music and video streaming, uploading pictures
-          and videos, as well as email and browsing, a{" "}
-          <strong>1‑Gigabit plan</strong> would be best suited.
-        </p>
-
-        <p className="mt-4">
-          This also supports multiple devices such as laptops, smartphones,
-          tablets, and TVs connected to the home internet at the same time.
-        </p>
-
-        <p className="mt-4">
-          Every connected device in your home pulls from your available internet
-          bandwidth.
-        </p>
-      </>
-    ),
-  },
-  {
-    title: "Do I qualify for any promotional offers?",
-    description: (
-      <>
-        <p>
-          Be sure to register for updates, promotional offers, and special
-          discounts using the form below.
-        </p>
-
-        <p className="mt-4">
-          Enjoy an improved internet experience and take advantage of newer,
-          faster, and more advanced fiber technology.
-        </p>
-      </>
-    ),
-  },
-  {
-    title: "Can I change or cancel my pre‑order?",
-    description: (
-      <>
-        <p>
-          Yes, of course! You are under no obligation. If a situation arises
-          that requires a change, simply give us a call at{" "}
-          <strong>855‑939‑2381</strong>.
-        </p>
-      </>
-    ),
-  },
-];
-``;
+import { AccordionItem } from "./types";
+
+/* ------------
+   DEFAULT FAQs (3 – plain text only)
+--------------- */
+
+export const FAQ_ITEMS: AccordionItem[] = [
+  {
+    title: "How much speed do I need in my home?",
+    description:
+      "The amount of internet speed or bandwidth you need in your home significantly depends on your usage and the number of devices connected to the internet. Connected devices don’t only mean computers and tablets; they include TVs used for streaming, gaming consoles, smart watches, phones, home security cameras and doorbells, home assistants, baby monitors, wireless speakers, and more. Every connected device pulls from your home’s internet bandwidth.",
+  },
+  {
+    title: "Do I qualify for any promotional offers?",
+    description:
+      "Be sure to register for updates, promotional offers, and special discounts in the form provided. You’ll be able to enjoy an improved internet experience and benefit from newer, faster, and more advanced fiber technology.",
+  },
+  {
+    title: "How fast is Kinetic internet?",
+    description:
+      "Kinetic offers high internet speeds ranging from 200 Mbps up to Fiber Gig speeds of 1000 Mbps.",
+  },
+];
+
+/* --------------
+   RICH TEXT FAQs (4 – JSX formatted)
+----------------- */
+
+export const RICH_FAQ_ITEMS: AccordionItem[] = [
+  {
+    title: "How do I check my Windstream email?",
+    description: (
+      <>
+        <p>
+          <strong>Already have a windstream.net account?</strong>
+        </p>
+
+        <p>You can check your windstream.net emails in the following ways:</p>
+
+        <ol className="ml-6 list-decimal">
+          <li>
+            Go to <strong>www.windstream.net</strong> and click{" "}
+            <strong>Email</strong> in the top‑right of the menu bar.
+          </li>
+          <li>Use an email application on a smartphone.</li>
+          <li>Use an email client on a computer.</li>
+        </ol>
+
+        <p className="mt-4">
+          <strong>OR</strong>
+        </p>
+
+        <p>
+          Log in to <strong>Go Kinetic</strong>, navigate to{" "}
+          <strong>Other Services</strong>, then select{" "}
+          <strong>View and Manage Email</strong>.
+        </p>
+
+        <p className="mt-4">
+          <strong>Wanting to set up a new .net email account?</strong>
+        </p>
+
+        <ul className="ml-6 list-disc">
+          <li>
+            If you do not already have a windstream.net email account, new
+            windstream.net email addresses are no longer being created.
+          </li>
+          <li>
+            You can set up a free email account using platforms like{" "}
+            <strong>Gmail</strong> or <strong>Yahoo</strong>.
+          </li>
+        </ul>
+      </>
+    ),
+  },
+  {
+    title: "How much speed do I need in my home?",
+    description: (
+      <>
+        <p>
+          For a household with <strong>4+ internet users</strong> who use the
+          web for online gaming, music and video streaming, uploading pictures
+          and videos, as well as email and browsing, a{" "}
+          <strong>1‑Gigabit plan</strong> would be best suited.
+        </p>
+
+        <p className="mt-4">
+          This also supports multiple devices such as laptops, smartphones,
+          tablets, and TVs connected to the home internet at the same time.
+        </p>
+
+        <p className="mt-4">
+          Every connected device in your home pulls from your available internet
+          bandwidth.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "Do I qualify for any promotional offers?",
+    description: (
+      <>
+        <p>
+          Be sure to register for updates, promotional offers, and special
+          discounts using the form below.
+        </p>
+
+        <p className="mt-4">
+          Enjoy an improved internet experience and take advantage of newer,
+          faster, and more advanced fiber technology.
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "Can I change or cancel my pre‑order?",
+    description: (
+      <>
+        <p>
+          Yes, of course! You are under no obligation. If a situation arises
+          that requires a change, simply give us a call at{" "}
+          <strong>855‑939‑2381</strong>.
+        </p>
+      </>
+    ),
+  },
+];
+``;

package/src/contentful/blocks/accordion/Accordion.stories.tsx

@@ -1,98 +1,98 @@
-import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
-import { Accordion } from "./index";
-import type { AccordionProps } from "./types";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
-
-/* ------------
-   ArgTypes
---------------- */
-
-const argTypes: ArgTypes<AccordionProps> = {
-  title: {
-    control: { type: "text" as const },
-    description: "Title displayed above the accordion",
-  },
-  items: {
-    control: { type: "object" as const },
-    description: "Accordion items",
-  },
-  background: {
-    control: { type: "select" as const },
-    options: ["blue", "green", "yellow", "purple", "white", "navy", "cream500"],
-    description: "Background color of the accordion",
-  },
-  enableHeading: {
-    control: { type: "boolean" as const },
-  },
-  maxWidth: {
-    control: { type: "boolean" as const },
-  },
-  hashAutoExpand: {
-    control: { type: "boolean" as const },
-  },
-  descriptionMaxWidth: {
-    control: { type: "text" as const },
-  },
-  anchorId: {
-    control: { type: "text" as const },
-  },
-  initialExpandedItems: {
-    control: { type: "object" as const },
-  },
-  itemContainerClassName: {
-    table: { disable: true },
-  },
-};
-
-/* --------
-   Meta
------------ */
-
-const meta: Meta<typeof Accordion> = {
-  title: "Contentful Blocks/Accordion",
-  component: Accordion,
-  tags: ["autodocs"],
-  argTypes,
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Contentful accordion block used to render collapsible content.",
-      },
-    },
-  },
-  args: {
-    title: "FAQs",
-    background: "white",
-    enableHeading: false,
-    maxWidth: true,
-    items: [],
-    initialExpandedItems: [],
-    hashAutoExpand: false,
-    descriptionMaxWidth: "max-w-[980px]",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/* --------
-   Stories
------------ */
-
-export const Default: Story = {
-  args: {
-    items: FAQ_ITEMS,
-  },
-};
-
-export const WithRichTextContent = {
-  args: {
-    title: "FAQs - Rich Content",
-    items: RICH_FAQ_ITEMS,
-  },
-};
+import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
+import { Accordion } from "./index";
+import type { AccordionProps } from "./types";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
+
+/* ------------
+   ArgTypes
+--------------- */
+
+const argTypes: ArgTypes<AccordionProps> = {
+  title: {
+    control: { type: "text" as const },
+    description: "Title displayed above the accordion",
+  },
+  items: {
+    control: { type: "object" as const },
+    description: "Accordion items",
+  },
+  background: {
+    control: { type: "select" as const },
+    options: ["blue", "green", "yellow", "purple", "white", "navy", "cream500"],
+    description: "Background color of the accordion",
+  },
+  enableHeading: {
+    control: { type: "boolean" as const },
+  },
+  maxWidth: {
+    control: { type: "boolean" as const },
+  },
+  hashAutoExpand: {
+    control: { type: "boolean" as const },
+  },
+  descriptionMaxWidth: {
+    control: { type: "text" as const },
+  },
+  anchorId: {
+    control: { type: "text" as const },
+  },
+  initialExpandedItems: {
+    control: { type: "object" as const },
+  },
+  itemContainerClassName: {
+    table: { disable: true },
+  },
+};
+
+/* --------
+   Meta
+----------- */
+
+const meta: Meta<typeof Accordion> = {
+  title: "Contentful Blocks/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  argTypes,
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful accordion block used to render collapsible content.",
+      },
+    },
+  },
+  args: {
+    title: "FAQs",
+    background: "white",
+    enableHeading: false,
+    maxWidth: true,
+    items: [],
+    initialExpandedItems: [],
+    hashAutoExpand: false,
+    descriptionMaxWidth: "max-w-[980px]",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* --------
+   Stories
+----------- */
+
+export const Default: Story = {
+  args: {
+    items: FAQ_ITEMS,
+  },
+};
+
+export const WithRichTextContent = {
+  args: {
+    title: "FAQs - Rich Content",
+    items: RICH_FAQ_ITEMS,
+  },
+};

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

@@ -0,0 +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();
+  });
+});