[Bug]: Unbounded pagination shows extra pagination pages

[rylew1]

Summary

      <Pagination
        pathname="/search"
        currentPage={page}
        // totalPages={totalPages} // this was removed to make this component "unbounded"
        maxSlots={MAX_SLOTS} // constant set to 5
        onClickNext={() => handlePageChange(page + 1)}
        onClickPrevious={() => handlePageChange(page - 1)}
        onClickPageNumber={(event, page) => handlePageChange(page)}
      />

When we removed the totalPages prop from being passed into SearchPagination in order to make the component "unbounded" - I believe this impacts the number of pages shown in the SearchPagination component when the results are less then the number of MAX_SLOTS (set to 5)

For example -

• On initial load - there's full set of results and 5 pagination "slots" - (page 1, page 2, page 3, an ellipses, and a next button):

• When you filter the results just down to 3 results - there's still 5 pagination "slots" - but nothing actually on anything other than the 1st page:

So we do need to manually calculate a totalPages if the number of pages is less than 3 I believe.

Acceptance criteria

• If we want to keep the Pagination "unbounded" - have some logic to display the correct number of Pagination pages

[rylew1]

cc @andycochran if you have a moment can you take a peek at this?

[andycochran]

Brainstorming options: https://betagrantsgov.slack.com/archives/C05TGEL3C6Q/p1715213399388129

[rylew1]

• Reintroduce totalPages

• Go up to MAX_SLOTS of 7

• Stretch:

  • Change size of pagination via theme-pagination-font-family in css settings (override in _uswds_theme.scss)
  • Check if there's still there overflow at certain widths

• here's an example:

.usa-component {
  font-family: family('ui');
  font-size: size('ui', $theme-body-font-size);
  line-height: line-height('ui', $theme-body-line-height);
}