allow styling the pagination links

TomWoodward · TomWoodward · commit 4a4a6a22c9e1 · 2025-05-01T11:15:17.000-04:00
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
@@ -2,6 +2,28 @@ import React from 'react';
 import styled from 'styled-components';
 import { palette } from "../theme/palette";
 
+export const LinkForPage = styled(({ page, current, href, onClick, className }: {
+  page: number;
+  current?: boolean;
+  href?: string;
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}) => {
+  const currentValue = current ? "page" : undefined;
+
+  return (
+    <a
+      className={className}
+      aria-current={currentValue}
+      href={href || '#'}
+      onClick={onClick}
+    >
+      {page}
+    </a>
+  );
+})`
+`;
+
 export const Pagination = styled((props: {
   className?: string;
   Page: (props: {page: number; current: boolean}) => React.ReactElement;
@@ -146,7 +168,7 @@ export const Pagination = styled((props: {
         background-color: ${palette.neutralLighter};
       }
 
-      > a,span {
+      > ${LinkForPage},span {
         padding: 1rem;
         display: block;
         text-decoration: none;
@@ -168,22 +190,3 @@ function range(lower: number, upper: number) {
   if (upper < lower) return [];
   return Array.from({length: upper-lower}).map((_, i) => i + lower);
 }
-
-export function LinkForPage({ page, current, href, onClick }: {
-  page: number;
-  current?: boolean;
-  href?: string;
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-}) {
-  const currentValue = current ? "page" : undefined;
-
-  return (
-    <a
-      aria-current={currentValue}
-      href={href || '#'}
-      onClick={onClick}
-    >
-      {page}
-    </a>
-  );
-}
diff --git a/src/components/__snapshots__/Pagination.spec.tsx.snap b/src/components/__snapshots__/Pagination.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`Pagination grows to min size 1`] = `
     id="root"
   >
     <div
-      class="sc-bczRLJ cvTmMf"
+      class="sc-gsnTZi Nkuun"
     >
       <nav
         aria-label="pagination links"
@@ -17,34 +17,39 @@ exports[`Pagination grows to min size 1`] = `
           >
             <a
               aria-current="page"
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               1
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               2
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               3
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               4
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               5
@@ -59,6 +64,7 @@ exports[`Pagination grows to min size 1`] = `
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               10
@@ -77,14 +83,15 @@ exports[`Pagination grows to min size from back 1`] = `
     id="root"
   >
     <div
-      class="sc-bczRLJ cvTmMf"
+      class="sc-gsnTZi Nkuun"
     >
       <nav
         aria-label="pagination links"
       >
         <ul>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               1
@@ -99,27 +106,31 @@ exports[`Pagination grows to min size from back 1`] = `
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               6
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               7
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               8
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               9
@@ -130,6 +141,7 @@ exports[`Pagination grows to min size from back 1`] = `
           >
             <a
               aria-current="page"
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               10
@@ -148,7 +160,7 @@ exports[`Pagination matches snapshot 1`] = `
     id="root"
   >
     <div
-      class="sc-bczRLJ cvTmMf"
+      class="sc-gsnTZi Nkuun"
     >
       <nav
         aria-label="pagination links"
@@ -159,69 +171,79 @@ exports[`Pagination matches snapshot 1`] = `
           >
             <a
               aria-current="page"
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               1
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               2
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               3
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               4
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               5
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               6
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               7
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               8
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               9
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               10
@@ -240,14 +262,15 @@ exports[`Pagination matches snapshot with dividers 1`] = `
     id="root"
   >
     <div
-      class="sc-bczRLJ cvTmMf"
+      class="sc-gsnTZi Nkuun"
     >
       <nav
         aria-label="pagination links"
       >
         <ul>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               1
@@ -262,6 +285,7 @@ exports[`Pagination matches snapshot with dividers 1`] = `
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               4
@@ -272,13 +296,15 @@ exports[`Pagination matches snapshot with dividers 1`] = `
           >
             <a
               aria-current="page"
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               5
             </a>
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               6
@@ -293,6 +319,7 @@ exports[`Pagination matches snapshot with dividers 1`] = `
           </li>
           <li>
             <a
+              class="sc-bczRLJ kkAHbA"
               href="#"
             >
               10

Original file line number	Diff line number	Diff line change
@@ -6,7 +6,7 @@ exports[`Pagination grows to min size 1`] = `
`6`	`6`	`id="root"`
`7`	`7`	`>`
`8`	`8`	`<div`
`9`		`- class="sc-bczRLJ cvTmMf"`
	`9`	`+ class="sc-gsnTZi Nkuun"`
`10`	`10`	`>`
`11`	`11`	`<nav`
`12`	`12`	`aria-label="pagination links"`
@@ -17,34 +17,39 @@ exports[`Pagination grows to min size 1`] = `
`17`	`17`	`>`
`18`	`18`	`<a`
`19`	`19`	`aria-current="page"`
	`20`	`+ class="sc-bczRLJ kkAHbA"`
`20`	`21`	`href="#"`
`21`	`22`	`>`
`22`	`23`	`1`
`23`	`24`	`</a>`
`24`	`25`	`</li>`
`25`	`26`	`<li>`
`26`	`27`	`<a`
	`28`	`+ class="sc-bczRLJ kkAHbA"`
`27`	`29`	`href="#"`
`28`	`30`	`>`
`29`	`31`	`2`
`30`	`32`	`</a>`
`31`	`33`	`</li>`
`32`	`34`	`<li>`
`33`	`35`	`<a`
	`36`	`+ class="sc-bczRLJ kkAHbA"`
`34`	`37`	`href="#"`
`35`	`38`	`>`
`36`	`39`	`3`
`37`	`40`	`</a>`
`38`	`41`	`</li>`
`39`	`42`	`<li>`
`40`	`43`	`<a`
	`44`	`+ class="sc-bczRLJ kkAHbA"`
`41`	`45`	`href="#"`
`42`	`46`	`>`
`43`	`47`	`4`
`44`	`48`	`</a>`
`45`	`49`	`</li>`
`46`	`50`	`<li>`
`47`	`51`	`<a`
	`52`	`+ class="sc-bczRLJ kkAHbA"`
`48`	`53`	`href="#"`
`49`	`54`	`>`
`50`	`55`	`5`
@@ -59,6 +64,7 @@ exports[`Pagination grows to min size 1`] = `
`59`	`64`	`</li>`
`60`	`65`	`<li>`
`61`	`66`	`<a`
	`67`	`+ class="sc-bczRLJ kkAHbA"`
`62`	`68`	`href="#"`
`63`	`69`	`>`
`64`	`70`	`10`
@@ -77,14 +83,15 @@ exports[`Pagination grows to min size from back 1`] = `
`77`	`83`	`id="root"`
`78`	`84`	`>`
`79`	`85`	`<div`
`80`		`- class="sc-bczRLJ cvTmMf"`
	`86`	`+ class="sc-gsnTZi Nkuun"`
`81`	`87`	`>`
`82`	`88`	`<nav`
`83`	`89`	`aria-label="pagination links"`
`84`	`90`	`>`
`85`	`91`	`<ul>`
`86`	`92`	`<li>`
`87`	`93`	`<a`
	`94`	`+ class="sc-bczRLJ kkAHbA"`
`88`	`95`	`href="#"`
`89`	`96`	`>`
`90`	`97`	`1`
@@ -99,27 +106,31 @@ exports[`Pagination grows to min size from back 1`] = `
`99`	`106`	`</li>`
`100`	`107`	`<li>`
`101`	`108`	`<a`
	`109`	`+ class="sc-bczRLJ kkAHbA"`
`102`	`110`	`href="#"`
`103`	`111`	`>`
`104`	`112`	`6`
`105`	`113`	`</a>`
`106`	`114`	`</li>`
`107`	`115`	`<li>`
`108`	`116`	`<a`
	`117`	`+ class="sc-bczRLJ kkAHbA"`
`109`	`118`	`href="#"`
`110`	`119`	`>`
`111`	`120`	`7`
`112`	`121`	`</a>`
`113`	`122`	`</li>`
`114`	`123`	`<li>`
`115`	`124`	`<a`
	`125`	`+ class="sc-bczRLJ kkAHbA"`
`116`	`126`	`href="#"`
`117`	`127`	`>`
`118`	`128`	`8`
`119`	`129`	`</a>`
`120`	`130`	`</li>`
`121`	`131`	`<li>`
`122`	`132`	`<a`
	`133`	`+ class="sc-bczRLJ kkAHbA"`
`123`	`134`	`href="#"`
`124`	`135`	`>`
`125`	`136`	`9`
@@ -130,6 +141,7 @@ exports[`Pagination grows to min size from back 1`] = `
`130`	`141`	`>`
`131`	`142`	`<a`
`132`	`143`	`aria-current="page"`
	`144`	`+ class="sc-bczRLJ kkAHbA"`
`133`	`145`	`href="#"`
`134`	`146`	`>`
`135`	`147`	`10`
@@ -148,7 +160,7 @@ exports[`Pagination matches snapshot 1`] = `
`148`	`160`	`id="root"`
`149`	`161`	`>`
`150`	`162`	`<div`
`151`		`- class="sc-bczRLJ cvTmMf"`
	`163`	`+ class="sc-gsnTZi Nkuun"`
`152`	`164`	`>`
`153`	`165`	`<nav`
`154`	`166`	`aria-label="pagination links"`
@@ -159,69 +171,79 @@ exports[`Pagination matches snapshot 1`] = `
`159`	`171`	`>`
`160`	`172`	`<a`
`161`	`173`	`aria-current="page"`
	`174`	`+ class="sc-bczRLJ kkAHbA"`
`162`	`175`	`href="#"`
`163`	`176`	`>`
`164`	`177`	`1`
`165`	`178`	`</a>`
`166`	`179`	`</li>`
`167`	`180`	`<li>`
`168`	`181`	`<a`
	`182`	`+ class="sc-bczRLJ kkAHbA"`
`169`	`183`	`href="#"`
`170`	`184`	`>`
`171`	`185`	`2`
`172`	`186`	`</a>`
`173`	`187`	`</li>`
`174`	`188`	`<li>`
`175`	`189`	`<a`
	`190`	`+ class="sc-bczRLJ kkAHbA"`
`176`	`191`	`href="#"`
`177`	`192`	`>`
`178`	`193`	`3`
`179`	`194`	`</a>`
`180`	`195`	`</li>`
`181`	`196`	`<li>`
`182`	`197`	`<a`
	`198`	`+ class="sc-bczRLJ kkAHbA"`
`183`	`199`	`href="#"`
`184`	`200`	`>`
`185`	`201`	`4`
`186`	`202`	`</a>`
`187`	`203`	`</li>`
`188`	`204`	`<li>`
`189`	`205`	`<a`
	`206`	`+ class="sc-bczRLJ kkAHbA"`
`190`	`207`	`href="#"`
`191`	`208`	`>`
`192`	`209`	`5`
`193`	`210`	`</a>`
`194`	`211`	`</li>`
`195`	`212`	`<li>`
`196`	`213`	`<a`
	`214`	`+ class="sc-bczRLJ kkAHbA"`
`197`	`215`	`href="#"`
`198`	`216`	`>`
`199`	`217`	`6`
`200`	`218`	`</a>`
`201`	`219`	`</li>`
`202`	`220`	`<li>`
`203`	`221`	`<a`
	`222`	`+ class="sc-bczRLJ kkAHbA"`
`204`	`223`	`href="#"`
`205`	`224`	`>`
`206`	`225`	`7`
`207`	`226`	`</a>`
`208`	`227`	`</li>`
`209`	`228`	`<li>`
`210`	`229`	`<a`
	`230`	`+ class="sc-bczRLJ kkAHbA"`
`211`	`231`	`href="#"`
`212`	`232`	`>`
`213`	`233`	`8`
`214`	`234`	`</a>`
`215`	`235`	`</li>`
`216`	`236`	`<li>`
`217`	`237`	`<a`
	`238`	`+ class="sc-bczRLJ kkAHbA"`
`218`	`239`	`href="#"`
`219`	`240`	`>`
`220`	`241`	`9`
`221`	`242`	`</a>`
`222`	`243`	`</li>`
`223`	`244`	`<li>`
`224`	`245`	`<a`
	`246`	`+ class="sc-bczRLJ kkAHbA"`
`225`	`247`	`href="#"`
`226`	`248`	`>`
`227`	`249`	`10`
@@ -240,14 +262,15 @@ exports[`Pagination matches snapshot with dividers 1`] = `
`240`	`262`	`id="root"`
`241`	`263`	`>`
`242`	`264`	`<div`
`243`		`- class="sc-bczRLJ cvTmMf"`
	`265`	`+ class="sc-gsnTZi Nkuun"`
`244`	`266`	`>`
`245`	`267`	`<nav`
`246`	`268`	`aria-label="pagination links"`
`247`	`269`	`>`
`248`	`270`	`<ul>`
`249`	`271`	`<li>`
`250`	`272`	`<a`
	`273`	`+ class="sc-bczRLJ kkAHbA"`
`251`	`274`	`href="#"`
`252`	`275`	`>`
`253`	`276`	`1`
@@ -262,6 +285,7 @@ exports[`Pagination matches snapshot with dividers 1`] = `
`262`	`285`	`</li>`
`263`	`286`	`<li>`
`264`	`287`	`<a`
	`288`	`+ class="sc-bczRLJ kkAHbA"`
`265`	`289`	`href="#"`
`266`	`290`	`>`
`267`	`291`	`4`
@@ -272,13 +296,15 @@ exports[`Pagination matches snapshot with dividers 1`] = `
`272`	`296`	`>`
`273`	`297`	`<a`
`274`	`298`	`aria-current="page"`
	`299`	`+ class="sc-bczRLJ kkAHbA"`
`275`	`300`	`href="#"`
`276`	`301`	`>`
`277`	`302`	`5`
`278`	`303`	`</a>`
`279`	`304`	`</li>`
`280`	`305`	`<li>`
`281`	`306`	`<a`
	`307`	`+ class="sc-bczRLJ kkAHbA"`
`282`	`308`	`href="#"`
`283`	`309`	`>`
`284`	`310`	`6`
@@ -293,6 +319,7 @@ exports[`Pagination matches snapshot with dividers 1`] = `
`293`	`319`	`</li>`
`294`	`320`	`<li>`
`295`	`321`	`<a`
	`322`	`+ class="sc-bczRLJ kkAHbA"`
`296`	`323`	`href="#"`
`297`	`324`	`>`
`298`	`325`	`10`