FR: [v2-pagination] – implement basic pagination type

[cogniSyb]

Context/Description

Pagination allows users to assess the number of pages available, identify what page they are on, browse to the previous or next page, or jump straight to the first or last page.

This component exists already in the Volvo Core Design Kit.

Acceptance Criteria

User AC:

• Buttons are available to navigate forward or backward in pages

Editor AC:

• Text labels should be edited in placeholder.xlsx
  • Text alternative labels https://volvoexperincesystem.z6.web.core.windows.net/?path=/docs/web-components-pagination--docs
  • Once there is 7 content pages then an ellipsis is introduced between 5 and 7
  • Always a maximum of 7 page numbers in view

Non-functional AC:

• Block colors needs to adapt to its context; it needs to work on section with dark background or grey background

Questions

• How many pages will always be on the tab (1-5 ... 10) ?
  • Answer: Mimic the same algorithm

Out of scope

Other variants of pagination as documented in Volvo Core Design Kit Sort order of the content within each page Checking how many content pages are to be shown per page

Note

Volvo pagination https://volvoexperincesystem.z6.web.core.windows.net/?path=/docs/web-components-pagination--docs

Technical details

• Provide semantics, focus on accessibility things like aria-current="page"

Attachment / link to Figma

Figma Design: Desktop/Tablet: https://www.figma.com/file/c2jG1bOcvle2bCmZqgptyS/Magazine-C%26T?type=design&node-id=1590%3A21691&mode=dev Mobile: https://www.figma.com/file/c2jG1bOcvle2bCmZqgptyS/Magazine-C%26T?type=design&node-id=1636%3A26829&mode=dev

Volvo Core Design Kit:

• https://www.figma.com/file/3NXBS8NFxn7TU0lvNDND7f/BETA---Volvo-Core-Design-Kit?type=design&node-id=28027-71762&mode=design&t=xY5KLIjUP1enK6ZY-4
• https://volvoexperincesystem.z6.web.core.windows.net/?path=/docs/web-components-pagination--docs
• https://www.volvogroup.com/experiencesystem/en/#/brand/615bfcc428c818001105b4e3/61a0de32a7047974164f01dd/6230544937a675408d840ec2

[Joesturbo]

@mollyaljenkins - can we review this as the design system has this functionality in the design kit. We should be able to reduce the overall time on this item.