@windstream/react-shared-components 0.2.23 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.23",
+  "version": "0.2.24",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

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

@@ -7,10 +7,23 @@ 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>
+  const ReactModule = require("react");
+  const MockLink = ReactModule.forwardRef(
+    (
+      { children, href, className, onClick, ...rest }: any,
+      ref: React.Ref<HTMLAnchorElement>
+    ) => (
+      <a
+        ref={ref}
+        href={href}
+        className={className}
+        onClick={onClick}
+        data-mock="next-link"
+        {...rest}
+      >
+        {children}
+      </a>
+    )
   );
   MockLink.displayName = "MockNextLink";
   return MockLink;
@@ -50,6 +63,67 @@ describe("Link", () => {
     });
   });
 
+  describe("preserveTrailingSlash", () => {
+    it("renders a plain <a> (bypassing next/link) when preserveTrailingSlash is true and href ends with '/'", () => {
+      render(
+        <Link href="/local/al/" preserveTrailingSlash>
+          Alabama
+        </Link>
+      );
+      const anchor = screen.getByText("Alabama").closest("a");
+      expect(anchor).toHaveAttribute("href", "/local/al/");
+      // plain <a> path does not carry the next/link mock marker
+      expect(anchor).not.toHaveAttribute("data-mock", "next-link");
+    });
+
+    it("still renders via next/link when preserveTrailingSlash is false even if href ends with '/'", () => {
+      render(<Link href="/local/al/">Alabama</Link>);
+      const anchor = screen.getByText("Alabama").closest("a");
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+      expect(anchor).toHaveAttribute("href", "/local/al/");
+    });
+
+    it("renders via next/link when preserveTrailingSlash is true but href has no trailing slash", () => {
+      render(
+        <Link href="/local/al" preserveTrailingSlash>
+          Alabama
+        </Link>
+      );
+      const anchor = screen.getByText("Alabama").closest("a");
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+    });
+
+    it("does not bypass next/link for protocol-relative hrefs even with a trailing slash", () => {
+      render(
+        <Link href="//example.com/" preserveTrailingSlash>
+          Protocol Relative
+        </Link>
+      );
+      const anchor = screen.getByText("Protocol Relative").closest("a");
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+    });
+
+    it("applies style on both render paths (plain <a> and next/link)", () => {
+      const { rerender } = render(
+        <Link href="/local/al/" preserveTrailingSlash style={{ color: "red" }}>
+          Alabama
+        </Link>
+      );
+      let anchor = screen.getByText("Alabama").closest("a")!;
+      expect(anchor).not.toHaveAttribute("data-mock", "next-link");
+      expect(anchor.style.color).toBe("red");
+
+      rerender(
+        <Link href="/internal" style={{ color: "red" }}>
+          Internal
+        </Link>
+      );
+      anchor = screen.getByText("Internal").closest("a")!;
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+      expect(anchor.style.color).toBe("red");
+    });
+  });
+
   describe("Variants", () => {
     it("applies unstyled variant with no extra classes", () => {
       render(
@@ -104,6 +178,20 @@ describe("Link", () => {
       expect(el).toHaveAttribute("tabindex", "-1");
     });
 
+    it("applies disabled accessibility attributes on internal links", () => {
+      render(
+        <Link href="/test" disabled={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      // disabled links render as a plain <a>, not via next/link
+      expect(el).not.toHaveAttribute("data-mock", "next-link");
+      expect(el).toHaveAttribute("aria-disabled", "true");
+      expect(el).toHaveAttribute("tabindex", "-1");
+      expect(el).not.toHaveAttribute("href");
+    });
+
     it("prevents click when disabled", () => {
       const onClick = jest.fn();
       render(
@@ -173,6 +261,17 @@ describe("Link", () => {
       );
       expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
     });
+
+    it("forwards ref to the anchor element for internal (next/link) links", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      render(
+        <Link ref={ref} href="/internal">
+          Internal Ref
+        </Link>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+      expect(ref.current).toHaveAttribute("data-mock", "next-link");
+    });
   });
 
   describe("Custom className and style", () => {

package/src/components/link/index.tsx

@@ -23,6 +23,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       style,
       external = false,
       disabled = false,
+      preserveTrailingSlash = false,
       ...props
     },
     ref
@@ -95,13 +96,20 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
         tabIndex: -1,
       }),
     };
-    if (external || (typeof href === "string" && href.startsWith("http"))) {
+
+    if (
+      disabled ||
+      external ||
+      (typeof href === "string" && href.startsWith("http"))
+    ) {
       return <a {...linkProps}>{children}</a>;
     }
     return (
       <NextLink
         href={href || "#"}
+        ref={ref}
         className={combinedClassName}
+        style={style}
         onClick={handleClick}
         {...props}
       >

package/src/components/link/types.ts

@@ -22,4 +22,16 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   external?: boolean;
   /** Disable the link */
   disabled?: boolean;
+  /**
+   * Preserve an intentional trailing slash on internal links.
+   * next/link normalizes the trailing slash based on the app's `trailingSlash`
+   * config (stripping it when `false`). When this is `true` and the href ends
+   * with a slash, the link renders as a plain anchor so the slash is kept.
+   *
+   * Tradeoff: because it renders a plain `<a>` instead of `next/link`, this
+   * link bypasses Next.js client-side navigation and prefetch — clicking it
+   * triggers a full page load. Only opt in when preserving the trailing slash
+   * matters more than client-side routing.
+   */
+  preserveTrailingSlash?: boolean;
 }

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { BreadcrumbNavigationProps } from "./types";
 
+import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 
@@ -61,12 +62,12 @@ export const BreadcrumbNavigation: React.FC<
                   className="mr-2 h-10 w-10"
                 />
               )}
-              <a
+              <Link
                 href={linkProps.href}
                 className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
               >
                 {linkProps.buttonLabel}
-              </a>
+              </Link>
 
               <MaterialIcon name="chevron_right" className={`${color} `} />
             </li>

package/src/contentful/blocks/find-kinetic/index.test.tsx

@@ -202,6 +202,41 @@ describe("FindKinetic", () => {
       });
     });
 
+    it("does not append a trailing slash by default", () => {
+      render(<FindKinetic list={[{ name: "Alabama", code: "AL" }]} />);
+      const links = screen.getAllByText("Alabama");
+      links.forEach(link => {
+        expect(link.closest("a")).toHaveAttribute("href", "/local/al");
+      });
+    });
+
+    it("appends a trailing slash when addTrailingSlash is true", () => {
+      render(
+        <FindKinetic
+          list={[{ name: "Alabama", code: "AL" }]}
+          addTrailingSlash
+        />
+      );
+      const links = screen.getAllByText("Alabama");
+      links.forEach(link => {
+        expect(link.closest("a")).toHaveAttribute("href", "/local/al/");
+      });
+    });
+
+    it("does not produce a protocol-relative href when localPathPrefix is '/'", () => {
+      render(
+        <FindKinetic
+          list={[{ name: "Alabama", code: "AL" }]}
+          localPathPrefix="/"
+        />
+      );
+      const links = screen.getAllByText("Alabama");
+      links.forEach(link => {
+        expect(link.closest("a")).toHaveAttribute("href", "/al");
+        expect(link.closest("a")?.getAttribute("href")).not.toMatch(/^\/\//);
+      });
+    });
+
     it("sorts list items alphabetically by name", () => {
       const unsortedList = [
         { name: "Texas", code: "TX" },

package/src/contentful/blocks/find-kinetic/index.tsx

@@ -16,6 +16,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
   title,
   color = "dark",
   maxWidth = true,
+  addTrailingSlash = false,
 }) => {
   const bgColorClasses: Record<ThemeKey, string> = {
     blue: "bg-[#07B2E2]",
@@ -25,12 +26,22 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
     white: "bg-white",
     navy: "bg-[#00002D]",
   };
-  const normalizedLocalPathPrefix = localPathPrefix
-    ? `/${localPathPrefix.replace(/^\/+|\/+$/g, "")}`
+  // Trim leading/trailing slashes without a regex to avoid ReDoS on long
+  // runs of "/" (CodeQL: polynomial regular expression on uncontrolled data).
+  const trimSlashes = (value: string) => {
+    let start = 0;
+    let end = value.length;
+    while (start < end && value.charCodeAt(start) === 47 /* "/" */) start += 1;
+    while (end > start && value.charCodeAt(end - 1) === 47 /* "/" */) end -= 1;
+    return value.slice(start, end);
+  };
+  const cleanedLocalPathPrefix = trimSlashes(localPathPrefix ?? "");
+  const normalizedLocalPathPrefix = cleanedLocalPathPrefix
+    ? `/${cleanedLocalPathPrefix}`
     : "";
 
   const getLocationHref = (code: string) =>
-    `${normalizedLocalPathPrefix}/${code.toLowerCase()}`;
+    `${normalizedLocalPathPrefix}/${code.toLowerCase()}${addTrailingSlash ? "/" : ""}`;
 
   return (
     <div
@@ -120,16 +131,21 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                           key={`item-list-3-${index}`}
                           className={`${image ? "" : "w-[172px]"}`}
                         >
-                          <Link href={getLocationHref(item.code)} className="label1">
+                          <Link
+                            href={getLocationHref(item.code)}
+                            className="label1"
+                          >
                             {item.name}
                           </Link>
                         </li>
-                      ) : <li key={`empty-3-${index}`} aria-hidden="true" />
+                      ) : (
+                        <li key={`empty-3-${index}`} aria-hidden="true" />
+                      )
                     );
                   })()}
                 </ul>
                 {!image && (
-                  <ul className="hidden xl:grid xl:grid-cols-4 gap-x-20 gap-y-5">
+                  <ul className="hidden gap-x-20 gap-y-5 xl:grid xl:grid-cols-4">
                     {(() => {
                       const sortedList = [...list].sort((a, b) =>
                         a.name.localeCompare(b.name)
@@ -145,12 +161,20 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                       }
                       return rearranged.map((item, index: number) =>
                         item ? (
-                          <li key={`item-list-4-${index}`} className="w-[172px]">
-                            <Link href={getLocationHref(item.code)} className="label1">
+                          <li
+                            key={`item-list-4-${index}`}
+                            className="w-[172px]"
+                          >
+                            <Link
+                              href={getLocationHref(item.code)}
+                              className="label1"
+                            >
                               {item.name}
                             </Link>
                           </li>
-                        ) : <li key={`empty-4-${index}`} aria-hidden="true" />
+                        ) : (
+                          <li key={`empty-4-${index}`} aria-hidden="true" />
+                        )
                       );
                     })()}
                   </ul>

package/src/contentful/blocks/find-kinetic/types.ts

@@ -10,6 +10,7 @@ export type FindKineticProps = {
   maxWidth?: boolean;
   color?: "dark" | "light";
   columns?: 2 | 3 | 4;
+  addTrailingSlash?: boolean;
 };
 
 export type ThemeKey =