Convert next & previous component to gem-based

- Change the class from `pub-c` to `gem-c` - Fix CSS includes - Rename files - Make tests work - Update CHANGELOG
alphagov · May 29, 2018 · 890b1b8 · 890b1b8
1 parent e18fa07
commit 890b1b8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,13 +14,15 @@
   tags, OpenGraph tags and Twitter cards (#335).
 * Move the Title component from static (PR #324)
 * Move the Lead paragraph component from static (PR #325)
+* Move the Next and previous component from static (PR #329)
 * Add a Phase banner component to replace the Alpha/Beta banners in Static (PR #333)
 
 ### Upgrade instructions
 
 Replace the component by running the following:
 
 ```
+find app/views -type f -print0 | xargs -0 sed -i '' 's/govuk_component\/previous_and_next_navigation/govuk_publishing_components\/components\/previous_and_next_navigation/g'
 find app/views -type f -print0 | xargs -0 sed -i '' 's/govuk_component\/title/govuk_publishing_components\/components\/title/g'
 find app/views -type f -print0 | xargs -0 sed -i '' 's/govuk_component\/lead_paragraph/govuk_publishing_components\/components\/lead_paragraph/g'
 ```

diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
@@ -22,6 +22,7 @@
 @import "components/label";
 @import "components/lead-paragraph";
 @import "components/phase-banner";
+@import "components/previous-and-next-navigation";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/search";

diff --git a/...ets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss b/...ets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss
@@ -1,4 +1,4 @@
-.pub-c-pagination {
+.gem-c-pagination {
   display: block;
   margin-top: $gutter;
   margin-bottom: $gutter;
@@ -7,7 +7,7 @@
 }
 
 // scss-lint:disable SelectorFormat
-.pub-c-pagination__list {
+.gem-c-pagination__list {
   margin: 0;
   padding: 0;
 
@@ -18,7 +18,7 @@
   }
 }
 
-.pub-c-pagination__item {
+.gem-c-pagination__item {
   @include core-16($line-height: (20 / 16));
   float: left;
   list-style: none;
@@ -28,7 +28,7 @@
   width: 50%;
 }
 
-.pub-c-pagination__link {
+.gem-c-pagination__link {
   display: block;
   padding: $gutter-half;
   text-decoration: none;
@@ -43,12 +43,12 @@
   }
 }
 
-.pub-c-pagination__link-title {
+.gem-c-pagination__link-title {
   @include core-27($line-height: (33.75 / 27));
   display: block;
 }
 
-.pub-c-pagination__item--previous {
+.gem-c-pagination__item--previous {
   @include media-down(mobile) {
     float: none;
     width: 100%;
@@ -58,7 +58,7 @@
   text-align: left;
 }
 
-.pub-c-pagination__item--next {
+.gem-c-pagination__item--next {
   @include media-down(mobile) {
     float: none;
     width: 100%;
@@ -68,14 +68,14 @@
   text-align: right;
 }
 
-.pub-c-pagination__link-icon {
+.gem-c-pagination__link-icon {
   display: inline-block;
   margin-bottom: 1px;
   height: .482em;
   width: .63em;
 }
 
-.pub-c-pagination__link-label {
+.gem-c-pagination__link-label {
   display: inline-block;
   margin-top: 0.1em;
   text-decoration: underline;

diff --git a/...previous_and_next_navigation.raw.html.erb → ...ts/_previous_and_next_navigation.html.erb b/...previous_and_next_navigation.raw.html.erb → ...ts/_previous_and_next_navigation.html.erb
@@ -1,54 +1,54 @@
 <% if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page) %>
 <nav
-  class="pub-c-pagination"
+  class="gem-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">
+  <ul class="gem-c-pagination__list" data-module="track-click">
     <% if local_assigns.include?(:previous_page) %>
-      <li class="pub-c-pagination__item pub-c-pagination__item--previous">
+      <li class="gem-c-pagination__item gem-c-pagination__item--previous">
         <a href="<%= previous_page[:url] %>"
-          class="pub-c-pagination__link"
+          class="gem-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">
+          <span class="gem-c-pagination__link-title">
+            <svg class="gem-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>
+            <span class="gem-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">
+      <li class="gem-c-pagination__item gem-c-pagination__item--next">
         <a href="<%= next_page[:url] %>"
-          class="pub-c-pagination__link"
+          class="gem-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">
+          <span class="gem-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">
+            <svg class="gem-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>
+            <span class="gem-c-pagination__link-label"><%= next_page[:label] %></span>
           <% end %>
         </a>
       </li>

diff --git a/...ents/previous_and_next_navigation_test.rb → ...ents/previous_and_next_navigation_spec.rb b/...ents/previous_and_next_navigation_test.rb → ...ents/previous_and_next_navigation_spec.rb
@@ -1,40 +1,40 @@
-require 'govuk_component_test_helper'
+require 'rails_helper'
 
-class PreviousAndNextNavigationTestCase < ComponentTestCase
+describe "Previous and next navigation", type: :view do
   def component_name
     "previous_and_next_navigation"
   end
 
-  test "nothing renders if no parameters" do
+  it "renders if no parameters" do
     assert_empty render_component({})
   end
 
-  test "previous pagination appears" do
+  it "renders previous pagination" 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_select ".gem-c-pagination[role='navigation']"
+    assert_select ".gem-c-pagination__link-title", text: "Previous page"
+    assert_select ".gem-c-pagination__link-label", text: "1 of 3"
     assert_link("previous-page")
   end
 
-  test "next pagination appears" do
+  it "render pagination" 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_select ".gem-c-pagination__link-title", text: "Next page"
+    assert_select ".gem-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
+  it "makes distinction between the navigation text and label text of the links when a label is present" do
     render_component(
       previous_page: {
         url: "previous-page",
@@ -48,11 +48,11 @@ def component_name
       }
     )
 
-    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: ":"
+    assert_select ".gem-c-pagination__item--previous .gem-c-pagination__link .visually-hidden", text: ":"
+    assert_select ".gem-c-pagination__item--next .gem-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
+  it "does not make a distinction between the navigation text and label text of the links when labels are not present" do
     render_component(
       previous_page: {
         url: "previous-page",
@@ -64,7 +64,11 @@ def component_name
       }
     )
 
-    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
+    assert_select ".gem-c-pagination__item--previous .gem-c-pagination__link .visually-hidden", false
+    assert_select ".gem-c-pagination__item--next .gem-c-pagination__link .visually-hidden", false
+  end
+
+  def assert_link(link)
+    assert_select "a[href=\"#{link}\"]"
   end
 end