Merge pull request #975 from nhsuk/make-copyight-text-settable-via-pa…

…rams

Make copyright statement settable via params

CHANGELOG.md

@@ -5,6 +5,7 @@
 :new: **New features**
 
 - Make nhsuk-page-width a default so that services can override it ([PR 971](https://github.com/nhsuk/nhsuk-frontend/pull/971))
+- Make footer copyright statement configurable via Nunjucks parameters ([PR 975](https://github.com/nhsuk/nhsuk-frontend/pull/975))
 
 ## 8.2.0 - 12 June 2024
 

app/components/footer/custom-copyright.njk

@@ -0,0 +1,34 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Footer (custom copyright statement)' %}
+{% from 'components/footer/macro.njk' import footer %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  {{ footer({
+    "copyright": "© East London NHS Foundation Trust",
+    "links": [
+      {
+        "URL": "#",
+        "label": "Accessibility statement"
+      },
+      {
+        "URL": "#",
+        "label": "Contact us"
+      },
+      {
+        "URL": "#",
+        "label": "Cookies"
+      },
+      {
+        "URL": "#",
+        "label": "Privacy policy"
+      },
+      {
+        "URL": "#",
+        "label": "Terms and conditions"
+      }
+    ]
+  })}}
+
+{% endblock %}

app/components/footer/footer-in-columns.njk

@@ -6,6 +6,7 @@
 {% block body %}
 
   {{ footer({
+    "copyright": "© Crown copyright",
     "links": [
       {
         "URL": "#",

app/pages/examples.njk

@@ -72,6 +72,7 @@
     <li><a href="../components/fieldset/with-inputs.html">Fieldset with inputs</a></li>
     <li><a href="../components/footer/index.html">Footer (default)</a></li>
     <li><a href="../components/footer/footer-in-columns.html">Footer (columns)</a></li>
+    <li><a href="../components/footer/custom-copyright.html">Footer (custom copyright statement)</a></li>
     <li><a href="../components/header/index.html">Header (default)</a></li>
     <li><a href="../components/header/header-navigation.html">Header with navigation</a></li>
     <li><a href="../components/header/header-search.html">Header with search</a></li>

packages/components/footer/README.md

@@ -172,6 +172,7 @@ Your copyright statement must reflect the ownership of your website or service.
 {% from 'components/footer/macro.njk' import footer %}
 
 {{ footer({
+  "copyright": "© Crown copyright",
   "links": [
     {
       "URL": "#",
@@ -267,6 +268,76 @@ Your copyright statement must reflect the ownership of your website or service.
 })}}
 ```
 
+### Footer (custom copyright statement)
+
+[Preview the footer (custom copyright statement) component](https://nhsuk.github.io/nhsuk-frontend/components/footer/custom-copyright.html)
+
+#### HTML markup
+
+```html
+<footer role="contentinfo">
+  <div class="nhsuk-footer-container">
+    <div class="nhsuk-width-container">
+      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
+      <div class="nhsuk-footer">
+        <ul class="nhsuk-footer__list">
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
+          </li>
+        </ul>
+        <div>
+          <p class="nhsuk-footer__copyright">&copy; East London NHS Foundation Trust</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+```
+
+#### Nunjucks macro
+
+```
+{% from 'components/footer/macro.njk' import footer %}
+
+{{ footer({
+  "copyright": "© East London NHS Foundation Trust",
+  "links": [
+    {
+      "URL": "#",
+      "label": "Accessibility statement"
+    },
+    {
+      "URL": "#",
+      "label": "Contact us"
+    },
+    {
+      "URL": "#",
+      "label": "Cookies"
+    },
+    {
+      "URL": "#",
+      "label": "Privacy policy"
+    },
+    {
+      "URL": "#",
+      "label": "Terms and conditions"
+    }
+  ]
+})}}
+```
+
 ### Nunjucks arguments
 
 The footer Nunjucks macro takes the following arguments:
@@ -282,6 +353,7 @@ The footer Nunjucks macro takes the following arguments:
 | **linksColumn3**          | array  | No       | Array of third column of navigation items for use in the footer.                              |
 | **linksColumn3.[].url**   | string | No       | The href of a navigation item in the third column of the footer.                              |
 | **linksColumn3.[].label** | string | No       | The label of a navigation item in the third column of the footer.                             |
+| **copyright**             | string | No       | Optional text for the copyright notice in the footer. Defaults to '© NHS England'             |
 | **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.       |
 | **copyright**             | string | No       | The label for the copyright notice in the footer.                                             |

packages/components/footer/template.njk

@@ -1,3 +1,5 @@
+{%- set copyrightText = params.copyright if params.copyright else '© NHS England' -%}
+
 <footer role="contentinfo">
   <div class="nhsuk-footer-container">
     <div class="nhsuk-width-container">
@@ -29,7 +31,7 @@
                 {%- endfor %}
               </ul>
               <div>
-                <p class="nhsuk-footer__copyright">&copy; NHS England</p>
+                <p class="nhsuk-footer__copyright">{{ copyrightText }}</p>
               </div>
       </div> {# close nhsuk-footer #}
           {% else %}
@@ -69,7 +71,7 @@
             {%- endif %}
       </div> {# close nhsuk-footer #}
       <div>
-        <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
+        <p class="nhsuk-footer__copyright">{{ copyrightText }}</p>
       </div>
       {% endif %}
     </div> {# close nhsuk-width-container #}

tests/backstop/backstop.js

@@ -204,6 +204,10 @@ module.exports = {
       label: 'Footer (columns)',
       url: `${TEST_URL}/footer/footer-in-columns.html`,
     },
+    {
+      label: 'Footer (custom copyright statement)',
+      url: `${TEST_URL}/footer/custom-copyright.html`,
+    },
     {
       label: 'Fieldset',
       url: `${TEST_URL}/fieldset/index.html`,