Paginator overview v. 0.1

Component type	Component
Document status	DRAFT
Design source (in Figma)	https://www.figma.com/file/0kGNJaC3xZ66WElO5TWvX3/Chameleon-System-(Phase-2)?node-id=2324%3A44403
Author	Nick Harris
Responsible
Milestone	3

Pagination is part of a larger ‘list controls' discussion that hasn’t concluded yet.

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Usage

Use when there are too many results to show on a single page.
Your content can be logically split and splitting won’t cause context to be lost

Item	Type	Notes
1	Button	Used for previous and next actions.
2	Link	Shows page number and acts as the navigation method
3	Truncation	Truncates the list of pages based on behaviour below

I’m unsure from Ben’s designs what the behaviour of Truncation and ellipsis are.

Item	Type	Notes
Link	Alt text	Links will need appropriate alt text
Button	Alt text	Previous and next buttons will need appropriate alt text

Progressive enhancement:

Non JS
- I don’t think there is a non-Js version of pagination
- Pagination could the non-JS fallback for other list types.
Links will navigate you to a new page of results.
Links open in the same window
The current page number is highlighted as the active page.

Key	Interaction

Insert here