Merge branch 'main' into node-20-upgrade

CHANGELOG.md

@@ -1,5 +1,16 @@
 # NHS.UK frontend Changelog
 
+## Unreleased
+
+:wrench: **Fixes**
+
+- Change "Contact us" in the footer link examples to "Give us feedback" ([PR 972](https://github.com/nhsuk/nhsuk-frontend/pull/972))
+
+: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
 
 :recycle: **Changes**

app/components/all.njk

@@ -909,8 +909,8 @@
         "label": "About us"
       },
       {
-        "URL": "https://www.nhs.uk/contact-us/",
-        "label": "Contact us"
+        "URL": "https://www.nhs.uk/give-feedback-about-the-nhs-website/",
+        "label": "Give us feedback"
       },
       {
         "URL": "https://www.nhs.uk/Personalisation/Login.aspx",

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": "Give us feedback"
+      },
+      {
+        "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": "#",
@@ -67,10 +68,6 @@
       }
     ],
     "linksColumn3": [
-      {
-        "URL": "#",
-        "label": "Contact us"
-      },
       {
         "URL": "#",
         "label": "Other NHS websites"
@@ -85,6 +82,10 @@
         "URL": "#",
         "label": "About us"
       },
+      {
+        "URL": "#",
+        "label": "Give us feedback"
+      },
       {
         "URL": "#",
         "label": "Accessibility statement"

app/components/footer/index.njk

@@ -13,7 +13,7 @@
       },
       {
         "URL": "#",
-        "label": "Contact us"
+        "label": "Give us feedback"
       },
       {
         "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

@@ -25,7 +25,7 @@ Your copyright statement must reflect the ownership of your website or service.
             <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>
+            <a class="nhsuk-footer__list-item-link" href="#">Give us feedback</a>
           </li>
           <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
             <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
@@ -59,7 +59,7 @@ Your copyright statement must reflect the ownership of your website or service.
     },
     {
       "URL": "#",
-      "label": "Contact us"
+      "label": "Give us feedback"
     },
     {
       "URL": "#",
@@ -133,9 +133,6 @@ Your copyright statement must reflect the ownership of your website or service.
           </li>
         </ul>
         <ul class="nhsuk-footer__list">
-          <li class="nhsuk-footer__list-item">
-            <a class="nhsuk-footer__list-item-link" href="/contact-us/">Contact us</a>
-          </li>
           <li class="nhsuk-footer__list-item">
             <a class="nhsuk-footer__list-item-link" href="/nhs-sites/">Other NHS websites</a>
           </li>
@@ -147,6 +144,9 @@ Your copyright statement must reflect the ownership of your website or service.
           <li class="nhsuk-footer__list-item">
             <a class="nhsuk-footer__list-item-link" href="/about-us/">About us</a>
           </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/contact-us/">Give us feedback</a>
+          </li>
           <li class="nhsuk-footer__list-item">
             <a class="nhsuk-footer__list-item-link" href="/accessibility-statement/">Accessibility statement</a>
           </li>
@@ -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": "#",
@@ -233,10 +234,6 @@ Your copyright statement must reflect the ownership of your website or service.
     }
   ],
   "linksColumn3": [
-    {
-      "URL": "#",
-      "label": "Contact us"
-    },
     {
       "URL": "#",
       "label": "Other NHS websites"
@@ -251,6 +248,10 @@ Your copyright statement must reflect the ownership of your website or service.
       "URL": "#",
       "label": "About us"
     },
+    {
+      "URL": "#",
+      "label": "Give us feedback"
+    },
     {
       "URL": "#",
       "label": "Accessibility statement"
@@ -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="#">Give us feedback</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": "Give us feedback"
+    },
+    {
+      "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 #}

packages/core/settings/_globals.scss

@@ -34,7 +34,7 @@ $nhsuk-icon-size: 34px !default;
 // Grid spacing
 //
 
-$nhsuk-page-width: 960px;
+$nhsuk-page-width: 960px !default;
 $nhsuk-gutter: 32px;
 $nhsuk-gutter-half: $nhsuk-gutter * 0.5;
 

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`,