Merge pull request #367 from alphagov/back-to-top-link

Back to top arrow style updated
alphagov · Jun 12, 2017 · 0b83bf5 · 0b83bf5
2 parents 98c17d4 + 82f4801
commit 0b83bf5
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 17 deletions.
diff --git a/app/assets/stylesheets/helpers/_back-to-content.scss b/app/assets/stylesheets/helpers/_back-to-content.scss
@@ -1,10 +1,18 @@
 .back-to-content {
-  @include core-19;
+  @include core-16;
   display: inline-block;
   margin-bottom: $gutter-half;
 
-  &:before {
-    content: "\2191";
+  .icon {
+    float: left;
+    margin-right: .3em;
+    width: .8em;
+    height: .968em;
+  }
+
+  // TODO: Update grid to allow this behaviour without this hack
+  .sidebar-with-body & {
+    margin-left: $gutter-half;
   }
 
   @media print {

diff --git a/app/assets/stylesheets/helpers/_sidebar-with-body.scss b/app/assets/stylesheets/helpers/_sidebar-with-body.scss
@@ -1,5 +1,6 @@
 @mixin sidebar-with-body {
   .sidebar-with-body {
+    position: relative;
     margin-bottom: $gutter * 1.5;
   }
 

diff --git a/app/views/content_items/detailed_guide.html.erb b/app/views/content_items/detailed_guide.html.erb
@@ -44,7 +44,7 @@
     <% end %>
     <%= render 'govuk_component/govspeak', @content_item.govspeak_body %>
   </div>
-  <div data-sticky-element class="sticky-element">
+  <div data-sticky-element class="govuk-sticky-element">
     <%= render 'shared/back_to_content_link' %>
   </div>
 </div>

diff --git a/app/views/content_items/document_collection.html.erb b/app/views/content_items/document_collection.html.erb
@@ -6,7 +6,11 @@
 <%= render 'shared/history_notice', content_item: @content_item %>
 <%= render 'shared/description', description: @content_item.description %>
 
-<div class="grid-row sidebar-with-body">
+<div
+  class="grid-row sidebar-with-body"
+  data-module="sticky-element-container"
+  id="contents"
+>
   <% if @content_item.contents.any? %>
     <div class="column-third">
       <%= render 'shared/sidebar_contents', contents: @content_item.contents %>
@@ -42,6 +46,9 @@
       </ol>
     <% end %>
   </div>
+  <div data-sticky-element class="govuk-sticky-element">
+    <%= render 'shared/back_to_content_link' %>
+  </div>
 </div>
 
 <%= render 'shared/footer', @content_item.document_footer %>
diff --git a/app/views/shared/_back_to_content_link.html.erb b/app/views/shared/_back_to_content_link.html.erb
@@ -1,11 +1,11 @@
-<%= link_to(
-  t('content_item.contents'),
-  '#contents',
-  class: 'back-to-content',
-  data: {
-    track_category: 'contentsClicked',
-    track_action: 'backToContentsLinkClicked',
-    track_label: 'contents',
-    module: 'track-click',
-  },
-) %>
+<a class="back-to-content"
+  data-track-category="contentsClicked"
+  data-track-action="backToContentsLinkClicked"
+  data-track-label="contents"
+  data-module="track-click"
+  href="#contents">
+    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
+      <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"/>
+    </svg>
+    <%= t('content_item.contents') %>
+</a>
diff --git a/app/views/shared/_sidebar_contents_with_body.html.erb b/app/views/shared/_sidebar_contents_with_body.html.erb
@@ -1,5 +1,9 @@
 <% body ||= content_item.body %>
-<div class="grid-row sidebar-with-body">
+<div
+  class="grid-row sidebar-with-body"
+  data-module="sticky-element-container"
+  id="contents"
+>
   <% if content_item.contents.any? %>
     <div class="column-third">
       <%= render 'shared/sidebar_contents', contents: @content_item.contents %>
@@ -10,4 +14,7 @@
         content: body,
         direction: page_text_direction %>
   </div>
+  <div data-sticky-element class="govuk-sticky-element">
+    <%= render 'shared/back_to_content_link' %>
+  </div>
 </div>