Carousel pagination
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
A simpler pagination component for switching between a small number of pages. Each page is represented by a dot and can be clicked on the access directly. Next and previous buttons also allow navigation to adjacent pages./
## 💰 User value
Useful component for paginating simple groups of data such as carousel banners, grid views, or card carousels.
## 📚 User Stories
If relevant, describe the high-level functionality as user stories.
*As an* ICDS user
*I need* to be able to switch between a small number of pages
*So that* I can view all of the information captured on those pages.
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given that a dot/carousel pagination is being used
When rendered
Then it should show a dot button for each page.
Given that a dot/carousel pagination is being used
When setting the hidePageDots property to true
Then the individual page dots should be hidden and only the next and previous icon buttons displayed.
*Icon buttons*
Given that a carousel pagination is being implemented
When the first page is the current page,
Then the previous icon button should be disabled as user is already on first page.
Given that a carousel pagination is being implemented
When the last page is the current page,
Then the last icon button should be disabled as user is already on last page.
*Appearance*
Given that a carousel pagination is being implemented
When the appearance property is set
Then the following appearance types should be used:
- appearance: Default - default styling
- appearance: Light- Light styling
- appearance: Dark - Dark styling
And the pagination items should use the according appearance variant.
*Responsive*
Given that a carousel pagination is being used,
When there is not enough horizontal space in the container/viewport to fit the component,
Then the page 'dot buttons' should be automatically hidden so the user must navigate with only the next and prev buttons.
*Accessibility*
Given that a pagination is used on a page
When a page is selected
Then that pagination item should use aria-current to indicate it is the current page and its aria-label should update to include reference to 'current page'.
Given that pagination is being used
When interacting with the next and previous buttons with a SR
Then the following should be announced:
- prev button: "Go to previous page".
- next button: "Go to next page".
Given that pagination is being used
When interacting with the pagination dots using a SR
Then they should be announced 'Go to page X' where X is the number of the page.
## ✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance
If there's written guidance or documentation, include it here.
Contributor guide
Research direction
No files, tests, designs, or entry points are named. Start by locating existing pagination or related UI component conventions in this TypeScript StencilJS repository, then use the acceptance criteria to define the dot, navigation, appearance, responsive, and accessibility behavior. Done means all listed interactions and announcements work and are covered by the project's applicable checks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100