Component Request - Page Counter - {x}hrs

[farosFreed]

Component Description

This component is used in the Pagination component to display clickable page numbers that navigate to each page of content.

See designs specs for hover states and mobile specific styling rules, including hiding the button text (previous and next) on mobile.

Design

Default:

(ignore yellow 1 dot in image)

FTVA version:

(ignore grey background in image)

Please see attached design specs for full design details: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=418-11186&t=pDSZVGTPLK3kSvZf-0

Slots

I don't believe we will need to use slots for this, but if a use case is found during implementation then we can discuss.

Props

There are 2 required props for this component: totalPages, a number representing the total number of page bubbles in the list currentPage, the number representing the currently highlighted /displayed page

NOTE: It may make more sense to implement currentPage as a v-model attribute to enable 2 way binding https://vuejs.org/guide/components/v-model.html

const props = defineProps({
    totalPages: {
            type: Number,
            required: true
        },
     currentPage: {
            type: Number,
            required: true
        },
})

Developer Tips

It's a good idea to look at other pagination components for patterns that we may want to reuse, especially for the truncation logic for inserting ellipses in the list of page numbers https://nextui.org/docs/components/pagination https://ui.nuxt.com/components/pagination

Events

Describe any events that should be emitted by this component.

1. paginationNavClicked when a page button is clicked on, with the buttons number value emitted with the event. Parent components implementing pagination will need to listen for this event and navigate to the new search results.

Child components

n/a

[farosFreed]

Discussion for team:

Q: Does Page Counter need to be a separate child component from Pagination, or can it just be an enhancement to Pagination component?

My thoughts: Having it as a separate component means we have to pass props and emit events through 2 layers (Pagination and PageCounter), but makes it easier to show/hide it. However, as we are only using it on one page, it doesn't seem like we want to hide it? leaning towards just putting it in Pagination Component

[farosFreed]

Additional note: however we implement themeing for components, we should apply the pattern to this component as well

[farosFreed]

Was completed