@windstream/react-shared-components 0.1.92 → 0.1.94

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

@@ -1,95 +1,95 @@
-import React from "react";
-import { BreadcrumbNavigationProps } from "./types";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-export const BreadcrumbNavigation: React.FC<
-  BreadcrumbNavigationProps
-> = props => {
-  const {
-    links = [],
-    textColor = "dark",
-    mobileTextColor,
-    desktopTextColor,
-    maxWidth = true,
-    float = "desktop",
-  } = props;
-  const resolvedMobile =
-    mobileTextColor ?? (float === "desktop" ? "dark" : textColor);
-  const resolvedDesktop =
-    desktopTextColor ?? (float === "mobile" ? "dark" : textColor);
-  const mobileColor = resolvedMobile === "dark" ? "text-text" : "text-white";
-  const desktopColor =
-    resolvedDesktop === "dark" ? "xl:text-text" : "xl:text-white";
-  const color = `${mobileColor} ${desktopColor}`;
-
-  const olPosition =
-    float === "always"
-      ? "absolute"
-      : float === "mobile"
-        ? "absolute xl:relative"
-        : float === "desktop"
-          ? "relative xl:absolute"
-          : "relative";
-
-  if (!links.length) return null;
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      className={`${maxWidth ? `${float === "none" && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
-    >
-      <ol
-        className={`${float === "always" && "px-7 md:px-14"} right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 pb-0 pt-8 ${olPosition} xl:mx-auto xl:flex-wrap xl:px-3`}
-      >
-        {links.map((link, index) => {
-          const { image, ...linkProps } = link;
-          const imageSrc = image?.url
-            ? image.url.startsWith("//")
-              ? `https:${image.url}`
-              : image.url
-            : "";
-          const isLast = index === links.length - 1;
-          return !isLast ? (
-            <li key={index} className="flex flex-none items-center">
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2 h-10 w-10"
-                />
-              )}
-              <a
-                href={linkProps.href}
-                className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
-              >
-                {linkProps.buttonLabel}
-              </a>
-
-              <MaterialIcon name="chevron_right" className={`${color} `} />
-            </li>
-          ) : (
-            <li key={index} className="flex min-w-0 items-center">
-              {imageSrc && (
-                <img
-                  src={imageSrc}
-                  alt={image?.alt || ""}
-                  width={20}
-                  height={20}
-                  className="mr-2 h-10 w-10"
-                />
-              )}
-              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
-                {link.buttonLabel}
-              </Text>
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-export default BreadcrumbNavigation;
+import React from "react";
+import { BreadcrumbNavigationProps } from "./types";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+export const BreadcrumbNavigation: React.FC<
+  BreadcrumbNavigationProps
+> = props => {
+  const {
+    links = [],
+    textColor = "dark",
+    mobileTextColor,
+    desktopTextColor,
+    maxWidth = true,
+    float = "desktop",
+  } = props;
+  const resolvedMobile =
+    mobileTextColor ?? (float === "desktop" ? "dark" : textColor);
+  const resolvedDesktop =
+    desktopTextColor ?? (float === "mobile" ? "dark" : textColor);
+  const mobileColor = resolvedMobile === "dark" ? "text-text" : "text-white";
+  const desktopColor =
+    resolvedDesktop === "dark" ? "xl:text-text" : "xl:text-white";
+  const color = `${mobileColor} ${desktopColor}`;
+
+  const olPosition =
+    float === "always"
+      ? "absolute"
+      : float === "mobile"
+        ? "absolute xl:relative"
+        : float === "desktop"
+          ? "relative xl:absolute"
+          : "relative";
+
+  if (!links.length) return null;
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={`${maxWidth ? `${float === "none" && "mx-5"} max-w-120 xl:mx-auto` : "mx-auto"} relative`}
+    >
+      <ol
+        className={`${float === "always" && "px-7 md:px-14"} right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 pb-0 pt-8 ${olPosition} xl:mx-auto xl:flex-wrap xl:px-3`}
+      >
+        {links.map((link, index) => {
+          const { image, ...linkProps } = link;
+          const imageSrc = image?.url
+            ? image.url.startsWith("//")
+              ? `https:${image.url}`
+              : image.url
+            : "";
+          const isLast = index === links.length - 1;
+          return !isLast ? (
+            <li key={index} className="flex flex-none items-center">
+              {imageSrc && (
+                <img
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2 h-10 w-10"
+                />
+              )}
+              <a
+                href={linkProps.href}
+                className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
+              >
+                {linkProps.buttonLabel}
+              </a>
+
+              <MaterialIcon name="chevron_right" className={`${color} `} />
+            </li>
+          ) : (
+            <li key={index} className="flex min-w-0 items-center">
+              {imageSrc && (
+                <img
+                  src={imageSrc}
+                  alt={image?.alt || ""}
+                  width={20}
+                  height={20}
+                  className="mr-2 h-10 w-10"
+                />
+              )}
+              <Text as="span" className={`body3 mr-2 break-words ${color}`}>
+                {link.buttonLabel}
+              </Text>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+export default BreadcrumbNavigation;

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

@@ -1,8 +1,8 @@
-export type BreadcrumbNavigationProps = {
-  links?: Array<any>;
-  textColor?: "dark" | "light";
-  mobileTextColor?: "dark" | "light";
-  desktopTextColor?: "dark" | "light";
-  maxWidth?: boolean;
-  float?: "none" | "mobile" | "desktop" | "always";
-};
+export type BreadcrumbNavigationProps = {
+  links?: Array<any>;
+  textColor?: "dark" | "light";
+  mobileTextColor?: "dark" | "light";
+  desktopTextColor?: "dark" | "light";
+  maxWidth?: boolean;
+  float?: "none" | "mobile" | "desktop" | "always";
+};

package/src/contentful/blocks/button/Button.stories.tsx

@@ -1,40 +1,40 @@
-import { Button } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Button> = {
-  title: "Contentful Blocks/Button",
-  component: Button,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Contentful button block. Renders as solid (BrandButton) or text (Link).",
-      },
-    },
-  },
-  args: {
-    showButtonAs: "solid",
-    buttonVariant: "primary_brand",
-    buttonLabel: "Button",
-    buttonPrefix: "",
-    badge: "",
-    badgeIcon: "",
-    buttonIcon: "",
-    buttonIconPosition: "left",
-    href: "",
-    target: "_self",
-    anchorId: "",
-    preserveQueryParameters: false,
-    clickToOpen: "",
-    tabmodalNameToOpen: "",
-    preDefinedFunctionExecution: "",
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Button } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Contentful Blocks/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful button block. Renders as solid (BrandButton) or text (Link).",
+      },
+    },
+  },
+  args: {
+    showButtonAs: "solid",
+    buttonVariant: "primary_brand",
+    buttonLabel: "Button",
+    buttonPrefix: "",
+    badge: "",
+    badgeIcon: "",
+    buttonIcon: "",
+    buttonIconPosition: "left",
+    href: "",
+    target: "_self",
+    anchorId: "",
+    preserveQueryParameters: false,
+    clickToOpen: "",
+    tabmodalNameToOpen: "",
+    preDefinedFunctionExecution: "",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -0,0 +1,339 @@
+import React from "react";
+import { Button } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/brand-button", () => ({
+  BrandButton: ({
+    as,
+    href,
+    text,
+    label,
+    onClick,
+    id,
+    variant,
+    fullWidth,
+    size,
+    buttonClassName,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ...rest
+  }: any) => {
+    const Tag = as || "button";
+    return (
+      <Tag
+        data-testid="brand-button"
+        href={href}
+        id={id}
+        data-variant={variant}
+        data-full-width={fullWidth}
+        data-size={size}
+        className={buttonClassName}
+        onClick={onClick}
+      >
+        {label} {text}
+      </Tag>
+    );
+  },
+}));
+
+jest.mock("@shared/components/button", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Button: ({ onClick, className, children, ...rest }: any) => (
+    <button data-testid="core-button" className={className} onClick={onClick}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({
+    children,
+    href,
+    target,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    variant,
+    className,
+    title,
+    onClick,
+  }: any) => (
+    <a
+      data-testid="link"
+      href={href}
+      target={target}
+      className={className}
+      title={title}
+      onClick={onClick}
+    >
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, size, fill }: any) => (
+    <span
+      data-testid="material-icon"
+      data-name={name}
+      data-size={size}
+      data-fill={fill}
+    />
+  ),
+}));
+
+jest.mock("@shared/utils/utm", () => ({
+  buildPreservedQueryHref: (href: string, search: string) => `${href}${search}`,
+}));
+
+describe("Button", () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  describe("showButtonAs='solid' (default)", () => {
+    it("renders BrandButton as anchor when href is provided", () => {
+      render(<Button buttonLabel="Click" href="/page" />);
+      const btn = screen.getByTestId("brand-button");
+      expect(btn.tagName).toBe("A");
+      expect(btn).toHaveAttribute("href", "/page");
+      expect(btn).toHaveTextContent("Click");
+    });
+
+    it("renders BrandButton as button when href is not provided", () => {
+      render(<Button buttonLabel="Click" />);
+      const btn = screen.getByTestId("brand-button");
+      expect(btn.tagName).toBe("BUTTON");
+    });
+
+    it("passes variant, anchorId, fullWidth, size, buttonClassName", () => {
+      render(
+        <Button
+          buttonLabel="X"
+          buttonVariant="secondary"
+          anchorId="test-id"
+          fullWidth={true}
+          size="lg"
+          buttonClassName="custom"
+        />
+      );
+      const btn = screen.getByTestId("brand-button");
+      expect(btn).toHaveAttribute("data-variant", "secondary");
+      expect(btn).toHaveAttribute("id", "test-id");
+      expect(btn).toHaveAttribute("data-full-width", "true");
+      expect(btn).toHaveAttribute("data-size", "lg");
+      expect(btn).toHaveClass("custom");
+    });
+
+    it("passes buttonPrefix as label", () => {
+      render(<Button buttonLabel="Main" buttonPrefix="Prefix" />);
+      expect(screen.getByTestId("brand-button")).toHaveTextContent(
+        "Prefix Main"
+      );
+    });
+  });
+
+  describe("showButtonAs='text'", () => {
+    it("renders Link with buttonLabel and target", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Learn more"
+          href="/info"
+          target="_self"
+        />
+      );
+      const link = screen.getByTestId("link");
+      expect(link).toHaveAttribute("href", "/info");
+      expect(link).toHaveAttribute("target", "_self");
+      expect(link).toHaveAttribute("title", "Learn more");
+    });
+
+    it("applies linkClassName and linkVariant", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Go"
+          linkClassName="extra"
+          linkVariant="unstyled"
+        />
+      );
+      const link = screen.getByTestId("link");
+      expect(link.className).toContain("extra");
+    });
+
+    it("renders MaterialIcon when iconName is provided", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Go"
+          iconName="arrow_forward"
+          iconSize={20}
+          iconFill={1}
+        />
+      );
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-name", "arrow_forward");
+      expect(icon).toHaveAttribute("data-size", "20");
+      expect(icon).toHaveAttribute("data-fill", "1");
+    });
+
+    it("does not render MaterialIcon when iconName is not provided", () => {
+      render(<Button showButtonAs="text" buttonLabel="Go" />);
+      expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("showButtonAs='unstyled'", () => {
+    it("renders CoreButton", () => {
+      render(<Button showButtonAs="unstyled" buttonLabel="Plain" />);
+      expect(screen.getByTestId("core-button")).toBeInTheDocument();
+    });
+  });
+
+  describe("showButtonAs default case", () => {
+    it("renders CoreButton for unknown showButtonAs value", () => {
+      render(<Button showButtonAs={"other" as any} buttonLabel="Fallback" />);
+      expect(screen.getByTestId("core-button")).toBeInTheDocument();
+    });
+  });
+
+  describe("preDefinedFunctionExecution", () => {
+    it("renders checkPlans when preDefinedFunctionExecution is 'check availability'", () => {
+      const renderCheckPlans = jest.fn(() => (
+        <div data-testid="check-plans">Plans</div>
+      ));
+      render(
+        <Button
+          preDefinedFunctionExecution="check availability"
+          renderCheckPlans={renderCheckPlans}
+          buttonLabel="Check"
+        />
+      );
+      expect(screen.getByTestId("check-plans")).toBeInTheDocument();
+      expect(renderCheckPlans).toHaveBeenCalledWith(
+        expect.objectContaining({ ctaText: "Check" })
+      );
+    });
+
+    it("returns undefined when renderCheckPlans is not provided", () => {
+      const { container } = render(
+        <Button preDefinedFunctionExecution="check availability" />
+      );
+      expect(container.innerHTML).toBe("");
+    });
+  });
+
+  describe("onClick and modal handling", () => {
+    it("calls onClick on solid button click (no href)", () => {
+      const onClick = jest.fn();
+      render(<Button buttonLabel="Click" onClick={onClick} />);
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("calls onClick on solid link click (with href)", () => {
+      const onClick = jest.fn();
+      render(<Button buttonLabel="Click" href="/page" onClick={onClick} />);
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("calls onClick on text link click", () => {
+      const onClick = jest.fn();
+      render(<Button showButtonAs="text" buttonLabel="Go" onClick={onClick} />);
+      fireEvent.click(screen.getByTestId("link"));
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("calls onModalButtonClick when clickToOpen is 'modal'", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          buttonLabel="Open"
+          clickToOpen="modal"
+          tabmodalNameToOpen="my-modal"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onModalButtonClick).toHaveBeenCalledWith("my-modal");
+    });
+
+    it("does not call onModalButtonClick when clickToOpen is not 'modal'", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          buttonLabel="Open"
+          clickToOpen="other"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onModalButtonClick).not.toHaveBeenCalled();
+    });
+
+    it("calls onModalButtonClick on text link click when clickToOpen is 'modal'", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Open"
+          clickToOpen="modal"
+          tabmodalNameToOpen="tab1"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("link"));
+      expect(onModalButtonClick).toHaveBeenCalledWith("tab1");
+    });
+  });
+
+  describe("preserveQueryParameters", () => {
+    it("uses buildPreservedQueryHref when preserveQueryParameters is true and search exists", () => {
+      Object.defineProperty(window, "location", {
+        value: { search: "?foo=bar" },
+        writable: true,
+      });
+      render(
+        <Button
+          buttonLabel="Go"
+          href="/page"
+          preserveQueryParameters={true}
+          showButtonAs="solid"
+        />
+      );
+      expect(screen.getByTestId("brand-button")).toHaveAttribute(
+        "href",
+        "/page?foo=bar"
+      );
+    });
+
+    it("uses original href when preserveQueryParameters is false", () => {
+      Object.defineProperty(window, "location", {
+        value: { search: "?foo=bar" },
+        writable: true,
+      });
+      render(<Button buttonLabel="Go" href="/page" showButtonAs="solid" />);
+      expect(screen.getByTestId("brand-button")).toHaveAttribute(
+        "href",
+        "/page"
+      );
+    });
+
+    it("uses original href when search is empty", () => {
+      Object.defineProperty(window, "location", {
+        value: { search: "" },
+        writable: true,
+      });
+      render(
+        <Button
+          buttonLabel="Go"
+          href="/page"
+          preserveQueryParameters={true}
+          showButtonAs="solid"
+        />
+      );
+      expect(screen.getByTestId("brand-button")).toHaveAttribute(
+        "href",
+        "/page"
+      );
+    });
+  });
+});