Replace pagination component with govuk_pagination

app/frontend/styles/_pagination.scss

@@ -1,134 +0,0 @@
-// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss
-.app-pagination {
-  border-top: 1px solid $govuk-border-colour;
-  margin-top: govuk-spacing(2);
-  padding-top: govuk-spacing(2);
-  text-align: center;
-
-  @include govuk-media-query($from: tablet) {
-    // Hide whitespace between elements
-    font-size: 0;
-
-    // Trick to remove the need for floats
-    text-align: justify;
-
-    &:after {
-      content: " ";
-      display: inline-block;
-      width: 100%;
-    }
-  }
-}
-
-.app-pagination__list {
-  margin: 0 govuk-spacing(-3);
-  padding: 0;
-  list-style: none;
-
-  @include govuk-media-query($from: tablet) {
-    display: inline-block;
-    margin-bottom: 0;
-  }
-}
-
-.app-pagination__results {
-  @include govuk-font(19);
-  margin-top: 0;
-  margin-bottom: govuk-spacing(4);
-  padding: govuk-spacing(1) 0;
-
-  @include govuk-media-query($from: tablet) {
-    display: inline-block;
-  }
-}
-
-.app-pagination__item {
-  @include govuk-font(19);
-  display: inline-block;
-  margin-bottom: govuk-spacing(4);
-
-  // Hide items on small screens
-  @include govuk-media-query($until: tablet) {
-    display: none;
-  }
-}
-
-// Only show previous, next, first, last and current items on mobile
-.app-pagination__item--current,
-.app-pagination__item--divider,
-.app-pagination__item--prev,
-.app-pagination__item--next,
-.app-pagination__item:nth-child(2),
-.app-pagination__item:nth-last-child(2) {
-  @include govuk-media-query($until: tablet) {
-    display: inline-block;
-  }
-}
-
-.app-pagination__item--current,
-.app-pagination__item--divider {
-  box-sizing: border-box;
-  font-weight: bold;
-  min-width: govuk-spacing(8);
-  min-height: govuk-spacing(4);
-  padding: govuk-spacing(2);
-  text-align: center;
-}
-
-.app-pagination__item--divider {
-  margin: 0 govuk-spacing(-4);
-  padding-right: 0;
-  padding-left: 0;
-  color: $govuk-secondary-text-colour;
-  pointer-events: none;
-}
-
-.app-pagination__link {
-  @include govuk-link-common;
-  @include govuk-link-style-no-underline;
-  box-sizing: border-box;
-  color: $govuk-link-colour;
-  display: block;
-  min-width: govuk-spacing(8);
-  min-height: govuk-spacing(4);
-  padding: govuk-spacing(2);
-  text-align: center;
-
-  .app-pagination__link-label {
-    @include govuk-font($size: 16, $weight: "regular");
-    display: block;
-    padding-left: 32px;
-    text-decoration: underline;
-  }
-
-  &:hover .app-pagination__link-label {
-    @include govuk-link-hover-decoration;
-  }
-
-  &:focus {
-    box-shadow: 0 0 $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
-    text-decoration: underline;
-  }
-
-  &:hover:not(:focus) {
-    background-color: govuk-colour("light-grey", $legacy: "grey-4");
-  }
-}
-
-.app-pagination__icon {
-  fill: currentcolor;
-}
-
-.app-pagination__item--prev .app-pagination__link,
-.app-pagination__item--next .app-pagination__link {
-  padding: govuk-spacing(2) govuk-spacing(3);
-  font-weight: bold;
-}
-
-.app-pagination__item--prev .app-pagination__icon {
-  margin-right: govuk-spacing(2);
-}
-
-.app-pagination__item--next .app-pagination__icon {
-  margin-left: govuk-spacing(2);
-}

app/frontend/styles/application.scss

@@ -36,7 +36,6 @@ $govuk-breakpoints: (
 @import "tag";
 @import "task-list";
 @import "template";
-@import "pagination";
 @import "panel";
 @import "primary-navigation";
 @import "search";

app/views/pagy/_nav.html.erb

@@ -1,41 +1,6 @@
-<% link = pagy_link_proc(pagy) -%>
+<%= govuk_pagination(pagy:) %>
 <% if pagy.pages > 1 %>
-  <nav class="app-pagination" id="pagination-label" aria-label="results navigation">
+  <p class="govuk-body">
-    <ul class="app-pagination__list">
+    Showing <b><%= pagy.from %></b> to <b><%= pagy.to %></b> of <b><%= pagy.count %></b> <%= item_name %>
-      <li class="app-pagination__item app-pagination__item--prev">
+  </p>
-        <% if pagy.prev %>
-          <a class="app-pagination__link" href="<%= "#{request.path}?page=#{pagy.prev}" %>">
-        <% end %>
-          <span class="app-pagination__link-title">
-            <svg class="app-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17">
-              <path 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"></path>
-            </svg>Previous
-            <span class="govuk-visually-hidden">page</span>
-          </span></a>
-      </li>
-      <% pagy.series.each do |item| %>
-        <% if item == :gap %>
-          <li class="app-pagination__item app-pagination__item--ellipses">…</li>
-        <% elsif item.is_a?(String) %>
-          <li class="app-pagination__item app-pagination__item--current"><span class="govuk-visually-hidden">Page </span><%= item %><span class="govuk-visually-hidden"> (current page) </span></li>
-        <% else %>
-          <li class="app-pagination__item"><a class="app-pagination__link" href="<%= "#{request.path}?page=#{item}" %>"><span class="govuk-visually-hidden">Page </span><%= item %></a></li>
-        <% end %>
-      <% end %>
-      <li class="app-pagination__item app-pagination__item--next">
-        <% if pagy.next %>
-          <a class="app-pagination__link" href="<%= "#{request.path}?page=#{pagy.next}" %>">
-        <% end %>
-          Next <span class="govuk-visually-hidden">page</span>
-          <span class="app-pagination__link-title">
-            <svg class="app-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17">
-              <path 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"></path>
-            </svg>
-          </span></a>
-      </li>
-    </ul>
-    <p class="app_pagination__results">
-      Showing <b><%= pagy.from %></b> to <b><%= pagy.to %></b> of <b><%= pagy.count %></b> <%= item_name %>
-    </p>
-  </nav>
 <% end %>