Merge pull request #881 from nhsuk/new-header-footer

Incorporate new header and footer style
nhsuk · Sep 28, 2023 · e3df8c0 · e3df8c0
2 parents d9abd95 + 4a7a109
commit e3df8c0
Show file tree

Hide file tree

Showing 93 changed files with 2,638 additions and 2,224 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,6 @@
 node_modules/*
 dist/*
+.cache/*
 tests/backstop/*
 .github/*
 coverage/*

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,71 @@
 # NHS.UK frontend Changelog
 
+## 8.0.0 - 28 September 2023
+
+:boom: **Breaking changes**
+
+- Updated header and footer to use the new styles and functionality to match the live nhs.uk site ([PR 881](https://github.com/nhsuk/nhsuk-frontend/pull/881))
+
+As well as changes to the styles, this added an example of a footer with it's links in columns, and removed the redundant example of "Header transactional". This also fixes the issue ([Issue 805](https://github.com/nhsuk/nhsuk-frontend/issues/805)).
+
+In the header variants, the menu toggle button has been replaced with a dropdown menu, that becomes visible when the screen width is below 768px (tablet width). The search toggle has been removed, and instead the search input automatically adjusts according to the screen width.
+
+Instead of having this:
+
+```
+// menu toggle
+
+<button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button
+
+// close menu button
+
+<button class="nhsuk-header__navigation-close" id="close-menu">
+  <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
+  </svg>
+  <span class="nhsuk-u-visually-hidden">Close menu</span>
+</button>
+```
+
+You will now only need this:
+
+```
+<button class="nhsuk-header__navigation-link nhsuk-header__menu-toggle nhsuk-header__menu-toggle--visible" aria-expanded="false">
+  <span class="nhsuk-u-visually-hidden">Browse</span>
+  More
+  <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+</button>
+
+<ul class="nhsuk-header__drop-down nhsuk-header__drop-down--hidden">
+
+  // navigation items in the drop down menu
+
+</ul>
+```
+
 :wrench: **Fixes**
 
 - Fix vertical alignment of primary card icon
+- Change NHS Digital wording to NHS England
+- Remove dead link in "Action link" example
+
+:new: **New features**
+
+- Added suffix and prefix examples to text input component ([PR 884](https://github.com/nhsuk/nhsuk-frontend/pull/884))
+
+We added 4 new text input examples that allow users to add suffixes and prefixed to the input form. This was done by adding "suffix" and "prefix" as macro options.
+
+```
+  input({
+    "label": {
+      "text": "What is the cost per item, in pounds?"
+    },
+    "prefix": "£",
+    "suffix": "per item",
+    "errorMessage": {
+      "text": "Enter a cost per item, in pounds"
+    }
+  })
+```
 
 ## 7.1.0 - 21 August 2023
 

diff --git a/app/_templates/page.njk b/app/_templates/page.njk
@@ -6,9 +6,7 @@
 {% from 'components/card/macro.njk' import card %}
 {% from 'components/contents-list/macro.njk' import contentsList %}
 {% from 'components/details/macro.njk' import details %}
-{% from 'components/header/macro.njk' import header %}
 {% from 'components/hero/macro.njk' import hero %}
-{% from 'components/footer/macro.njk' import footer %}
 {% from 'components/do-dont-list/macro.njk' import list %}
 {% from 'components/images/macro.njk' import image %}
 {% from 'components/inset-text/macro.njk' import insetText %}

diff --git a/app/components/all.njk b/app/components/all.njk
@@ -917,7 +917,7 @@
         "label": "Profile editor login"
       }
     ],
-    "secondaryLinks": [
+    "metaLinks": [
       {
         "URL": "https://www.nhs.uk/about-us/sitemap/",
         "label": "Sitemap"

diff --git a/app/components/footer/footer-in-columns.njk b/app/components/footer/footer-in-columns.njk
@@ -0,0 +1,103 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Footer (columns)' %}
+{% from 'components/footer/macro.njk' import footer %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  {{ footer({
+    "links": [
+      {
+        "URL": "#",
+        "label": "Home"
+      },
+      {
+        "URL": "#",
+        "label": "Health A to Z"
+      },
+      {
+        "URL": "#",
+        "label": "Live Well"
+      },
+      {
+        "URL": "#",
+        "label": "Mental health"
+      },
+      {
+        "URL": "#",
+        "label": "Care and support"
+      },
+      {
+        "URL": "#",
+        "label": "Accessibility statement"
+      },
+      {
+        "URL": "#",
+        "label": "Pregnancy"
+      },
+      {
+        "URL": "#",
+        "label": "NHS services"
+      },
+      {
+        "URL": "#",
+        "label": "Coronavirus (COVID-19)"
+      }
+    ],
+    "linksColumn2": [
+      {
+        "URL": "#",
+        "label": "NHS App"
+      },
+      {
+        "URL": "#",
+        "label": "Find my NHS number"
+      },
+      {
+        "URL": "#",
+        "label": "Your health records"
+      },
+      {
+        "URL": "#",
+        "label": "About the NHS"
+      },
+      {
+        "URL": "#",
+        "label": "Healthcare abroad"
+      }
+    ],
+    "linksColumn3": [
+      {
+        "URL": "#",
+        "label": "Contact us"
+      },
+      {
+        "URL": "#",
+        "label": "Other NHS websites"
+      },
+      {
+        "URL": "#",
+        "label": "Profile editor login"
+      }
+    ],
+    "metaLinks": [
+      {
+        "URL": "#",
+        "label": "About us"
+      },
+      {
+        "URL": "#",
+        "label": "Accessibility statement"
+      },
+      {
+        "URL": "#",
+        "label": "Our policies"
+      },
+      {
+        "URL": "#",
+        "label": "Cookies"
+      }
+    ]
+  })}}
+
+{% endblock %}
diff --git a/app/components/footer/index.njk b/app/components/footer/index.njk
@@ -1,5 +1,5 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Footer' %}
+{% set title = 'Footer (default)' %}
 {% from 'components/footer/macro.njk' import footer %}
 {% extends 'layout.njk' %}
 

diff --git a/app/components/header/header-logo.njk b/app/components/header/header-logo.njk
@@ -1,5 +1,5 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Header' %}
+{% set title = 'Header with logo only' %}
 {% from 'components/header/macro.njk' import header %}
 {% extends 'layout.njk' %}
 

diff --git a/app/components/header/header-service-name-with-nav.njk b/app/components/header/header-service-name-with-nav.njk
@@ -1,5 +1,5 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Header transactional with service name' %}
+{% set title = 'Header with a service name, search and navigation' %}
 {% from 'components/header/macro.njk' import header %}
 {% extends 'layout.njk' %}
 
@@ -14,7 +14,7 @@
     "primaryLinks": [
         {
           "url"  : "#",
-          "label" : "NHS service standard"
+          "label" : "Standards and technology"
         },
         {
           'url' : '#',
@@ -28,6 +28,10 @@
           'url'  : '#',
           'label' : 'Accessibility'
         },
+        {
+          'url'  : '#',
+          'label' : 'Design principles'
+        },
         {
           'url' : '#',
           'label' : 'Community and contribution'

diff --git a/app/components/header/header-service-name.njk b/app/components/header/header-service-name.njk
@@ -1,5 +1,5 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Header transactional with service name' %}
+{% set title = 'Header with service name' %}
 {% from 'components/header/macro.njk' import header %}
 {% extends 'layout.njk' %}
 

diff --git a/app/components/header/header-transactional-service-name.njk b/app/components/header/header-transactional-service-name.njk
@@ -7,7 +7,7 @@
 
   {{ header({
       "transactionalService": {
-        "name": "Register with a GP"
+        "name": "Find your NHS number"
       },
       "showNav": "false",
       "showSearch": "false"

diff --git a/app/components/header/header-transactional.njk b/app/components/header/header-transactional.njk
diff --git a/app/components/header/index.njk b/app/components/header/index.njk
@@ -1,5 +1,5 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Header' %}
+{% set title = 'Header (default)' %}
 {% from 'components/header/macro.njk' import header %}
 {% extends 'layout.njk' %}
 

diff --git a/app/pages/about.njk b/app/pages/about.njk
@@ -28,8 +28,8 @@
     <p>Please see our <a href="https://github.com/nhsuk/nhsuk-frontend/blob/master/CONTRIBUTING.md">contributing guidelines</a> on how to set up the project locally and contribute changes to NHS.UK frontend.</p>
 
     <h2>Get in touch</h2>
-    <p>NHS.UK frontend is actively maintained by a team at NHS England, you can <a href="mailto:[email protected]">email us</a> or get in touch on the <a href="https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE">NHS digital service manual Slack workspace</a>.
-
+    <p>NHS.UK frontend is actively maintained by a team at NHS England, you can <a href="mailto:[email protected]">email us</a> or get in touch on the <a href="https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE">NHS digital service manual Slack workspace</a>.</p>
+  
   </div>
 
 {% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -70,14 +70,14 @@
     <li><a href="../components/fieldset/index.html">Fieldset</a></li>
     <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/header/index.html">Header</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/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>
     <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 a service name</a></li>
     <li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
-    <li><a href="../components/header/header-transactional.html">Header transactional</a></li>
     <li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
     <li><a href="../components/header/header-org.html">Header organisational</a></li>
     <li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
@@ -128,3 +128,32 @@
     <li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
   </ul>
 {% endblock %}
+
+{% block footer %}
+
+  {{ footer({
+    "links": [
+      {
+        "URL": baseUrl,
+        "label": "NHS.UK frontend"
+      },
+      {
+        "URL": baseUrl + "pages/install.html",
+        "label": "Install"
+      },
+      {
+        "URL": baseUrl + "pages/examples.html",
+        "label": "Examples"
+      },
+      {
+        "URL": baseUrl + "pages/about.html",
+        "label": "About"
+      },
+      {
+        "URL": "https://github.com/nhsuk/nhsuk-frontend",
+        "label": "GitHub"
+      }
+    ]
+  })}}
+
+{% endblock %}