@windstream/react-shared-components 0.2.2 → 0.2.3

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

@@ -4,16 +4,11 @@ import { Pagination } from "./index";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 // Mock dependencies
-jest.mock("@shared/components/button", () => ({
-  Button: ({ children, onClick, disabled, className, ...rest }: any) => (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className={className}
-      {...rest}
-    >
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, onClick, className, ...rest }: any) => (
+    <a href={href} onClick={onClick} className={className} {...rest}>
       {children}
-    </button>
+    </a>
   ),
 }));
 
@@ -27,6 +22,7 @@ jest.mock("@shared/components/material-icon", () => ({
 
 describe("Pagination", () => {
   const mockOnPageChange = jest.fn();
+  const mockGetPageHref = (page: number) => `/blog?page=${page}`;
 
   beforeEach(() => {
     mockOnPageChange.mockClear();
@@ -39,6 +35,7 @@ describe("Pagination", () => {
           currentPage={1}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(screen.getByRole("navigation")).toHaveAttribute(
@@ -53,6 +50,7 @@ describe("Pagination", () => {
           currentPage={1}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
           ariaLabel="Blog pages"
         />
       );
@@ -62,28 +60,30 @@ describe("Pagination", () => {
       );
     });
 
-    it("renders previous and next navigation buttons", () => {
+    it("renders previous and next navigation links", () => {
       render(
         <Pagination
           currentPage={3}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to previous page" })
+        screen.getByRole("link", { name: "Go to previous page" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to next page" })
+        screen.getByRole("link", { name: "Go to next page" })
       ).toBeInTheDocument();
     });
 
-    it("renders chevron icons in nav buttons", () => {
+    it("renders chevron icons in nav links", () => {
       render(
         <Pagination
           currentPage={1}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(screen.getByTestId("icon-chevron_left")).toBeInTheDocument();
@@ -91,57 +91,59 @@ describe("Pagination", () => {
     });
   });
 
-  describe("Button states", () => {
-    it("disables previous button on first page", () => {
+  describe("Link states", () => {
+    it("disables previous link on first page", () => {
       render(
         <Pagination
           currentPage={1}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      expect(
-        screen.getByRole("button", { name: "Go to previous page" })
-      ).toBeDisabled();
+      const prevLink = screen.getByRole("link", { name: "Go to previous page" });
+      expect(prevLink).toHaveAttribute("aria-disabled", "true");
+      expect(prevLink).toHaveAttribute("tabindex", "-1");
     });
 
-    it("enables previous button when not on first page", () => {
+    it("enables previous link when not on first page", () => {
       render(
         <Pagination
           currentPage={3}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      expect(
-        screen.getByRole("button", { name: "Go to previous page" })
-      ).not.toBeDisabled();
+      const prevLink = screen.getByRole("link", { name: "Go to previous page" });
+      expect(prevLink).not.toHaveAttribute("aria-disabled", "true");
     });
 
-    it("disables next button on last page", () => {
+    it("disables next link on last page", () => {
       render(
         <Pagination
           currentPage={5}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      expect(
-        screen.getByRole("button", { name: "Go to next page" })
-      ).toBeDisabled();
+      const nextLink = screen.getByRole("link", { name: "Go to next page" });
+      expect(nextLink).toHaveAttribute("aria-disabled", "true");
+      expect(nextLink).toHaveAttribute("tabindex", "-1");
     });
 
-    it("enables next button when not on last page", () => {
+    it("enables next link when not on last page", () => {
       render(
         <Pagination
           currentPage={3}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      expect(
-        screen.getByRole("button", { name: "Go to next page" })
-      ).not.toBeDisabled();
+      const nextLink = screen.getByRole("link", { name: "Go to next page" });
+      expect(nextLink).not.toHaveAttribute("aria-disabled", "true");
     });
 
     it("marks current page with aria-current='page'", () => {
@@ -150,10 +152,11 @@ describe("Pagination", () => {
           currentPage={3}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 3" })
+        screen.getByRole("link", { name: "Go to page 3" })
       ).toHaveAttribute("aria-current", "page");
     });
 
@@ -163,65 +166,84 @@ describe("Pagination", () => {
           currentPage={3}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 1" })
+        screen.getByRole("link", { name: "Go to page 1" })
       ).not.toHaveAttribute("aria-current");
     });
 
-    it("applies active class to current page button", () => {
+    it("applies active class to current page link", () => {
       render(
         <Pagination
           currentPage={2}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      const activeBtn = screen.getByRole("button", { name: "Go to page 2" });
-      expect(activeBtn.className).toContain("bg-bg-surface-active");
-      expect(activeBtn.className).toContain("font-bold");
+      const activeLink = screen.getByRole("link", { name: "Go to page 2" });
+      expect(activeLink.className).toContain("bg-bg-surface-active");
+      expect(activeLink.className).toContain("font-bold");
     });
 
-    it("does not apply active class to non-current page buttons", () => {
+    it("does not apply active class to non-current page links", () => {
       render(
         <Pagination
           currentPage={2}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      const inactiveBtn = screen.getByRole("button", {
+      const inactiveLink = screen.getByRole("link", {
         name: "Go to page 1",
       });
-      expect(inactiveBtn.className).not.toContain("bg-bg-surface-active");
+      expect(inactiveLink.className).not.toContain("bg-bg-surface-active");
+    });
+
+    it("renders correct href for page links", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
+        />
+      );
+      expect(
+        screen.getByRole("link", { name: "Go to page 3" })
+      ).toHaveAttribute("href", "/blog?page=3");
     });
   });
 
   describe("Page navigation clicks", () => {
-    it("calls onPageChange with previous page when previous button clicked", () => {
+    it("calls onPageChange with previous page when previous link clicked", () => {
       render(
         <Pagination
           currentPage={3}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       fireEvent.click(
-        screen.getByRole("button", { name: "Go to previous page" })
+        screen.getByRole("link", { name: "Go to previous page" })
       );
       expect(mockOnPageChange).toHaveBeenCalledWith(2);
     });
 
-    it("calls onPageChange with next page when next button clicked", () => {
+    it("calls onPageChange with next page when next link clicked", () => {
       render(
         <Pagination
           currentPage={3}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      fireEvent.click(screen.getByRole("button", { name: "Go to next page" }));
+      fireEvent.click(screen.getByRole("link", { name: "Go to next page" }));
       expect(mockOnPageChange).toHaveBeenCalledWith(4);
     });
 
@@ -231,35 +253,38 @@ describe("Pagination", () => {
           currentPage={1}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      fireEvent.click(screen.getByRole("button", { name: "Go to page 4" }));
+      fireEvent.click(screen.getByRole("link", { name: "Go to page 4" }));
       expect(mockOnPageChange).toHaveBeenCalledWith(4);
     });
 
-    it("does not call onPageChange when disabled previous button is clicked", () => {
+    it("does not call onPageChange when disabled previous link is clicked", () => {
       render(
         <Pagination
           currentPage={1}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       fireEvent.click(
-        screen.getByRole("button", { name: "Go to previous page" })
+        screen.getByRole("link", { name: "Go to previous page" })
       );
       expect(mockOnPageChange).not.toHaveBeenCalled();
     });
 
-    it("does not call onPageChange when disabled next button is clicked", () => {
+    it("does not call onPageChange when disabled next link is clicked", () => {
       render(
         <Pagination
           currentPage={5}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
-      fireEvent.click(screen.getByRole("button", { name: "Go to next page" }));
+      fireEvent.click(screen.getByRole("link", { name: "Go to next page" }));
       expect(mockOnPageChange).not.toHaveBeenCalled();
     });
   });
@@ -271,10 +296,11 @@ describe("Pagination", () => {
           currentPage={1}
           totalPages={1}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 1" })
+        screen.getByRole("link", { name: "Go to page 1" })
       ).toBeInTheDocument();
       expect(screen.queryByText("…")).not.toBeInTheDocument();
     });
@@ -285,11 +311,12 @@ describe("Pagination", () => {
           currentPage={1}
           totalPages={5}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       for (let i = 1; i <= 5; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
       expect(screen.queryByText("…")).not.toBeInTheDocument();
@@ -301,11 +328,12 @@ describe("Pagination", () => {
           currentPage={4}
           totalPages={7}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       for (let i = 1; i <= 7; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
       expect(screen.queryByText("…")).not.toBeInTheDocument();
@@ -319,19 +347,20 @@ describe("Pagination", () => {
           currentPage={1}
           totalPages={10}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       for (let i = 1; i <= 5; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
       expect(screen.getByText("…")).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 10" })
+        screen.getByRole("link", { name: "Go to page 10" })
       ).toBeInTheDocument();
       expect(
-        screen.queryByRole("button", { name: "Go to page 6" })
+        screen.queryByRole("link", { name: "Go to page 6" })
       ).not.toBeInTheDocument();
     });
 
@@ -341,16 +370,17 @@ describe("Pagination", () => {
           currentPage={4}
           totalPages={10}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       for (let i = 1; i <= 5; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
       expect(screen.getByText("…")).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 10" })
+        screen.getByRole("link", { name: "Go to page 10" })
       ).toBeInTheDocument();
     });
   });
@@ -362,15 +392,16 @@ describe("Pagination", () => {
           currentPage={10}
           totalPages={10}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 1" })
+        screen.getByRole("link", { name: "Go to page 1" })
       ).toBeInTheDocument();
       expect(screen.getByText("…")).toBeInTheDocument();
       for (let i = 6; i <= 10; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
     });
@@ -381,15 +412,16 @@ describe("Pagination", () => {
           currentPage={7}
           totalPages={10}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 1" })
+        screen.getByRole("link", { name: "Go to page 1" })
       ).toBeInTheDocument();
       expect(screen.getByText("…")).toBeInTheDocument();
       for (let i = 6; i <= 10; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
     });
@@ -402,22 +434,23 @@ describe("Pagination", () => {
           currentPage={5}
           totalPages={10}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 1" })
+        screen.getByRole("link", { name: "Go to page 1" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 4" })
+        screen.getByRole("link", { name: "Go to page 4" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 5" })
+        screen.getByRole("link", { name: "Go to page 5" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 6" })
+        screen.getByRole("link", { name: "Go to page 6" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 10" })
+        screen.getByRole("link", { name: "Go to page 10" })
       ).toBeInTheDocument();
       const ellipses = screen.getAllByText("…");
       expect(ellipses).toHaveLength(2);
@@ -429,6 +462,7 @@ describe("Pagination", () => {
           currentPage={5}
           totalPages={10}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       const ellipses = screen.getAllByText("…");
@@ -444,42 +478,44 @@ describe("Pagination", () => {
           currentPage={6}
           totalPages={10}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 1" })
+        screen.getByRole("link", { name: "Go to page 1" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 5" })
+        screen.getByRole("link", { name: "Go to page 5" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 6" })
+        screen.getByRole("link", { name: "Go to page 6" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 7" })
+        screen.getByRole("link", { name: "Go to page 7" })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Go to page 10" })
+        screen.getByRole("link", { name: "Go to page 10" })
       ).toBeInTheDocument();
       expect(screen.getAllByText("…")).toHaveLength(2);
     });
   });
 
   describe("Edge cases", () => {
-    it("handles single page (both nav buttons disabled)", () => {
+    it("handles single page (both nav links disabled)", () => {
       render(
         <Pagination
           currentPage={1}
           totalPages={1}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to previous page" })
-      ).toBeDisabled();
+        screen.getByRole("link", { name: "Go to previous page" })
+      ).toHaveAttribute("aria-disabled", "true");
       expect(
-        screen.getByRole("button", { name: "Go to next page" })
-      ).toBeDisabled();
+        screen.getByRole("link", { name: "Go to next page" })
+      ).toHaveAttribute("aria-disabled", "true");
     });
 
     it("handles totalPages=8 with current=4 (near-start boundary)", () => {
@@ -488,15 +524,16 @@ describe("Pagination", () => {
           currentPage={4}
           totalPages={8}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       for (let i = 1; i <= 5; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
       expect(
-        screen.getByRole("button", { name: "Go to page 8" })
+        screen.getByRole("link", { name: "Go to page 8" })
       ).toBeInTheDocument();
     });
 
@@ -506,14 +543,15 @@ describe("Pagination", () => {
           currentPage={5}
           totalPages={8}
           onPageChange={mockOnPageChange}
+          getPageHref={mockGetPageHref}
         />
       );
       expect(
-        screen.getByRole("button", { name: "Go to page 1" })
+        screen.getByRole("link", { name: "Go to page 1" })
       ).toBeInTheDocument();
       for (let i = 4; i <= 8; i++) {
         expect(
-          screen.getByRole("button", { name: `Go to page ${i}` })
+          screen.getByRole("link", { name: `Go to page ${i}` })
         ).toBeInTheDocument();
       }
     });

package/src/components/pagination/index.tsx

@@ -3,24 +3,29 @@
 import React from "react";
 import { PaginationProps } from "./types";
 
-import { Button } from "@shared/components/button";
+import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
 
+const defaultGetPageHref = (page: number) => `?page=${page}`;
+
 export const Pagination: React.FC<PaginationProps> = ({
   currentPage,
   totalPages,
   onPageChange,
+  getPageHref = defaultGetPageHref,
   ariaLabel = "Pagination",
 }: PaginationProps) => {
   const pageItems = buildPageItems(currentPage, totalPages);
 
-  const navBtnBase =
-    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand disabled:opacity-40 disabled:cursor-not-allowed";
+  const navLinkBase =
+    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand";
+
+  const navLinkDisabled = "opacity-40 pointer-events-none";
 
-  const pageBtnBase =
+  const pageLinkBase =
     "inline-flex items-center justify-center w-9 h-9 rounded-lg text-body2 text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-100 hover:text-gray-900";
 
-  const pageBtnActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
+  const pageLinkActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
 
   return (
     <nav
@@ -28,14 +33,22 @@ export const Pagination: React.FC<PaginationProps> = ({
       aria-label={ariaLabel}
     >
       {/* Previous */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
+      <Link
+        href={currentPage === 1 ? "#" : getPageHref(currentPage - 1)}
+        className={`${navLinkBase} ${currentPage === 1 ? navLinkDisabled : ""}`}
         aria-label="Go to previous page"
+        aria-disabled={currentPage === 1}
+        tabIndex={currentPage === 1 ? -1 : undefined}
+        onClick={e => {
+          if (currentPage === 1) {
+            e.preventDefault();
+            return;
+          }
+          onPageChange?.(currentPage - 1);
+        }}
       >
         <MaterialIcon name="chevron_left" size={32} aria-hidden="true" />
-      </Button>
+      </Link>
 
       {/* Page numbers */}
       {pageItems.map((item, idx) =>
@@ -48,27 +61,36 @@ export const Pagination: React.FC<PaginationProps> = ({
             …
           </span>
         ) : (
-          <Button
+          <Link
             key={item}
-            className={`${pageBtnBase} ${item === currentPage ? pageBtnActive : ""}`}
-            onClick={() => onPageChange(item)}
+            href={getPageHref(item)}
+            className={`${pageLinkBase} ${item === currentPage ? pageLinkActive : ""}`}
             aria-label={`Go to page ${item}`}
             aria-current={item === currentPage ? "page" : undefined}
+            onClick={() => onPageChange?.(item)}
           >
             {item}
-          </Button>
+          </Link>
         )
       )}
 
       {/* Next */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
+      <Link
+        href={currentPage === totalPages ? "#" : getPageHref(currentPage + 1)}
+        className={`${navLinkBase} ${currentPage === totalPages ? navLinkDisabled : ""}`}
         aria-label="Go to next page"
+        aria-disabled={currentPage === totalPages}
+        tabIndex={currentPage === totalPages ? -1 : undefined}
+        onClick={e => {
+          if (currentPage === totalPages) {
+            e.preventDefault();
+            return;
+          }
+          onPageChange?.(currentPage + 1);
+        }}
       >
         <MaterialIcon name="chevron_right" size={32} aria-hidden="true" />
-      </Button>
+      </Link>
     </nav>
   );
 };

package/src/components/pagination/types.ts

@@ -1,6 +1,7 @@
 export interface PaginationProps {
   currentPage: number;
   totalPages: number;
-  onPageChange: (page: number) => void;
+  onPageChange?: (page: number) => void;
+  getPageHref?: (page: number) => string;
   ariaLabel?: string;
 }