[refs #168] Footer list links columns

Added a variant for the nhsuk-footer__list which puts the list
into three columns from desktop.

CHANGELOG.md

@@ -1,6 +1,10 @@
 # NHS.UK frontend Changelog
 
-## 2.1.1 - Unreleased
+## 2.2.0 - Unreleased
+
+:new: **New features**
+
+- Footer - A variant for footer links to be in lists in 3 columns, which can be used when there are more than just a few links. You can find the markup and example in the [Footer component README](https://github.com/nhsuk/nhsuk-frontend/blob/master/packages/components/footer/README.md#footer-with-list-columns) [(Issue 168)](https://github.com/nhsuk/nhsuk-frontend/issues/168)
 
 :wrench: **Fixes**
 

app/components/footer/columns.njk

@@ -0,0 +1,46 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Footer with list columns' %}
+{% from 'components/footer/macro.njk' import footer %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  {{ footer({
+    "list": "nhsuk-footer__list--three-columns",
+    "links": [
+      {
+        "URL": "#",
+        "label": "NHS sites"
+      },
+      {
+        "URL": "#",
+        "label": "About us"
+      },
+      {
+        "URL": "#",
+        "label": "Contact us"
+      },
+      {
+        "URL": "#",
+        "label": "Sitemap"
+      },
+      {
+        "URL": "#",
+        "label": "Accessibility"
+      },
+      {
+        "URL": "#",
+        "label": "Our policies"
+      },
+      {
+        "URL": "#",
+        "label": "Cookies"
+      },
+      {
+        "URL": "#",
+        "label": "Profile editor login"
+      }
+    ]
+  })}}
+
+{% endblock %}

app/pages/examples.njk

@@ -54,6 +54,7 @@
     <li><a href="../components/fieldset/page-heading.html">Fieldset as page heading</a></li>
     <li><a href="../components/fieldset/with-inputs.html">Fieldset with inputs</a></li>
     <li><a href="../components/footer/index.html">Footer</a></li>
+    <li><a href="../components/footer/columns.html">Footer with list columns</a></li>
     <li><a href="../components/header/index.html">Header</a></li>
     <li><a href="../components/header/header-logo.html">Header with logo only</a></li>
     <li><a href="../components/header/header-service-name.html">Header with service name and search</a></li>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-frontend",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "scripts": {
     "prepare": "gulp bundle",

packages/components/footer/README.md

@@ -5,11 +5,13 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 ## Guidance
 Find out more about the footer component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/styles-components-patterns/footer).
 
-## Quick start example
+## Quick start examples
+
+### Footer
 
 [Preview the footer component](https://nhsuk.github.io/nhsuk-frontend/components/footer/index.html)
 
-### HTML markup
+#### HTML markup
 
 ```html
 <footer role="contentinfo">
@@ -29,7 +31,7 @@ Find out more about the footer component and when to use it in the [NHS digital
 </footer>
 ```
 
-### Nunjucks macro
+#### Nunjucks macro
 
 ```
 {% from 'components/footer/macro.njk' import footer %}
@@ -60,6 +62,75 @@ Find out more about the footer component and when to use it in the [NHS digital
 })}}
 ```
 
+### Footer with list columns
+
+[Preview the footer with list columns component](https://nhsuk.github.io/nhsuk-frontend/components/footer/columns.html)
+
+#### HTML markup
+
+```html
+<footer role="contentinfo">
+  <div class="nhsuk-footer" id="nhsuk-footer">
+    <div class="nhsuk-width-container">
+      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
+      <ul class="nhsuk-footer__list nhsuk-footer__list--three-columns ">
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">NHS sites</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">About us</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Contact us</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Sitemap</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Accessibility</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Our policies</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Cookies</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Profile editor login</a></li>
+      </ul>
+      <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
+    </div>
+  </div>
+</footer>
+```
+
+#### Nunjucks macro
+
+```
+{{ footer({
+  "list": "nhsuk-footer__list--three-columns",
+  "links": [
+    {
+      "URL": "#",
+      "label": "NHS sites"
+    },
+    {
+      "URL": "#",
+      "label": "About us"
+    },
+    {
+      "URL": "#",
+      "label": "Contact us"
+    },
+    {
+      "URL": "#",
+      "label": "Sitemap"
+    },
+    {
+      "URL": "#",
+      "label": "Accessibility"
+    },
+    {
+      "URL": "#",
+      "label": "Our policies"
+    },
+    {
+      "URL": "#",
+      "label": "Cookies"
+    },
+    {
+      "URL": "#",
+      "label": "Profile editor login"
+    }
+  ]
+})}}
+```
+
 ### Nunjucks arguments
 
 The footer Nunjucks macro takes the following arguments:
@@ -69,6 +140,7 @@ The footer Nunjucks macro takes the following arguments:
 | **links**             | array    | No        | Array of primary navigation items for use in the footer. |
 | **links.[].url**      | string   | No        | The href of a primary navigation item in the footer. |
 | **links.[].label**    | string   | No        | The label of a primary navigation item in the footer. |
+| **list**              | string   | No        | Option for the links list to be in columns eg. `nhsuk-footer__list--three-columns` |
 | **classes**           | string   | No        | Optional additional classes to add to the footer container. Separate each class with a space. |
 | **attributes**        | object   | No        | Any extra HTML attributes (for example data attributes) to add to the footer container. |
 

packages/components/footer/_footer.scss

@@ -55,3 +55,18 @@
     width: 25%;
   }
 }
+
+@include mq($from: desktop) {
+  .nhsuk-footer__list--three-columns {
+    -moz-column-count: 3;
+    -moz-column-gap: nhsuk-spacing(4);
+    -webkit-column-count: 3;
+    -webkit-column-gap: nhsuk-spacing(4);
+    column-count: 3;
+    column-gap: nhsuk-spacing(4);
+
+    li {
+      float: none;
+    }
+  }
+}

packages/components/footer/template.njk

@@ -5,9 +5,9 @@
     <div class="nhsuk-width-container">
       {%- if params.links %}
       <h2 class="nhsuk-u-visually-hidden">Support links</h2>
-      <ul class="nhsuk-footer__list">
+      <ul class="nhsuk-footer__list {%- if params.list %} {{ params.list }}{% endif %}">
         {%- for item in params.links %}
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="{{item.URL}}">{{item.label}}</a></li>
+        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="{{ item.URL }}">{{ item.label }}</a></li>
         {%- endfor %}
       </ul>
       {% endif %}

tests/backstop/backstop.js

@@ -161,6 +161,10 @@ module.exports = {
       "label": "Footer",
       "url": `${TEST_HOST}/components/footer/index.html`
     },
+    {
+      "label": "Footer with list columns",
+      "url": `${TEST_HOST}/components/footer/columns.html`
+    },
     {
       "label": "Fieldset",
       "url": `${TEST_HOST}/components/fieldset/index.html`