mi6 / mi6/ic-ui-kit

Carousel pagination

Open
#459 1 comment 0 reactions 0 assignees View on GitHub
pagination component
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.