Add support for footer sections that span multiple columns

CHANGELOG.md

@@ -136,6 +136,22 @@ If you're passing custom HTML into the cookie banner component (for example, usi
 
 This change was introduced in [pull request #2432: Remove default font styles from cookie banner Sass](https://github.com/alphagov/govuk-frontend/pull/2432).
 
+#### Check your footer displays as expected
+
+We’ve made some fixes to the alignment of columns within the footer component, so they align with our grid. This involved changing the name and position of the `govuk-footer__list—columns` classes.
+
+Replace any instances of `govuk-footer__list—columns` classes with `govuk-footer__section—columns`.
+
+If you're using HTML, you'll also need to move the classes from the `govuk-footer__list` element to the `govuk-footer__section` element. For example:
+
+```
+<div class="govuk-footer__section govuk-footer__section—columns-2">
+  <ul class="govuk-footer__list">...</ul>
+</div>
+```
+
+This change was introduced in [pull request #2428: Fix footer alignment with grid classes](https://github.com/alphagov/govuk-frontend/pull/2428) and [pull request #2446: Add support for footer sections that span multiple columns](https://github.com/alphagov/govuk-frontend/pull/2446).
+
 ### Optional changes
 
 We've recently made some other changes to GOV.UK Frontend. While these are not breaking changes, implementing them will make your service work better.
@@ -181,6 +197,24 @@ If you’re not using Nunjucks macros, add a new `data-nosnippet` attribute to t
 
 This was added in [pull request #2192: Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets](https://github.com/alphagov/govuk-frontend/pull/2192).
 
+### New Features
+
+#### Add footer sections which span multiple columns
+
+You can now have footer sections which span multiple columns, but do not contain multiple columns of list items.
+
+This may be helpful if you want to highlight a specific link in the footer, but you also want it to align with a section below that has multiple columns of list items.
+
+To do this, use the `span` macro option. If you're using the HTML component, apply the appropriate class to the `govuk-footer__section` element, for example:
+
+```
+<div class="govuk-footer__section govuk-footer__section—span-2">
+  <ul class="govuk-footer__list">...</ul>
+</div>
+```
+
+This feature was introduced in [pull request #2446: Add support for footer sections that span multiple columns](https://github.com/alphagov/govuk-frontend/pull/2446)
+
 ### Fixes
 
 We’ve made fixes to GOV.UK Frontend in the following pull requests:

app/views/full-page-examples/campaign-page/index.njk

@@ -13,6 +13,7 @@ notes: >-
 {% from "header/macro.njk" import govukHeader %}
 {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
 {% from "accordion/macro.njk" import govukAccordion %}
+{% from "footer/macro.njk" import govukFooter %}
 
 {% set pageTitle = "Coronavirus (COVID‑19)" %}
 {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
@@ -230,3 +231,145 @@ notes: >-
     </div>
   </div>
 {% endblock %}
+
+{% block footer %}
+
+
+  {{ govukFooter({
+    navigation: [
+      {
+        title: "Coronavirus (COVID-19)",
+        columns: 2,
+        items: [
+          {
+            href: "#",
+            text: "Coronavirus (COVID-19): guidance and support"
+          },
+          {
+            href: "#",
+            text: "Another link"
+          },
+          {
+            href: "#",
+            text: "Another link"
+          },
+          {
+            href: "#4",
+            text: "Another link"
+          }
+        ]
+      },
+      {
+        title: "Services and Information",
+        columns: 2,
+        items: [
+          {
+            href: "#",
+            text: "Benefits"
+          },
+          {
+            href: "#",
+            text: "Births, deaths and marriages"
+          },
+          {
+            href: "#",
+            text: "Business and self-employed"
+          },
+          {
+            href: "#",
+            text: "Childcare and parenting"
+          },
+          {
+            href: "#",
+            text: "Citizenship and living in the UK"
+          },
+          {
+            href: "#",
+            text: "Crime, justice and the law"
+          },
+          {
+            href: "#",
+            text: "Disabled people"
+          },
+          {
+            href: "#",
+            text: "Driving and transport"
+          },
+          {
+            href: "#",
+            text: "Education and learning"
+          },
+          {
+            href: "#",
+            text: "Employing people"
+          },
+          {
+            href: "#",
+            text: "Environment and countryside"
+          },
+          {
+            href: "#",
+            text: "Housing and local services"
+          },
+          {
+            href: "#",
+            text: "Money and tax"
+          },
+          {
+            href: "#",
+            text: "Passports and living abroad"
+          },
+          {
+            href: "#",
+            text: "Visas and immigration"
+          },
+          {
+            href: "#",
+            text: "Working, jobs and pensions"
+          }
+        ]
+      },
+      {
+        title: "Departments and policy",
+        items: [
+          {
+            href: "#",
+            text: "How government works"
+          },
+          {
+            href: "#",
+            text: "Departments"
+          },
+          {
+            href: "#",
+            text: "Worldwide"
+          },
+          {
+            href: "#",
+            text: "Services"
+          },
+          {
+            href: "#",
+            text: "Guidance and regulation"
+          },
+          {
+            href: "#",
+            text: "News and communications"
+          },
+          {
+            href: "#",
+            text: "Research and statistics"
+          },
+          {
+            href: "#",
+            text: "Policy papers and consultations"
+          },
+          {
+            href: "#",
+            text: "Transparency and freedom of information releases"
+          }
+        ]
+      }
+    ]
+  }) }}
+{% endblock %}

src/govuk/components/footer/_index.scss

@@ -171,21 +171,23 @@
   }
 
   @include govuk-media-query ($from: tablet) {
-    .govuk-footer__section--span-2 {
+    .govuk-footer__section--span-2,
+    .govuk-footer__section--columns-2 {
       flex-grow: 0;
       width: (2 * 100% / 3);
     }
 
-    .govuk-footer__section--span-2 .govuk-footer__list {
+    .govuk-footer__section--columns-2 .govuk-footer__list {
       column-count: 2; // Support: Columns
     }
 
-    .govuk-footer__section--span-3 {
+    .govuk-footer__section--span-3,
+    .govuk-footer__section--columns-3 {
       flex-grow: 0;
       width: 100%;
     }
 
-    .govuk-footer__section--span-3 .govuk-footer__list {
+    .govuk-footer__section--columns-3 .govuk-footer__list {
       column-count: 3; // Support: Columns
     }
   }

src/govuk/components/footer/footer.yaml

@@ -46,6 +46,10 @@ params:
     type: integer
     required: false
     description: Amount of columns to display items in navigation section of the footer.
+  - name: span
+    type: integer
+    required: false
+    description: Amount of columns to span (without wrapping) in navigation section of the footer. Useful if you have a multi-row layout. Overrides columns.
   - name: items
     type: array
     required: false
@@ -188,10 +192,19 @@ examples:
           - href: '#3'
             text: Navigation item 3
 
-- name: GOV.UK
+- name: Full GDS example
   description: A full example based on GOV.UK's current footer
   data:
     navigation:
+      - title: Coronavirus (COVID-19)
+        span: 2
+        items:
+          - href: '/coronavirus'
+            text: 'Coronavirus (COVID-19): guidance and support'
+      - title: Brexit
+        items:
+          - href: '/brexit'
+            text: Check what you need to do
       - title: Services and information
         columns: 2
         items:
@@ -235,12 +248,18 @@ examples:
             text: Departments
           - href: '/world'
             text: Worldwide
-          - href: '/government/policies'
-            text: Policies
-          - href: '/government/publications'
-            text: Publications
-          - href: '/government/announcements'
-            text: Announcements
+          - href: '/search/services'
+            text: Services
+          - href: '/search/guidance-and-regulation'
+            text: Guidance and regulation
+          - href: '/search/news-and-communications'
+            text: News and communications
+          - href: '/search/research-and-statistics'
+            text: Research and statistics
+          - href: '/search/policy-papers-and-consultations'
+            text: Policy papers and consultations
+          - href: '/search/transparency-and-freedom-of-information-releases'
+            text: Transparency and freedom of information release
     meta:
       items:
         - href: '/help'

src/govuk/components/footer/template.njk

@@ -5,8 +5,10 @@
       <div class="govuk-footer__navigation">
         {% for nav in params.navigation %}
           {% set sectionClasses -%}
-            {%- if nav.columns -%}
-              govuk-footer__section--span-{{ nav.columns }}
+            {%- if nav.span -%}
+              govuk-footer__section--span-{{ nav.span }}
+            {%- elif nav.columns -%}
+              govuk-footer__section--columns-{{ nav.columns }}
             {%- endif -%}
           {%- endset %}
           <div class="govuk-footer__section{% if sectionClasses %} {{ sectionClasses }}{% endif %}">

src/govuk/components/footer/template.test.js

@@ -176,7 +176,7 @@ describe('footer', () => {
 
       const $component = $('.govuk-footer')
       const $section = $component.find('div.govuk-footer__section')
-      expect($section.hasClass('govuk-footer__section--span-2')).toBeTruthy()
+      expect($section.hasClass('govuk-footer__section--columns-2')).toBeTruthy()
     })
   })