@windstream/react-shared-components 0.1.93 → 0.1.94

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");
+    });
+  });
+});

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

@@ -1,106 +1,106 @@
-import type { CallButtonProps } from "@shared/components/call-button/types";
-import { Link } from "@shared/components/link";
-import { MaterialIcon } from "@shared/components/material-icon";
-import type { IconProps } from "@shared/components/material-icon/types";
-import { cx } from "@shared/utils";
-
-export const CallButton = (props: CallButtonProps) => {
-  const {
-    showBlinkDot = false,
-    buttonStyle = "primary",
-    size = "md",
-    children,
-    className,
-    prefix,
-    containerClassName,
-    ...rest
-  } = props;
-
-  const baseClasses =
-    "relative flex items-center gap-2 font-medium tracking-wide outline-offset-4 rounded-full";
-
-  const sizeClasses = {
-    sm: "h-6 text-xs pl-1 pr-2",
-    md: "h-8 text-sm pl-1 pr-2",
-    lg: "h-10 text-base pl-2 pr-3",
-  };
-
-  const styleClasses = {
-    primary: "border-[0.727px] border-border text-text",
-  };
-
-  const iconSize: Record<string, IconProps["size"]> = {
-    sm: 20,
-    md: 20,
-    lg: 32,
-  };
-
-  const iconContainerSize = {
-    sm: "h-5 w-5",
-    md: "h-6 w-6",
-    lg: "h-8 w-8",
-  };
-
-  const dotSize = {
-    sm: "h-2 w-2",
-    md: "h-3 w-3",
-    lg: "h-4 w-4",
-  };
-
-  const dotPosition = {
-    sm: "-left-4",
-    md: "-left-6",
-    lg: "-left-8",
-  };
-
-  const pill = (
-    <Link
-      {...rest}
-      className={cx(
-        baseClasses,
-        sizeClasses[size],
-        styleClasses[buttonStyle],
-        className
-      )}
-    >
-      {showBlinkDot ? (
-        <span
-          className={`pointer-events-none absolute animate-blink ${dotPosition[size]} top-1/2 ${dotSize[size]} -translate-y-1/2 rounded-full bg-icon-brand`}
-        />
-      ) : null}
-      <span
-        className={cx(
-          "relative inline-flex items-center justify-center rounded-full bg-icon-brand",
-          iconContainerSize[size]
-        )}
-      >
-        <MaterialIcon
-          name="call"
-          fill={1}
-          size={iconSize[size]}
-          className="text-white"
-        />
-      </span>
-      <span className="font-normal tracking-wide">{children}</span>
-    </Link>
-  );
-
-  if (prefix == null || prefix === false || prefix === "") {
-    return pill;
-  }
-
-  return (
-    <span className={cx("flex items-center gap-2", containerClassName)}>
-      {typeof prefix === "string" || typeof prefix === "number" ? (
-        <span className="text-sm font-normal text-text">{prefix}</span>
-      ) : (
-        prefix
-      )}
-      {pill}
-    </span>
-  );
-};
-
-CallButton.displayName = "CallButton";
-
-export type { CallButtonProps };
+import type { CallButtonProps } from "@shared/components/call-button/types";
+import { Link } from "@shared/components/link";
+import { MaterialIcon } from "@shared/components/material-icon";
+import type { IconProps } from "@shared/components/material-icon/types";
+import { cx } from "@shared/utils";
+
+export const CallButton = (props: CallButtonProps) => {
+  const {
+    showBlinkDot = false,
+    buttonStyle = "primary",
+    size = "md",
+    children,
+    className,
+    prefix,
+    containerClassName,
+    ...rest
+  } = props;
+
+  const baseClasses =
+    "relative flex items-center gap-2 font-medium tracking-wide outline-offset-4 rounded-full";
+
+  const sizeClasses = {
+    sm: "h-6 text-xs pl-1 pr-2",
+    md: "h-8 text-sm pl-1 pr-2",
+    lg: "h-10 text-base pl-2 pr-3",
+  };
+
+  const styleClasses = {
+    primary: "border-[0.727px] border-border text-text",
+  };
+
+  const iconSize: Record<string, IconProps["size"]> = {
+    sm: 20,
+    md: 20,
+    lg: 32,
+  };
+
+  const iconContainerSize = {
+    sm: "h-5 w-5",
+    md: "h-6 w-6",
+    lg: "h-8 w-8",
+  };
+
+  const dotSize = {
+    sm: "h-2 w-2",
+    md: "h-3 w-3",
+    lg: "h-4 w-4",
+  };
+
+  const dotPosition = {
+    sm: "-left-4",
+    md: "-left-6",
+    lg: "-left-8",
+  };
+
+  const pill = (
+    <Link
+      {...rest}
+      className={cx(
+        baseClasses,
+        sizeClasses[size],
+        styleClasses[buttonStyle],
+        className
+      )}
+    >
+      {showBlinkDot ? (
+        <span
+          className={`pointer-events-none absolute animate-blink ${dotPosition[size]} top-1/2 ${dotSize[size]} -translate-y-1/2 rounded-full bg-icon-brand`}
+        />
+      ) : null}
+      <span
+        className={cx(
+          "relative inline-flex items-center justify-center rounded-full bg-icon-brand",
+          iconContainerSize[size]
+        )}
+      >
+        <MaterialIcon
+          name="call"
+          fill={1}
+          size={iconSize[size]}
+          className="text-white"
+        />
+      </span>
+      <span className="font-normal tracking-wide">{children}</span>
+    </Link>
+  );
+
+  if (prefix == null || prefix === false || prefix === "") {
+    return pill;
+  }
+
+  return (
+    <span className={cx("flex items-center gap-2", containerClassName)}>
+      {typeof prefix === "string" || typeof prefix === "number" ? (
+        <span className="text-sm font-normal text-text">{prefix}</span>
+      ) : (
+        prefix
+      )}
+      {pill}
+    </span>
+  );
+};
+
+CallButton.displayName = "CallButton";
+
+export type { CallButtonProps };

package/src/components/call-button/types.ts

@@ -1,16 +1,16 @@
-import { ReactNode } from "react";
-
-import { LinkProps } from "@shared/components/link/types";
-
-export interface CallButtonProps
-  extends Omit<LinkProps, "children" | "prefix"> {
-  showBlinkDot?: boolean;
-  buttonStyle?: "primary";
-  className?: string;
-  size?: "sm" | "md" | "lg";
-  children: ReactNode;
-  /** Optional content rendered as a sibling BEFORE the pill (e.g. "Call now:"). */
-  prefix?: ReactNode;
-  /** Optional className applied to the outer wrapper when `prefix` is used. */
-  containerClassName?: string;
-}
+import { ReactNode } from "react";
+
+import { LinkProps } from "@shared/components/link/types";
+
+export interface CallButtonProps
+  extends Omit<LinkProps, "children" | "prefix"> {
+  showBlinkDot?: boolean;
+  buttonStyle?: "primary";
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  children: ReactNode;
+  /** Optional content rendered as a sibling BEFORE the pill (e.g. "Call now:"). */
+  prefix?: ReactNode;
+  /** Optional className applied to the outer wrapper when `prefix` is used. */
+  containerClassName?: string;
+}