Guidance for pagination component

[calvin-lau-sig7]

Refine guidance for pagination component, based on design decisions and previous working group review.

Content improvements are mainly to:

• better explain the rules 'for large numbers of pages'
• structure the page to help users navigate the different patterns

Preview of page, with examples:
https://add-pagination--govuk-design-system-preview.netlify.app/components/pagination/

Other links:

• Preview
• Draft doc (no longer in use)
• Design decisions

Epic: Publish pagination contribution govuk-design-system#1985
Design and code is in this PR: Add pagination component #2610

[calvin-lau-sig7]

Hi @timpaul, all. I've made some comments and suggested some edits and to the guidance. Hope I've committed them properly into this branch — thanks!

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	ce9f50a
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/62b9a30391b9a400081475ec
😎 Deploy Preview	https://deploy-preview-1972--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[frankieroberto]

@calvin-lau-sig7

Looked into a better heading structure for the examples. What do we think of something that looks like:
[...]

I like where this is heading, but I found the distinction between the 3 different top-level headings hard to understand, with "set of pages" and "sequence of pages" initially sounding like the same thing to me?

I wonder if we could simplify to just 2 different headings describing the 2 ways of using the component, one for "content pages" (needs a better description) which would use just previous/next, and one for "results pages" (previous/next plus numbered links and optional results line)?

I can't think of a reasonable use-case for numbered links with content-y type pages?

Any thoughts @timpaul?

[simonwhatley]

@timpaul in the Nunjuck examples the keys are all quoted, whereas elsewhere in the design system they're not.

For example:

{{ govukPagination({
  "previous": {
    "href": "#",
    "text": "Previous team"
  },
  "next": {
    "href": "#",
    "text": "Next team"
  },
  "items": [
    {
      "text": "1",
      "href": "#"
    },
    {
      "text": "2",
      "current": true
    },
    {
      "text": "3",
      "href": "#"
    }
  ]
}) }}

should be this:

{{ govukPagination({
  previous: {
    href: "#",
    text: "Previous team"
  },
  next: {
    href: "#",
    text: "Next team"
  },
  items: [
    {
      text: "1",
      href: "#"
    },
    {
      text: "2",
      current: true
    },
    {
      text: "3",
      href: "#"
    }
  ]
}) }}

[calvin-lau-sig7]

Putting this on blocked for now, whilst we make final refinements to the component.

[calvin-lau-sig7]

This guidance content should be ready to release now, just needs GitHub approvals.

[christopherthomasdesign]

Looking good, just one comment

[36degrees]

Rebased to remove pre-release from package.json and to tidy up the commit messages.