From a828edeb9f1b478306d65ccdd889fd9f68aec49a Mon Sep 17 00:00:00 2001
From: Mark Taylor <138604938+mtaylorgds@users.noreply.github.com>
Date: Tue, 27 Aug 2024 17:08:00 +0100
Subject: [PATCH] Style publications page pagination controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add styling to the pagination controls to look similar to the pagination
 theme that is used in Whitehall publisher (which is done in a more
 complicated way there—trying to do it a bit more simply).
---
 app/assets/stylesheets/application.scss       |  1 +
 .../stylesheets/publications-table.scss       |  4 +++
 app/views/kaminari/_first_page.html.erb       | 11 ++++++++
 app/views/kaminari/_gap.html.erb              |  8 ++++++
 app/views/kaminari/_last_page.html.erb        | 11 ++++++++
 app/views/kaminari/_next_page.html.erb        | 11 ++++++++
 app/views/kaminari/_page.html.erb             | 12 +++++++++
 app/views/kaminari/_paginator.html.erb        | 25 +++++++++++++++++++
 app/views/kaminari/_prev_page.html.erb        | 11 ++++++++
 9 files changed, 94 insertions(+)
 create mode 100644 app/views/kaminari/_first_page.html.erb
 create mode 100644 app/views/kaminari/_gap.html.erb
 create mode 100644 app/views/kaminari/_last_page.html.erb
 create mode 100644 app/views/kaminari/_next_page.html.erb
 create mode 100644 app/views/kaminari/_page.html.erb
 create mode 100644 app/views/kaminari/_paginator.html.erb
 create mode 100644 app/views/kaminari/_prev_page.html.erb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 7616d273aa..a54d87306b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -21,6 +21,7 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/components/lead-paragraph';
 @import 'govuk_publishing_components/components/notice';
 @import 'govuk_publishing_components/components/search';
+@import 'govuk_publishing_components/components/previous-and-next-navigation';
 @import 'govuk_publishing_components/components/skip-link';
 @import 'govuk_publishing_components/components/success-alert';
 @import 'govuk_publishing_components/components/summary-list';
diff --git a/app/assets/stylesheets/publications-table.scss b/app/assets/stylesheets/publications-table.scss
index 2685bf66ae..c785fb27ff 100644
--- a/app/assets/stylesheets/publications-table.scss
+++ b/app/assets/stylesheets/publications-table.scss
@@ -80,3 +80,7 @@
     }
   }
 }
+
+.govuk-pagination__item.govuk-pagination__item--current {
+  color: govuk-colour("white");
+}
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
new file mode 100644
index 0000000000..355a1e61ff
--- /dev/null
+++ b/app/views/kaminari/_first_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "First" page
+  - available local variables
+    url:           url to the first page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__prev">
+  <%= link_to_unless current_page.first?, t("views.pagination.first").html_safe, url, remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
new file mode 100644
index 0000000000..a3f2cc3394
--- /dev/null
+++ b/app/views/kaminari/_gap.html.erb
@@ -0,0 +1,8 @@
+<%# Non-link tag that stands for skipped pages...
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__item govuk-pagination__item--ellipses"><%= t("views.pagination.truncate").html_safe %></span>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
new file mode 100644
index 0000000000..71d6f3740e
--- /dev/null
+++ b/app/views/kaminari/_last_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "Last" page
+  - available local variables
+    url:           url to the last page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__next">
+  <%= link_to_unless current_page.last?, t("views.pagination.last").html_safe, url, remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
new file mode 100644
index 0000000000..e67677be80
--- /dev/null
+++ b/app/views/kaminari/_next_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "Next" page
+  - available local variables
+    url:           url to the next page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__next">
+  <%= link_to_unless current_page.last?, t("views.pagination.next").html_safe, url, rel: "next", remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
new file mode 100644
index 0000000000..78545bc27d
--- /dev/null
+++ b/app/views/kaminari/_page.html.erb
@@ -0,0 +1,12 @@
+<%# Link showing page number
+  - available local variables
+    page:          a page object for "this" page
+    url:           url to this page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__item<%= " govuk-pagination__item--current" if page.current? %>">
+  <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel, class: "govuk-link govuk-link--no-visited-state"} %>
+</span>
diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
new file mode 100644
index 0000000000..19454ab60c
--- /dev/null
+++ b/app/views/kaminari/_paginator.html.erb
@@ -0,0 +1,25 @@
+<%# The container tag
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+    paginator:     the paginator that renders the pagination tags inside
+-%>
+<%= paginator.render do -%>
+  <nav class="govuk-pagination" role="navigation" aria-label="pager">
+    <%= first_page_tag unless current_page.first? %>
+    <%= prev_page_tag unless current_page.first? %>
+    <% each_page do |page| -%>
+      <% if page.display_tag? -%>
+        <%= page_tag page %>
+      <% elsif !page.was_truncated? -%>
+        <%= gap_tag %>
+      <% end -%>
+    <% end -%>
+    <% unless current_page.out_of_range? %>
+      <%= next_page_tag unless current_page.last? %>
+      <%= last_page_tag unless current_page.last? %>
+    <% end %>
+  </nav>
+<% end -%>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
new file mode 100644
index 0000000000..9190ad1f19
--- /dev/null
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "Previous" page
+  - available local variables
+    url:           url to the previous page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__prev">
+  <%= link_to_unless current_page.first?, t("views.pagination.previous").html_safe, url, rel: "prev", remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>