From 39797329ce3d904e231582399ac4f88d607755b0 Mon Sep 17 00:00:00 2001
From: Alex Jurubita <alexandru.jurubita@digital.cabinet-office.gov.uk>
Date: Mon, 1 Oct 2018 14:07:18 +0100
Subject: [PATCH] Add navigation and meta links to footer component

---
 CHANGELOG.md                                  |   1 +
 .../components/_layout_footer.html.erb        |  44 ++++++-
 .../components/docs/layout_footer.yml         | 120 +++++++++++++++++-
 spec/components/layout_footer_spec.rb         |  26 ++++
 4 files changed, 187 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9459438654..c7849df8bd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 * You can now use `GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment` to get the current environment, for use in the admin layout components (PR #548)
 * Update GOV.UK Frontend from 1.2.0 to 2.1.0 and manage breaking changes (PR #545)
+* Add navigation and meta links to footer component (PR #550)
 
 
 ## 11.0.0
diff --git a/app/views/govuk_publishing_components/components/_layout_footer.html.erb b/app/views/govuk_publishing_components/components/_layout_footer.html.erb
index fab12cff9a..61d4225c06 100644
--- a/app/views/govuk_publishing_components/components/_layout_footer.html.erb
+++ b/app/views/govuk_publishing_components/components/_layout_footer.html.erb
@@ -1,8 +1,50 @@
+<%
+  meta ||= []
+  navigation ||= []
+%>
 <footer class="gem-c-layout-footer govuk-footer" role="contentinfo">
   <div class="govuk-width-container ">
+    <% if navigation.any? %>
+      <div class="govuk-footer__navigation">
+        <% navigation.each do |item| %>
+          <div class="govuk-footer__section">
+            <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>
+            <% if item[:items] %>
+              <%
+                list_classes = %w( govuk-footer__list )
+                list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns]
+              %>
+              <ul class="<%= list_classes.join(' ') %>">
+                <% item[:items].each do |item| %>
+                  <% if item[:href] && item[:text] %>
+                    <li class="govuk-footer__list-item">
+                      <a class="govuk-footer__link" href="<%= item[:href] %>">
+                        <%= item[:text] %>
+                      </a>
+                    </li>
+                  <% end %>
+                <% end %>
+              </ul>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <hr class="govuk-footer__section-break">
+    <% end %>
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
+        <% if meta.any? %>
+          <h2 class="govuk-visually-hidden">Support links</h2>
+          <ul class="govuk-footer__inline-list">
+            <% meta[:items].each do |item| %>
+              <li class="govuk-footer__inline-list-item">
+                <a class="govuk-footer__link" href="<%= item[:href] %>">
+                  <%= item[:text] %>
+                </a>
+              </li>
+            <% end %>
+          </ul>
+        <% end %>
         <svg role="presentation" 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"
diff --git a/app/views/govuk_publishing_components/components/docs/layout_footer.yml b/app/views/govuk_publishing_components/components/docs/layout_footer.yml
index e36df562aa..90ef9ec8d6 100644
--- a/app/views/govuk_publishing_components/components/docs/layout_footer.yml
+++ b/app/views/govuk_publishing_components/components/docs/layout_footer.yml
@@ -3,10 +3,124 @@ description: The footer provides copyright, licensing and other information
 part_of_admin_layout: true
 govuk_frontend_components:
   - footer
+accessibility_criteria: |
+  Text and links in the Footer must:
+
+  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+
+  Links in the Footer must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when they have focus
+  - change in appearance when touched (in the touch-down state)
+  - change in appearance when hovered
+  - have visible text
+
+  Images in the Footer must:
+
+  - be presentational when linked to from accompanying text "Open Government Licence (OGL) icon".
+
+  Landmarks and Roles in the Footer should:
+
+  - avoid navigation landmarks or roles
+
+    The footer element alone is sufficient for such cases; while a [nav element](https://www.w3.org/TR/html52/sections.html#the-nav-element) can be used, it is usually unnecessary.
+
+    Note: This decision has been made based on prior experience seeing removal of overuse of `<nav>` elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK.
+    Should be challenged if user research indicates this is an issue.
+
+  - have a role of [`contentinfo`](https://www.w3.org/TR/wai-aria-1.1/#contentinfo) at the root of the component (<footer>)
+
+    Note: This decision has been made given that most uses of this role tend to be used directly on a `<footer>` element.
+    Assumption made is that is most predictable for users of assistive technologies.
+    The spec indicates that `contentinfo` is useful for "Examples of information included in this region of the page are copyrights and links to privacy statements.", which may indicate that it might be better placed around the 'meta' section of this component.
+    Should be challenged if user research indicates this is an issue.
 examples:
   default:
     data: {}
-accessibility_criteria: |
-  The component must:
 
-  * implement accessible links
+  with_meta:
+    data:
+      meta:
+        items:
+          - href: '/help'
+            text: Help
+          - href: '/help/cookies'
+            text: Cookies
+          - href: '/contact'
+            text: Contact
+          - href: '/help/terms-conditions'
+            text: Terms and conditions
+          - href: '/cymraeg'
+            text: Rhestr o Wasanaethau Cymraeg
+          - href: '/government/organisations/government-digital-service'
+            text: Government Digital Service
+
+  with_navigation:
+    data:
+      navigation:
+        - title: Services and information
+          columns: 2
+          items:
+            - href: '/browse/benefits'
+              text: Benefits
+            - href: '/browse/births-deaths-marriages'
+              text: Births, deaths, marriages and care
+            - href: '/browse/business'
+              text: Business and self-employed
+            - href: '/browse/childcare-parenting'
+              text: Childcare and parenting
+            - href: '/browse/citizenship'
+              text: Citizenship and living in the UK
+            - href: '/browse/justice'
+              text: Crime, justice and the law
+            - href: '/browse/disabilities'
+              text: Disabled people
+            - href: '/browse/driving'
+              text: Driving and transport
+            - href: '/browse/education'
+              text: Education and learning
+            - href: '/browse/employing-people'
+              text: Employing people
+            - href: '/browse/environment-countryside'
+              text: Environment and countryside
+            - href: '/browse/housing-local-services'
+              text: Housing and local services
+            - href: '/browse/tax'
+              text: Money and tax
+            - href: '/browse/abroad'
+              text: Passports, travel and living abroad
+            - href: '/browse/visas-immigration'
+              text: Visas and immigration
+            - href: '/browse/working'
+              text: Working, jobs and pensions
+        - title: Departments and policy
+          items:
+            - href: '/government/how-government-works'
+              text: How government works
+            - href: '/government/organisations'
+              text: Departments
+            - href: '/world'
+              text: Worldwide
+            - href: '/government/policies'
+              text: Policies
+            - href: '/government/publications'
+              text: Publications
+            - href: '/government/announcements'
+              text: Announcements
+      meta:
+        items:
+          - href: '/help'
+            text: Help
+          - href: '/help/cookies'
+            text: Cookies
+          - href: '/contact'
+            text: Contact
+          - href: '/help/terms-conditions'
+            text: Terms and conditions
+          - href: '/cymraeg'
+            text: Rhestr o Wasanaethau Cymraeg
+          - href: '/government/organisations/government-digital-service'
+            text: Government Digital Service
diff --git a/spec/components/layout_footer_spec.rb b/spec/components/layout_footer_spec.rb
index 3da58b2d62..f9459b241b 100644
--- a/spec/components/layout_footer_spec.rb
+++ b/spec/components/layout_footer_spec.rb
@@ -10,4 +10,30 @@ def component_name
 
     assert_select ".govuk-footer"
   end
+
+  it "renders the footer with meta links" do
+    render_component(meta: { items: [{ href: "/help", text: "Help" }] })
+
+    assert_select ".govuk-footer__meta .govuk-footer__link[href='/help']", text: "Help"
+  end
+
+  it "renders the footer with navigation" do
+    render_component(
+      navigation: [
+        {
+          title: "Services and information",
+          columns: 2,
+          items: [
+            {
+              href: "/browse/benefits",
+              text: "Benefits"
+            }
+          ]
+        }
+      ]
+    )
+
+    assert_select ".govuk-footer__navigation .govuk-footer__heading", text: "Services and information"
+    assert_select ".govuk-footer__navigation .govuk-footer__list--columns-2 .govuk-footer__link[href='/browse/benefits']", text: "Benefits"
+  end
 end