Merge branch 'main' into adjust-spacing-for-back-link

nhsuk · Jul 9, 2024 · e3a266f · e3a266f
2 parents 99222f6 + 29917df
commit e3a266f
Show file tree

Hide file tree

Showing 25 changed files with 148 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # 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))
+- Adjusted default spacing of back link component. ([PR 964](https://github.com/nhsuk/nhsuk-frontend/pull/964))
+
+
+: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**
@@ -16,7 +29,7 @@
 - Remove unused CSS from breadcrumbs component ([PR 943](https://github.com/nhsuk/nhsuk-frontend/pull/943))
 - Add `aria-hidden` to responsive labels in responsive tables, to avoid screen readers repeating them ([PR 942](https://github.com/nhsuk/nhsuk-frontend/pull/942))
 - Add `opacity: 1` to header search placeholder, to increase colour contrast on Firefox ([PR 939](https://github.com/nhsuk/nhsuk-frontend/pull/939))
-- Adjusted default spacing of back link component. ([PR 964](https://github.com/nhsuk/nhsuk-frontend/pull/964))
+- Remove unused nhsuk-u-top-and-bottom utility class ([PR 979](https://github.com/nhsuk/nhsuk-frontend/pull/979))
 
 ## 8.1.1 - 14 March 2024
 

diff --git a/app/components/all.njk b/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",

diff --git a/app/components/footer/custom-copyright.njk b/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 %}
diff --git a/app/components/footer/footer-in-columns.njk b/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"

diff --git a/app/components/footer/index.njk b/app/components/footer/index.njk
@@ -13,7 +13,7 @@
       },
       {
         "URL": "#",
-        "label": "Contact us"
+        "label": "Give us feedback"
       },
       {
         "URL": "#",

diff --git a/app/pages/examples.njk b/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>

diff --git a/docs/contributing/coding-standards.md b/docs/contributing/coding-standards.md
@@ -249,7 +249,7 @@ Example:
 
 ```
 {{ insetText({
-  "HTML": "<p>If you drive you must tell the <a href='https://www.gov.uk/contact-the-dvla/' title='External website'>DVLA</a> about your vertigo. Visit the GOV.UK website for more information on <a href='https://www.gov.uk/dizziness-and-driving' title='External website'>driving with vertigo</a></p>"
+  "html": "<p>If you drive you must tell the <a href='https://www.gov.uk/contact-the-dvla/' title='External website'>DVLA</a> about your vertigo. Visit the GOV.UK website for more information on <a href='https://www.gov.uk/dizziness-and-driving' title='External website'>driving with vertigo</a></p>"
 }) }}
 ```
 

diff --git a/packages/components/footer/README.md b/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.                                             |

diff --git a/packages/components/footer/template.njk b/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 #}

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -174,12 +174,6 @@ Add a maximum width to large pieces of content, to improve readability.
 </div
 ```
 
-### Remove top and bottom margins
-
-```html
-<h1 class="nhsuk-u-top-and-bottom"></h1>
-```
-
 ### Spacing overrides
 
 ```html

diff --git a/packages/core/settings/_globals.scss b/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;
 

diff --git a/packages/core/utilities/_top-and-bottom.scss b/packages/core/utilities/_top-and-bottom.scss
diff --git a/tests/backstop/backstop.js b/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`,

diff --git a/...op/bitmaps_reference/nhsuk-frontend_Footer_columns_0_document_0_iPhone_5_SE.png b/...op/bitmaps_reference/nhsuk-frontend_Footer_columns_0_document_0_iPhone_5_SE.png
diff --git a/...top/bitmaps_reference/nhsuk-frontend_Footer_columns_0_document_1_iPhone_6-8.png b/...top/bitmaps_reference/nhsuk-frontend_Footer_columns_0_document_1_iPhone_6-8.png
diff --git a/.../backstop/bitmaps_reference/nhsuk-frontend_Footer_columns_0_document_2_iPad.png b/.../backstop/bitmaps_reference/nhsuk-frontend_Footer_columns_0_document_2_iPad.png
diff --git a/...tmaps_reference/nhsuk-frontend_Footer_columns_0_document_3_Surface_iPad_Pro.png b/...tmaps_reference/nhsuk-frontend_Footer_columns_0_document_3_Surface_iPad_Pro.png
diff --git a/...e/nhsuk-frontend_Footer_custom_copyright_statement_0_document_0_iPhone_5_SE.png b/...e/nhsuk-frontend_Footer_custom_copyright_statement_0_document_0_iPhone_5_SE.png
diff --git a/...ce/nhsuk-frontend_Footer_custom_copyright_statement_0_document_1_iPhone_6-8.png b/...ce/nhsuk-frontend_Footer_custom_copyright_statement_0_document_1_iPhone_6-8.png
diff --git a/...eference/nhsuk-frontend_Footer_custom_copyright_statement_0_document_2_iPad.png b/...eference/nhsuk-frontend_Footer_custom_copyright_statement_0_document_2_iPad.png
diff --git a/...uk-frontend_Footer_custom_copyright_statement_0_document_3_Surface_iPad_Pro.png b/...uk-frontend_Footer_custom_copyright_statement_0_document_3_Surface_iPad_Pro.png
diff --git a/...op/bitmaps_reference/nhsuk-frontend_Footer_default_0_document_0_iPhone_5_SE.png b/...op/bitmaps_reference/nhsuk-frontend_Footer_default_0_document_0_iPhone_5_SE.png
diff --git a/...top/bitmaps_reference/nhsuk-frontend_Footer_default_0_document_1_iPhone_6-8.png b/...top/bitmaps_reference/nhsuk-frontend_Footer_default_0_document_1_iPhone_6-8.png
diff --git a/.../backstop/bitmaps_reference/nhsuk-frontend_Footer_default_0_document_2_iPad.png b/.../backstop/bitmaps_reference/nhsuk-frontend_Footer_default_0_document_2_iPad.png
diff --git a/...tmaps_reference/nhsuk-frontend_Footer_default_0_document_3_Surface_iPad_Pro.png b/...tmaps_reference/nhsuk-frontend_Footer_default_0_document_3_Surface_iPad_Pro.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -249,7 +249,7 @@ Example: @@
     ```
     {{ insetText({
-      "HTML": "<p>If you drive you must tell the <a href='https://www.gov.uk/contact-the-dvla/' title='External website'>DVLA</a> about your vertigo. Visit the GOV.UK website for more information on <a href='https://www.gov.uk/dizziness-and-driving' title='External website'>driving with vertigo</a></p>"
+      "html": "<p>If you drive you must tell the <a href='https://www.gov.uk/contact-the-dvla/' title='External website'>DVLA</a> about your vertigo. Visit the GOV.UK website for more information on <a href='https://www.gov.uk/dizziness-and-driving' title='External website'>driving with vertigo</a></p>"
     }) }}
     ```
@@ Expand Down @@