@windstream/react-shared-components 0.1.92 → 0.1.94

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

@@ -0,0 +1,302 @@
+import React from "react";
+import { Footer } from "./index";
+import { FooterProps } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/divider", () => ({
+  Divider: ({ className }: { className?: string }) => (
+    <hr data-testid="divider" className={className} />
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("../button", () => ({
+  Button: ({
+    onClick,
+    linkClassName,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    linkVariant,
+    buttonLabel,
+    ...rest
+  }: any) => (
+    <button
+      data-testid="footer-button"
+      className={linkClassName}
+      onClick={onClick}
+    >
+      {buttonLabel || rest.children || "Link"}
+    </button>
+  ),
+}));
+
+const mockLinks = [
+  {
+    title: "Products",
+    items: {
+      items: [
+        { buttonLabel: "Internet", href: "/internet" },
+        { buttonLabel: "TV", href: "/tv" },
+        { buttonLabel: "Phone", href: "/phone" },
+      ],
+    },
+  },
+  {
+    title: "Support",
+    items: {
+      items: [
+        { buttonLabel: "Help Center", href: "/help" },
+        { buttonLabel: "Contact Us", href: "/contact" },
+      ],
+    },
+  },
+];
+
+const mockBottomLinks = [
+  { buttonLabel: "Privacy Policy", href: "/privacy" },
+  { buttonLabel: "Terms of Use", href: "/terms" },
+  { buttonLabel: "Accessibility", href: "/accessibility" },
+];
+
+const defaultProps: FooterProps = {
+  body: <p>Promotional content and disclaimers go here.</p>,
+  links: mockLinks,
+  bottomLinks: mockBottomLinks,
+  copyrights: "All rights reserved.",
+  terms: "Kinetic by Windstream.",
+  maxWidth: true,
+};
+
+describe("Footer", () => {
+  describe("Rendering", () => {
+    it("renders with all props", () => {
+      render(<Footer {...defaultProps} />);
+      expect(
+        screen.getByText("Promotional content and disclaimers go here.")
+      ).toBeInTheDocument();
+      expect(screen.getByText("Products")).toBeInTheDocument();
+      expect(screen.getByText("Support")).toBeInTheDocument();
+      expect(screen.getByText("All rights reserved.")).toBeInTheDocument();
+    });
+
+    it("renders with minimal props (body only)", () => {
+      render(<Footer body={<span>Minimal body</span>} />);
+      expect(screen.getByText("Minimal body")).toBeInTheDocument();
+    });
+
+    it("renders body content in aside with proper aria-label", () => {
+      render(<Footer {...defaultProps} />);
+      const aside = screen.getByLabelText("Promotions and disclaimers");
+      expect(aside.tagName).toBe("ASIDE");
+      expect(aside).toHaveClass("break-words");
+    });
+  });
+
+  describe("Promotional section (body)", () => {
+    it("renders ReactNode body content", () => {
+      render(
+        <Footer
+          body={
+            <div data-testid="promo">
+              <strong>Big Sale!</strong> Save 50%
+            </div>
+          }
+        />
+      );
+      expect(screen.getByTestId("promo")).toBeInTheDocument();
+      expect(screen.getByText("Save 50%")).toBeInTheDocument();
+    });
+
+    it("renders plain text body", () => {
+      render(<Footer body="Simple promotional text" />);
+      expect(screen.getByText("Simple promotional text")).toBeInTheDocument();
+    });
+  });
+
+  describe("Footer link groups", () => {
+    it("renders link group titles", () => {
+      render(<Footer {...defaultProps} />);
+      expect(screen.getByText("Products")).toBeInTheDocument();
+      expect(screen.getByText("Support")).toBeInTheDocument();
+    });
+
+    it("renders all link items within groups", () => {
+      render(<Footer {...defaultProps} />);
+      const buttons = screen.getAllByTestId("footer-button");
+      // 3 Products links + 2 Support links + 3 bottom links = 8
+      expect(buttons).toHaveLength(8);
+    });
+
+    it("renders nav elements with proper aria-labelledby", () => {
+      const { container } = render(<Footer {...defaultProps} />);
+      const navs = container.querySelectorAll("nav.site-links-group");
+      expect(navs).toHaveLength(2);
+      expect(navs[0]).toHaveAttribute("aria-labelledby", "footer-Products");
+      expect(navs[1]).toHaveAttribute("aria-labelledby", "footer-Support");
+    });
+
+    it("renders no link groups when links is undefined", () => {
+      render(<Footer body="No links" />);
+      expect(screen.queryByText("Products")).not.toBeInTheDocument();
+    });
+
+    it("renders no link groups when links is empty", () => {
+      render(<Footer body="No links" links={[]} />);
+      expect(screen.queryByText("Products")).not.toBeInTheDocument();
+    });
+
+    it("handles link groups with missing title and items gracefully", () => {
+      const partialLinks = [
+        { title: undefined, items: undefined },
+        { title: "Valid", items: { items: undefined } },
+        { title: "Also Valid", items: { items: [] } },
+      ];
+      const { container } = render(
+        <Footer body="Partial" links={partialLinks} />
+      );
+      const navs = container.querySelectorAll("nav.site-links-group");
+      expect(navs).toHaveLength(3);
+      expect(screen.getByText("Valid")).toBeInTheDocument();
+      expect(screen.getByText("Also Valid")).toBeInTheDocument();
+    });
+
+    it("renders dividers between link groups on mobile", () => {
+      render(<Footer {...defaultProps} />);
+      const dividers = screen.getAllByTestId("divider");
+      // 1 main divider + 2 mobile dividers (one per link group) + 1 bottom divider = 4
+      expect(dividers.length).toBeGreaterThanOrEqual(3);
+    });
+  });
+
+  describe("Footer layout", () => {
+    it("renders with 4-column grid layout", () => {
+      const { container } = render(<Footer {...defaultProps} />);
+      const grid = container.querySelector(".lg\\:grid-cols-4");
+      expect(grid).toBeInTheDocument();
+    });
+
+    it("applies inverse background and white text", () => {
+      const { container } = render(<Footer {...defaultProps} />);
+      expect(container.firstChild).toHaveClass("bg-bg-inverse");
+      expect(container.firstChild).toHaveClass("text-white");
+    });
+  });
+
+  describe("Max width", () => {
+    it("applies max-w-120 when maxWidth is true (default)", () => {
+      const { container } = render(<Footer {...defaultProps} />);
+      const wrapper = container.querySelector(".max-w-120");
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it("does not apply max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <Footer {...defaultProps} maxWidth={false} />
+      );
+      const wrapper = container.querySelector(".max-w-120");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Copyright and terms", () => {
+    it("renders copyright year with current year", () => {
+      render(<Footer {...defaultProps} />);
+      const currentYear = new Date().getFullYear().toString();
+      const termsEl = screen.getByText(
+        content =>
+          content.includes(currentYear) &&
+          content.includes("Kinetic by Windstream.")
+      );
+      expect(termsEl).toBeInTheDocument();
+    });
+
+    it("renders copyrights text", () => {
+      render(<Footer {...defaultProps} />);
+      expect(screen.getByText("All rights reserved.")).toBeInTheDocument();
+    });
+
+    it("renders terms with copyright symbol", () => {
+      render(<Footer {...defaultProps} />);
+      const termsEl = screen.getByText(/©.*Kinetic by Windstream/);
+      expect(termsEl).toBeInTheDocument();
+      expect(termsEl).toHaveClass("terms-text");
+    });
+
+    it("renders copyrights with whitespace-pre-line class", () => {
+      render(<Footer {...defaultProps} />);
+      const copyEl = screen.getByText("All rights reserved.");
+      expect(copyEl).toHaveClass("copy-rights");
+      expect(copyEl).toHaveClass("whitespace-pre-line");
+    });
+  });
+
+  describe("Bottom links", () => {
+    it("renders bottom links", () => {
+      render(<Footer {...defaultProps} />);
+      const legalNav = screen.getByLabelText("Footer legal");
+      expect(legalNav).toBeInTheDocument();
+    });
+
+    it("renders correct number of bottom links", () => {
+      render(<Footer {...defaultProps} />);
+      const legalNav = screen.getByLabelText("Footer legal");
+      const items = legalNav.querySelectorAll("li");
+      expect(items).toHaveLength(3);
+    });
+
+    it("renders no bottom links when not provided", () => {
+      render(<Footer body="No bottom" />);
+      const legalNav = screen.getByLabelText("Footer legal");
+      const items = legalNav.querySelectorAll("li");
+      expect(items).toHaveLength(0);
+    });
+  });
+
+  describe("onClick handler", () => {
+    it("calls onClick when a site link is clicked", () => {
+      const handleClick = jest.fn();
+      render(<Footer {...defaultProps} onClick={handleClick} />);
+      const buttons = screen.getAllByTestId("footer-button");
+      fireEvent.click(buttons[0]);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onClick for each link clicked", () => {
+      const handleClick = jest.fn();
+      render(<Footer {...defaultProps} onClick={handleClick} />);
+      const buttons = screen.getAllByTestId("footer-button");
+      fireEvent.click(buttons[0]);
+      fireEvent.click(buttons[1]);
+      expect(handleClick).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not error when onClick is not provided", () => {
+      render(<Footer body="No click handler" links={mockLinks} />);
+      const buttons = screen.getAllByTestId("footer-button");
+      expect(() => fireEvent.click(buttons[0])).not.toThrow();
+    });
+  });
+
+  describe("Dividers", () => {
+    it("renders main divider between body and links", () => {
+      render(<Footer {...defaultProps} />);
+      const dividers = screen.getAllByTestId("divider");
+      expect(dividers.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it("renders dividers with inverse border class", () => {
+      render(<Footer {...defaultProps} />);
+      const dividers = screen.getAllByTestId("divider");
+      const inverseDividers = dividers.filter(d =>
+        d.className.includes("border-border-inverse")
+      );
+      expect(inverseDividers.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+});

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

@@ -1,91 +1,91 @@
-import React from "react";
-import { Button } from "../button";
-import { FooterProps } from "./types";
-
-import { Divider } from "@shared/components/divider";
-import { Text } from "@shared/components/text";
-
-export const Footer: React.FC<FooterProps> = ({
-  body,
-  links,
-  bottomLinks,
-  copyrights,
-  terms,
-  maxWidth = true,
-  onClick,
-}) => {
-  function footerClick(
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-  ): void {
-    onClick?.(event);
-  }
-
-  return (
-    <div className="component-container bg-bg-inverse text-white">
-      <div className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8`}>
-        <aside className="break-words" aria-label="Promotions and disclaimers">
-          {body}
-        </aside>
-        <Divider className="my-8 border-border-inverse lg:my-16" />
-        <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-          {links?.map((link: any, index: number) => (
-            <React.Fragment key={`footer-link-group-${index}`}>
-              <div key={`footer-link-group-${index}`}>
-                <nav
-                  aria-labelledby={`footer-${link?.title}`}
-                  className="site-links-group"
-                  key={`link-group-${index}`}
-                >
-                  <Text as="div" className="label3">
-                    {link?.title}
-                  </Text>
-                  <ul className="flex flex-col">
-                    {link?.items?.items?.map((site: any, _index: number) => (
-                      <li className="pt-3" key={`site-links-${_index}`}>
-                        <Button
-                          {...site}
-                          linkVariant="unstyled"
-                          linkClassName="text-white body3 hover:underline underline-offset-4"
-                          onClick={footerClick}
-                        />
-                      </li>
-                    ))}
-                  </ul>
-                </nav>
-              </div>
-              <Divider className="border-border-inverse md:hidden" />
-            </React.Fragment>
-          ))}
-        </div>
-
-        <div className="py-8">
-          <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />
-
-          <p className="terms-text footnote text-white">
-            &copy; {new Date().getFullYear()} {terms}
-          </p>
-          <p className="copy-rights whitespace-pre-line">{copyrights}</p>
-          <nav aria-label="Footer legal">
-            <ul className="bottom-links list-none">
-              {bottomLinks?.map((link: any, index: number) => (
-                <li
-                  key={`links-${index}`}
-                  className="relative float-left pl-[8px] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px] before:content-['•'] first-of-type:pl-0 first-of-type:before:content-['']"
-                >
-                  <Button
-                    {...link}
-                    linkClassName="footnote text-white hover:underline underline-offset-4"
-                    linkVariant="unstyled"
-                    onClick={footerClick}
-                  />
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Footer;
+import React from "react";
+import { Button } from "../button";
+import { FooterProps } from "./types";
+
+import { Divider } from "@shared/components/divider";
+import { Text } from "@shared/components/text";
+
+export const Footer: React.FC<FooterProps> = ({
+  body,
+  links,
+  bottomLinks,
+  copyrights,
+  terms,
+  maxWidth = true,
+  onClick,
+}) => {
+  function footerClick(
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ): void {
+    onClick?.(event);
+  }
+
+  return (
+    <div className="component-container bg-bg-inverse text-white">
+      <div className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8`}>
+        <aside className="break-words" aria-label="Promotions and disclaimers">
+          {body}
+        </aside>
+        <Divider className="my-8 border-border-inverse lg:my-16" />
+        <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {links?.map((link: any, index: number) => (
+            <React.Fragment key={`footer-link-group-${index}`}>
+              <div key={`footer-link-group-${index}`}>
+                <nav
+                  aria-labelledby={`footer-${link?.title}`}
+                  className="site-links-group"
+                  key={`link-group-${index}`}
+                >
+                  <Text as="div" className="label3">
+                    {link?.title}
+                  </Text>
+                  <ul className="flex flex-col">
+                    {link?.items?.items?.map((site: any, _index: number) => (
+                      <li className="pt-3" key={`site-links-${_index}`}>
+                        <Button
+                          {...site}
+                          linkVariant="unstyled"
+                          linkClassName="text-white body3 hover:underline underline-offset-4"
+                          onClick={footerClick}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </nav>
+              </div>
+              <Divider className="border-border-inverse md:hidden" />
+            </React.Fragment>
+          ))}
+        </div>
+
+        <div className="py-8">
+          <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />
+
+          <p className="terms-text footnote text-white">
+            &copy; {new Date().getFullYear()} {terms}
+          </p>
+          <p className="copy-rights whitespace-pre-line">{copyrights}</p>
+          <nav aria-label="Footer legal">
+            <ul className="bottom-links list-none">
+              {bottomLinks?.map((link: any, index: number) => (
+                <li
+                  key={`links-${index}`}
+                  className="relative float-left pl-[8px] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px] before:content-['•'] first-of-type:pl-0 first-of-type:before:content-['']"
+                >
+                  <Button
+                    {...link}
+                    linkClassName="footnote text-white hover:underline underline-offset-4"
+                    linkVariant="unstyled"
+                    onClick={footerClick}
+                  />
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

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

@@ -1,13 +1,13 @@
-import React from "react";
-
-export type FooterProps = {
-  body: React.ReactNode;
-  links?: Array<any>;
-  bottomLinks?: Array<any>;
-  copyrights?: React.ReactNode;
-  terms?: string;
-  maxWidth?: boolean;
-  onClick?: (
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-  ) => void;
-};
+import React from "react";
+
+export type FooterProps = {
+  body: React.ReactNode;
+  links?: Array<any>;
+  bottomLinks?: Array<any>;
+  copyrights?: React.ReactNode;
+  terms?: string;
+  maxWidth?: boolean;
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+};

package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx

@@ -1,23 +1,23 @@
-import { ImagePromoBar } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof ImagePromoBar> = {
-  title: "Contentful Blocks/ImagePromoBar",
-  component: ImagePromoBar,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful image promo bar block.",
-      },
-    },
-  },
-  args: {},
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { ImagePromoBar } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ImagePromoBar> = {
+  title: "Contentful Blocks/ImagePromoBar",
+  component: ImagePromoBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful image promo bar block.",
+      },
+    },
+  },
+  args: {},
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

package/src/contentful/blocks/image-promo-bar/helper.test.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { PlayButton } from "./helper";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, size, fill, className }: any) => (
+    <span
+      data-testid="material-icon"
+      data-name={name}
+      data-size={size}
+      data-fill={fill}
+      className={className}
+    />
+  ),
+}));
+
+describe("PlayButton", () => {
+  it("renders button with aria-label", () => {
+    render(<PlayButton />);
+    expect(
+      screen.getByRole("button", { name: "Play button" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders MaterialIcon with play_arrow", () => {
+    render(<PlayButton />);
+    expect(screen.getByTestId("material-icon")).toHaveAttribute(
+      "data-name",
+      "play_arrow"
+    );
+  });
+
+  it("applies text-text-brand when isHovered is true", () => {
+    render(<PlayButton isHovered={true} />);
+    expect(screen.getByTestId("material-icon").className).toContain(
+      "text-text-brand"
+    );
+    expect(screen.getByTestId("material-icon").className).not.toContain(
+      "text-slate-500"
+    );
+  });
+
+  it("applies text-slate-500 when isHovered is false", () => {
+    render(<PlayButton isHovered={false} />);
+    expect(screen.getByTestId("material-icon").className).toContain(
+      "text-slate-500"
+    );
+  });
+
+  it("applies containerClassName when provided", () => {
+    render(<PlayButton containerClassName="custom-class" />);
+    expect(screen.getByRole("button").className).toContain("custom-class");
+  });
+
+  it("does not add extra class when containerClassName is undefined", () => {
+    const { container } = render(<PlayButton />);
+    const btn = container.querySelector("button");
+    expect(btn?.className).not.toContain("undefined");
+  });
+});

package/src/contentful/blocks/image-promo-bar/helper.tsx

@@ -1,28 +1,28 @@
-import React from "react";
-import { PlayButtonProps } from "./types";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-
-export const PlayButton: React.FC<PlayButtonProps> = ({
-  isHovered: isOuterHovered,
-  containerClassName,
-}) => {
-  return (
-    <button
-      tabIndex={-1}
-      className={`group flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-xl transition-all duration-300 hover:scale-110 active:scale-95 ${containerClassName || ""}`}
-      aria-label="Play button"
-    >
-      <MaterialIcon
-        name="play_arrow"
-        size={72 as any}
-        fill={1}
-        className={`transition-colors duration-300 ${
-          isOuterHovered
-            ? "text-text-brand"
-            : "text-slate-500 group-hover:text-text-brand"
-        }`}
-      />
-    </button>
-  );
-};
+import React from "react";
+import { PlayButtonProps } from "./types";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const PlayButton: React.FC<PlayButtonProps> = ({
+  isHovered: isOuterHovered,
+  containerClassName,
+}) => {
+  return (
+    <button
+      tabIndex={-1}
+      className={`group flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-xl transition-all duration-300 hover:scale-110 active:scale-95 ${containerClassName || ""}`}
+      aria-label="Play button"
+    >
+      <MaterialIcon
+        name="play_arrow"
+        size={72 as any}
+        fill={1}
+        className={`transition-colors duration-300 ${
+          isOuterHovered
+            ? "text-text-brand"
+            : "text-slate-500 group-hover:text-text-brand"
+        }`}
+      />
+    </button>
+  );
+};