Pagination: Hide previous and next buttons on first and last pages

[natclamp-moj]

Summary

With the pagination component, the 'Previous' and 'Next' buttons are always active. I believe that it's good practice to not show links that aren't required, so perhaps on the first page, the 'previous' link should be hidden/inactive, and on the last page, the 'next' link should be hidden/inactive.

Motivation

The user can click on the link and the page refreshes as if loading more content, but as it’s the last set of data there is nothing to load so the page refreshes but doesn’t change. We think this could confuse the user!

Additional context

We use this component pretty consistently throughout DPS and we don't particularly want to stop using it, but a few people have highlighted/raised it as a 'bug' for us to fix, saying it's confusing.

[gregtyler]

Hi @natclamp-moj I believe this is to do with how you've implemented the component in your service.

In Nunjucks you can hide either button by not including the previous or next config as required. e.g. to only have a "next" button:

{%- from "moj/components/pagination/macro.njk" import mojPagination -%}

{{ mojPagination({
  items: [{
    text: '1',
    href: '?page=1',
    selected: true
  }, {
    text: '2',
    href: '?page=2'
  }, {
    text: '3',
    href: '?page=3'
  }],
  next: {
    text: 'Next',
    href: ''
  }
}) }}

In Nunjucks you can hide either button by not including the relevant <li> element. Same example as above:

<nav class="moj-pagination" aria-label="Pagination navigation">
  <ul class="moj-pagination__list">
    <li class="moj-pagination__item moj-pagination__item--active" aria-label="Page 1 of " aria-current="page">1</li>
    <li class="moj-pagination__item"><a class="moj-pagination__link" href="?page=2" aria-label="Page 2 of ">2</a></li>
    <li class="moj-pagination__item"><a class="moj-pagination__link" href="?page=3" aria-label="Page 3 of ">3</a></li>
    <li class="moj-pagination__item  moj-pagination__item--next">
      <a class="moj-pagination__link" href="">Next<span class="govuk-visually-hidden"> page</span></a>
    </li>
  </ul>
</nav>

These both produce the following:

[natclamp-moj]

Hi @gregtyler Thanks so much for taking the time to respond - I really appreciate it. This is great, thank you for explaining. I didn't realise you could modify it like that, makes me wonder whether the devs who originally built the service did either!

Thanks again