Add numbered pages pagination option

[frankieroberto]

This extends the current Pagination component to support a new variant which is suitable for paging between numbered lists of pages, for example in search results or a long list of patients or appointments.

The variant is based heavily on the GOV.UK Pagination variant, but with a few changes:

• colour changed from GOV.UK blue (#1d70b8) to NHS.UK blue (#005eb8)
• the arrow icon change to use the one from the existing NHS pagination component, which is wider and rounded
• visited pages use the NHS visited link purple colour (#330072) instead of the GOV.UK purple (#4c2c92)
• the hover style follows the NHS link style, which is to remove the underline and change to the maroon colour (#7C2855) instead of the GOV.UK style which is to have a thicker underline and go slightly darker blue (#003078) or purple
• because the existing arrow is blue rather than grey in the GOV.UK pagination, the arrow changes colour when hovered or visited, to match the link text

Comparison between GOV.UK numbered pagination and this NHS one

GOV.UK version	NHS version

Implementation

The existing Previous and Next variant for the NHS pagination component uses different HTML from the GOV.UK one, for example the NHS one uses a <ul> list containing 1 or 2 list items, whereas the GOV.UK one uses <div>s.

To avoid making any breaking changes to the existing pagination component, I’ve left that as-is, including all the existing HTML and CSS classes.

The new numbered variant uses a modifier class of the top-level <nav> element (nhsuk-pagination--numbered) to avoid clashing.

Mobile / narrow screens

This needs a bit of thought. The GOV.UK version switches to centre-alignment below a certain width:

...should we copy that? Possibly it switches too early (when there would be space for it to remain on one line).

The GOV.UK variant also drops some of the page numbers on narrow screens:

Desktop	Mobile

TODO

• Consider mobile view
• Write guidance
• Test in all supported browsers
• Unit tests
• Add to backstop image tests
• Code review
• CHANGELOG entry

[paulrobertlloyd]

The existing Previous and Next variant for the NHS pagination component uses different HTML from the GOV.UK one, for example the NHS one uses a <ul> list containing 1 or 2 list items, whereas the GOV.UK one uses <div>s.

Is there an opportunity for us to follow the GOV.UK decision here? My spidey sense is that using a list item for the now and next page items, inside a navigation landmark labelled pagination, is misleading (there may be more than 2 pages, its just that only the previous and next ones have been linked to).

Further more, if you have numbered pagination with say 3 items, it’ll be announced in a list having 5 items. Which is to say, I think the distinction between those links that appear in a list, and those used for previous and next links, is an important one.

To avoid making any breaking changes to the existing pagination component, I’ve left that as-is, including all the existing HTML and CSS classes.

How compatible with the GOV.UK markup would this component be, say if you were using – entirely hypothetically you understand – a GOV.UK-based component library that allowed you to use NHS styles by changing class prefixes from govuk-* to nhsuk-* (cough)?

---

Separately, see #1027; from both wanting visual consistency, and being able to identify the pagination arrows at these smaller sizes, the existing pagination arrows should have open tips.

[frankieroberto]

@paulrobertlloyd:

Is there an opportunity for us to follow the GOV.UK decision here? My spidey sense is that using a list item for the now and next page items, inside a navigation landmark labelled pagination, is misleading (there may be more than 2 pages, its just that only the previous and next ones have been linked to).

Further more, if you have numbered pagination with say 3 items, it’ll be announced in a list having 5 items. Which is to say, I think the distinction between those links that appear in a list, and those used for previous and next links, is an important one.

Ah sorry, I didn’t explain this well enough. I’ve followed the GOVUK markup for the new 'numbered pages' variant. This means that the numbers are within a <ul> list, but the previous and next links are in a separate <div> before or after the list, and not part of the list.

What I’ve not done is changed the markup used for the existing 'previous and next links with page titles' variant, which uses this markup in the NHS version:

<nav><ul>
  <li><a href="#">Previous: page title</a></li>
  <li><a href="#">Next: page title</a></li>
</ul></nav>

but this in the GOV.UK version:

<nav>
  <a href="#">Previous: page title</a>
  <a href="#">Next: page title</a>
</nav>

(<div>s and <span>s not shown)

Possibly we should also update this to match the GOV.UK version, but possibly the <ul> list is beneficial here (or not?) - and I also wanted to avoid a breaking change, at least initially. But maybe it’s better to do that at the same time?

How compatible with the GOV.UK markup would this component be, say if you were using – entirely hypothetically you understand – a GOV.UK-based component library that allowed you to use NHS styles by changing class prefixes from govuk-* to nhsuk-* (cough)?

Right now the markup for the new numbered pages variant should be mostly compatible except for the SVG for the arrows, which is different. There might also be some other differences in the css names.

[paulrobertlloyd]

But maybe it’s better to do that at the same time?

Do it