Add the footer component

README.md

@@ -13,7 +13,7 @@ The gem will include the following components and helpers, [track their progress
 * Back link ✔️
 * Breadcrumbs ✔️
 * Details ✔️
-* Footer
+* Footer ✔️
 * Header ✔️
 * Inset text ✔️
 * Panel ✔️

app/components/govuk_component/footer.html.erb

@@ -0,0 +1,30 @@
+<footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
+    <% if content.present? %>
+      <%= content %>
+    <% end %>
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        <% if @meta_links.any? %>
+          <%= @meta_heading %>
+          <ul class="govuk-footer__inline-list">
+            <% @meta_links.each do |meta_link| %>
+              <li class="govuk-footer__inline-list-item">
+                <%= meta_link %>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+        </svg>
+        <span class="govuk-footer__licence-description">
+          <%= @licence %>
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <%= @copyright %>
+      </div>
+    </div>
+  </div>
+</footer>

app/components/govuk_component/footer.rb

@@ -0,0 +1,42 @@
+class GovukComponent::Footer < ViewComponent::Base
+  attr_accessor :meta, :licence, :copyright
+
+  def initialize(meta_links: nil, meta_heading: default_meta_heading, licence: nil, copyright_text: default_copright_text, copyright_url: default_copyright_url)
+    @meta_links   = build_meta_links(meta_links)
+    @meta_heading = raw(tag.h2(meta_heading, class: 'govuk-visually-hidden'))
+    @licence      = licence || default_licence
+    @copyright    = build_copyright(copyright_text, copyright_url)
+  end
+
+private
+
+  def build_meta_links(links)
+    return [] if links.blank?
+
+    fail(ArgumentError, 'meta links must be a hash') unless links.is_a?(Hash)
+
+    links.map { |text, href| raw(link_to(text, href, class: %w(govuk-footer__link))) }
+  end
+
+  def default_meta_heading
+    'Supporting links'
+  end
+
+  def default_licence
+    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/")
+
+    raw(%(All content is available under the #{link}, except where otherwise stated))
+  end
+
+  def build_copyright(text, url)
+    link_to(text, url, class: %w(govuk-footer__link govuk-footer__copyright-logo))
+  end
+
+  def default_copright_text
+    raw(%(&copy Crown copyright))
+  end
+
+  def default_copyright_url
+    "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
+  end
+end

docs/index.html

@@ -10825,6 +10825,99 @@ <h2 class="govuk-heading-s">Warning with custom icon fallback text</h2>
   </section>
 </article>
 
+
+    <article class="example govuk-!-margin-top-9" id="default-footer">
+  <h2 class="govuk-heading-s">Default footer</h2>
+  <section>
+    <footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">&amp;copy Crown copyright</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+  </section>
+  <section>
+    <pre><code class="language-ruby">render GovukComponent::Footer.new</code></pre>
+  </section>
+</article>
+
+
+    <article class="example govuk-!-margin-top-9" id="footer-with-custom-text">
+  <h2 class="govuk-heading-s">Footer with custom text</h2>
+  <section>
+    <footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+        </svg>
+        <span class="govuk-footer__licence-description">
+          Custom licence
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://design-system.service.gov.uk/">Custom copyright</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+  </section>
+  <section>
+    <pre><code class="language-ruby">render GovukComponent::Footer.new(licence: 'Custom licence', copyright_text: 'Custom copyright', copyright_url: 'https://design-system.service.gov.uk/')</code></pre>
+  </section>
+</article>
+
+
+    <article class="example govuk-!-margin-top-9" id="footer-with-meta-links">
+  <h2 class="govuk-heading-s">Footer with meta links</h2>
+  <section>
+    <footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+          <h2 class="govuk-visually-hidden">Supporting links</h2>
+          <ul class="govuk-footer__inline-list">
+              <li class="govuk-footer__inline-list-item">
+                <a class="govuk-footer__link" href="/one">One</a>
+              </li>
+              <li class="govuk-footer__inline-list-item">
+                <a class="govuk-footer__link" href="/two">Two</a>
+              </li>
+          </ul>
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">&amp;copy Crown copyright</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+  </section>
+  <section>
+    <pre><code class="language-ruby">render GovukComponent::Footer.new(meta_links: { One: "/one", Two: "/two" }, meta_heading: 'Supporting links')</code></pre>
+  </section>
+</article>
+
   </div>
 </div>
 

spec/components/govuk_component/footer_spec.rb

@@ -0,0 +1,112 @@
+require 'spec_helper'
+
+RSpec.describe(GovukComponent::Footer, type: :component) do
+  subject do
+    Capybara::Node::Simple.new(render_inline(component).to_html)
+  end
+
+  context 'when no arguments are supplied' do
+    let(:component) { GovukComponent::Footer.new }
+
+    specify 'the default licence info is included' do
+      expect(subject).to have_css('footer.govuk-footer .govuk-footer__meta') do
+        expect(page).to have_css('.govuk-footer__licence-description') do
+          expect(page).to have_content(/All content is available under/)
+          expect(page).to have_link("Open Government Licence v3.0", href: "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/")
+        end
+      end
+    end
+
+    specify 'the default copyright information is included' do
+      expect(subject).to have_css('footer.govuk-footer .govuk-footer__meta') do
+        expect(page).to have_css('.govuk-footer__meta-item', text: %r{\&copy Crown copyright})
+      end
+    end
+
+    specify 'the crown symbol is included' do
+      expect(subject).to have_css('footer.govuk-footer .govuk-footer__meta') do
+        expect(page).to have_css('svg', class: 'govuk-footer__licence-logo')
+      end
+    end
+  end
+
+  context 'when custom licence and copyright info are supplied' do
+    let(:custom_copyright) { "All rights reserved" }
+    let(:custom_copyright_url) { "https://en.wikipedia.org/wiki/All_rights_reserved" }
+    let(:custom_licence_url) { "https://mit-license.org/" }
+    let(:custom_licence) do
+      %(Licenced under the <a href="#{custom_licence_url}">MIT Licence</a>.)
+    end
+
+    let(:component) { GovukComponent::Footer.new(licence: custom_licence, copyright_text: custom_copyright, copyright_url: custom_copyright_url) }
+
+    specify 'the custom licence should have replaced the default' do
+      expect(subject).to have_css('footer.govuk-footer .govuk-footer__meta') do
+        within('.govuk-footer__licence-description') do
+          expect(page).to have_content(custom_licence)
+          expect(page).to have_link("MIT Licence", href: custom_licence_url)
+
+          expect(page).not_to content(/All content is available under/)
+        end
+      end
+    end
+
+    specify 'the custom copyright should have replaced the default' do
+      expect(subject).to have_css('footer.govuk-footer .govuk-footer__meta') do
+        expect(page).to have_css('.govuk-footer__meta-item') do
+          expect(page).to have_link(custom_copyright, href: custom_copyright_url)
+        end
+      end
+    end
+  end
+
+  xcontext 'when custom content is passed in' do
+    let(:content) do
+      capture do
+        content_tag('nav') do
+          concat(tag.h3('Navigation'))
+        end
+      end
+    end
+    let(:component) { GovukComponent::Footer.new { content } }
+
+    specify 'the content should be rendered' do
+      expect(subject).to have_css('footer.govuk-footer .govuk-footer__meta') do
+        expect(page).to have_css('nav', text: 'Navigation')
+      end
+    end
+  end
+
+  describe 'meta links' do
+    let(:component) { GovukComponent::Footer.new(meta_links: links, meta_heading: heading) }
+
+    context 'when meta links are supplied' do
+      let(:heading) { 'Related info' }
+
+      let(:links) do
+        { one: '/one', two: '/two', three: '/three' }
+      end
+
+      it { is_expected.to have_css('ul.govuk-footer__inline-list') }
+      it { is_expected.to have_css('h2', class: 'govuk-visually-hidden', text: heading) }
+
+      specify 'the meta links should be rendered' do
+        expect(subject).to have_css('footer.govuk-footer .govuk-footer__meta') do
+          expect(page).to have_css('li', class: 'govuk-footer__inline-list-item', count: links.size)
+
+          links.each do |text, href|
+            expect(page).to have_link(text, href: href)
+          end
+        end
+      end
+    end
+
+    context 'when no meta links are supplied' do
+      let(:links) { {} }
+      let(:heading) { 'This should be absent' }
+
+      it { is_expected.not_to have_css('ul.govuk-footer__inline-list') }
+      it { is_expected.not_to have_css('h2', class: 'govuk-visually-hidden', text: heading) }
+    end
+  end
+end

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

@@ -74,5 +74,11 @@ end} %>
     <%= render "example", title: 'Warning with custom classes', example: %{render GovukComponent::Warning.new(text: "Lookin' out the window, that's a paddlin'", classes: 'my-custom-class')} %>
 
     <%= render "example", title: 'Warning with custom icon fallback text', example: %{render GovukComponent::Warning.new(text: "Starin' at my sandals, that's a paddlin'", icon_fallback_text: "Paddlin' warning")} %>
+
+    <%= render "example", title: 'Default footer', example: %{render GovukComponent::Footer.new} %>
+
+    <%= render "example", title: 'Footer with custom text', example: %{render GovukComponent::Footer.new(licence: 'Custom licence', copyright_text: 'Custom copyright', copyright_url: 'https://design-system.service.gov.uk/')} %>
+
+    <%= render "example", title: 'Footer with meta links', example: %{render GovukComponent::Footer.new(meta_links: { One: "/one", Two: "/two" }, meta_heading: 'Supporting links')} %>
   </div>
 </div>