@windstream/react-shared-components 0.1.94 → 0.1.96

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

@@ -1,199 +1,199 @@
-import React from "react";
-import { Link } from "./index";
-
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import "@testing-library/jest-dom";
-
-// Mock next/link
-jest.mock("next/link", () => {
-  const MockLink = ({ children, href, className, onClick, ...rest }: any) => (
-    <a href={href} className={className} onClick={onClick} {...rest}>
-      {children}
-    </a>
-  );
-  MockLink.displayName = "MockNextLink";
-  return MockLink;
-});
-
-describe("Link", () => {
-  describe("Rendering", () => {
-    it("renders children content", () => {
-      render(<Link href="/test">Click me</Link>);
-      expect(screen.getByText("Click me")).toBeInTheDocument();
-    });
-
-    it("has correct displayName", () => {
-      expect(Link.displayName).toBe("Link");
-    });
-
-    it("renders as a Next.js Link for internal links", () => {
-      render(<Link href="/internal">Internal</Link>);
-      const el = screen.getByText("Internal");
-      expect(el.closest("a")).toHaveAttribute("href", "/internal");
-    });
-
-    it("renders as <a> for external links", () => {
-      render(
-        <Link href="https://example.com" external={true}>
-          External
-        </Link>
-      );
-      const el = screen.getByText("External");
-      expect(el.closest("a")).toHaveAttribute("href", "https://example.com");
-    });
-
-    it("renders as <a> for http links even without external prop", () => {
-      render(<Link href="https://example.com">Auto External</Link>);
-      const el = screen.getByText("Auto External");
-      expect(el.closest("a")).toHaveAttribute("href", "https://example.com");
-    });
-  });
-
-  describe("Variants", () => {
-    it("applies unstyled variant with no extra classes", () => {
-      render(
-        <Link href="/test" variant="unstyled">
-          Unstyled
-        </Link>
-      );
-      const el = screen.getByText("Unstyled").closest("a");
-      expect(el?.className).toContain("link--unstyled");
-    });
-
-    it("applies default variant classes", () => {
-      render(
-        <Link href="/test" variant="default">
-          Default
-        </Link>
-      );
-      const el = screen.getByText("Default").closest("a");
-      expect(el?.className).toContain("link--default");
-      expect(el?.className).toContain("underline");
-    });
-  });
-
-  describe("Disabled state", () => {
-    it("adds disabled class when disabled", () => {
-      render(
-        <Link href="/test" disabled={true}>
-          Disabled
-        </Link>
-      );
-      const el = screen.getByText("Disabled").closest("a");
-      expect(el?.className).toContain("link--disabled");
-    });
-
-    it("sets aria-disabled when disabled", () => {
-      render(
-        <Link href="/test" disabled={true} external={true}>
-          Disabled
-        </Link>
-      );
-      const el = screen.getByText("Disabled").closest("a");
-      expect(el).toHaveAttribute("aria-disabled", "true");
-    });
-
-    it("sets tabIndex -1 when disabled", () => {
-      render(
-        <Link href="/test" disabled={true} external={true}>
-          Disabled
-        </Link>
-      );
-      const el = screen.getByText("Disabled").closest("a");
-      expect(el).toHaveAttribute("tabindex", "-1");
-    });
-
-    it("prevents click when disabled", () => {
-      const onClick = jest.fn();
-      render(
-        <Link href="/test" disabled={true} external={true} onClick={onClick}>
-          Disabled
-        </Link>
-      );
-      const el = screen.getByText("Disabled").closest("a")!;
-      fireEvent.click(el);
-      expect(onClick).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("External links", () => {
-    it("adds target=_blank for external links", () => {
-      render(
-        <Link href="https://example.com" external={true}>
-          External
-        </Link>
-      );
-      const el = screen.getByText("External").closest("a");
-      expect(el).toHaveAttribute("target", "_blank");
-    });
-
-    it("adds rel=noopener noreferrer for external links", () => {
-      render(
-        <Link href="https://example.com" external={true}>
-          External
-        </Link>
-      );
-      const el = screen.getByText("External").closest("a");
-      expect(el).toHaveAttribute("rel", "noopener noreferrer");
-    });
-
-    it("does not add target for disabled external links", () => {
-      render(
-        <Link href="https://example.com" external={true} disabled={true}>
-          External
-        </Link>
-      );
-      const el = screen.getByText("External").closest("a");
-      expect(el).not.toHaveAttribute("target", "_blank");
-    });
-  });
-
-  describe("Event handling", () => {
-    it("calls onClick handler when clicked", () => {
-      const onClick = jest.fn();
-      render(
-        <Link href="https://example.com" external={true} onClick={onClick}>
-          Click
-        </Link>
-      );
-      const el = screen.getByText("Click").closest("a")!;
-      fireEvent.click(el);
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("Ref forwarding", () => {
-    it("forwards ref to the anchor element", () => {
-      const ref = React.createRef<HTMLAnchorElement>();
-      render(
-        <Link ref={ref} href="https://test.com" external={true}>
-          Ref
-        </Link>
-      );
-      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
-    });
-  });
-
-  describe("Custom className and style", () => {
-    it("applies custom className", () => {
-      render(
-        <Link href="/test" className="custom-class">
-          Custom
-        </Link>
-      );
-      const el = screen.getByText("Custom").closest("a");
-      expect(el?.className).toContain("custom-class");
-    });
-
-    it("applies inline style", () => {
-      render(
-        <Link href="https://test.com" external={true} style={{ color: "red" }}>
-          Styled
-        </Link>
-      );
-      const el = screen.getByText("Styled").closest("a")!;
-      expect(el.style.color).toBe("red");
-    });
-  });
-});
+import React from "react";
+import { Link } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+// Mock next/link
+jest.mock("next/link", () => {
+  const MockLink = ({ children, href, className, onClick, ...rest }: any) => (
+    <a href={href} className={className} onClick={onClick} {...rest}>
+      {children}
+    </a>
+  );
+  MockLink.displayName = "MockNextLink";
+  return MockLink;
+});
+
+describe("Link", () => {
+  describe("Rendering", () => {
+    it("renders children content", () => {
+      render(<Link href="/test">Click me</Link>);
+      expect(screen.getByText("Click me")).toBeInTheDocument();
+    });
+
+    it("has correct displayName", () => {
+      expect(Link.displayName).toBe("Link");
+    });
+
+    it("renders as a Next.js Link for internal links", () => {
+      render(<Link href="/internal">Internal</Link>);
+      const el = screen.getByText("Internal");
+      expect(el.closest("a")).toHaveAttribute("href", "/internal");
+    });
+
+    it("renders as <a> for external links", () => {
+      render(
+        <Link href="https://example.com" external={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External");
+      expect(el.closest("a")).toHaveAttribute("href", "https://example.com");
+    });
+
+    it("renders as <a> for http links even without external prop", () => {
+      render(<Link href="https://example.com">Auto External</Link>);
+      const el = screen.getByText("Auto External");
+      expect(el.closest("a")).toHaveAttribute("href", "https://example.com");
+    });
+  });
+
+  describe("Variants", () => {
+    it("applies unstyled variant with no extra classes", () => {
+      render(
+        <Link href="/test" variant="unstyled">
+          Unstyled
+        </Link>
+      );
+      const el = screen.getByText("Unstyled").closest("a");
+      expect(el?.className).toContain("link--unstyled");
+    });
+
+    it("applies default variant classes", () => {
+      render(
+        <Link href="/test" variant="default">
+          Default
+        </Link>
+      );
+      const el = screen.getByText("Default").closest("a");
+      expect(el?.className).toContain("link--default");
+      expect(el?.className).toContain("underline");
+    });
+  });
+
+  describe("Disabled state", () => {
+    it("adds disabled class when disabled", () => {
+      render(
+        <Link href="/test" disabled={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      expect(el?.className).toContain("link--disabled");
+    });
+
+    it("sets aria-disabled when disabled", () => {
+      render(
+        <Link href="/test" disabled={true} external={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      expect(el).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("sets tabIndex -1 when disabled", () => {
+      render(
+        <Link href="/test" disabled={true} external={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      expect(el).toHaveAttribute("tabindex", "-1");
+    });
+
+    it("prevents click when disabled", () => {
+      const onClick = jest.fn();
+      render(
+        <Link href="/test" disabled={true} external={true} onClick={onClick}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a")!;
+      fireEvent.click(el);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("External links", () => {
+    it("adds target=_blank for external links", () => {
+      render(
+        <Link href="https://example.com" external={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External").closest("a");
+      expect(el).toHaveAttribute("target", "_blank");
+    });
+
+    it("adds rel=noopener noreferrer for external links", () => {
+      render(
+        <Link href="https://example.com" external={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External").closest("a");
+      expect(el).toHaveAttribute("rel", "noopener noreferrer");
+    });
+
+    it("does not add target for disabled external links", () => {
+      render(
+        <Link href="https://example.com" external={true} disabled={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External").closest("a");
+      expect(el).not.toHaveAttribute("target", "_blank");
+    });
+  });
+
+  describe("Event handling", () => {
+    it("calls onClick handler when clicked", () => {
+      const onClick = jest.fn();
+      render(
+        <Link href="https://example.com" external={true} onClick={onClick}>
+          Click
+        </Link>
+      );
+      const el = screen.getByText("Click").closest("a")!;
+      fireEvent.click(el);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Ref forwarding", () => {
+    it("forwards ref to the anchor element", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      render(
+        <Link ref={ref} href="https://test.com" external={true}>
+          Ref
+        </Link>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    });
+  });
+
+  describe("Custom className and style", () => {
+    it("applies custom className", () => {
+      render(
+        <Link href="/test" className="custom-class">
+          Custom
+        </Link>
+      );
+      const el = screen.getByText("Custom").closest("a");
+      expect(el?.className).toContain("custom-class");
+    });
+
+    it("applies inline style", () => {
+      render(
+        <Link href="https://test.com" external={true} style={{ color: "red" }}>
+          Styled
+        </Link>
+      );
+      const el = screen.getByText("Styled").closest("a")!;
+      expect(el.style.color).toBe("red");
+    });
+  });
+});

package/src/components/link/index.tsx

@@ -1,116 +1,116 @@
-"use client";
-
-import React, { forwardRef } from "react";
-import { cx } from "../../utils/cx";
-import { LinkProps } from "./types";
-import NextLinkImport from "next/link";
-
-// Handle CJS/ESM interop: when bundled as ESM and consumed by Webpack,
-// the default import may resolve to { default: Component } instead of the function.
-const NextLink =
-  typeof NextLinkImport === "function"
-    ? NextLinkImport
-    : ((NextLinkImport as any).default ?? NextLinkImport);
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (
-    {
-      children,
-      href,
-      className = "",
-      onClick,
-      variant = "unstyled",
-      style,
-      external = false,
-      disabled = false,
-      ...props
-    },
-    ref
-  ) => {
-    // Get Tailwind classes for different variants
-    const getVariantClasses = () => {
-      if (variant === "unstyled") return "";
-
-      // TODO: Add styles based on the figma design for all variants
-      const baseClasses =
-        "transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
-
-      const variantClasses = {
-        default: "text-text underline",
-      };
-
-      const stateClasses = [
-        disabled
-          ? "opacity-60 cursor-not-allowed pointer-events-none"
-          : "cursor-pointer",
-      ]
-        .filter(Boolean)
-        .join(" ");
-
-      return [
-        baseClasses,
-        variantClasses[variant as keyof typeof variantClasses] ||
-          variantClasses.default,
-        stateClasses,
-      ]
-        .filter(Boolean)
-        .join(" ");
-    };
-
-    const tailwindClasses = getVariantClasses();
-
-    // Handle click events
-    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-      if (disabled) {
-        event.preventDefault();
-        return;
-      }
-
-      onClick?.(event);
-    };
-
-    // Combine all classes
-    const combinedClassName = cx(
-      tailwindClasses,
-      `link--${variant}`,
-      disabled && "link--disabled",
-      className
-    );
-
-    // Determine link props based on external/internal
-    const linkProps = {
-      ...props,
-      ref,
-      className: combinedClassName,
-      style,
-      href: disabled ? undefined : href,
-      onClick: handleClick,
-      ...(external &&
-        !disabled && {
-          target: "_blank",
-          rel: "noopener noreferrer",
-        }),
-      ...(disabled && {
-        "aria-disabled": true,
-        tabIndex: -1,
-      }),
-    };
-    if (external || (typeof href === "string" && href.startsWith("http"))) {
-      return <a {...linkProps}>{children}</a>;
-    }
-    return (
-      <NextLink
-        href={href || "#"}
-        className={combinedClassName}
-        onClick={handleClick}
-        {...props}
-      >
-        {children}
-      </NextLink>
-    );
-  }
-);
-
-Link.displayName = "Link";
-
-export type { LinkProps };
+"use client";
+
+import React, { forwardRef } from "react";
+import { cx } from "../../utils/cx";
+import { LinkProps } from "./types";
+import NextLinkImport from "next/link";
+
+// Handle CJS/ESM interop: when bundled as ESM and consumed by Webpack,
+// the default import may resolve to { default: Component } instead of the function.
+const NextLink =
+  typeof NextLinkImport === "function"
+    ? NextLinkImport
+    : ((NextLinkImport as any).default ?? NextLinkImport);
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  (
+    {
+      children,
+      href,
+      className = "",
+      onClick,
+      variant = "unstyled",
+      style,
+      external = false,
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    // Get Tailwind classes for different variants
+    const getVariantClasses = () => {
+      if (variant === "unstyled") return "";
+
+      // TODO: Add styles based on the figma design for all variants
+      const baseClasses =
+        "transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+      const variantClasses = {
+        default: "text-text underline",
+      };
+
+      const stateClasses = [
+        disabled
+          ? "opacity-60 cursor-not-allowed pointer-events-none"
+          : "cursor-pointer",
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return [
+        baseClasses,
+        variantClasses[variant as keyof typeof variantClasses] ||
+          variantClasses.default,
+        stateClasses,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    };
+
+    const tailwindClasses = getVariantClasses();
+
+    // Handle click events
+    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+
+      onClick?.(event);
+    };
+
+    // Combine all classes
+    const combinedClassName = cx(
+      tailwindClasses,
+      `link--${variant}`,
+      disabled && "link--disabled",
+      className
+    );
+
+    // Determine link props based on external/internal
+    const linkProps = {
+      ...props,
+      ref,
+      className: combinedClassName,
+      style,
+      href: disabled ? undefined : href,
+      onClick: handleClick,
+      ...(external &&
+        !disabled && {
+          target: "_blank",
+          rel: "noopener noreferrer",
+        }),
+      ...(disabled && {
+        "aria-disabled": true,
+        tabIndex: -1,
+      }),
+    };
+    if (external || (typeof href === "string" && href.startsWith("http"))) {
+      return <a {...linkProps}>{children}</a>;
+    }
+    return (
+      <NextLink
+        href={href || "#"}
+        className={combinedClassName}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+      </NextLink>
+    );
+  }
+);
+
+Link.displayName = "Link";
+
+export type { LinkProps };