Merge pull request #20 from DFE-Digital/skip-link

Skip link Adds a helper for the skip link https://design-system.service.gov.uk/components/skip-link/
x-govuk · May 20, 2020 · c215577 · c215577
2 parents c8677b7 + 2693781
commit c215577
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 4 deletions.
diff --git a/app/helpers/govuk_skip_link_helper.rb b/app/helpers/govuk_skip_link_helper.rb
@@ -0,0 +1,6 @@
+module GovukSkipLinkHelper
+  def govuk_skip_link(text: 'Skip to main content', href: '#main-content')
+    link_to text, href, class: 'govuk-skip-link'
+  end
+end
+ActiveSupport.on_load(:action_view) { include GovukSkipLinkHelper }
diff --git a/docs/index.html b/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="jztGJhpH2lbwUFfvzUHP5SS5dj+Mz/aZxr/xLRlBlOpsfSQdz4xFqWzLwUJjLN5XKKANnf7TtSaeSaATRyU9xg==">
+<meta name="csrf-token" content="tys28Qfu90k/mBQMeInxwHZsXk7gzWj+sLHN/F+ZCFlI+kGjityWK57VkALdee+1woAVY5usuufal0Thf7C3jg==">
 
 
     <style>/* line 7, node_modules/govuk-frontend/govuk/core/_links.scss */
@@ -10416,8 +10416,9 @@
   </head>
 
   <body>
+    <a class="govuk-skip-link" href="#main-content">Skip to main content</a>
     <div class="govuk-width-container">
-      <main class="govuk-main-wrapper">
+      <main class="govuk-main-wrapper" id="main-content">
         <div class="govuk-grid-row">
   <div class="govuk-grid-column-full">
     <h1 class="govuk-heading-xl">GovukComponents</h1>
@@ -10695,6 +10696,39 @@ <h2 class="govuk-heading-s">Back to top link</h2>
   </section>
 </article>
 
+
+    <article class="example govuk-!-margin-top-9" id="skip-link">
+  <h2 class="govuk-heading-s">Skip link</h2>
+  <section>
+    <a class="govuk-skip-link" href="#main-content">Skip to main content</a>
+  </section>
+  <section>
+    <pre><code class="language-ruby">govuk_skip_link</code></pre>
+  </section>
+</article>
+
+
+    <article class="example govuk-!-margin-top-9" id="skip-link-with-custom-text">
+  <h2 class="govuk-heading-s">Skip link with custom text</h2>
+  <section>
+    <a class="govuk-skip-link" href="#main-content">Skip to important information</a>
+  </section>
+  <section>
+    <pre><code class="language-ruby">govuk_skip_link text: 'Skip to important information'</code></pre>
+  </section>
+</article>
+
+
+    <article class="example govuk-!-margin-top-9" id="skip-link-with-custom-href">
+  <h2 class="govuk-heading-s">Skip link with custom href</h2>
+  <section>
+    <a class="govuk-skip-link" href="#skip-link-target">Skip to main content</a>
+  </section>
+  <section>
+    <pre><code class="language-ruby">govuk_skip_link href: '#skip-link-target'</code></pre>
+  </section>
+</article>
+
   </div>
 </div>
 

diff --git a/spec/dummy/app/views/demos/show.html.erb b/spec/dummy/app/views/demos/show.html.erb
@@ -55,5 +55,11 @@ end} %>
     <%= render "example", title: 'Links', example: %{govuk_link_to('Home', '/')} %>
 
     <%= render "example", title: 'Back to top link', example: %{govuk_back_to_top_link} %>
+
+    <%= render "example", title: 'Skip link', example: %{govuk_skip_link} %>
+
+    <%= render "example", title: 'Skip link with custom text', example: %{govuk_skip_link text: 'Skip to important information'} %>
+
+    <%= render "example", title: 'Skip link with custom href', example: %{govuk_skip_link href: '#skip-link-target'} %>
   </div>
 </div>
diff --git a/spec/dummy/app/views/layouts/application.html.erb b/spec/dummy/app/views/layouts/application.html.erb
@@ -10,8 +10,9 @@
   </head>
 
   <body>
+    <%= govuk_skip_link %>
     <div class="govuk-width-container">
-      <main class="govuk-main-wrapper">
+      <main class="govuk-main-wrapper" id="main-content">
         <%= yield %>
       </main>
     </div>

diff --git a/spec/helpers/govuk_skip_link_helper_spec.rb b/spec/helpers/govuk_skip_link_helper_spec.rb
@@ -0,0 +1,31 @@
+require 'spec_helper'
+
+RSpec.describe(GovukSkipLinkHelper, type: 'helper') do
+  include ActionView::Helpers::UrlHelper
+
+  let(:text) { 'Get straight to the important stuff' }
+  let(:href) { '#skip-link-target' }
+  subject { Capybara::Node::Simple.new(component) }
+
+  describe '#govuk_skip_link' do
+    context 'when text not provided' do
+      let(:component) { govuk_skip_link }
+      it { is_expected.to(have_link('Skip to main content', href: '#main-content', class: 'govuk-skip-link')) }
+    end
+
+    context 'when text provided' do
+      let(:component) { govuk_skip_link text: text }
+      it { is_expected.to(have_link(text, href: '#main-content', class: 'govuk-skip-link')) }
+    end
+
+    context 'when href not provided' do
+      let(:component) { govuk_skip_link }
+      it { is_expected.to(have_link('Skip to main content', href: '#main-content', class: 'govuk-skip-link')) }
+    end
+
+    context 'when href provided' do
+      let(:component) { govuk_skip_link href: href }
+      it { is_expected.to(have_link('Skip to main content', href: href, class: 'govuk-skip-link')) }
+    end
+  end
+end
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
@@ -6,7 +6,7 @@
 
 include GovukLinkHelper
 include GovukBackToTopLinkHelper
-
+include GovukSkipLinkHelper
 # This file was generated by the `rspec --init` command. Conventionally, all
 # specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
 # The generated `.rspec` file contains `--require spec_helper` which will cause