feat: APPS-1974_Add numbered page buttons to SectionPagination

[farosFreed]

Connected to APPS-1974

Component Updated: SectionPagination.vue

Stories Updated: ~/stories/SectionPagination.stories.js

Notes:

• Added props to display page numbers: pages and InitialCurrentPage
• Added template elements to render pagination when new props are present.
• Added computed variables maxPages, leftPages, currPage, and methods to generate them programmatically based on how wide the screen is and how large the buttons are.
• Added logic to decide when to truncate the list, and whether to show first, last, or both sets of truncation.
• Theme composable and styles added and approved by UX
• Added new story and documentation to the storybook page for this component in the form of a description at the top.

Checklist:

• [X] I checked that it is working locally in the dev server
• [X] I checked that it is working locally in the storybook
• [X] I checked that it is working locally in the library-website-nuxt dev server
• [X] I added a screenshot of it working
• [X] UX has reviewed and approved this
• [ ] I assigned this PR to someone on the dev team to review
• [X] I used a conventional commit message
• [X] I assigned myself to this PR

[github-actions[bot]]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions[bot]]

🚀 Deployed on https://deploy-preview-647--ucla-library-storybook.netlify.app

[pghorpade]

:tada: This PR is included in version 3.33.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: