Merge pull request #1051 from alphagov/new-prev-next-updates

Previous and Next component design iteration
alphagov · May 24, 2017 · 439c6d0 · 439c6d0
2 parents ae3d375 + bc36ae5
commit 439c6d0
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 52 deletions.
diff --git a/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss b/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss
@@ -2,6 +2,8 @@
   display: block;
   margin-top: $gutter;
   margin-bottom: $gutter;
+  margin-left: -$gutter-half;
+  margin-right: -$gutter-half;
 
   ul {
     margin: 0;
@@ -15,15 +17,15 @@
     text-align: right;
     margin: 0;
     padding: 0;
-    width: 49%;
+    width: 50%;
 
     a {
       display: block;
-      color: $link-colour;
+      padding: $gutter-half;
       text-decoration: none;
 
-      @include ie-lte(7) {
-        height: 4.5em;
+      &:visited {
+        color: $link-colour;
       }
 
       &:hover,
@@ -33,62 +35,47 @@
 
       .pagination-part-title {
         @include core-27($line-height: (33.75 / 27));
-        margin-bottom: 0.1em;
         display: block;
       }
-
-    }
-
-    &.next-page a:before,
-    &.previous-page a:before {
-      margin-top: -4px;
-      display: block;
-      width: 30px;
-      height: 38px;
-      content: " ";
-    }
-
-    &.next-page a:before {
-      background: transparent image-url("govuk-component/arrow-sprite.png") no-repeat -102px -11px;
-      margin-right: -32px;
-      float: right;
     }
+  }
 
-    &.previous-page a:before {
-      background: transparent image-url("govuk-component/arrow-sprite.png") no-repeat -20px -11px;
-      margin-left: -32px;
-      float: left;
-    }
+  .previous-page {
+    float: left;
+    text-align: left;
+  }
 
-    &.previous-page {
-      float: left;
-      text-align: left;
-    }
+  .next-page {
+    float: right;
+    text-align: right;
+  }
 
-    &.previous-page a {
-      padding: 0.75em 0 0.75em 3em;
+  @include media-down(mobile) {
+    .previous-page,
+    .next-page {
+      float: none;
+      width: 100%;
     }
 
-    &.next-page {
-      float: right;
+    .next-page a {
       text-align: right;
     }
+  }
 
-    &.next-page a {
-      padding: 0.75em 3em 0.75em 0;
-    }
+  .pagination-icon {
+    display: inline-block;
+    margin-bottom: 1px;
+    height: .482em;
+    width: .63em;
+  }
 
-    @include media-down(mobile) {
-      &.previous-page,
-      &.next-page {
-        float: none;
-        width: 100%;
-      }
+  .pagination-label {
+    display: inline-block;
+    margin-top: 0.1em;
+    text-decoration: underline;
 
-      &.next-page a {
-        text-align: right;
-      }
+    &:empty {
+      display: none;
     }
   }
-
 }
diff --git a/app/views/govuk_component/docs/previous_and_next_navigation.yml b/app/views/govuk_component/docs/previous_and_next_navigation.yml
@@ -38,3 +38,12 @@ fixtures:
     next_page:
       url: next-page
       title: Next page
+  become_a_lorry_bus_driver_example:
+    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'
diff --git a/app/views/govuk_component/previous_and_next_navigation.raw.html.erb b/app/views/govuk_component/previous_and_next_navigation.raw.html.erb
@@ -7,17 +7,31 @@
   <ul class="group">
     <% if local_assigns.include?(:previous_page) %>
       <li class="previous-page">
-        <a href="<%= previous_page[:url] %>" rel="prev" >
-          <span class="pagination-part-title"><%= previous_page[:title] %></span>
-          <span class="pagination-label"><%= previous_page[:label] %></span>
+        <a href="<%= previous_page[:url] %>" rel="prev">
+          <span class="pagination-part-title">
+            <svg class="pagination-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="pagination-label"><%= previous_page[:label] %></span>
+          <% end %>
         </a>
       </li>
     <% end %>
     <% if local_assigns.include?(:next_page) %>
       <li class="next-page">
         <a href="<%= next_page[:url] %>" rel="next">
-          <span class="pagination-part-title"><%= next_page[:title] %></span>
-          <span class="pagination-label"><%= next_page[:label] %></span>
+          <span class="pagination-part-title">
+            <%= next_page[:title] %>
+            <svg class="pagination-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="pagination-label"><%= next_page[:label] %></span>
+          <% end %>
         </a>
       </li>
     <% end %>