Merge pull request #2610 from alphagov/add-pagination-component

Add pagination component
alphagov · Jun 20, 2022 · da32bb0 · da32bb0
2 parents 8928ddf + 30e9422
commit da32bb0
Show file tree

Hide file tree

Showing 10 changed files with 802 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -44,6 +44,14 @@ We've deprecated the `govuk-header__link--service-name` class, and will remove i
 
 This change was introduced in [pull request #2617: Do not make the service name in the header a link if no `serviceUrl` is provided](https://github.com/alphagov/govuk-frontend/pull/2617).
 
+### New features
+
+#### Help users navigate through pages with pagination
+
+You can now use [pagination](https://design-system.service.gov.uk/components/pagination/) to help users navigate forwards and backwards through a series of pages. For example, in search results or guidance that's divided into multiple website pages.
+
+This was added in [pull request #2610: Add pagination component](https://github.com/alphagov/govuk-frontend/pull/2610).
+
 ### Fixes
 
 We’ve made fixes to GOV.UK Frontend in the following pull requests:

diff --git a/app/views/full-page-examples/search/index.njk b/app/views/full-page-examples/search/index.njk
@@ -25,6 +25,7 @@ notes: >-
 {% from "select/macro.njk" import govukSelect %}
 {% from "checkboxes/macro.njk" import govukCheckboxes %}
 {% from "button/macro.njk" import govukButton %}
+{% from "pagination/macro.njk" import govukPagination %}
 
 {% set pageTitle = "Search" %}
 {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
@@ -106,85 +107,85 @@ notes: >-
         <h2 class="govuk-heading-s">{{ total }} results</h2>
         <span class="subscribe-link"><a href="#" class="govuk-link govuk-body-s">Subscribe to feed</a></span>
       </div>
-        <hr class="govuk-section-break govuk-section-break--s govuk-section-break--visible govuk-!-margin-bottom-3">
-        <div class="app-search-result-sort">
-          {{ govukSelect({
-            id: "sort",
-            name: "sort",
-            classes: "app-search-result-sort",
-            label: {
-              text: "Sort by"
+      <hr class="govuk-section-break govuk-section-break--s govuk-section-break--visible govuk-!-margin-bottom-3">
+      <div class="app-search-result-sort">
+        {{ govukSelect({
+          id: "sort",
+          name: "sort",
+          classes: "app-search-result-sort",
+          label: {
+            text: "Sort by"
+          },
+          items: [
+            {
+              value: "relevance",
+              text: "Relevance"
             },
-            items: [
-              {
-                value: "relevance",
-                text: "Relevance"
-              },
-              {
-                value: "updated-new",
-                text: "Updated (newest)",
-                selected: true
-              },
-              {
-                value: "updated-old",
-                text: "Updated (oldest)"
-              }
-            ]
-          }) }}
-        </div>
-        <ul class="govuk-list app-document-list">
-            {% for document in documents %}
-                {% set document = document.document %}
-                <li>
-                    <h3 class="govuk-heading-s govuk-!-margin-bottom-2">
-                      <a class="govuk-link govuk-link--no-underline" href="https://gov.uk{{ document.link }}">
-                        {{ document.title }}
-                      </a>
-                    </h3>
-                    <p class="govuk-body-s govuk-!-margin-bottom-4">
-                        {{ document.summary }}
-                    </p>
-                    {% if document.children %}
-                      <ul class="govuk-list app-search-result-list__children">
-                        {% for child in document.children %}
-                          <li>
-                            <h4 class="govuk-heading-xs govuk-!-margin-bottom-1 govuk-!-margin-top-1">
-                              <a class="govuk-link govuk-link--no-underline" href="#">
-                                {{ child.title }}
-                              </a>
-                            </h4>
-                            <p class="govuk-body-s">
-                              {{ child.summary }}
-                            </p>
-                          </li>
+            {
+              value: "updated-new",
+              text: "Updated (newest)",
+              selected: true
+            },
+            {
+              value: "updated-old",
+              text: "Updated (oldest)"
+            }
+          ]
+        }) }}
+      </div>
+      <ul class="govuk-list app-document-list">
+          {% for document in documents %}
+              {% set document = document.document %}
+              <li>
+                  <h3 class="govuk-heading-s govuk-!-margin-bottom-2">
+                    <a class="govuk-link govuk-link--no-underline" href="https://gov.uk{{ document.link }}">
+                      {{ document.title }}
+                    </a>
+                  </h3>
+                  <p class="govuk-body-s govuk-!-margin-bottom-4">
+                      {{ document.summary }}
+                  </p>
+                  {% if document.children %}
+                    <ul class="govuk-list app-search-result-list__children">
+                      {% for child in document.children %}
+                        <li>
+                          <h4 class="govuk-heading-xs govuk-!-margin-bottom-1 govuk-!-margin-top-1">
+                            <a class="govuk-link govuk-link--no-underline" href="#">
+                              {{ child.title }}
+                            </a>
+                          </h4>
+                          <p class="govuk-body-s">
+                            {{ child.summary }}
+                          </p>
+                        </li>
+                      {% endfor %}
+                    </ul>
+                  {% endif %}
+                  {% if document.metadata %}
+                    <ul class="app-metadata-list govuk-!-padding-0">
+                        {% for data in document.metadata %}
+                            <li class="govuk-body govuk-!-font-size-16">
+                                {% if data['is_text'] %}
+                                    {{ data.value }}
+                                {% endif %}
+                                {% if data['is_date'] %}
+                                    Updated: {{ data['human_date'] }}
+                                {% endif %}
+                            </li>
                         {% endfor %}
-                      </ul>
-                    {% endif %}
-                    {% if document.metadata %}
-                      <ul class="app-metadata-list govuk-!-padding-0">
-                          {% for data in document.metadata %}
-                              <li class="govuk-body govuk-!-font-size-16">
-                                  {% if data['is_text'] %}
-                                      {{ data.value }}
-                                  {% endif %}
-                                  {% if data['is_date'] %}
-                                      Updated: {{ data['human_date'] }}
-                                  {% endif %}
-                              </li>
-                          {% endfor %}
-                      </ul>
-                    {% endif %}
-                </li>
-            {% endfor %}
-        </ul>
-
-        <p class="govuk-body">
-        <a class="app-next-page govuk-link govuk-link--no-underline" href="#">
-          <span class="app-next-page__text govuk-!-font-weight-bold">Next page</span><br>
-          <span class="app-next-page__number govuk-!-font-size-16">2 of 2939</span>
-        </a>
-      </p>
+                    </ul>
+                  {% endif %}
+              </li>
+          {% endfor %}
+      </ul>
 
+      {{ govukPagination({
+        next: {
+          text: 'Next page',
+          href: '#',
+          labelText: '2 of 2939'
+        }
+      }) }}
     </div>
   </div>
 {% endblock %}
diff --git a/src/govuk/components/_all.scss b/src/govuk/components/_all.scss
@@ -21,6 +21,7 @@
 @import "inset-text/index";
 @import "label/index";
 @import "notification-banner/index";
+@import "pagination/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";

diff --git a/src/govuk/components/pagination/README.md b/src/govuk/components/pagination/README.md
@@ -0,0 +1,15 @@
+# Pagination
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the pagination component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/pagination).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/details/#options-pagination-example) for details.