diff --git a/.prettierignore b/.prettierignore
index 9b6142ef4..390d36ab9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,6 @@
node_modules/*
dist/*
+.cache/*
tests/backstop/*
.github/*
coverage/*
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a289f578..612456811 100644
--- 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
+
+
+
+
+ Close menu
+
+```
+
+You will now only need this:
+
+```
+
+
+
+```
+
: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
index c45ef7dce..949acd29c 100644
--- 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
index 3679c6798..bc20b5915 100644
--- 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
new file mode 100644
index 000000000..980ad1d26
--- /dev/null
+++ 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
index 43b7cdcaa..f861b414e 100644
--- 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
index ad5ce4d1d..800210b56 100644
--- 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
index 4872953b6..538a72508 100644
--- 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
index a0c7c3ec4..8c5149e50 100644
--- 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
index 92edfab49..13038875d 100644
--- 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
deleted file mode 100644
index 9dad44536..000000000
--- a/app/components/header/header-transactional.njk
+++ /dev/null
@@ -1,15 +0,0 @@
-{% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Header transactional' %}
-{% from 'components/header/macro.njk' import header %}
-{% extends 'layout.njk' %}
-
-{% block body %}
-
- {{ header({
- "transactional": "true",
- "showNav": "false",
- "showSearch": "false"
- })
- }}
-
-{% endblock %}
diff --git a/app/components/header/index.njk b/app/components/header/index.njk
index 5f9d87dc0..3754df755 100644
--- 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
index f68bdb90a..a9e51a38f 100644
--- a/app/pages/about.njk
+++ b/app/pages/about.njk
@@ -28,8 +28,8 @@
Please see our contributing guidelines on how to set up the project locally and contribute changes to NHS.UK frontend.
Get in touch
- NHS.UK frontend is actively maintained by a team at NHS England, you can email us or get in touch on the NHS digital service manual Slack workspace .
-
+
NHS.UK frontend is actively maintained by a team at NHS England, you can email us or get in touch on the NHS digital service manual Slack workspace .
+
{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
index 5af86285f..c8093d5c1 100644
--- a/app/pages/examples.njk
+++ b/app/pages/examples.njk
@@ -70,14 +70,14 @@
Fieldset Fieldset as page heading Fieldset with inputs Footer Header Footer (default) Footer (columns) Header (default) Header with navigation Header with search Header with logo only Header with a service name Header with a service name, search and navigation Header transactional Header transactional with service name Header organisational Header organisational with white header Warning callout with custom heading
- {# close nhsuk-width-container #}
+ {# close nhsuk-footer-container #}
diff --git a/packages/components/header/README.md b/packages/components/header/README.md
index 36719bc1f..c97db6fa6 100644
--- a/packages/components/header/README.md
+++ b/packages/components/header/README.md
@@ -11,9 +11,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
## Quick start examples
-### Header
+### Header (default)
-[Preview the header component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html)
+[Preview the header (default) component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html)
#### HTML markup
@@ -22,107 +22,83 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
-