Merge pull request #19 from DFE-Digital/back-to-top-link

Adds back_to_top_link

This is a common link on govuk sites to take the user back to the top of
the page. It's in use on the design system site, though it's not
actually documented.

app/helpers/govuk_back_to_top_link_helper.rb

@@ -0,0 +1,14 @@
+module GovukBackToTopLinkHelper
+  def govuk_back_to_top_link
+    link_to '#top', class: 'govuk-link govuk-link--no-visited-state' do
+      <<-HTML.squish.html_safe
+      <svg class="app-back-to-top__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"></path>
+      </svg>
+      Back to top
+      HTML
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include GovukBackToTopLinkHelper }

docs/index.html

@@ -4,7 +4,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Dummy</title>
     <meta name="csrf-param" content="authenticity_token">
-<meta name="csrf-token" content="R5Q8FXQx9kCYUaKvy345d3RN31A27MYEMSuXtNN9CvS5Li8u4kKQ74mWXvx0smTur031eHkjmEhu1EmavmymwA==">
+<meta name="csrf-token" content="jztGJhpH2lbwUFfvzUHP5SS5dj+Mz/aZxr/xLRlBlOpsfSQdz4xFqWzLwUJjLN5XKKANnf7TtSaeSaATRyU9xg==">
 
 
     <style>/* line 7, node_modules/govuk-frontend/govuk/core/_links.scss */
@@ -10673,6 +10673,28 @@ <h2 class="govuk-heading-s">Header without service name</h2>
   </section>
 </article>
 
+
+    <article class="example govuk-!-margin-top-9" id="links">
+  <h2 class="govuk-heading-s">Links</h2>
+  <section>
+    <a class="govuk-link" href="/">Home</a>
+  </section>
+  <section>
+    <pre><code class="language-ruby">govuk_link_to('Home', '/')</code></pre>
+  </section>
+</article>
+
+
+    <article class="example govuk-!-margin-top-9" id="back-to-top-link">
+  <h2 class="govuk-heading-s">Back to top link</h2>
+  <section>
+    <a class="govuk-link govuk-link--no-visited-state" href="#top"><svg class="app-back-to-top__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"></path> </svg> Back to top</a>
+  </section>
+  <section>
+    <pre><code class="language-ruby">govuk_back_to_top_link</code></pre>
+  </section>
+</article>
+
   </div>
 </div>
 

lib/govuk/components/engine.rb

@@ -6,4 +6,4 @@ class Engine < ::Rails::Engine
   end
 end
 
-require Govuk::Components::Engine.root.join(*%w(app helpers govuk_link_helper))
+Dir[Govuk::Components::Engine.root.join(*%w(app helpers *.rb))].each { |f| require f }

spec/dummy/app/views/demos/show.html.erb

@@ -53,5 +53,7 @@ end} %>
     <%= render "example", title: 'Header without service name', example: %{render GovukComponent::Header.new(logo: 'Custom')} %>
 
     <%= render "example", title: 'Links', example: %{govuk_link_to('Home', '/')} %>
+
+    <%= render "example", title: 'Back to top link', example: %{govuk_back_to_top_link} %>
   </div>
 </div>

spec/helpers/govuk_back_to_top_link_helper_spec.rb

@@ -0,0 +1,13 @@
+require 'spec_helper'
+
+RSpec.describe(GovukBackToTopLinkHelper, type: 'helper') do
+  include ActionView::Helpers::UrlHelper
+  include ActionView::Context
+  subject { Capybara::Node::Simple.new(component) }
+
+  describe '#govuk_back_to_top_link' do
+    let(:component) { govuk_back_to_top_link }
+
+    it { is_expected.to(have_link('Back to top', href: '#top', class: 'govuk-link govuk-link--no-visited-state')) }
+  end
+end

spec/spec_helper.rb

@@ -5,6 +5,7 @@
 require File.expand_path("../dummy/config/environment", __FILE__)
 
 include GovukLinkHelper
+include GovukBackToTopLinkHelper
 
 # This file was generated by the `rspec --init` command. Conventionally, all
 # specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.