[feature request] Add pagination to content list

[dalibormrska]

Is your feature request related to a problem? Please describe.

Currently when we go to News, Library, Research or Questions page, we get the Load More button at the bottom.

This is not ideal, since we don't get the information about how many batches of items are there, it's hard to get to older items. If the user also gets to an older item (clicks the load more button several times), then click on the item and navigates back, the item list resets and the user needs to click on Load More several times again to get to where they were before.

Describe the solution you'd like

Create and implement the Pagination component.

SEE THE INTERACTION IN THE FIGMA PREVIEW

TAKE THE MEASUREMENTS FROM FIGMA DESIGN FILE

How I created the components in Figma:

Requirements:

• Examine the Figma prototype and Figma design file, you can get the measurements, begaviour, colors, etc. from there.
• See how I created the components in the design file, maybe it can be helpful for creating the components in the code?

---

• Implement tooltips for <<, <, >, >> buttons.
• On the first page, we don't need to show the << and < navigation buttons.
• On the last page, we don't need to show the >> and > navigation buttons.

---

• The number in the square is an input field, we can type our desired page there. Show type cursor when hovered.
  • The input should be handled with min-width, so that at minimum it's a 44x44px square, but can expand if necessary.
  • It should only accept numbers
  • On mobile when the keyboard opens we would only want to show the number keyboard (there should be a way to force this by HTML as far as I know)

---

• If there is for example only 5 pages, it should not be possible to go to the page 9.
• On mobile the component actually does not need a special variant. It should be under 300px wide which should not be a problem for any device.
• For example, when the user goes to page 3, clicks on some item, then navigates back, they should go to the page 3. My guess is that this would mean keeping the track of the current page in the URL. This would also allow for someone to copy the url of a specific page and send to someone else to see the same items.

---

• Since it is a crucial navigational element, accessibility needs to be handled correctly.
  • Make sure that the pagination is usable by keyboard by the TAB button
  • Correct HTML semantics (probably element?) and aria-labels.

---

Describe alternatives you've considered

Disabling the buttons <<, <<, >>, >> instead of hiding them when necessary?

Additional context

@mariojsnunes Any tech details?

[mariojsnunes]

@mariojsnunes Any tech details?

The pagination component must be created on our component library

@dalibormrska should we keep "load more" on mobile?