@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/components/brand-button/index.test.tsx

@@ -0,0 +1,292 @@
+import React from "react";
+import { BrandButton } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+describe("BrandButton", () => {
+  describe("Rendering", () => {
+    it("renders as a button by default", () => {
+      render(<BrandButton text="Click me" />);
+      expect(screen.getByRole("button")).toBeInTheDocument();
+      expect(screen.getByRole("button")).toHaveTextContent("Click me");
+    });
+
+    it("renders as an anchor when as='a'", () => {
+      render(<BrandButton as="a" href="/test" text="Link" />);
+      const link = screen.getByRole("link");
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute("href", "/test");
+      expect(link).toHaveTextContent("Link");
+    });
+
+    it("has correct displayName", () => {
+      expect(BrandButton.displayName).toBe("BrandButton");
+    });
+
+    it("renders text prop content", () => {
+      render(<BrandButton text="Submit" />);
+      expect(screen.getByText("Submit")).toBeInTheDocument();
+    });
+  });
+
+  describe("Variants", () => {
+    it("applies primary_brand variant classes by default", () => {
+      render(<BrandButton text="Primary" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("button--primary_brand");
+    });
+
+    it("applies primary_inverse variant classes", () => {
+      render(<BrandButton variant="primary_inverse" text="Inverse" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("button--primary_inverse");
+    });
+
+    it("applies secondary variant classes", () => {
+      render(<BrandButton variant="secondary" text="Secondary" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("button--secondary");
+    });
+  });
+
+  describe("Loading state", () => {
+    it("shows spinner icon when isLoading is true", () => {
+      render(<BrandButton isLoading={true} text="Loading" />);
+      expect(screen.getByText("progress_activity")).toBeInTheDocument();
+    });
+
+    it("disables button when isLoading is true", () => {
+      render(<BrandButton isLoading={true} text="Loading" />);
+      expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    it("adds loading class when isLoading", () => {
+      render(<BrandButton isLoading={true} text="Loading" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("button--loading");
+    });
+
+    it("does not show spinner when isLoading is false", () => {
+      render(<BrandButton text="Not Loading" />);
+      expect(screen.queryByText("progress_activity")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Disabled state", () => {
+    it("disables button when disabled prop is true", () => {
+      render(<BrandButton disabled={true} text="Disabled" />);
+      expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    it("adds disabled class when disabled", () => {
+      render(<BrandButton disabled={true} text="Disabled" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("button--disabled");
+    });
+
+    it("applies cursor-not-allowed when disabled", () => {
+      render(<BrandButton disabled={true} text="Disabled" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("cursor-not-allowed");
+    });
+  });
+
+  describe("Label prop", () => {
+    it("renders label and text when label is provided", () => {
+      render(<BrandButton label="Starting at" text="$49/mo" />);
+      expect(screen.getByText("Starting at")).toBeInTheDocument();
+      expect(screen.getByText("$49/mo")).toBeInTheDocument();
+    });
+
+    it("wraps label in a span with size class", () => {
+      const { container } = render(<BrandButton label="Label" text="Text" />);
+      const labelSpan = container.querySelector("span span");
+      expect(labelSpan).toHaveTextContent("Label");
+    });
+  });
+
+  describe("Size prop", () => {
+    it("applies base size class", () => {
+      render(<BrandButton size={{ base: "small" }} text="Small" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("btn-small");
+    });
+
+    it("applies medium size by default", () => {
+      render(<BrandButton text="Default" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("btn-medium");
+    });
+
+    it("applies responsive md size class for small", () => {
+      render(<BrandButton size={{ base: "small", md: "small" }} text="Resp" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("md:btn-small");
+    });
+
+    it("applies responsive md size class for medium", () => {
+      render(
+        <BrandButton size={{ base: "small", md: "medium" }} text="Resp" />
+      );
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("md:btn-medium");
+    });
+
+    it("applies responsive md size class for large", () => {
+      render(<BrandButton size={{ base: "small", md: "large" }} text="Resp" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("md:btn-large");
+    });
+
+    it("applies responsive md size class for x-large", () => {
+      render(
+        <BrandButton size={{ base: "small", md: "x-large" }} text="Resp" />
+      );
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("md:btn-x-large");
+    });
+
+    it("applies responsive lg size class", () => {
+      render(
+        <BrandButton size={{ base: "small", lg: "x-large" }} text="Resp" />
+      );
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("lg:btn-x-large");
+    });
+
+    it("applies x-large label size with label3 class", () => {
+      const { container } = render(
+        <BrandButton size={{ base: "x-large" }} text="$49" label="Starting" />
+      );
+      const labelSpan = container.querySelector("span span");
+      expect(labelSpan?.className).toContain("label3");
+    });
+
+    it("applies non-x-large label size with label4 class", () => {
+      const { container } = render(
+        <BrandButton size={{ base: "small" }} text="$49" label="Starting" />
+      );
+      const labelSpan = container.querySelector("span span");
+      expect(labelSpan?.className).toContain("label4");
+    });
+
+    it("applies md label3 for x-large md size", () => {
+      const { container } = render(
+        <BrandButton
+          size={{ base: "small", md: "x-large" }}
+          text="$49"
+          label="Starting"
+        />
+      );
+      const labelSpan = container.querySelector("span span");
+      expect(labelSpan?.className).toContain("md:label3");
+    });
+
+    it("applies md label4 for non-x-large md size", () => {
+      const { container } = render(
+        <BrandButton
+          size={{ base: "small", md: "medium" }}
+          text="$49"
+          label="Starting"
+        />
+      );
+      const labelSpan = container.querySelector("span span");
+      expect(labelSpan?.className).toContain("md:label4");
+    });
+
+    it("applies lg label3 for x-large lg size", () => {
+      const { container } = render(
+        <BrandButton
+          size={{ base: "small", lg: "x-large" }}
+          text="$49"
+          label="Starting"
+        />
+      );
+      const labelSpan = container.querySelector("span span");
+      expect(labelSpan?.className).toContain("lg:label3");
+    });
+
+    it("applies lg label4 for non-x-large lg size", () => {
+      const { container } = render(
+        <BrandButton
+          size={{ base: "small", lg: "large" }}
+          text="$49"
+          label="Starting"
+        />
+      );
+      const labelSpan = container.querySelector("span span");
+      expect(labelSpan?.className).toContain("lg:label4");
+    });
+  });
+
+  describe("fullWidth", () => {
+    it("applies w-full when fullWidth is true", () => {
+      render(<BrandButton fullWidth={true} text="Full" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("w-full");
+    });
+
+    it("applies w-auto when fullWidth is false", () => {
+      render(<BrandButton text="Auto" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("w-auto");
+    });
+  });
+
+  describe("buttonClassName", () => {
+    it("applies custom buttonClassName", () => {
+      render(<BrandButton buttonClassName="my-custom-class" text="Custom" />);
+      const btn = screen.getByRole("button");
+      expect(btn.className).toContain("my-custom-class");
+    });
+  });
+
+  describe("Ref forwarding", () => {
+    it("forwards ref to button element", () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      render(<BrandButton ref={ref} text="Ref" />);
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it("forwards ref to anchor element", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      render(<BrandButton ref={ref} as="a" href="/test" text="Ref" />);
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    });
+  });
+
+  describe("Event handling", () => {
+    it("calls onClick handler when clicked", () => {
+      const onClick = jest.fn();
+      render(<BrandButton text="Click" onClick={onClick} />);
+      fireEvent.click(screen.getByRole("button"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call onClick when disabled", () => {
+      const onClick = jest.fn();
+      render(<BrandButton text="Click" onClick={onClick} disabled={true} />);
+      fireEvent.click(screen.getByRole("button"));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Anchor props", () => {
+    it("passes anchor-specific props when as='a'", () => {
+      render(
+        <BrandButton
+          as="a"
+          href="/test"
+          target="_blank"
+          rel="noopener"
+          text="Link"
+        />
+      );
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("target", "_blank");
+      expect(link).toHaveAttribute("rel", "noopener");
+    });
+  });
+});

package/src/components/button/index.test.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Button } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+describe("Button", () => {
+  it("renders children content", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button")).toHaveTextContent("Click me");
+  });
+
+  it("has correct displayName", () => {
+    expect(Button.displayName).toBe("Button");
+  });
+
+  it("applies className", () => {
+    render(<Button className="btn-primary">Styled</Button>);
+    expect(screen.getByRole("button")).toHaveClass("btn-primary");
+  });
+
+  it("applies inline style", () => {
+    render(<Button style={{ color: "red" }}>Styled</Button>);
+    expect(screen.getByRole("button").style.color).toBe("red");
+  });
+
+  it("defaults className to empty string", () => {
+    render(<Button>Default</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("class", "");
+  });
+
+  it("disables button when disabled prop is true", () => {
+    render(<Button disabled={true}>Disabled</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("is enabled by default", () => {
+    render(<Button>Enabled</Button>);
+    expect(screen.getByRole("button")).not.toBeDisabled();
+  });
+
+  it("calls onClick handler when clicked", () => {
+    const onClick = jest.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onClick when disabled", () => {
+    const onClick = jest.fn();
+    render(
+      <Button onClick={onClick} disabled={true}>
+        Click
+      </Button>
+    );
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("forwards ref to button element", () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("passes additional HTML attributes", () => {
+    render(
+      <Button data-testid="custom-btn" id="my-btn">
+        Attr
+      </Button>
+    );
+    const btn = screen.getByTestId("custom-btn");
+    expect(btn).toHaveAttribute("id", "my-btn");
+  });
+
+  it("renders without children", () => {
+    const { container } = render(<Button />);
+    expect(container.querySelector("button")).toBeInTheDocument();
+  });
+
+  it("supports type attribute", () => {
+    render(<Button type="submit">Submit</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
+  });
+
+  it("passes aria attributes", () => {
+    render(<Button aria-label="Close">X</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("aria-label", "Close");
+  });
+});

package/src/components/call-button/index.test.tsx

@@ -0,0 +1,260 @@
+/// <reference types="@testing-library/jest-dom" />
+import React from "react";
+import { CallButton } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock dependencies
+/* eslint-disable react/prop-types */
+jest.mock("@shared/components/link", () => ({
+  Link: ({
+    children,
+    className,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: React.ReactNode;
+  }) => (
+    <a href={href} className={className} {...props}>
+      {children}
+    </a>
+  ),
+}));
+/* eslint-enable react/prop-types */
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: { name: string; className?: string }) => (
+    <span data-testid={`material-icon-${name}`} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: unknown[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("CallButton", () => {
+  describe("rendering", () => {
+    it("renders children text content", () => {
+      render(<CallButton href="tel:+1234567890">Call Us</CallButton>);
+      expect(screen.getByText("Call Us")).toBeInTheDocument();
+    });
+
+    it("renders the call icon", () => {
+      render(<CallButton href="tel:+1234567890">Call</CallButton>);
+      expect(screen.getByTestId("material-icon-call")).toBeInTheDocument();
+    });
+
+    it("renders an anchor element via Link", () => {
+      render(<CallButton href="tel:+1234567890">Call</CallButton>);
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "tel:+1234567890");
+    });
+
+    it("applies displayName correctly", () => {
+      expect(CallButton.displayName).toBe("CallButton");
+    });
+  });
+
+  describe("size variants", () => {
+    it("applies sm size classes", () => {
+      render(
+        <CallButton href="tel:123" size="sm">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("h-6");
+      expect(link.className).toContain("text-xs");
+    });
+
+    it("applies md size classes by default", () => {
+      render(<CallButton href="tel:123">Call</CallButton>);
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("h-8");
+      expect(link.className).toContain("text-sm");
+    });
+
+    it("applies lg size classes", () => {
+      render(
+        <CallButton href="tel:123" size="lg">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("h-10");
+      expect(link.className).toContain("text-base");
+    });
+  });
+
+  describe("buttonStyle variants", () => {
+    it("applies primary style classes by default", () => {
+      render(<CallButton href="tel:123">Call</CallButton>);
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("border-border");
+      expect(link.className).toContain("text-text");
+    });
+
+    it("applies primary style classes when explicitly set", () => {
+      render(
+        <CallButton href="tel:123" buttonStyle="primary">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("border-border");
+    });
+  });
+
+  describe("blinking dot", () => {
+    it("does not render blinking dot by default", () => {
+      const { container } = render(
+        <CallButton href="tel:123">Call</CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).not.toBeInTheDocument();
+    });
+
+    it("renders blinking dot when showBlinkDot is true", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true}>
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toBeInTheDocument();
+    });
+
+    it("applies correct dot size for sm", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true} size="sm">
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toHaveClass("h-2", "w-2");
+    });
+
+    it("applies correct dot size for md", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true} size="md">
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toHaveClass("h-3", "w-3");
+    });
+
+    it("applies correct dot size for lg", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true} size="lg">
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toHaveClass("h-4", "w-4");
+    });
+  });
+
+  describe("prefix", () => {
+    it("renders without prefix wrapper when prefix is null", () => {
+      const { container } = render(
+        <CallButton href="tel:123" prefix={null}>
+          Call
+        </CallButton>
+      );
+      // Should not have the outer wrapper span
+      const wrapper = container.querySelector("span.flex.items-center.gap-2");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+
+    it("renders without prefix wrapper when prefix is false", () => {
+      const { container } = render(
+        <CallButton href="tel:123" prefix={false}>
+          Call
+        </CallButton>
+      );
+      const wrapper = container.querySelector("span.flex.items-center.gap-2");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+
+    it("renders without prefix wrapper when prefix is empty string", () => {
+      const { container } = render(
+        <CallButton href="tel:123" prefix="">
+          Call
+        </CallButton>
+      );
+      const wrapper = container.querySelector("span.flex.items-center.gap-2");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+
+    it("renders string prefix in a span", () => {
+      render(
+        <CallButton href="tel:123" prefix="Call now:">
+          555-1234
+        </CallButton>
+      );
+      expect(screen.getByText("Call now:")).toBeInTheDocument();
+    });
+
+    it("renders numeric prefix in a span", () => {
+      render(
+        <CallButton href="tel:123" prefix={42}>
+          Call
+        </CallButton>
+      );
+      expect(screen.getByText("42")).toBeInTheDocument();
+    });
+
+    it("renders ReactNode prefix directly", () => {
+      render(
+        <CallButton
+          href="tel:123"
+          prefix={<strong data-testid="custom-prefix">Custom</strong>}
+        >
+          Call
+        </CallButton>
+      );
+      expect(screen.getByTestId("custom-prefix")).toBeInTheDocument();
+    });
+
+    it("applies containerClassName to the outer wrapper", () => {
+      const { container } = render(
+        <CallButton
+          href="tel:123"
+          prefix="Prefix"
+          containerClassName="my-container"
+        >
+          Call
+        </CallButton>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.className).toContain("my-container");
+    });
+  });
+
+  describe("custom className", () => {
+    it("applies custom className to the link", () => {
+      render(
+        <CallButton href="tel:123" className="custom-class">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("custom-class");
+    });
+  });
+
+  describe("accessibility", () => {
+    it("passes aria attributes to the link", () => {
+      render(
+        <CallButton href="tel:123" aria-label="Call support">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("aria-label", "Call support");
+    });
+  });
+});