feat: adds unbounded functionality to pagination (#2418)

Co-authored-by: John Gedeon <john@truss.works>

src/components/Pagination/Pagination.stories.tsx

@@ -18,7 +18,7 @@ const Template: ComponentStory<typeof Pagination> = (args) => {
   const [current, setCurrentPage] = useState<number>(args.currentPage)
 
   useEffect(() => {
-    if (args.currentPage >= args.totalPages) {
+    if (args.totalPages && args.currentPage >= args.totalPages) {
       return
     }
     setCurrentPage(args.currentPage)
@@ -43,7 +43,7 @@ const Template: ComponentStory<typeof Pagination> = (args) => {
 
   return (
     <Pagination
-      totalPages={args.totalPages || 24}
+      totalPages={args.totalPages}
       currentPage={current}
       maxSlots={args.maxSlots}
       pathname={args.pathname}
@@ -64,6 +64,10 @@ export const Default = (): React.ReactElement => (
   <Pagination pathname={pathname} totalPages={10} currentPage={10} />
 )
 
+export const Unbounded = (): React.ReactElement => (
+  <Pagination pathname={pathname} currentPage={10} />
+)
+
 export const ThreePagesFirst = (): React.ReactElement => (
   <Pagination pathname={pathname} totalPages={3} currentPage={1} />
 )

src/components/Pagination/Pagination.test.tsx

@@ -235,6 +235,20 @@ describe('Pagination component', () => {
     expect(screen.getAllByText('…')).toHaveLength(1)
   })
 
+  it('doesn\'t render last page when unbounded', () => {
+    const randomPage = Math.random()*1000
+    render(
+      <Pagination
+        currentPage={randomPage}
+        pathname={testPathname}
+      />
+    )
+    expect(screen.getByLabelText(`Page ${randomPage+1}`)).toHaveAttribute(
+      'href',
+      `${testPathname}?page=${randomPage+1}`
+    )
+  })
+
   it('can click onClickNext, onClickPrevious and onClickPagenumber', () => {
     const mockOnClickNext = jest.fn()
     const mockOnClickPrevious = jest.fn()

src/components/Pagination/Pagination.tsx

@@ -6,7 +6,7 @@ import { Button } from '../Button/Button'
 
 type PaginationProps = {
   pathname: string // pathname of results page
-  totalPages: number // total items divided by items per page
+  totalPages?: number // total items divided by items per page
   currentPage: number // current page number (starting at 1)
   maxSlots?: number // number of pagination "slots"
   onClickNext?: () => void
@@ -87,17 +87,16 @@ export const Pagination = ({
   const navClasses = classnames('usa-pagination', className)
 
   const isOnFirstPage = currentPage === 1
-  const isOnLastPage = currentPage === totalPages
+  const isOnLastPage = totalPages ? currentPage === totalPages : false
 
-  const showOverflow = totalPages > maxSlots // If more pages than slots, use overflow indicator(s)
+  const showOverflow = totalPages ? totalPages > maxSlots : true // If more pages than slots, use overflow indicator(s)
 
   const middleSlot = Math.round(maxSlots / 2) // 4 if maxSlots is 7
+  const isBeforeMiddleSlot = !!(totalPages && totalPages - currentPage >= middleSlot)
   const showPrevOverflow = showOverflow && currentPage > middleSlot
-  const showNextOverflow =
-    showOverflow && totalPages - currentPage >= middleSlot
-
+  const showNextOverflow = isBeforeMiddleSlot || !totalPages
   // Assemble array of page numbers to be shown
-  const currentPageRange: Array<number | 'overflow'> = showOverflow
+  const currentPageRange: Array<number | 'overflow'> = showOverflow || !totalPages
     ? [currentPage]
     : Array.from({ length: totalPages }).map((_, i) => i + 1)
 
@@ -119,7 +118,7 @@ export const Pagination = ({
     } else if (showPrevOverflow) {
       // We are in the end of the set, there will be overflow (...) at the beginning
       // Ex: [1] [...] [20] [21] [22] [23] [24]
-      currentPageAfterSize = totalPages - currentPage - 1 // current & last
+      currentPageAfterSize = (totalPages || 0) - currentPage - 1 // current & last
       currentPageAfterSize = currentPageAfterSize < 0 ? 0 : currentPageAfterSize
       currentPageBeforeSize = pageRangeSize - currentPageAfterSize
     } else if (showNextOverflow) {
@@ -152,7 +151,7 @@ export const Pagination = ({
     if (showPrevOverflow) currentPageRange.unshift('overflow')
     if (currentPage !== 1) currentPageRange.unshift(1)
     if (showNextOverflow) currentPageRange.push('overflow')
-    if (currentPage !== totalPages) currentPageRange.push(totalPages)
+    if (totalPages && currentPage !== totalPages) currentPageRange.push(totalPages)
   }
 
   const prevPage = !isOnFirstPage && currentPage - 1