Copy-paste next & previous component

Last commit on static:

https://github.com/alphagov/static/tree/bba61d34edd0a1f05d93c35b302ebec3
d6571116

app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -0,0 +1,83 @@
+.pub-c-pagination {
+  display: block;
+  margin-top: $gutter;
+  margin-bottom: $gutter;
+  margin-left: -$gutter-half;
+  margin-right: -$gutter-half;
+}
+
+// scss-lint:disable SelectorFormat
+.pub-c-pagination__list {
+  margin: 0;
+  padding: 0;
+
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
+
+.pub-c-pagination__item {
+  @include core-16($line-height: (20 / 16));
+  float: left;
+  list-style: none;
+  text-align: right;
+  margin: 0;
+  padding: 0;
+  width: 50%;
+}
+
+.pub-c-pagination__link {
+  display: block;
+  padding: $gutter-half;
+  text-decoration: none;
+
+  &:visited {
+    color: $link-colour;
+  }
+
+  &:hover,
+  &:active {
+    background-color: $canvas-colour;
+  }
+}
+
+.pub-c-pagination__link-title {
+  @include core-27($line-height: (33.75 / 27));
+  display: block;
+}
+
+.pub-c-pagination__item--previous {
+  @include media-down(mobile) {
+    float: none;
+    width: 100%;
+  }
+
+  float: left;
+  text-align: left;
+}
+
+.pub-c-pagination__item--next {
+  @include media-down(mobile) {
+    float: none;
+    width: 100%;
+  }
+
+  float: right;
+  text-align: right;
+}
+
+.pub-c-pagination__link-icon {
+  display: inline-block;
+  margin-bottom: 1px;
+  height: .482em;
+  width: .63em;
+}
+
+.pub-c-pagination__link-label {
+  display: inline-block;
+  margin-top: 0.1em;
+  text-decoration: underline;
+}
+// scss-lint:enable SelectorFormat

app/views/govuk_publishing_components/components/docs/previous_and_next_navigation.yml

@@ -0,0 +1,64 @@
+name: Previous and next navigation
+description: Navigational links that allow users to navigate within a series of pages
+  or elements.
+body: |
+  This component accepts 2 optional parameters, previous and next.
+
+  Each optional parameter accepts:
+
+  - an URL for the link
+  - a title for the URL
+  - a label that can add extra info (ie page number) that will be displayed under the title
+
+  If one of the 2 parameters is nil, no link will appear.
+accessibility_criteria: |
+  Icons in the component must not be announced by screen readers.
+
+  The component must:
+
+  - identify itself as pagination navigation
+  - provide a distinction between the navigation text and label text of the links both visually and for screenreaders
+
+shared_accessibility_criteria:
+  - link
+examples:
+  only_previous:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous page
+        label: 1 of 3
+  only_next:
+    data:
+      next_page:
+        url: next-page
+        title: Next page
+        label: Tax disc
+  both_previous_and_next:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous page
+        label: 1 of 3
+      next_page:
+        url: next-page
+        title: Next page
+        label: 3 of 3
+  both_previous_and_next_no_labels:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous page
+      next_page:
+        url: next-page
+        title: Next page
+  become_a_lorry_bus_driver_example:
+    data:
+      previous_page:
+        url: previous-page
+        title: Previous
+        label: Applying for a provisional lorry or bus licence
+      next_page:
+        url: next-page
+        title: Next
+        label: 'Driver CPC part 1 test: theory'

app/views/govuk_publishing_components/components/previous_and_next_navigation.raw.html.erb

@@ -0,0 +1,58 @@
+<% if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page) %>
+<nav
+  class="pub-c-pagination"
+  role="navigation"
+  aria-label="<%= t("govuk_component.previous_and_next_navigation.pagination", default: "Pagination") %>"
+>
+  <ul class="pub-c-pagination__list" data-module="track-click">
+    <% if local_assigns.include?(:previous_page) %>
+      <li class="pub-c-pagination__item pub-c-pagination__item--previous">
+        <a href="<%= previous_page[:url] %>"
+          class="pub-c-pagination__link"
+          rel="prev"
+          data-track-category="contentsClicked"
+          data-track-action="previous"
+          data-track-label="<%= previous_page[:url] %>"
+          data-track-dimension="previous"
+          data-track-dimension-index="29"
+        >
+          <span class="pub-c-pagination__link-title">
+            <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
+              <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"/>
+            </svg>
+            <%= previous_page[:title] %>
+          </span>
+          <% if previous_page[:label].present? %>
+            <span class="visually-hidden">:</span>
+            <span class="pub-c-pagination__link-label"><%= previous_page[:label] %></span>
+          <% end %>
+        </a>
+      </li>
+    <% end %>
+    <% if local_assigns.include?(:next_page) %>
+      <li class="pub-c-pagination__item pub-c-pagination__item--next">
+        <a href="<%= next_page[:url] %>"
+          class="pub-c-pagination__link"
+          rel="next"
+          data-track-category="contentsClicked"
+          data-track-action="next"
+          data-track-label="<%= next_page[:url] %>"
+          data-track-dimension="next"
+          data-track-dimension-index="29"
+        >
+          <span class="pub-c-pagination__link-title">
+            <%= next_page[:title] %>
+            <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
+              <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"/>
+            </svg>
+          </span>
+          <% if next_page[:label].present? %>
+            <span class="visually-hidden">:</span>
+            <span class="pub-c-pagination__link-label"><%= next_page[:label] %></span>
+          <% end %>
+        </a>
+      </li>
+    <% end %>
+  </ul>
+</nav>
+<% end %>

spec/components/previous_and_next_navigation_test.rb

@@ -0,0 +1,70 @@
+require 'govuk_component_test_helper'
+
+class PreviousAndNextNavigationTestCase < ComponentTestCase
+  def component_name
+    "previous_and_next_navigation"
+  end
+
+  test "nothing renders if no parameters" do
+    assert_empty render_component({})
+  end
+
+  test "previous pagination appears" do
+    render_component(previous_page: {
+      url: "previous-page",
+      title: "Previous page",
+      label: "1 of 3"
+    })
+
+    assert_select ".pub-c-pagination[role='navigation']"
+    assert_select ".pub-c-pagination__link-title", text: "Previous page"
+    assert_select ".pub-c-pagination__link-label", text: "1 of 3"
+    assert_link("previous-page")
+  end
+
+  test "next pagination appears" do
+    render_component(next_page: {
+      url: "next-page",
+      title: "Next page",
+      label: "2 of 3"
+    })
+
+    assert_select ".pub-c-pagination__link-title", text: "Next page"
+    assert_select ".pub-c-pagination__link-label", text: "2 of 3"
+    assert_link("next-page")
+  end
+
+  test "there is a distinction between the navigation text and label text of the links when a label is present" do
+    render_component(
+      previous_page: {
+        url: "previous-page",
+        title: "Previous page",
+        label: "1 of 3"
+      },
+      next_page: {
+        url: "next-page",
+        title: "Next page",
+        label: "2 of 3"
+      }
+    )
+
+    assert_select ".pub-c-pagination__item--previous .pub-c-pagination__link .visually-hidden", text: ":"
+    assert_select ".pub-c-pagination__item--next .pub-c-pagination__link .visually-hidden", text: ":"
+  end
+
+  test "there is no distinction between the navigation text and label text of the links when labels are not present" do
+    render_component(
+      previous_page: {
+        url: "previous-page",
+        title: "Previous page"
+      },
+      next_page: {
+        url: "next-page",
+        title: "Next page"
+      }
+    )
+
+    assert_select ".pub-c-pagination__item--previous .pub-c-pagination__link .visually-hidden", false
+    assert_select ".pub-c-pagination__item--next .pub-c-pagination__link .visually-hidden", false
+  end
+end