@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/breadcrumbs/BreadcrumbNavigation.stories.tsx

@@ -1,147 +1,147 @@
-import { BreadcrumbNavigation } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof BreadcrumbNavigation> = {
-  title: "Contentful Blocks/Breadcrumb",
-  component: BreadcrumbNavigation,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Breadcrumb navigation component used to display the user's location within the site hierarchy.",
-      },
-    },
-  },
-  args: {
-    textColor: "dark",
-    mobileTextColor: undefined,
-    desktopTextColor: undefined,
-    maxWidth: true,
-    float: "desktop",
-    links: [
-      { buttonLabel: "Home", href: "/" },
-      { buttonLabel: "Category", href: "/category" },
-      { buttonLabel: "Current Page" },
-    ],
-  },
-  argTypes: {
-    links: { control: "object" },
-    textColor: {
-      control: "radio",
-      options: ["dark", "light"],
-    },
-    mobileTextColor: {
-      control: "radio",
-      options: ["dark", "light"],
-    },
-    desktopTextColor: {
-      control: "radio",
-      options: ["dark", "light"],
-    },
-    maxWidth: { control: "boolean" },
-    float: {
-      control: "radio",
-      options: ["none", "mobile", "desktop", "always"],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/* ---------------- Stories ---------------- */
-
-export const Default: Story = {};
-
-export const LightText: Story = {
-  args: {
-    textColor: "light",
-  },
-  parameters: {
-    backgrounds: {
-      default: "dark",
-    },
-  },
-};
-
-export const WithImages: Story = {
-  args: {
-    links: [
-      {
-        buttonLabel: "Home",
-        href: "/",
-
-        image: {
-          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
-          alt: "Home",
-        },
-      },
-      {
-        buttonLabel: "Category",
-        href: "/category",
-
-        image: {
-          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
-          alt: "Category",
-        },
-      },
-      {
-        buttonLabel: "Current Page",
-      },
-    ],
-  },
-};
-
-export const SingleLink: Story = {
-  args: {
-    links: [{ buttonLabel: "Current Page" }],
-  },
-};
-
-export const EmptyLinks: Story = {
-  args: {
-    links: [],
-  },
-};
-
-export const FloatOnMobile: Story = {
-  args: {
-    float: "mobile",
-  },
-};
-
-export const FloatOnDesktop: Story = {
-  args: {
-    float: "desktop",
-  },
-};
-
-export const FloatAlways: Story = {
-  args: {
-    float: "always",
-  },
-};
-
-export const MaxWidthDisabled: Story = {
-  args: {
-    maxWidth: false,
-  },
-};
-
-export const MixedTextColors: Story = {
-  args: {
-    mobileTextColor: "light",
-    desktopTextColor: "dark",
-    float: "mobile",
-  },
-  parameters: {
-    backgrounds: {
-      default: "dark",
-    },
-  },
-};
+import { BreadcrumbNavigation } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof BreadcrumbNavigation> = {
+  title: "Contentful Blocks/Breadcrumb",
+  component: BreadcrumbNavigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Breadcrumb navigation component used to display the user's location within the site hierarchy.",
+      },
+    },
+  },
+  args: {
+    textColor: "dark",
+    mobileTextColor: undefined,
+    desktopTextColor: undefined,
+    maxWidth: true,
+    float: "desktop",
+    links: [
+      { buttonLabel: "Home", href: "/" },
+      { buttonLabel: "Category", href: "/category" },
+      { buttonLabel: "Current Page" },
+    ],
+  },
+  argTypes: {
+    links: { control: "object" },
+    textColor: {
+      control: "radio",
+      options: ["dark", "light"],
+    },
+    mobileTextColor: {
+      control: "radio",
+      options: ["dark", "light"],
+    },
+    desktopTextColor: {
+      control: "radio",
+      options: ["dark", "light"],
+    },
+    maxWidth: { control: "boolean" },
+    float: {
+      control: "radio",
+      options: ["none", "mobile", "desktop", "always"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* ---------------- Stories ---------------- */
+
+export const Default: Story = {};
+
+export const LightText: Story = {
+  args: {
+    textColor: "light",
+  },
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};
+
+export const WithImages: Story = {
+  args: {
+    links: [
+      {
+        buttonLabel: "Home",
+        href: "/",
+
+        image: {
+          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
+          alt: "Home",
+        },
+      },
+      {
+        buttonLabel: "Category",
+        href: "/category",
+
+        image: {
+          url: "https://images.ctfassets.net/8d4yn2ywtegc/50Aef1sWZhzXKR0smBjFi8/e552eb0193b203822381f508babd51b3/Alabama.svg",
+          alt: "Category",
+        },
+      },
+      {
+        buttonLabel: "Current Page",
+      },
+    ],
+  },
+};
+
+export const SingleLink: Story = {
+  args: {
+    links: [{ buttonLabel: "Current Page" }],
+  },
+};
+
+export const EmptyLinks: Story = {
+  args: {
+    links: [],
+  },
+};
+
+export const FloatOnMobile: Story = {
+  args: {
+    float: "mobile",
+  },
+};
+
+export const FloatOnDesktop: Story = {
+  args: {
+    float: "desktop",
+  },
+};
+
+export const FloatAlways: Story = {
+  args: {
+    float: "always",
+  },
+};
+
+export const MaxWidthDisabled: Story = {
+  args: {
+    maxWidth: false,
+  },
+};
+
+export const MixedTextColors: Story = {
+  args: {
+    mobileTextColor: "light",
+    desktopTextColor: "dark",
+    float: "mobile",
+  },
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};

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

@@ -0,0 +1,281 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { BreadcrumbNavigation } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+const baseLinks = [
+  { buttonLabel: "Home", href: "/" },
+  { buttonLabel: "Blog", href: "/blog" },
+  { buttonLabel: "Current Page" },
+];
+
+describe("BreadcrumbNavigation", () => {
+  it("renders nothing when links is empty", () => {
+    const { container } = render(<BreadcrumbNavigation links={[]} />);
+    expect(container.querySelector("nav")).not.toBeInTheDocument();
+  });
+
+  it("renders nothing when links is undefined", () => {
+    const { container } = render(<BreadcrumbNavigation />);
+    expect(container.querySelector("nav")).not.toBeInTheDocument();
+  });
+
+  it("renders nav with aria-label", () => {
+    render(<BreadcrumbNavigation links={baseLinks} />);
+    expect(screen.getByLabelText("Breadcrumb")).toBeInTheDocument();
+  });
+
+  it("renders non-last links as anchor elements with chevron", () => {
+    const { container } = render(<BreadcrumbNavigation links={baseLinks} />);
+    const anchors = container.querySelectorAll("a");
+    expect(anchors).toHaveLength(2);
+    expect(anchors[0]).toHaveAttribute("href", "/");
+    expect(anchors[0]).toHaveTextContent("Home");
+    expect(anchors[1]).toHaveAttribute("href", "/blog");
+    const icons = screen.getAllByTestId("material-icon");
+    expect(icons).toHaveLength(2);
+    icons.forEach(icon => {
+      expect(icon).toHaveTextContent("chevron_right");
+    });
+  });
+
+  it("renders last link as Text span", () => {
+    render(<BreadcrumbNavigation links={baseLinks} />);
+    expect(screen.getByText("Current Page")).toBeInTheDocument();
+  });
+
+  describe("textColor", () => {
+    it("applies dark text color by default", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="dark" />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-text");
+    });
+
+    it("applies light text color", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="light" />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-white");
+    });
+
+    it("applies mobileTextColor override", () => {
+      const { container } = render(
+        <BreadcrumbNavigation
+          links={baseLinks}
+          textColor="dark"
+          mobileTextColor="light"
+        />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-white");
+    });
+
+    it("applies desktopTextColor override", () => {
+      const { container } = render(
+        <BreadcrumbNavigation
+          links={baseLinks}
+          textColor="dark"
+          desktopTextColor="light"
+        />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("xl:text-white");
+    });
+  });
+
+  describe("float prop", () => {
+    it("applies absolute class when float is always", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="always" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("absolute");
+    });
+
+    it("applies relative xl:absolute class when float is desktop (default)", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="desktop" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("relative xl:absolute");
+    });
+
+    it("applies absolute xl:relative class when float is mobile", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="mobile" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("absolute xl:relative");
+    });
+
+    it("applies relative class when float is none", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="none" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("relative");
+      expect(ol?.className).not.toContain("absolute");
+    });
+
+    it("applies px-7 when float is always", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="always" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("px-7");
+    });
+  });
+
+  describe("maxWidth", () => {
+    it("applies max-w-120 class when maxWidth is true", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} maxWidth={true} />
+      );
+      expect(container.querySelector("nav")?.className).toContain("max-w-120");
+    });
+
+    it("applies mx-auto without max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} maxWidth={false} />
+      );
+      const nav = container.querySelector("nav");
+      expect(nav?.className).toContain("mx-auto");
+      expect(nav?.className).not.toContain("max-w-120");
+    });
+
+    it("applies mx-5 when maxWidth is true and float is none", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} maxWidth={true} float="none" />
+      );
+      const nav = container.querySelector("nav");
+      expect(nav?.className).toContain("mx-5");
+    });
+
+    it("does not apply mx-5 when float is not none", () => {
+      const { container } = render(
+        <BreadcrumbNavigation
+          links={baseLinks}
+          maxWidth={true}
+          float="always"
+        />
+      );
+      const nav = container.querySelector("nav");
+      expect(nav?.className).not.toContain("mx-5");
+    });
+  });
+
+  describe("Image handling", () => {
+    it("renders image with https prefix for protocol-relative URLs", () => {
+      const links = [
+        {
+          buttonLabel: "Home",
+          href: "/",
+          image: { url: "//cdn.test/img.png", alt: "Logo" },
+        },
+        { buttonLabel: "Current" },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      const img = screen.getAllByRole("img")[0];
+      expect(img).toHaveAttribute("src", "https://cdn.test/img.png");
+      expect(img).toHaveAttribute("alt", "Logo");
+    });
+
+    it("renders image with original URL when it does not start with //", () => {
+      const links = [
+        {
+          buttonLabel: "Home",
+          href: "/",
+          image: { url: "https://cdn.test/img.png", alt: "Logo" },
+        },
+        { buttonLabel: "Current" },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      expect(screen.getAllByRole("img")[0]).toHaveAttribute(
+        "src",
+        "https://cdn.test/img.png"
+      );
+    });
+
+    it("does not render image when url is missing", () => {
+      const links = [
+        { buttonLabel: "Home", href: "/", image: {} },
+        { buttonLabel: "Current" },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    });
+
+    it("renders image on last breadcrumb item", () => {
+      const links = [
+        { buttonLabel: "Home", href: "/" },
+        {
+          buttonLabel: "Current",
+          image: { url: "https://cdn.test/last.png", alt: "Last" },
+        },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      expect(screen.getByRole("img")).toHaveAttribute(
+        "src",
+        "https://cdn.test/last.png"
+      );
+    });
+
+    it("uses empty alt when image alt is not provided", () => {
+      const links = [
+        {
+          buttonLabel: "Home",
+          href: "/",
+          image: { url: "https://cdn.test/img.png" },
+        },
+        { buttonLabel: "Current" },
+      ];
+      const { container } = render(<BreadcrumbNavigation links={links} />);
+      const img = container.querySelector("img");
+      expect(img).toHaveAttribute("alt", "");
+    });
+  });
+
+  describe("default float behavior", () => {
+    it("defaults float to desktop", () => {
+      const { container } = render(<BreadcrumbNavigation links={baseLinks} />);
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("relative xl:absolute");
+    });
+
+    it("default textColor derives mobileTextColor as dark when float is desktop", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="light" />
+      );
+      // When float=desktop, resolvedMobile = "dark" (always)
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-text");
+    });
+
+    it("default textColor derives desktopTextColor from textColor when float is desktop", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="light" />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("xl:text-white");
+    });
+  });
+});