Add pagination component

[owenatgov]

What

Adds the pagination component to govuk-frontend. See below epic for background on this addition .

Related issues/pull requests

• Epic: Publish pagination contribution govuk-design-system#1985
• Design system website pull request: Guidance for pagination component govuk-design-system#1972
• Supersedes existing prototype pull request: Add pagination component #2419

Visuals

Standard view

Standard view item hover state

Standard view item focus state

Standard view previous/next link focus state

Standard view current item hover state

Standard small screen view

Standard view with a large number of pages

Teams have the option to hide several page numbers behind ellipses

Without numbers

Alternative "block" view for pre/next navigation without page numbers

Block view hover state

Block view with labels

Block view with labels hover state

Block view with labels focus state

[edwardhorsford]

Is there a review app for this? From the screenshots it looks like there might be errant whitespace in the previous and next links - the underlines look oddly sized for the text content.

[querkmachine]

The title and label lines on the "block" view are also not aligned with one another, possibly due to unruly whitespace again.

@edwardhorsford We don't have review apps at the moment due to the GitHub/Heroku outage. You need to pull the branch and run it locally for the time being.

[edwardhorsford]

@querkmachine that's out of alignment too - but what I was talking about was this:

[36degrees]

Thanks for this @owenatgov – looking really good so far. I have added quite a few comments but most of them are relatively minor. Very happy to talk through it if that'd be useful.

[christopherthomasdesign]

Just had a look through, a few more comments...

1. +1 to Ed's question about the whitespace before 'Previous' and after 'Next' – is this a workaround for something? It's quite noticeable that there's an extra space in there, it should deffo be flush with the line below
2. Should the bold 'current page' numbers have a hover state? To me that indicates you can interact with them...
3. Think the pagination link labels might be a bit small – IMO the bold of the 'previous / next' bit is enough of a visual differentiator between the two. So I'd probs bump up the govuk-pagination__link-label to 19px on bigger screens to match the rest of the link. GOV.UK do it this way too, see https://www.gov.uk/adoption-records. If we do this, it might help to add an extra bit of spacing between the two rows so they're not bunched up too closely – no more than 5px

[edwardhorsford]

I suspect the whitespace issues are caused by the new lines. That can likely be fixed using Nunjucks whitespace control.

[owenatgov]

@edwardhorsford was spot on that this was a whitespace issue. All sorted now thanks to Ed's helpful link and some light flexbox styling (thanks again @36degrees).

@christopherthomasdesign I believe I've covered all your points. Please take another look at let me know if you spot anything else.

I've reorganised the sass so it's a bit more sensible and tidy so some of the comments above will be listed as outdated even though they're still relevant. I'll still work through them in order.

[EoinShaughnessy]

Macro options still need to be 2i'd

[EoinShaughnessy]

@owenatgov Macro options have passed 2i!

Only changes recommended:

• make 'Options for items' the last of the 3 tables
• add in suggestion for line 60

[owenatgov]

@EoinShaughnessy I've managed to reorder the tables on the website by re-ordering the options in the tech docs in this repo. Tech docs are all sorted!

[owenatgov]

The linked guidance here doesn't exist yet so this is a broken link, but this is the page it is going to be once it gets published. There's a decision here about if we want to merge this now or once the guidance is deployed.

[vanitabarrett]

We can merge this in, even with the broken link. While it's unreleased, no one should really be looking at / expect the Changelog to be fully working anyway. When we do the release, it does mean the release notes will contain a broken link for a short period of time until the guidance has been published, but we try to do them in quick succession to limit the length of time this happens. Ideally, most people will become aware of the release via our comms too, which we'll only put out once the guidance has also been published.

TLDR: it's all good to be merged, after v4.1.1 has been released.