diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd7ce124e..70b2bf761 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,44 @@
## Unreleased
+:new: **New features**
+
+#### New header with account section
+
+We’ve updated the header component to support account information and links. As part of this work we’ve also made some other improvements to the header, detailed below:
+
+- Show account information and links in the header.
+- Show currently active section or page in the navigation.
+- Remove hardcoded home link from the navigation.
+- Align navigation items to the left by default.
+- Update navigation label from ’Primary navigation’ to ‘Menu’, and remove superfluous `role` and `id` attributes.
+- Update NHS logo in the header to have higher contrast when focused.
+- Refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element.
+
+This was added in [pull request #1058: New header with account section](https://github.com/nhsuk/nhsuk-frontend/pull/1058).
+
:boom: **Breaking changes**
You must make the following changes when you migrate to this release, or your service might break.
+#### Update header component params
+
+If you’re using the `header` Nunjucks macro in your service, you must:
+
+- Remove the boolean `showNav`, `showSearch`, `transactional` and `transactionalService` options from the header component as respective parts of the header are shown automatically when `primaryLinks` or `search` options are provided.
+- Remove the `.nhsuk-header__navigation-list--left-aligned` modifier class, navigation items are now aligned left by default.
+- Replace the `searchAction` option with the nested `search.action` option.
+- Replace the `searchInputName` option with the nested `search.name` option.
+- Replace the `primaryLinks` option with the nested `navigation.items` option, using `text` and `href` instead of `label` and `url`.
+
+To restore the previous justified alignment, where navigation items appeared evenly spaced out, add the new `nhsuk-header__navigation--justified` modifier class to the nested `navigation.classes` option.
+
+#### Update header component HTML markup
+
+You do not need to do anything if you’re using Nunjucks macros.
+
+If you are not using Nunjucks macros, update your HTML markup using the [header examples in the NHS digital service manual](https://service-manual.nhs.uk/design-system/components/header).
+
#### Rename component `HTML` param to `html`
If you're using the `card`, `details`, `insetText` or `warningCallout` Nunjucks macros, you need to rename the `HTML` param to `html`.
diff --git a/app/_templates/example.njk b/app/_templates/example.njk
index 84f580080..fa2cb11c9 100644
--- a/app/_templates/example.njk
+++ b/app/_templates/example.njk
@@ -1,2 +1,6 @@
{% extends 'layout.njk' %}
+
{% set htmlAttributes = {"style": "background-color: #f0f4f5;"} %}
+
+{# Turn the skip link off #}
+{% block skipLink %}{% endblock %}
diff --git a/app/components/all.njk b/app/components/all.njk
index 595e56d18..d6ef2f847 100644
--- a/app/components/all.njk
+++ b/app/components/all.njk
@@ -3,38 +3,33 @@
{% set title = 'Components' %}
{% block header %}
- {{ skipLink({
- "URL": "#maincontent",
- "heading": "Skip to main content"
- }) }}
-
{{ header({
- "showNav": "true",
- "showSearch": "true",
- "primaryLinks": [
+ search: true,
+ navigation: {
+ items: [
{
- "url" : "https://www.nhs.uk/conditions",
- "label" : "Health A-Z"
+ href: "https://www.nhs.uk/conditions",
+ text: "Health A to Z"
},
{
- 'url' : 'https://www.nhs.uk/live-well/',
- 'label' : 'Live Well'
+ href: 'https://www.nhs.uk/live-well/',
+ text: 'Live Well'
},
{
- 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/',
- 'label' : 'Care and support'
+ href: 'https://www.nhs.uk/conditions/social-care-and-support/',
+ text: 'Care and support'
},
{
- 'url' : 'https://www.nhs.uk/news/',
- 'label' : 'Health news'
+ href: 'https://www.nhs.uk/news/',
+ text: 'Health news'
},
{
- 'url' : 'https://www.nhs.uk/service-search',
- 'label' : 'Services near you'
+ href: 'https://www.nhs.uk/service-search',
+ text: 'Services near you'
}
]
- })
- }}
+ }
+ }) }}
{% endblock %}
{% block beforeContent %}
@@ -45,7 +40,7 @@
href: "#"
},
{
- text: "Health A-Z",
+ text: "Health A to Z",
href: "#"
}
]
diff --git a/app/components/header/header-account-logged-in.njk b/app/components/header/header-account-logged-in.njk
new file mode 100644
index 000000000..9e1b3f2ad
--- /dev/null
+++ b/app/components/header/header-account-logged-in.njk
@@ -0,0 +1,49 @@
+{% set title = "Header with account (logged in)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ service: {
+ text: "Manage patients"
+ },
+ account: {
+ items: [
+ {
+ href: "#",
+ text: "florence.nightingale@nhs.net",
+ icon: true
+ },
+ {
+ action: "#",
+ text: "Log out"
+ }
+ ]
+ },
+ navigation: {
+ items: [
+ {
+ href: "#",
+ text: "Home"
+ },
+ {
+ href: "#",
+ text: "Services"
+ },
+ {
+ href: "#",
+ text: "Your health"
+ },
+ {
+ href: "#",
+ text: "Messages"
+ }, {
+ href: "#",
+ text: "Help and support"
+ }
+ ]
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-account-logged-out.njk b/app/components/header/header-account-logged-out.njk
new file mode 100644
index 000000000..5f1e59799
--- /dev/null
+++ b/app/components/header/header-account-logged-out.njk
@@ -0,0 +1,21 @@
+{% set title = "Header with account (logged out)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ service: {
+ text: "Manage patients"
+ },
+ account: {
+ items: [
+ {
+ href: "#",
+ text: "Log in"
+ }
+ ]
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-account-rbac.njk b/app/components/header/header-account-rbac.njk
new file mode 100644
index 000000000..2adaedf9e
--- /dev/null
+++ b/app/components/header/header-account-rbac.njk
@@ -0,0 +1,53 @@
+{% set title = "Header with account (logged in, RBAC)" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ service: {
+ text: "Manage patients"
+ },
+ search: {
+ placeholder: "NHS number, date of birth",
+ visuallyHiddenLabel: "Search for a user"
+ },
+ account: {
+ items: [
+ {
+ href: "#",
+ text: "Florence Nightingale",
+ icon: true
+ },
+ {
+ text: "RA Manager, Hull and East Yorkshire Hospitals NHS Trust (RWA)"
+ },
+ {
+ href: "#",
+ text: "Change role"
+ },
+ {
+ action: "#",
+ text: "Log out"
+ }
+ ]
+ },
+ navigation: {
+ items: [
+ {
+ href: "#",
+ text: "Home"
+ },
+ {
+ href: "#",
+ text: "Create user"
+ },
+ {
+ href: "#",
+ text: "Find user"
+ }
+ ]
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-logo.njk b/app/components/header/header-logo.njk
index b0b086623..32b74c6a3 100644
--- a/app/components/header/header-logo.njk
+++ b/app/components/header/header-logo.njk
@@ -3,11 +3,5 @@
{% extends 'example.njk' %}
{% block main %}
-
- {{ header({
- "showNav": "false",
- "showSearch": "false"
- })
- }}
-
+ {{ header() }}
{% endblock %}
diff --git a/app/components/header/header-navigation-justified.njk b/app/components/header/header-navigation-justified.njk
new file mode 100644
index 000000000..c23728f14
--- /dev/null
+++ b/app/components/header/header-navigation-justified.njk
@@ -0,0 +1,40 @@
+{% set title = 'Header with navigation' %}
+{% from 'components/header/macro.njk' import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ navigation: {
+ classes: "nhsuk-header__navigation--justified",
+ items: [
+ {
+ href: "#",
+ text: "Health A to Z"
+ },
+ {
+ href: "#",
+ text: "Live Well"
+ },
+ {
+ href: "#",
+ text: "Mental health"
+ },
+ {
+ href: "#",
+ text: "Care and support"
+ },
+ {
+ href: "#",
+ text: "Pregnancy",
+ active: true
+ },
+ {
+ href: "#",
+ text: "NHS services"
+ }
+ ]
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-navigation.njk b/app/components/header/header-navigation.njk
index daae074f8..fc88418c0 100644
--- a/app/components/header/header-navigation.njk
+++ b/app/components/header/header-navigation.njk
@@ -5,39 +5,35 @@
{% block main %}
{{ header({
- "showNav": "true",
- "showSearch": "false",
- "primaryLinks": [
+ navigation: {
+ items: [
{
- "url" : "https://www.nhs.uk/conditions",
- "label" : "Health A-Z",
- "classes": "app-header__navigation-item--current",
- "attributes": {
- "aria-current": "true"
- }
+ href: "#",
+ text: "Health A to Z"
},
{
- 'url' : 'https://www.nhs.uk/live-well/',
- 'label' : 'Live Well'
+ href: "#",
+ text: "Live Well"
},
{
- 'url' : 'https://www.nhs.uk/mental-health/',
- 'label' : 'Mental health'
+ href: "#",
+ text: "Mental health"
},
{
- 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/',
- 'label' : 'Care and support'
+ href: "#",
+ text: "Care and support"
},
{
- 'url' : 'https://www.nhs.uk/pregnancy/',
- 'label' : 'Pregnancy'
+ href: "#",
+ text: "Pregnancy",
+ active: true
},
{
- 'url' : 'https://www.nhs.uk/nhs-services/',
- 'label' : 'NHS services'
+ href: "#",
+ text: "NHS services"
}
]
- })
- }}
+ }
+ }) }}
{% endblock %}
diff --git a/app/components/header/header-org-white-account.njk b/app/components/header/header-org-white-account.njk
new file mode 100644
index 000000000..ba32189f9
--- /dev/null
+++ b/app/components/header/header-org-white-account.njk
@@ -0,0 +1,59 @@
+{% set title = "Header organisational with white header and account" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ classes: "nhsuk-header--white nhsuk-header--white-navigation",
+ logo: {
+ href: "#"
+ },
+ organisation: {
+ name: "Anytown Anyplace",
+ split: "Anywhere",
+ descriptor: "NHS Foundation Trust"
+ },
+ search: {
+ visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+ },
+ account: {
+ items: [
+ {
+ text: "Florence Nightingale",
+ icon: true
+ },
+ {
+ action: "#",
+ text: "Log out"
+ }
+ ]
+ },
+ navigation: {
+ items: [
+ {
+ href: "#",
+ text: "Your hospital visit"
+ },
+ {
+ href: "#",
+ text: "Wards and departments",
+ active: true
+ },
+ {
+ href: "#",
+ text: "Conditions and treatments"
+ },
+ {
+ href: "#",
+ text: "Our people"
+ },
+ {
+ href: "#",
+ text: "Our research"
+ }
+ ]
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-org-white-nav.njk b/app/components/header/header-org-white-nav.njk
index 9ee052d73..6d539781f 100644
--- a/app/components/header/header-org-white-nav.njk
+++ b/app/components/header/header-org-white-nav.njk
@@ -4,38 +4,44 @@
{% block main %}
-{{ header({
- "showNav": "true",
- "showSearch": "true",
- "classes": "nhsuk-header--white nhsuk-header--white-nav",
- "organisation": {
- "name": "Anytown Anyplace",
- "split": "Anywhere",
- "descriptor": "NHS Foundation Trust"
+ {{ header({
+ classes: "nhsuk-header--white nhsuk-header--white-navigation",
+ logo: {
+ href: "#"
},
- "primaryLinks": [
- {
- "url" : "#",
- "label" : "Your hospital visit"
- },
- {
- 'url' : '#',
- 'label' : 'Wards and departments'
- },
- {
- 'url' : '#',
- 'label' : 'Conditions and treatments'
- },
- {
- 'url' : '#',
- 'label' : 'Our people'
- },
- {
- 'url' : '#',
- 'label' : 'Our research'
- }
- ]
- })
-}}
+ organisation: {
+ name: "Anytown Anyplace",
+ split: "Anywhere",
+ descriptor: "NHS Foundation Trust"
+ },
+ search: {
+ visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+ },
+ navigation: {
+ items: [
+ {
+ href: "#",
+ text: "Your hospital visit"
+ },
+ {
+ href: "#",
+ text: "Wards and departments",
+ active: true
+ },
+ {
+ href: "#",
+ text: "Conditions and treatments"
+ },
+ {
+ href: "#",
+ text: "Our people"
+ },
+ {
+ href: "#",
+ text: "Our research"
+ }
+ ]
+ }
+ }) }}
{% endblock %}
diff --git a/app/components/header/header-org-white.njk b/app/components/header/header-org-white.njk
index 8c2e0ff5f..5ac8c0042 100644
--- a/app/components/header/header-org-white.njk
+++ b/app/components/header/header-org-white.njk
@@ -4,38 +4,44 @@
{% block main %}
-{{ header({
- "showNav": "true",
- "showSearch": "true",
- "classes": "nhsuk-header--white",
- "organisation": {
- "name": "Anytown Anyplace",
- "split": "Anywhere",
- "descriptor": "NHS Foundation Trust"
+ {{ header({
+ classes: "nhsuk-header--white",
+ logo: {
+ href: "#"
},
- "primaryLinks": [
- {
- "url" : "#",
- "label" : "Your hospital visit"
- },
- {
- 'url' : '#',
- 'label' : 'Wards and departments'
- },
- {
- 'url' : '#',
- 'label' : 'Conditions and treatments'
- },
- {
- 'url' : '#',
- 'label' : 'Our people'
- },
- {
- 'url' : '#',
- 'label' : 'Our research'
- }
- ]
- })
-}}
+ organisation: {
+ name: "Anytown Anyplace",
+ split: "Anywhere",
+ descriptor: "NHS Foundation Trust"
+ },
+ search: {
+ visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+ },
+ navigation: {
+ items: [
+ {
+ href: "#",
+ text: "Your hospital visit"
+ },
+ {
+ href: "#",
+ text: "Wards and departments",
+ active: true
+ },
+ {
+ href: "#",
+ text: "Conditions and treatments"
+ },
+ {
+ href: "#",
+ text: "Our people"
+ },
+ {
+ href: "#",
+ text: "Our research"
+ }
+ ]
+ }
+ }) }}
{% endblock %}
diff --git a/app/components/header/header-org.njk b/app/components/header/header-org.njk
index 39ece7185..e7b1ac8b0 100644
--- a/app/components/header/header-org.njk
+++ b/app/components/header/header-org.njk
@@ -4,37 +4,43 @@
{% block main %}
-{{ header({
- "showNav": "true",
- "showSearch": "true",
- "organisation": {
- "name": "Anytown Anyplace",
- "split": "Anywhere",
- "descriptor": "NHS Foundation Trust"
+ {{ header({
+ logo: {
+ href: "#"
},
- "primaryLinks": [
- {
- "url" : "#",
- "label" : "Your hospital visit"
- },
- {
- 'url' : '#',
- 'label' : 'Wards and departments'
- },
- {
- 'url' : '#',
- 'label' : 'Conditions and treatments'
- },
- {
- 'url' : '#',
- 'label' : 'Our people'
- },
- {
- 'url' : '#',
- 'label' : 'Our research'
- }
- ]
- })
-}}
+ organisation: {
+ name: "Anytown Anyplace",
+ split: "Anywhere",
+ descriptor: "NHS Foundation Trust"
+ },
+ search: {
+ visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
+ },
+ navigation: {
+ items: [
+ {
+ href: "#",
+ text: "Your hospital visit"
+ },
+ {
+ href: "#",
+ text: "Wards and departments",
+ active: true
+ },
+ {
+ href: "#",
+ text: "Conditions and treatments"
+ },
+ {
+ href: "#",
+ text: "Our people"
+ },
+ {
+ href: "#",
+ text: "Our research"
+ }
+ ]
+ }
+ }) }}
{% endblock %}
diff --git a/app/components/header/header-search.njk b/app/components/header/header-search.njk
index b0a141fcc..605cecd24 100644
--- a/app/components/header/header-search.njk
+++ b/app/components/header/header-search.njk
@@ -5,35 +5,7 @@
{% block main %}
{{ header({
- "showNav": "false",
- "showSearch": "true",
- "primaryLinks": [
- {
- "url" : "https://www.nhs.uk/conditions",
- "label" : "Health A-Z"
- },
- {
- 'url' : 'https://www.nhs.uk/live-well/',
- 'label' : 'Live Well'
- },
- {
- 'url' : 'https://www.nhs.uk/mental-health/',
- 'label' : 'Mental health'
- },
- {
- 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/',
- 'label' : 'Care and support'
- },
- {
- 'url' : 'https://www.nhs.uk/pregnancy/',
- 'label' : 'Pregnancy'
- },
- {
- 'url' : 'https://www.nhs.uk/nhs-services/',
- 'label' : 'NHS services'
- }
- ]
- })
- }}
+ search: true
+ }) }}
{% endblock %}
diff --git a/app/components/header/header-service-name-combined-with-logo.njk b/app/components/header/header-service-name-combined-with-logo.njk
new file mode 100644
index 000000000..ad883731e
--- /dev/null
+++ b/app/components/header/header-service-name-combined-with-logo.njk
@@ -0,0 +1,14 @@
+{% set title = "Header with service name as a combined link" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ service: {
+ text: "Prototype kit",
+ href: "#"
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-service-name-unlinked.njk b/app/components/header/header-service-name-unlinked.njk
new file mode 100644
index 000000000..cb32c4c6c
--- /dev/null
+++ b/app/components/header/header-service-name-unlinked.njk
@@ -0,0 +1,17 @@
+{% set title = "Header with unlinked service name" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ logo: {
+ href: "#",
+ ariaLabel: "NHS homepage"
+ },
+ service: {
+ text: "Find your NHS number"
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-service-name-with-account-search-nav.njk b/app/components/header/header-service-name-with-account-search-nav.njk
new file mode 100644
index 000000000..859ca9a17
--- /dev/null
+++ b/app/components/header/header-service-name-with-account-search-nav.njk
@@ -0,0 +1,49 @@
+{% set title = "Header with account, navigation and search" %}
+{% from "components/header/macro.njk" import header %}
+{% extends 'example.njk' %}
+
+{% block main %}
+
+ {{ header({
+ service: {
+ text: "Search patient directory",
+ href: "#"
+ },
+ search: {
+ visuallyHiddenLabel: "Search patient directory"
+ },
+ account: {
+ items: [
+ {
+ text: "Florence Nightingale",
+ icon: true
+ },
+ {
+ action: "#",
+ text: "Log out"
+ }
+ ]
+ },
+ navigation: {
+ items: [
+ {
+ href: "#",
+ text: "Home"
+ },
+ {
+ href: "#",
+ text: "Patient list"
+ },
+ {
+ href: "#",
+ text: "Advanced search"
+ },
+ {
+ href: "#",
+ text: "Help guides"
+ }
+ ]
+ }
+ }) }}
+
+{% endblock %}
diff --git a/app/components/header/header-service-name-with-nav.njk b/app/components/header/header-service-name-with-nav.njk
index 5b1ba1e78..39fdc7565 100644
--- a/app/components/header/header-service-name-with-nav.njk
+++ b/app/components/header/header-service-name-with-nav.njk
@@ -5,34 +5,40 @@
{% block main %}
{{ header({
- "service": {
- "name": "Digital service manual"
+ logo: {
+ href: "#"
},
- "showNav": "true",
- "showSearch": "true",
- "primaryLinks": [
+ service: {
+ text: "Digital service manual",
+ href: "#"
+ },
+ search: {
+ visuallyHiddenLabel: "Search the NHS digital service manual"
+ },
+ navigation: {
+ items: [
{
- "url" : "#",
- "label" : "Standards and technology"
+ href: "#",
+ text: "Standards and technology"
},
{
- 'url' : '#',
- 'label' : 'Design system'
+ href: "#",
+ text: "Design system",
+ current: true
},
{
- 'url' : '#',
- 'label' : 'Content style guide'
+ href: "#",
+ text: "Content style guide"
},
{
- 'url' : '#',
- 'label' : 'Accessibility'
+ href: "#",
+ text: "Accessibility"
},
{
- 'url' : '#',
- 'label' : 'Community and contribution'
+ href: "#",
+ text: "Community and contribution"
}
]
- })
- }}
-
+ }
+ }) }}
{% endblock %}
diff --git a/app/components/header/header-service-name.njk b/app/components/header/header-service-name.njk
index e8b5ee02d..17f8e3412 100644
--- a/app/components/header/header-service-name.njk
+++ b/app/components/header/header-service-name.njk
@@ -5,10 +5,14 @@
{% block main %}
{{ header({
- "service": {
- "name": "Prototype kit"
- }
- })
- }}
+ logo: {
+ href: "#nhs",
+ ariaLabel: "NHS homepage"
+ },
+ service: {
+ text: "Find your NHS number",
+ href: "#"
+ }
+ }) }}
{% endblock %}
diff --git a/app/components/header/header-transactional-service-name.njk b/app/components/header/header-transactional-service-name.njk
deleted file mode 100644
index a711bc518..000000000
--- a/app/components/header/header-transactional-service-name.njk
+++ /dev/null
@@ -1,16 +0,0 @@
-{% set title = 'Header transactional with service name' %}
-{% from 'components/header/macro.njk' import header %}
-{% extends 'example.njk' %}
-
-{% block main %}
-
- {{ header({
- "transactionalService": {
- "name": "Find your NHS number"
- },
- "showNav": "false",
- "showSearch": "false"
- })
- }}
-
-{% endblock %}
diff --git a/app/components/header/index.njk b/app/components/header/index.njk
index 56279572f..61b286a1a 100644
--- a/app/components/header/index.njk
+++ b/app/components/header/index.njk
@@ -5,35 +5,38 @@
{% block main %}
{{ header({
- "showNav": "true",
- "showSearch": "true",
- "primaryLinks": [
+ logo: {
+ href: "#"
+ },
+ search: true,
+ navigation: {
+ items: [
{
- "url" : "https://www.nhs.uk/conditions",
- "label" : "Health A-Z"
+ href: "#",
+ text: "Health A to Z"
},
{
- 'url' : 'https://www.nhs.uk/live-well/',
- 'label' : 'Live Well'
+ href: "#",
+ text: "Live Well"
},
{
- 'url' : 'https://www.nhs.uk/mental-health/',
- 'label' : 'Mental health'
+ href: "#",
+ text: "Mental health"
},
{
- 'url' : 'https://www.nhs.uk/conditions/social-care-and-support/',
- 'label' : 'Care and support'
+ href: "#",
+ text: "Care and support"
},
{
- 'url' : 'https://www.nhs.uk/pregnancy/',
- 'label' : 'Pregnancy'
+ href: "#",
+ text: "Pregnancy"
},
{
- 'url' : 'https://www.nhs.uk/nhs-services/',
- 'label' : 'NHS services'
+ href: "#",
+ text: "NHS services"
}
]
- })
- }}
+ }
+ }) }}
{% endblock %}
diff --git a/app/index.njk b/app/index.njk
index 79fabce3c..eb42f8b4e 100644
--- a/app/index.njk
+++ b/app/index.njk
@@ -91,12 +91,18 @@
Header (default)
Header with navigation
Header with search
- Header with logo only
+ Header with account (logged in)
+ Header with account (logged out)
+ Header with account (logged in, RBAC)
+ Header with unlinked logo only
Header with a service name
+ Header with an unlinked service name
+ Header with a service name combined with NHS logo
Header with a service name, search and navigation
- Header transactional with service name
+ Header with a service name, account, search and navigation
Header organisational
Header organisational with white header
+ Header organisational with white header and account (logged in)
Header organisational with white header and navigation
Hero
Hero with image
diff --git a/backstop.config.js b/backstop.config.js
index c8845847f..4abda102c 100644
--- a/backstop.config.js
+++ b/backstop.config.js
@@ -584,7 +584,7 @@ module.exports = {
]
},
{
- label: 'Header with navigation',
+ label: 'Header with navigation (left aligned)',
url: `${BASE_URL}/components/header/header-navigation.html`,
onReadyScript: 'playwright/onReadyResize.js',
viewports: [
@@ -594,6 +594,17 @@ module.exports = {
viewports.get('large-desktop')
]
},
+ {
+ label: 'Header with navigation (justified)',
+ url: `${BASE_URL}/components/header/header-navigation-justified.html`,
+ onReadyScript: 'playwright/onReadyResize.js',
+ viewports: [
+ viewports.get('mobile'),
+ viewports.get('tablet'),
+ viewports.get('desktop'),
+ viewports.get('large-desktop')
+ ]
+ },
{
label: 'Header with search',
url: `${BASE_URL}/components/header/header-search.html`,
@@ -604,6 +615,47 @@ module.exports = {
viewports.get('large-desktop')
]
},
+ {
+ clickSelector: '.nhsuk-header__search-input',
+ label: 'Header with search (focused search input)',
+ url: `${BASE_URL}/components/header/header-search.html`,
+ viewports: [
+ viewports.get('mobile'),
+ viewports.get('tablet'),
+ viewports.get('desktop'),
+ viewports.get('large-desktop')
+ ]
+ },
+ {
+ label: 'Header with account (logged in)',
+ url: `${BASE_URL}/components/header/header-account-logged-in.html`,
+ viewports: [
+ viewports.get('mobile'),
+ viewports.get('tablet'),
+ viewports.get('desktop'),
+ viewports.get('large-desktop')
+ ]
+ },
+ {
+ label: 'Header with account (logged out)',
+ url: `${BASE_URL}/components/header/header-account-logged-out.html`,
+ viewports: [
+ viewports.get('mobile'),
+ viewports.get('tablet'),
+ viewports.get('desktop'),
+ viewports.get('large-desktop')
+ ]
+ },
+ {
+ label: 'Header with account (logged in, RBAC)',
+ url: `${BASE_URL}/components/header/header-account-rbac.html`,
+ viewports: [
+ viewports.get('mobile'),
+ viewports.get('tablet'),
+ viewports.get('desktop'),
+ viewports.get('large-desktop')
+ ]
+ },
{
label: 'Header with logo only',
url: `${BASE_URL}/components/header/header-logo.html`,
@@ -636,8 +688,8 @@ module.exports = {
]
},
{
- label: 'Header transactional with service name',
- url: `${BASE_URL}/components/header/header-transactional-service-name.html`,
+ label: 'Header with account, navigation and search',
+ url: `${BASE_URL}/components/header/header-service-name-with-account-search-nav.html`,
viewports: [
viewports.get('mobile'),
viewports.get('tablet'),
@@ -667,6 +719,18 @@ module.exports = {
viewports.get('large-desktop')
]
},
+ {
+ clickSelector: '.nhsuk-header__search-input',
+ label: 'Header organisational with white header (focused search input)',
+ url: `${BASE_URL}/components/header/header-org-white.html`,
+ onReadyScript: 'playwright/onReadyResize.js',
+ viewports: [
+ viewports.get('mobile'),
+ viewports.get('tablet'),
+ viewports.get('desktop'),
+ viewports.get('large-desktop')
+ ]
+ },
{
label: 'Header organisational with white header, navigation',
url: `${BASE_URL}/components/header/header-org-white-nav.html`,
@@ -678,6 +742,16 @@ module.exports = {
viewports.get('large-desktop')
]
},
+ {
+ label: 'Header organisational with white header and account',
+ url: `${BASE_URL}/components/header/header-org-white-account.html`,
+ viewports: [
+ viewports.get('mobile'),
+ viewports.get('tablet'),
+ viewports.get('desktop'),
+ viewports.get('large-desktop')
+ ]
+ },
{
clickSelector: '#toggle-menu',
label: 'Header with navigation open',
diff --git a/packages/assets/icons/icon-user.svg b/packages/assets/icons/icon-user.svg
new file mode 100644
index 000000000..6bf2120da
--- /dev/null
+++ b/packages/assets/icons/icon-user.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/packages/components/components.unit.test.mjs b/packages/components/components.unit.test.mjs
index f43063f6f..0f5b0ac2a 100644
--- a/packages/components/components.unit.test.mjs
+++ b/packages/components/components.unit.test.mjs
@@ -32,10 +32,6 @@ describe('Components', () => {
@forward "components/fieldset/fieldset";
@forward "components/footer/footer";
@forward "components/header/header";
- @forward "components/header/header-organisation";
- @forward "components/header/header-service";
- @forward "components/header/header-transactional";
- @forward "components/header/header-white";
@forward "components/hero/hero";
@forward "components/hint/hint";
@forward "components/images/images";
diff --git a/packages/components/header/_header-base.scss b/packages/components/header/_header-base.scss
deleted file mode 100644
index 1d41c0449..000000000
--- a/packages/components/header/_header-base.scss
+++ /dev/null
@@ -1,555 +0,0 @@
-@use "sass:math";
-@use "../../core/objects" as *;
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-////
-/// Header component
-///
-/// The behaviour with regards to responsiveness is as follow:
-///
-/// - Mobile to tablet view
-/// Menu toggle button visible and navigation links hidden, search toggle
-/// button visible and search form hidden
-///
-/// - Tablet to desktop view
-/// Menu toggle button visible and navigation links hidden, search toggle
-/// button hidden and search form visible
-///
-/// - Desktop+ view
-/// Menu toggle button hidden and navigation links visible, search toggle
-/// button hidden and search form visible
-///
-/// @group components
-////
-
-.nhsuk-header {
- background-color: $color_nhsuk-blue;
-}
-
-.nhsuk-header__container {
- padding: 20px 0;
- @include nhsuk-width-container;
-
- @include nhsuk-media-query($from: tablet) {
- display: flex;
- justify-content: space-between;
- }
-}
-
-.nhsuk-header__logo {
- @include nhsuk-media-query($until: tablet) {
- position: relative;
- z-index: 1;
- }
-
- .nhsuk-logo__background {
- fill: $color_nhsuk-white;
-
- @include nhsuk-media-query($media-type: print) {
- fill: $color_nhsuk-blue;
- }
- }
-
- .nhsuk-logo__text {
- fill: $color_nhsuk-blue;
-
- @include nhsuk-media-query($media-type: print) {
- fill: $color_nhsuk-white;
- }
- }
-
- @include nhsuk-media-query($from: tablet) {
- padding-left: 0;
- }
-
- .nhsuk-logo {
- @include nhsuk-logo-size;
- border: 0;
- }
-
- @include nhsuk-media-query($until: desktop) {
- max-width: 60%;
- }
-
- @media (max-width: 450px) {
- max-width: 50%;
- }
-}
-
-.nhsuk-header__link {
- display: block;
- @include nhsuk-logo-size;
- @include nhsuk-link-style-white;
-
- &:hover {
- .nhsuk-logo {
- box-shadow: 0 0 0 $nhsuk-focus-width $color_shade_nhsuk-blue-35;
- }
- }
-
- &:focus {
- box-shadow: none;
-
- .nhsuk-logo {
- box-shadow:
- 0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
- 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
- }
- }
-
- &:hover,
- &:active,
- &:focus {
- background-color: transparent;
- }
-
- @include nhsuk-media-query($media-type: print) {
- &::after {
- content: "";
- }
- }
-}
-
-.nhsuk-header__logo--only {
- max-width: 100%;
-
- @include nhsuk-media-query($from: tablet) {
- .nhsuk-header__link--service {
- align-items: center;
- display: flex;
- -ms-flex-align: center;
- margin-bottom: 0;
- width: auto;
- }
-
- .nhsuk-header__service-name {
- padding-left: nhsuk-spacing(3);
- }
- }
-}
-
-.nhsuk-header__content {
- position: relative;
- @include nhsuk-print-hide;
-
- &.js-show {
- border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5;
- }
-
- @include nhsuk-media-query($from: tablet) {
- &.js-show {
- border-bottom: 0;
- }
- }
-}
-
-.nhsuk-header__search {
- position: relative;
- text-align: right;
-
- @include nhsuk-media-query($from: tablet) {
- margin-left: nhsuk-spacing(2);
- }
-}
-
-.nhsuk-header__search-form {
- height: 100%;
- overflow: visible;
-
- @include nhsuk-media-query($until: tablet) {
- display: flex;
- margin: nhsuk-spacing(3) 0 0;
- position: relative;
- width: 100%;
- }
-}
-
-.nhsuk-header__search-wrap {
- @include nhsuk-media-query($from: tablet) {
- display: block;
- }
-}
-
-.nhsuk-search__input {
- -webkit-appearance: listbox;
- border-bottom-left-radius: $nhsuk-border-radius;
- border-bottom-right-radius: 0;
- border-top-left-radius: $nhsuk-border-radius;
- border-top-right-radius: 0;
- padding: 0 nhsuk-spacing(3);
-
- &:focus {
- border: nhsuk-spacing(1) solid $nhsuk-focus-text-color;
- box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color;
- outline: $nhsuk-focus-width solid transparent;
- outline-offset: $nhsuk-focus-width;
- padding: 0 13px;
- }
-
- &::placeholder {
- color: $color_nhsuk-grey-1;
- font-size: $nhsuk-base-font-size;
- opacity: 1; // fixes low contrast of placeholder text in firefox
- }
-
- &:-ms-input-placeholder {
- color: $color_nhsuk-grey-1;
- font-size: $nhsuk-base-font-size;
- }
-
- &::-webkit-input-placeholder {
- color: $color_nhsuk-grey-1;
- font-size: $nhsuk-base-font-size;
- }
-
- @include nhsuk-media-query($until: tablet) {
- border: 1px solid $color_nhsuk-white;
- border-bottom-right-radius: $nhsuk-border-radius;
- border-top-right-radius: $nhsuk-border-radius;
- flex-grow: 2;
- -ms-flex-positive: 2;
- font-size: inherit;
- height: 40px;
- margin: 0;
- outline: none;
- width: 100%;
- z-index: 1;
- }
-
- @include nhsuk-media-query($from: tablet) {
- border: 1px solid $color_nhsuk-white;
- font-size: $nhsuk-base-font-size;
- height: nhsuk-spacing(6);
- width: 200px;
- }
-
- @include nhsuk-media-query($from: desktop) {
- width: 235px;
- }
-}
-
-.nhsuk-search__submit {
- border: 0;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: $nhsuk-border-radius;
- border-top-left-radius: 0;
- border-top-right-radius: $nhsuk-border-radius;
- float: right;
- font-size: inherit;
- line-height: inherit;
- outline: none;
- padding: 0;
-
- &::-moz-focus-inner {
- border: 0;
- }
-
- &:hover {
- cursor: pointer;
- }
-
- @include nhsuk-media-query($until: tablet) {
- background-color: $color_nhsuk-grey-5;
- border: 0;
- height: 40px;
- margin: 0;
- padding: nhsuk-spacing(2) nhsuk-spacing(2) 0;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 9;
-
- .nhsuk-icon__search {
- fill: $color_nhsuk-blue;
- height: 27px;
- width: 27px;
- }
-
- &:hover {
- background-color: $color_shade_nhsuk-blue-35;
- border: 1px solid $color_nhsuk-white;
-
- .nhsuk-icon {
- fill: $color_nhsuk-white;
- }
- }
-
- &:focus {
- background-color: $nhsuk-focus-color;
- box-shadow:
- 0 -4px $nhsuk-focus-color,
- 0 $nhsuk-focus-width $nhsuk-focus-text-color;
- outline: $nhsuk-focus-width solid transparent;
- outline-offset: $nhsuk-focus-width;
-
- &:hover {
- background-color: $nhsuk-focus-color;
-
- .nhsuk-icon {
- fill: $nhsuk-focus-text-color;
- }
- }
-
- .nhsuk-icon {
- fill: $nhsuk-focus-text-color;
- }
- }
- }
-
- @include nhsuk-media-query($from: tablet) {
- background-color: $color_nhsuk-grey-5;
- display: block;
- height: nhsuk-spacing(6);
- line-height: 1;
- width: 44px;
-
- .nhsuk-icon__search {
- height: 27px;
- width: 27px;
- }
-
- &:hover {
- background-color: $color_shade_nhsuk-blue-35;
- border: 1px solid $color_nhsuk-white;
-
- .nhsuk-icon__search {
- fill: $color_nhsuk-white;
- }
- }
-
- &:focus {
- box-shadow:
- 0 -2px $nhsuk-focus-color,
- 0 $nhsuk-focus-width $nhsuk-focus-text-color;
- @include nhsuk-focused-button;
- }
-
- &:active {
- background-color: $color_shade_nhsuk-blue-50;
- border: 0;
-
- .nhsuk-icon__search {
- fill: $color_nhsuk-white;
- }
- }
- }
-}
-
-.nhsuk-header__navigation-link {
- border-bottom: nhsuk-spacing(1) solid transparent;
- border-top: nhsuk-spacing(1) solid transparent;
- color: $color_nhsuk-white;
- display: block;
- padding: nhsuk-spacing(3) 2px;
- text-decoration: underline;
- white-space: nowrap;
- @include nhsuk-font(16);
- @include nhsuk-link-style-white;
-
- @include nhsuk-media-query($until: tablet) {
- font-size: inherit;
- }
-
- @include nhsuk-media-query($from: tablet) {
- padding: 12px 2px;
- }
-
- .nhsuk-icon__chevron-right {
- fill: $color_nhsuk-grey-3;
- position: absolute;
- right: nhsuk-spacing(1);
- top: 11px;
- }
-
- &:hover {
- box-shadow: none;
- text-decoration: none;
- }
-
- &:active,
- &:focus {
- background-color: $nhsuk-focus-color;
- border-bottom: $nhsuk-focus-width solid $nhsuk-focus-text-color;
- box-shadow: none;
- color: $nhsuk-focus-text-color;
- outline: $nhsuk-focus-width solid transparent;
- outline-offset: $nhsuk-focus-width;
- text-decoration: none;
-
- &:hover {
- background-color: $nhsuk-focus-color;
- color: $nhsuk-focus-text-color;
- }
-
- &:visited {
- background-color: $nhsuk-focus-color;
- color: $nhsuk-focus-text-color;
- }
- }
-}
-
-// menu toggle button, only shows when screen can't fit all nav items
-.nhsuk-header__menu-toggle {
- background: transparent;
- border: 0;
- border-bottom: nhsuk-spacing(1) solid transparent;
- border-radius: 0;
- border-top: nhsuk-spacing(1) solid transparent;
- box-sizing: border-box;
- cursor: pointer;
- margin: 0;
- overflow: visible;
- position: relative;
- right: 0;
- text-align: center;
- text-decoration: underline;
- vertical-align: top;
- visibility: hidden;
- width: auto;
- z-index: 1;
-
- &.nhsuk-header__navigation-link {
- padding-right: 23px;
- }
-
- .nhsuk-icon__chevron-down {
- right: -3px;
- }
-}
-
-.nhsuk-header__menu-toggle--visible {
- visibility: visible;
- display: block;
-}
-
-.nhsuk-icon__chevron-down {
- .nhsuk-header__menu-toggle[aria-expanded="true"] & {
- transform: rotate(270deg);
- }
-}
-
-.nhsuk-navigation {
- @include nhsuk-width-container;
-
- @include nhsuk-media-query($until: tablet) {
- position: relative;
- z-index: 10;
- }
-
- @include nhsuk-media-query($from: tablet) {
- border-top: 1px solid $color_transparent_nhsuk-white-20;
- }
-}
-
-%nhsuk-navigation-list {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-// ul of visible nav
-.nhsuk-header__navigation-list {
- @extend %nhsuk-navigation-list;
- display: flex;
- flex-wrap: wrap;
- width: calc(100% + $nhsuk-gutter-half);
- margin: 0 math.div($nhsuk-gutter-half, 2) * -1;
-
- @include nhsuk-media-query($from: tablet) {
- width: calc(100% + $nhsuk-gutter);
- margin: 0 math.div($nhsuk-gutter, 2) * -1;
- }
-
- @include nhsuk-media-query($from: desktop) {
- justify-content: space-between;
- }
-
- .js-enabled & {
- flex-wrap: nowrap;
- overflow: hidden;
- }
-}
-
-.nhsuk-header__navigation-list--left-aligned {
- @include nhsuk-media-query($from: desktop) {
- justify-content: initial;
- }
-}
-
-.nhsuk-header__navigation-item {
- margin-bottom: 0;
- padding: 0 math.div($nhsuk-gutter-half, 2);
-
- @include nhsuk-media-query($from: tablet) {
- padding: 0 $nhsuk-gutter-half;
- }
-}
-
-.nhsuk-navigation-container {
- position: relative;
- @include nhsuk-print-hide;
-
- @include nhsuk-media-query($until: tablet) {
- margin-top: -20px;
- }
-}
-
-// ul of hidden nav
-.nhsuk-header__drop-down {
- @extend %nhsuk-navigation-list;
- background-color: $color_nhsuk-white;
- border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5;
- overflow: hidden;
- position: absolute;
- right: 0;
- top: 100%;
- left: 0;
- @include nhsuk-print-hide;
-
- @include nhsuk-media-query($until: tablet) {
- margin: 0 $nhsuk-gutter-half * -1;
- }
-
- .nhsuk-header__navigation-link {
- margin: 0;
- padding: 12px 0;
- @include nhsuk-width-container;
- @include nhsuk-link-style-default;
- @include nhsuk-link-style-no-visited-state;
-
- &:active,
- &:focus {
- color: $nhsuk-focus-text-color;
- }
- }
-
- .nhsuk-header__navigation-item {
- padding: 0;
- border-top: 1px solid $color_nhsuk-grey-5;
- }
-}
-
-.nhsuk-header__drop-down--hidden {
- display: none;
-}
-
-.nhsuk-mobile-menu-container {
- align-self: center;
- display: none;
- padding: 0 math.div($nhsuk-gutter-half, 2);
-
- @include nhsuk-media-query($from: desktop) {
- padding: 0 $nhsuk-gutter-half;
- }
-}
-
-.nhsuk-mobile-menu-container--visible {
- display: block;
-}
-
-.nhsuk-header__navigation-item--home {
- @include nhsuk-media-query($from: desktop) {
- display: none;
- }
-}
diff --git a/packages/components/header/_header-organisation.scss b/packages/components/header/_header-organisation.scss
deleted file mode 100644
index 2a074f4f1..000000000
--- a/packages/components/header/_header-organisation.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-/// These are the styles for the organisation header variants.
-
-.nhsuk-header--organisation {
- .nhsuk-header__link {
- height: auto;
- text-decoration: none;
- width: auto;
-
- &:hover {
- color: $color_nhsuk-white;
- text-decoration: underline;
-
- .nhsuk-logo {
- box-shadow: none;
- }
- }
-
- &:focus {
- background: $nhsuk-focus-color;
- box-shadow:
- 0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
- 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
-
- .nhsuk-organisation-name,
- .nhsuk-organisation-descriptor {
- color: $nhsuk-focus-text-color;
- }
-
- .nhsuk-logo {
- box-shadow: none;
- }
-
- &:hover {
- text-decoration: none;
- }
- }
- }
-
- .nhsuk-header__logo .nhsuk-logo {
- @include nhsuk-logo-size-small;
-
- @media (max-width: 450px) {
- height: nhsuk-spacing(4);
- width: 60px;
- }
-
- @media (max-width: 375px) {
- height: 20px;
- width: 50px;
- }
- }
-
- .nhsuk-header__navigation {
- max-width: 100%;
- }
-}
-
-.nhsuk-organisation-name {
- color: $color_nhsuk-white;
- display: block;
- font-size: 22px;
- font-weight: $nhsuk-font-bold;
- letter-spacing: 0.2px;
- line-height: 23px;
- margin-top: -2px;
-
- @include nhsuk-media-query($media-type: print) {
- color: $nhsuk-print-text-color;
- }
-
- @media (max-width: 450px) {
- font-size: 17px;
- letter-spacing: 0.1px;
- line-height: 17px;
- }
-
- @media (max-width: 375px) {
- font-size: 13px;
- line-height: 13px;
- }
-
- .nhsuk-organisation-name-split {
- display: block;
- }
-}
-
-.nhsuk-organisation-descriptor {
- color: $color_nhsuk-white;
- display: block;
- font-size: 15px;
- font-weight: $nhsuk-font-bold;
- line-height: 21px;
-
- @include nhsuk-media-query($media-type: print) {
- color: $color_nhsuk-blue;
- }
-
- @media (max-width: 450px) {
- font-size: 12px;
- line-height: 18px;
- }
-
- @media (max-width: 375px) {
- font-size: 10px;
- line-height: 13px;
- }
-}
-
-.nhsuk-organisation-logo {
- border: 0;
- max-height: 100px;
- max-width: 280px;
-
- @media (max-width: 450px) {
- max-width: 150px;
- }
-}
-
-.nhsuk-organisation-logo[src$=".svg"] {
- height: auto;
- max-width: 220px;
- width: 100%;
-}
diff --git a/packages/components/header/_header-service.scss b/packages/components/header/_header-service.scss
deleted file mode 100644
index 2a2abf94e..000000000
--- a/packages/components/header/_header-service.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-/// These are the styles for the service header variants.
-
-.nhsuk-header__link--service {
- height: auto;
- margin-bottom: -(nhsuk-spacing(1));
- text-decoration: none;
- width: auto;
-
- @include nhsuk-media-query($from: large-desktop) {
- align-items: center;
- display: flex;
- -ms-flex-align: center;
- margin-bottom: 0;
- width: auto;
- }
-
- &:hover {
- background: none;
-
- .nhsuk-header__service-name {
- text-decoration: underline;
- }
- }
-
- &:focus {
- background: $nhsuk-focus-color;
- box-shadow:
- 0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
- 0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
-
- .nhsuk-header__service-name {
- color: $nhsuk-focus-text-color;
- text-decoration: none;
- }
-
- .nhsuk-logo {
- box-shadow: none;
- }
- }
-}
-
-.nhsuk-header__service-name {
- color: $color_nhsuk-white;
- display: block;
- padding-left: 0;
- padding-right: 0;
-
- @include nhsuk-font(19);
-
- @include nhsuk-media-query($from: large-desktop) {
- padding-left: nhsuk-spacing(3);
- }
-
- @include nhsuk-media-query($until: large-desktop) {
- max-width: 220px;
- }
-}
diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss
deleted file mode 100644
index f5cf3237e..000000000
--- a/packages/components/header/_header-transactional.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@use "../../core/tools" as *;
-
-/// These are the styles for the transactional header variants.
-
-.nhsuk-header__transactional-service-name {
- margin-bottom: -(nhsuk-spacing(1));
- padding-left: nhsuk-spacing(3);
- padding-top: 2px;
-
- @include nhsuk-media-query($until: tablet) {
- padding-left: 0;
- padding-top: nhsuk-spacing(2);
- width: 100%;
- }
-}
-
-.nhsuk-header__transactional-service-name--link {
- @include nhsuk-link-style-white;
- @include nhsuk-font(19);
-
- &:link {
- text-decoration: none;
- }
-
- &:hover {
- text-decoration: underline;
- }
-}
-
-.nhsuk-header__transactional {
- .nhsuk-header__container {
- justify-content: normal;
- }
-
- .nhsuk-header__link {
- display: block;
- @include nhsuk-logo-size-small;
- }
-
- .nhsuk-logo {
- @include nhsuk-logo-size-small;
- }
-}
-
-.nhsuk-header__transactional--logo {
- max-width: 100%;
-
- @include nhsuk-media-query($from: tablet) {
- .nhsuk-header__link--service {
- align-items: center;
- display: flex;
- -ms-flex-align: center;
- margin-bottom: 0;
- width: auto;
- }
-
- .nhsuk-header__service-name {
- padding-left: nhsuk-spacing(3);
- }
- }
-}
diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss
deleted file mode 100644
index 99b568df8..000000000
--- a/packages/components/header/_header-white.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@use "../../core/settings" as *;
-@use "../../core/tools" as *;
-
-/// These are the styles for the white header variants.
-
-.nhsuk-header--white {
- background-color: $color_nhsuk-white;
-
- .nhsuk-header__search-wrap {
- margin-bottom: nhsuk-spacing(3);
-
- @include nhsuk-media-query($until: tablet) {
- &::after {
- background: $color_nhsuk-white;
- }
- }
- }
-
- .nhsuk-navigation-container {
- background-color: $color_nhsuk-blue;
- }
-
- .nhsuk-navigation {
- border-top-width: 0;
- }
-
- .nhsuk-logo {
- .nhsuk-logo__background {
- fill: $color_nhsuk-blue;
- }
-
- .nhsuk-logo__text {
- fill: $color_nhsuk-white;
- }
- }
-
- .nhsuk-header__link {
- &:hover {
- color: $nhsuk-text-color;
- text-decoration: underline;
-
- .nhsuk-organisation-descriptor {
- color: $nhsuk-text-color;
- }
- }
- }
-
- .nhsuk-search__submit {
- background-color: $color_nhsuk-blue;
-
- .nhsuk-icon__search {
- fill: $color_nhsuk-white;
- }
-
- &:hover {
- background-color: $color_shade_nhsuk-blue-20;
- border-color: $color_shade_nhsuk-blue-20;
- }
-
- &:focus {
- background-color: $nhsuk-focus-color;
-
- .nhsuk-icon__search {
- fill: $nhsuk-focus-text-color;
- }
- }
- }
-
- .nhsuk-search__input {
- border: 1px solid $color_nhsuk-grey-3;
-
- &:focus {
- border: 2px solid $nhsuk-focus-text-color;
-
- @include nhsuk-media-query($until: tablet) {
- border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
- }
- }
- }
-
- .nhsuk-header__search-form {
- @include nhsuk-media-query($until: tablet) {
- padding-top: 0;
- }
- }
-
- .nhsuk-organisation-name {
- color: nhsuk-shade($color_nhsuk-black, 100%);
- }
-
- .nhsuk-organisation-descriptor {
- color: $color_nhsuk-blue;
- }
-
- .nhsuk-header__transactional-service-name--link {
- color: $color_nhsuk-black;
- }
-
- .nhsuk-header__service-name {
- color: $nhsuk-text-color;
- }
-}
-
-.nhsuk-header--white-nav {
- .nhsuk-navigation-container {
- background-color: $color_nhsuk-white;
- }
-
- .nhsuk-navigation {
- background-color: $color_nhsuk-white;
- border-top: 1px solid $color_nhsuk-grey-5;
-
- .nhsuk-header__navigation-link {
- @include nhsuk-link-style-default;
- @include nhsuk-link-style-no-visited-state;
-
- &:active,
- &:focus {
- color: $nhsuk-focus-text-color;
- }
- }
- }
-}
diff --git a/packages/components/header/_index.scss b/packages/components/header/_index.scss
index a9e632ca9..f9ae6dde0 100644
--- a/packages/components/header/_index.scss
+++ b/packages/components/header/_index.scss
@@ -1,5 +1,678 @@
-@forward "header-base";
-@forward "header-organisation";
-@forward "header-service";
-@forward "header-transactional";
-@forward "header-white";
+@use "sass:math";
+@use "../../core/objects" as *;
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+$_header-item-padding: 12px;
+
+////
+/// Header component
+///
+/// The behaviour with regards to responsiveness is as follow:
+///
+/// - Mobile to tablet view
+/// Menu toggle button visible and navigation links hidden, search toggle
+/// button visible and search form hidden
+///
+/// - Tablet to desktop view
+/// Menu toggle button visible and navigation links hidden, search toggle
+/// button hidden and search form visible
+///
+/// - Desktop+ view
+/// Menu toggle button hidden and navigation links visible, search toggle
+/// button hidden and search form visible
+///
+/// @group components
+////
+
+.nhsuk-header {
+ background-color: $color_nhsuk-blue;
+ color: $color_nhsuk-white;
+
+ @include nhsuk-media-query($media-type: print) {
+ color: $color_nhsuk-black;
+ }
+}
+
+.nhsuk-header__container {
+ display: flex;
+ flex-flow: column wrap;
+ gap: nhsuk-spacing(3);
+ padding: nhsuk-spacing(3) 0;
+ @include nhsuk-width-container;
+
+ @include nhsuk-media-query($from: tablet) {
+ flex-direction: row;
+ }
+}
+
+/// Service logo (and optional name)
+
+.nhsuk-header__service,
+.nhsuk-header__service-logo {
+ align-items: center;
+ display: flex;
+ flex-grow: 999;
+ flex-wrap: wrap;
+ gap: nhsuk-spacing(2) nhsuk-spacing(3);
+ margin-right: auto;
+}
+
+.nhsuk-header__service-logo {
+ flex-grow: 0;
+}
+
+.nhsuk-header__service-name {
+ flex-grow: 999;
+ text-wrap: balance;
+ @include nhsuk-font(19, $line-height: 1.1);
+}
+
+.nhsuk-header__service-logo,
+.nhsuk-header__service-name[href] {
+ @include nhsuk-link-style-white;
+
+ &:link {
+ text-decoration: none;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ @include nhsuk-media-query($media-type: print) {
+ &::after {
+ content: "";
+ }
+ }
+}
+
+/// Account
+
+.nhsuk-header__account {
+ position: relative;
+ z-index: 10;
+ border-radius: $nhsuk-border-radius;
+ flex-grow: 1;
+
+ .nhsuk-icon__user {
+ height: 24px;
+ width: 24px;
+ flex-shrink: 0;
+ }
+
+ &,
+ &::before {
+ background-color: nhsuk-shade($color_nhsuk-blue, 20%);
+ }
+
+ &::before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border: 1px solid nhsuk-shade($color_nhsuk-blue, 20%);
+ border-radius: $nhsuk-border-radius + 1px;
+ }
+
+ @include nhsuk-media-query($from: tablet) {
+ align-self: start;
+
+ // Expand header account by 1px to ensure the search
+ // input does not appear to be taller when inline
+ &::before {
+ top: -1px;
+ bottom: -1px;
+ }
+ }
+}
+
+.nhsuk-header__account-list {
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1px;
+ list-style: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+}
+
+.nhsuk-header__account-item {
+ display: flex;
+ flex-grow: 1;
+ gap: nhsuk-spacing(2);
+ margin: 0;
+ outline: 1px solid $color_nhsuk-blue;
+ overflow-wrap: anywhere;
+ padding: nhsuk-spacing(2) $_header-item-padding;
+ @include nhsuk-font(16);
+
+ &:nth-last-child(2) {
+ margin-right: auto;
+ }
+
+ &:last-child {
+ flex-grow: 0;
+ }
+}
+
+.nhsuk-header__account-button,
+.nhsuk-header__account-link {
+ display: flex;
+ gap: nhsuk-spacing(2);
+ overflow-wrap: anywhere;
+ @include nhsuk-link-style-white;
+}
+
+.nhsuk-header__account-button {
+ background: none;
+ border: 0;
+ padding: 0;
+ cursor: pointer;
+ @include nhsuk-font(16);
+}
+
+/// Search
+
+.nhsuk-header__search {
+ flex-grow: 1;
+ position: relative;
+ z-index: 10;
+
+ @include nhsuk-print-hide;
+
+ .nhsuk-icon__search {
+ height: 28px;
+ width: 28px;
+
+ // Adjust optical alignment due to the handle appearing
+ // to push the magnifying glass circle to the top left
+ margin: 0 -2px -2px 0;
+ }
+}
+
+.nhsuk-header__search-form {
+ display: flex;
+ height: 100%;
+ overflow: visible;
+}
+
+// 1. Disable default search input appearance
+.nhsuk-header__search-input.nhsuk-input {
+ border-color: transparent;
+ border-radius: $nhsuk-border-radius 0 0 $nhsuk-border-radius;
+ height: 40px;
+ margin-right: -$nhsuk-border-width-form-element;
+ padding-right: $_header-item-padding;
+ padding-left: $_header-item-padding - $nhsuk-border-width-form-element;
+ width: 100%;
+ @include nhsuk-font-size(16);
+
+ &:focus {
+ z-index: 10;
+ }
+
+ &::placeholder {
+ color: $color_nhsuk-grey-1;
+ opacity: 1; // Fixes low contrast of placeholder text in firefox
+ }
+
+ // Hide search input clear button (IE)
+ &::-ms-clear {
+ display: none;
+ }
+
+ // Hide search input icon and cancel button (WebKit, Blink)
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button {
+ appearance: none;
+ }
+
+ @include nhsuk-media-query($until: tablet) {
+ font-size: inherit;
+ }
+}
+
+.nhsuk-header__search-submit {
+ background-color: $color_nhsuk-grey-5;
+ border: 0;
+ border-radius: 0 $nhsuk-border-radius $nhsuk-border-radius 0;
+ color: $color_nhsuk-blue;
+ flex-shrink: 0;
+ height: nhsuk-spacing(6);
+ line-height: 1;
+ margin: 0;
+ width: 44px;
+ cursor: pointer;
+
+ &:hover,
+ &:active {
+ background-color: $color_shade_nhsuk-blue-35;
+ box-shadow: inset 0 0 0 1px $color_nhsuk-white;
+ color: $color_nhsuk-white;
+ }
+
+ &:active {
+ background-color: $color_shade_nhsuk-blue-50;
+ }
+
+ &:focus {
+ @include nhsuk-focused-button;
+ }
+}
+
+/// Navigation
+
+.nhsuk-header__navigation {
+ position: relative;
+ @include nhsuk-print-hide;
+
+ @include nhsuk-media-query($until: tablet) {
+ margin-top: math.div($nhsuk-gutter, 2) * -1;
+ }
+}
+
+.nhsuk-header__navigation-container {
+ @include nhsuk-width-container;
+
+ @include nhsuk-media-query($until: tablet) {
+ position: relative;
+ z-index: 10;
+ }
+
+ @include nhsuk-media-query($from: tablet) {
+ border-top: 1px solid $color_transparent_nhsuk-white-20;
+ }
+}
+
+.nhsuk-header__navigation-list {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ margin: 0 math.div($nhsuk-gutter-half, 2) * -1;
+ padding: 0;
+ width: calc(100% + $nhsuk-gutter-half);
+
+ @include nhsuk-media-query($from: tablet) {
+ width: calc(100% + $nhsuk-gutter);
+ margin: 0 math.div($nhsuk-gutter, 2) * -1;
+ }
+
+ .nhsuk-header__navigation--justified & {
+ @include nhsuk-media-query($from: desktop) {
+ justify-content: space-between;
+ }
+ }
+
+ .js-enabled & {
+ flex-wrap: nowrap;
+ overflow: hidden;
+ }
+}
+
+.nhsuk-header__navigation-item {
+ margin-bottom: 0;
+ padding: 0 math.div($nhsuk-gutter-half, 2);
+
+ @include nhsuk-media-query($from: tablet) {
+ padding: 0 $nhsuk-gutter-half;
+ }
+}
+
+// This is a element used as a fallback mechanism for visually
+// indicating current page in scenarios where CSS isn’t available.
+// We don’t actually want it to be bold normally, so inherit parent font-weight.
+.nhsuk-header__navigation-item-current-fallback {
+ font-weight: inherit;
+}
+
+.nhsuk-header__navigation-link {
+ display: block;
+ padding: nhsuk-spacing(3) 2px;
+ white-space: nowrap;
+ @include nhsuk-font(16);
+ @include nhsuk-link-style-white;
+
+ // Visual indicator for current navigation item has grey line on bottom edge,
+ // and no underline on the link.
+ &[aria-current="page"],
+ &[aria-current="true"] {
+ text-decoration: none;
+ box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-border-color;
+ }
+
+ &:focus {
+ box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color;
+ }
+
+ @include nhsuk-media-query($until: tablet) {
+ font-size: inherit;
+ }
+}
+
+/// Menu (shown when screen can’t fit all navigation items)
+
+.nhsuk-header__menu {
+ align-self: center;
+ padding: 0 math.div($nhsuk-gutter-half, 2);
+
+ &[hidden] {
+ display: none;
+ }
+
+ @include nhsuk-media-query($from: tablet) {
+ padding: 0 $nhsuk-gutter-half;
+ }
+}
+
+.nhsuk-header__menu-toggle {
+ align-items: center;
+ background: transparent;
+ border: 0;
+ border-radius: 0;
+ box-sizing: border-box;
+ cursor: pointer;
+ display: flex;
+ margin: 0;
+ text-align: center;
+ text-decoration: none;
+ vertical-align: top;
+
+ &[hidden] {
+ display: none;
+ }
+
+ .nhsuk-icon__chevron-down {
+ width: nhsuk-spacing(4);
+ height: nhsuk-spacing(4);
+ transform: rotate(90deg);
+
+ // Move icon to align with edge of button, offseting 8px of empty
+ // SVG viewbox but keeping the same 2px padding used by text links
+ margin-right: -8px + 2px;
+ }
+
+ &[aria-expanded="true"] .nhsuk-icon__chevron-down {
+ transform: rotate(270deg);
+ }
+}
+
+.nhsuk-header__menu-list {
+ background-color: $color_nhsuk-white;
+ border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-4;
+ list-style: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 100%;
+ left: 0;
+ @include nhsuk-print-hide;
+
+ &[hidden] {
+ display: none;
+ }
+
+ @include nhsuk-media-query($until: tablet) {
+ margin: 0 $nhsuk-gutter-half * -1;
+ }
+
+ .nhsuk-header__navigation-link {
+ @include nhsuk-width-container;
+ @include nhsuk-link-style-default;
+ @include nhsuk-link-style-no-visited-state;
+
+ // When in expanded menu, a current item link should revert to having a
+ // no box-shadow, with a box-shadow added to containing list item instead.
+ &[aria-current="page"],
+ &[aria-current="true"] {
+ box-shadow: none;
+ }
+
+ // But when focused the black line at the bottom should return,
+ // again using box-shadow.
+ &:focus {
+ box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-focus-text-color;
+ }
+ }
+
+ .nhsuk-header__navigation-item {
+ border-top: 1px solid $color_nhsuk-grey-5;
+ padding: 0;
+ }
+
+ // Current item within expended mobile menu gets blue line on left edge.
+ //
+ // The blue line uses an inset box-shadow instead of a border, as there’s
+ // already a grey border on the top, and using 2 different colour borders
+ // creates an awkward diagonal line where they meet.
+ .nhsuk-header__navigation-item--current {
+ box-shadow: inset 6px 0 $color_nhsuk-blue;
+ }
+}
+
+/// White header variant
+
+.nhsuk-header--white {
+ background-color: $color_nhsuk-white;
+
+ .nhsuk-header__container,
+ .nhsuk-header__logo {
+ color: $color_nhsuk-blue;
+ }
+
+ .nhsuk-header__service-logo {
+ @include nhsuk-link-style-default;
+
+ &:link {
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ .nhsuk-header__organisation-name,
+ .nhsuk-header__organisation-name-descriptor {
+ color: inherit;
+ }
+ }
+
+ &:focus {
+ .nhsuk-header__logo {
+ color: inherit;
+ }
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .nhsuk-header__account,
+ .nhsuk-header__account::before {
+ background-color: $color_nhsuk-grey-5;
+ }
+
+ .nhsuk-header__account::before {
+ border-color: $color_nhsuk-grey-4;
+ }
+
+ .nhsuk-header__account-item {
+ outline-color: $color_nhsuk-grey-4;
+ }
+
+ .nhsuk-header__account-button,
+ .nhsuk-header__account-link {
+ @include nhsuk-link-style-default;
+ @include nhsuk-link-style-no-visited-state;
+ }
+
+ .nhsuk-header__search-input.nhsuk-input:not(:focus) {
+ margin-right: -1px;
+ padding-left: $_header-item-padding - 1px;
+ border-color: $color_nhsuk-grey-3;
+ border-width: 1px;
+ }
+
+ .nhsuk-header__search-submit {
+ background-color: $color_nhsuk-blue;
+ color: $color_nhsuk-white;
+
+ &:hover,
+ &:active {
+ background-color: $color_shade_nhsuk-blue-20;
+ border-color: $color_shade_nhsuk-blue-20;
+ box-shadow: none;
+ }
+
+ &:active {
+ background-color: $color_shade_nhsuk-blue-50;
+ }
+
+ &:focus {
+ @include nhsuk-focused-button;
+ }
+ }
+
+ .nhsuk-header__organisation-name,
+ .nhsuk-header__service-name {
+ color: $color_nhsuk-black;
+ }
+
+ .nhsuk-header__organisation-name-descriptor {
+ color: $color_nhsuk-blue;
+ }
+
+ .nhsuk-header__navigation {
+ background-color: $color_nhsuk-blue;
+
+ @include nhsuk-media-query($until: tablet) {
+ margin-top: 0;
+ }
+ }
+
+ .nhsuk-header__navigation-container {
+ border-top-width: 0;
+ }
+}
+
+.nhsuk-header--white-navigation {
+ .nhsuk-header__navigation {
+ background-color: $color_nhsuk-white;
+ color: $color_nhsuk-blue;
+
+ @include nhsuk-media-query($until: tablet) {
+ margin-top: -(nhsuk-spacing(3));
+ }
+ }
+
+ .nhsuk-header__navigation-container {
+ border-color: $color_nhsuk-grey-4;
+ border-top-width: 1px;
+ }
+
+ .nhsuk-header__navigation-link {
+ @include nhsuk-link-style-default;
+ @include nhsuk-link-style-no-visited-state;
+
+ // Visual indicator for current navigation item has blue line on
+ // bottom edge instead of grey in the regular Header nav
+ &[aria-current="page"],
+ &[aria-current="true"] {
+ text-decoration: none;
+ box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-blue;
+ }
+
+ &:focus {
+ box-shadow: inset 0 ($nhsuk-focus-width * -1) $color_nhsuk-black;
+ }
+ }
+
+ // Menu
+ .nhsuk-header__menu-toggle {
+ text-decoration: none;
+
+ &:not(:focus):not(:active):hover {
+ color: $color_nhsuk-blue;
+ }
+ }
+
+ .nhsuk-header__menu-list {
+ // When in expanded menu, a current item link should revert to having a
+ // no box-shadow, with a box-shadow added to containing list item instead.
+ .nhsuk-header__navigation-link[aria-current="page"],
+ .nhsuk-header__navigation-link[aria-current="true"] {
+ box-shadow: none;
+ }
+ }
+}
+
+/// Organisation header variant
+
+.nhsuk-header--organisation {
+ .nhsuk-header__service-logo {
+ display: block;
+
+ &:focus {
+ .nhsuk-header__organisation-name,
+ .nhsuk-header__organisation-name-descriptor {
+ color: $nhsuk-focus-text-color;
+ }
+ }
+ }
+
+ .nhsuk-header__logo {
+ height: 24px;
+ width: 60px;
+
+ @include nhsuk-media-query($from: tablet) {
+ height: 32px;
+ width: 80px;
+ }
+ }
+}
+
+.nhsuk-header__organisation-name {
+ color: $color_nhsuk-white;
+ display: block;
+ @include nhsuk-font(22, $weight: bold, $line-height: 1.1);
+
+ @include nhsuk-media-query($media-type: print) {
+ color: $nhsuk-print-text-color;
+ }
+}
+
+.nhsuk-header__organisation-name-split {
+ display: block;
+}
+
+.nhsuk-header__organisation-name-descriptor {
+ color: $color_nhsuk-white;
+ display: block;
+ @include nhsuk-font(14, $weight: bold);
+
+ @include nhsuk-media-query($media-type: print) {
+ color: $color_nhsuk-blue;
+ }
+}
+
+.nhsuk-header__organisation-logo {
+ border: 0;
+ max-height: 100px;
+ max-width: 280px;
+
+ @media (max-width: 450px) {
+ max-width: 150px;
+ }
+
+ &[src$=".svg"] {
+ height: auto;
+ max-width: 220px;
+ width: 100%;
+ }
+}
diff --git a/packages/components/header/header.js b/packages/components/header/header.js
index cec0423f0..3ef5afa60 100644
--- a/packages/components/header/header.js
+++ b/packages/components/header/header.js
@@ -12,6 +12,7 @@ class Header {
this.$root = $root
+ this.navigation = this.$root.querySelector('.nhsuk-header__navigation')
this.navigationList = this.$root.querySelector(
'.nhsuk-header__navigation-list'
)
@@ -19,30 +20,28 @@ class Header {
'.nhsuk-header__navigation-item'
)
- this.mobileMenuToggleButton = this.$root.querySelector(
- '.nhsuk-header__menu-toggle'
- )
- this.mobileMenuContainer = this.$root.querySelector(
- '.nhsuk-mobile-menu-container'
- )
+ this.menu = this.$root.querySelector('.nhsuk-header__menu')
+ this.menuToggle = this.$root.querySelector('.nhsuk-header__menu-toggle')
if (
+ !this.navigation ||
!this.navigationList ||
!this.navigationItems ||
!this.navigationItems.length ||
- !this.mobileMenuToggleButton ||
- !this.mobileMenuContainer
+ !this.menu ||
+ !this.menuToggle
) {
return this
}
- this.mobileMenu = document.createElement('ul')
+ this.menuList = document.createElement('ul')
+
this.menuIsEnabled = false
this.menuIsOpen = false
this.handleEscapeKey = this.onEscapeKey.bind(this)
this.handleUpdateNavigation = this.debounce(this.updateNavigation)
- this.handleToggleMobileMenu = this.toggleMobileMenu.bind(this)
+ this.handleToggleMenu = this.toggleMenu.bind(this)
this.setupNavigation()
this.updateNavigation()
@@ -68,10 +67,7 @@ class Header {
// Reset and calculate widths on every resize
this.breakpoints.forEach((breakpoint) => {
- this.navigationList.insertBefore(
- breakpoint.element,
- this.mobileMenuContainer
- )
+ this.navigationList.insertBefore(breakpoint.element, this.menu)
// Calculate widths
right += breakpoint.element.offsetWidth
@@ -97,87 +93,65 @@ class Header {
}
/**
- * Add the mobile menu to the DOM
+ * Add the menu to the DOM
*/
- setupMobileMenu() {
- if (this.mobileMenu.parentElement) {
+ setupMenu() {
+ if (this.menuList.parentElement) {
return
}
- this.mobileMenuContainer.appendChild(this.mobileMenu)
- this.mobileMenu.classList.add(
- 'nhsuk-header__drop-down',
- 'nhsuk-header__drop-down--hidden'
- )
+ this.menuList.classList.add('nhsuk-header__menu-list')
+ this.menuList.setAttribute('hidden', '')
+ this.menu.appendChild(this.menuList)
}
/**
- * Enable the mobile menu
+ * Enable the menu
*/
- enableMobileMenu() {
+ enableMenu() {
if (this.menuIsEnabled) {
return
}
this.menuIsEnabled = true
-
- this.mobileMenuToggleButton.classList.add(
- 'nhsuk-header__menu-toggle--visible'
- )
-
- this.mobileMenuContainer.classList.add(
- 'nhsuk-mobile-menu-container--visible'
- )
+ this.menu.removeAttribute('hidden')
// Add click listener to toggle menu
- this.mobileMenuToggleButton.addEventListener(
- 'click',
- this.handleToggleMobileMenu
- )
+ this.menuToggle.addEventListener('click', this.handleToggleMenu)
}
/**
- * Disable the mobile menu
+ * Disable the menu
*/
- disableMobileMenu() {
+ disableMenu() {
if (!this.menuIsEnabled) {
return
}
- this.closeMobileMenu()
+ this.closeMenu()
this.menuIsEnabled = false
+ this.menu.setAttribute('hidden', '')
- this.mobileMenuToggleButton.classList.remove(
- 'nhsuk-header__menu-toggle--visible'
- )
-
- this.mobileMenuContainer.classList.remove(
- 'nhsuk-mobile-menu-container--visible'
- )
-
- // Remove click listener to toggle menu
- this.mobileMenuToggleButton.removeEventListener(
- 'click',
- this.handleToggleMobileMenu
- )
+ // Remove click listener from toggle menu
+ this.menuToggle.removeEventListener('click', this.handleToggleMenu)
}
/**
- * Close the mobile menu
+ * Close the menu
*
- * Closes the mobile menu and updates accessibility state.
+ * Closes the menu and updates accessibility state.
*
* Removes the margin-bottom from the navigation
*/
- closeMobileMenu() {
+ closeMenu() {
if (!this.menuIsEnabled || !this.menuIsOpen) {
return
}
this.menuIsOpen = false
- this.mobileMenu.classList.add('nhsuk-header__drop-down--hidden')
- this.$root.style.marginBottom = 0
- this.mobileMenuToggleButton.setAttribute('aria-expanded', 'false')
+ this.menuList.setAttribute('hidden', '')
+ this.menuToggle.setAttribute('aria-expanded', 'false')
+ this.navigation.style.marginBottom = 0
// Remove escape key listener to close menu
document.removeEventListener('keydown', this.handleEscapeKey)
@@ -187,36 +161,35 @@ class Header {
* Escape key handler
*
* This function is called when the user
- * presses the escape key to close the mobile menu.
+ * presses the escape key to close the menu.
*
* @param {KeyboardEvent} event - Key press event
*/
onEscapeKey(event) {
if (event.key === 'Escape') {
- this.closeMobileMenu()
+ this.closeMenu()
}
}
/**
- * Open the mobile menu
+ * Open the menu
*
- * Opens the mobile menu and updates accessibility state.
+ * Opens the menu and updates accessibility state.
*
- * The mobile menu is absolutely positioned, so it adds a margin
+ * The menu is absolutely positioned, so it adds a margin
* to the bottom of the navigation to prevent it from overlapping
*
* Adds event listeners for the close button,
*/
- openMobileMenu() {
+ openMenu() {
if (!this.menuIsEnabled || this.menuIsOpen) {
return
}
this.menuIsOpen = true
- this.mobileMenu.classList.remove('nhsuk-header__drop-down--hidden')
- const marginBody = this.mobileMenu.offsetHeight
- this.$root.style.marginBottom = `${marginBody}px`
- this.mobileMenuToggleButton.setAttribute('aria-expanded', 'true')
+ this.menuList.removeAttribute('hidden')
+ this.menuToggle.setAttribute('aria-expanded', 'true')
+ this.navigation.style.marginBottom = `${this.menuList.offsetHeight}px`
// Add escape key listener to close menu
document.addEventListener('keydown', this.handleEscapeKey)
@@ -225,24 +198,24 @@ class Header {
/**
* Handle menu button click
*
- * Toggles the mobile menu between open and closed
+ * Toggles the menu between open and closed
*/
- toggleMobileMenu() {
+ toggleMenu() {
if (!this.menuIsEnabled) {
return
}
if (this.menuIsOpen) {
- this.closeMobileMenu()
+ this.closeMenu()
} else {
- this.openMobileMenu()
+ this.openMenu()
}
}
/**
* Update navigation for the available space
*
- * Moves all items that overflow the available space into the mobile menu
+ * Moves all items that overflow the available space into the menu
*/
updateNavigation() {
this.resetNavigation()
@@ -252,22 +225,22 @@ class Header {
return breakpoint.right > this.width
})
- // Disable mobile menu if empty
+ // Disable menu if empty
if (!menuItems.length) {
- this.disableMobileMenu()
+ this.disableMenu()
return
}
- this.setupMobileMenu()
- this.enableMobileMenu()
+ this.setupMenu()
+ this.enableMenu()
// Subtract space for menu button
- this.width -= this.mobileMenuContainer.offsetWidth
+ this.width -= this.menu.offsetWidth
// Move items based on available width
this.breakpoints.forEach((breakpoint) => {
if (breakpoint.right > this.width) {
- this.mobileMenu.insertAdjacentElement('beforeend', breakpoint.element)
+ this.menuList.insertAdjacentElement('beforeend', breakpoint.element)
}
})
}
@@ -281,7 +254,7 @@ class Header {
*/
module.exports = (options = {}) => {
const $scope = options.scope || document
- const $root = $scope.querySelector('.nhsuk-navigation')
+ const $root = $scope.querySelector('.nhsuk-header')
new Header($root)
}
diff --git a/packages/components/header/header.jsdom.test.mjs b/packages/components/header/header.jsdom.test.mjs
index 1247f423f..500729275 100644
--- a/packages/components/header/header.jsdom.test.mjs
+++ b/packages/components/header/header.jsdom.test.mjs
@@ -19,67 +19,79 @@ describe('Header class', () => {
beforeEach(() => {
document.body.innerHTML = `
-
-
+
`
- const $container = document.querySelector('.nhsuk-navigation-container')
+ const $container = document.querySelector('.nhsuk-header')
$navigation = getByRole($container, 'navigation')
- $menuButton = getByRole($container, 'button', { name: 'Browse More' })
+ $menuButton = getByRole($container, 'button', {
+ name: 'Browse More',
+ hidden: true
+ })
listWidth = 800
itemWidth = 100
@@ -157,13 +169,13 @@ describe('Header class', () => {
describe('Menu button', () => {
it('should be hidden by default', () => {
expect($menuButton).toHaveRole('button')
- expect($menuButton).not.toHaveClass('nhsuk-header__menu-toggle--visible')
+ expect($menuButton.parentElement).toHaveAttribute('hidden')
})
it('should be hidden when items do not overflow', () => {
initHeader()
- expect($menuButton).not.toHaveClass('nhsuk-header__menu-toggle--visible')
+ expect($menuButton.parentElement).toHaveAttribute('hidden')
})
it('should be visible when items overflow', () => {
@@ -171,7 +183,7 @@ describe('Header class', () => {
initHeader()
- expect($menuButton).toHaveClass('nhsuk-header__menu-toggle--visible')
+ expect($menuButton.parentElement).not.toHaveAttribute('hidden')
})
it('should toggle menu via click', () => {
@@ -180,17 +192,13 @@ describe('Header class', () => {
initHeader()
// Menu closed
- expect($menuButton.nextElementSibling).toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
// Open menu
$menuButton.click()
// Menu open
- expect($menuButton.nextElementSibling).not.toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).not.toHaveAttribute('hidden')
// Adds listener for escape key
expect(document.addEventListener).toHaveBeenCalledWith(
@@ -202,9 +210,7 @@ describe('Header class', () => {
$menuButton.click()
// Menu closed
- expect($menuButton.nextElementSibling).toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
// Removes listener for escape key
expect(document.removeEventListener).toHaveBeenCalledWith(
@@ -219,25 +225,19 @@ describe('Header class', () => {
initHeader()
// Menu closed
- expect($menuButton.nextElementSibling).toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
// Open menu
$menuButton.click()
// Menu open
- expect($menuButton.nextElementSibling).not.toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).not.toHaveAttribute('hidden')
// Press the escape key to close it
await user.keyboard('[Escape]')
// Menu closed
- expect($menuButton.nextElementSibling).toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
})
})
@@ -259,9 +259,7 @@ describe('Header class', () => {
expect($menuButton.nextElementSibling).toBeInTheDocument()
expect($menuButton.nextElementSibling).toHaveRole('list')
- expect($menuButton.nextElementSibling).toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
})
it('should be added when items overflow when resized', async () => {
@@ -277,9 +275,7 @@ describe('Header class', () => {
expect($menuButton.nextElementSibling).toBeInTheDocument()
expect($menuButton.nextElementSibling).toHaveRole('list')
- expect($menuButton.nextElementSibling).toHaveClass(
- 'nhsuk-header__drop-down--hidden'
- )
+ expect($menuButton.nextElementSibling).toHaveAttribute('hidden')
})
})
@@ -332,8 +328,8 @@ describe('Header class', () => {
initHeader()
- const $listItems = $navigation.querySelectorAll('nav > ul > li')
- const $menuItems = $navigation.querySelectorAll('nav > ul > li li')
+ const $listItems = $navigation.querySelectorAll('div > ul > li')
+ const $menuItems = $navigation.querySelectorAll('div > ul > li li')
expect($listItems).toHaveLength(expected.listItems)
expect($menuItems).toHaveLength(expected.menuItems)
@@ -352,8 +348,8 @@ describe('Header class', () => {
fireEvent.resize(window)
await setTimeout(100)
- const $listItems = $navigation.querySelectorAll('nav > ul > li')
- const $menuItems = $navigation.querySelectorAll('nav > ul > li li')
+ const $listItems = $navigation.querySelectorAll('div > ul > li')
+ const $menuItems = $navigation.querySelectorAll('div > ul > li li')
expect($listItems).toHaveLength(expected.listItems)
expect($menuItems).toHaveLength(expected.menuItems)
@@ -373,8 +369,8 @@ describe('Header class', () => {
fireEvent.resize(window)
await setTimeout(100)
- const $listItems = $navigation.querySelectorAll('nav > ul > li')
- const $menuItems = $navigation.querySelectorAll('nav > ul > li li')
+ const $listItems = $navigation.querySelectorAll('div > ul > li')
+ const $menuItems = $navigation.querySelectorAll('div > ul > li li')
expect($listItems).toHaveLength(expected.listItems)
expect($menuItems).toHaveLength(expected.menuItems)
diff --git a/packages/components/header/macro-options.json b/packages/components/header/macro-options.json
index 4f85fe8e5..0c48aee1d 100644
--- a/packages/components/header/macro-options.json
+++ b/packages/components/header/macro-options.json
@@ -1,27 +1,49 @@
[
{
- "name": "showNav",
- "type": "boolean",
- "required": true,
- "description": "Set to `true` to show the navigation links in the header."
- },
- {
- "name": "showSearch",
- "type": "boolean",
- "required": true,
- "description": "Set to `true` to show the site search input form."
- },
- {
- "name": "homeHref",
- "type": "string",
- "required": "No",
- "description": "The `href` of the link for the logo and mobile home link in the navigation links. Defaults to `\"/\"`."
+ "name": "logo",
+ "type": "object",
+ "required": false,
+ "description": "Object containing options for the logo",
+ "params": [
+ {
+ "name": "href",
+ "type": "string",
+ "required": false,
+ "description": "The `href` of the link for the logo. If not set, and a `service.href` is set, or both are set to same value, then the logo and service name will be combined into a single link."
+ },
+ {
+ "name": "src",
+ "type": "string",
+ "required": false,
+ "description": "The path of the logo image, if you are not using the default NHS logo."
+ },
+ {
+ "name": "ariaLabel",
+ "type": "string",
+ "required": false,
+ "description": "The `aria-label` for the logo. Defaults to `\"NHS homepage\"`"
+ }
+ ]
},
{
- "name": "ariaLabel",
- "type": "string",
- "required": "No",
- "description": "Aria label for the logo href. Defaults to `\"NHS homepage\"`."
+ "name": "service",
+ "type": "object",
+ "required": false,
+ "description": "Object containing options for the service name.",
+ "params": [
+ {
+ "name": "text",
+ "type": "string",
+ "required": false,
+ "description": "The text to use for the service name."
+ },
+ {
+ "name": "href",
+ "type": "string",
+ "required": false,
+ "description": "The `href` of the link for the service name."
+ }
+ ]
},
{
"name": "organisation",
@@ -33,7 +55,7 @@
"name": "name",
"type": "string",
"required": false,
- "description": "Organisation name value."
+ "description": "Organisation name."
},
{
"name": "split",
@@ -46,110 +68,186 @@
"type": "string",
"required": false,
"description": "Organisation descriptor."
- },
- {
- "name": "logoURL",
- "type": "string",
- "required": false,
- "description": "Organisation logo if using a static asset, such as PNG, is preferred."
}
]
},
{
- "name": "service",
+ "name": "navigation",
"type": "object",
"required": false,
- "description": "Settings for the service name in the header.",
+ "description": "Object containing settings for the primary navigation.",
"params": [
{
- "name": "name",
+ "name": "items",
+ "type": "array",
+ "required": false,
+ "description": "Array of navigation links for use in the header.",
+ "params": [
+ {
+ "name": "href",
+ "type": "string",
+ "required": true,
+ "description": "The href of a navigation item in the header."
+ },
+ {
+ "name": "text",
+ "type": "string",
+ "required": false,
+ "description": "The text of a navigation item in the header."
+ },
+ {
+ "name": "current",
+ "type": "boolean",
+ "required": false,
+ "description": "Set to true if this links to the current page being shown."
+ },
+ {
+ "name": "active",
+ "type": "boolean",
+ "required": false,
+ "description": "Set to true if the current page is within this section, but the link doesn't necessarily link to the current page"
+ },
+ {
+ "name": "classes",
+ "type": "string",
+ "required": false,
+ "description": "Classes to add to the list item containing the link."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "HTML attributes (for example data attributes) to add to the list item containing the link."
+ }
+ ]
+ },
+ {
+ "name": "ariaLabel",
"type": "string",
"required": false,
- "description": "Name of the service."
+ "description": "The `aria-label` for the primary navigation. Defaults to `\"Menu\"`"
+ },
+ {
+ "name": "classes",
+ "type": "string",
+ "required": false,
+ "description": "Classes to add to the primary navigation."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "HTML attributes (for example data attributes) to add to the primary navigation."
}
]
},
{
- "name": "primaryLinks",
- "type": "array",
+ "name": "search",
+ "type": "object",
"required": false,
- "description": "Array of navigation links for use in the header.",
+ "description": "Object containing settings for a search box",
"params": [
{
- "name": "url",
+ "name": "action",
"type": "string",
- "required": true,
- "description": "The href of a navigation item in the header."
+ "required": false,
+ "description": "The search action endpoint. Defaults to `\"https://www.nhs.uk/search\"`"
},
{
- "name": "label",
+ "name": "name",
"type": "string",
"required": false,
- "description": "The label of a navigation item in the header."
+ "description": "The name for the search field. Defaults to `\"q\"`"
},
{
- "name": "classes",
+ "name": "placeholder",
"type": "string",
"required": false,
- "description": "Classes to add to the list item containing the link."
+ "description": "The placeholder text for the search field. Defaults to `\"Search\"`"
},
{
- "name": "attributes",
- "type": "object",
+ "name": "visuallyHiddenLabel",
+ "type": "string",
"required": false,
- "description": "HTML attributes (for example data attributes) to add to the list item containing the link."
+ "description": "The label for the search field. Defaults to `\"Search the NHS website\"`"
+ },
+ {
+ "name": "visuallyHiddenButton",
+ "type": "string",
+ "required": false,
+ "description": "The label for the visually hidden button. Defaults to `\"Search\"`"
}
]
},
{
- "name": "transactional",
- "type": "string",
- "required": "No",
- "description": "Set to `true` if this is a transactional header (with smaller logo)."
- },
- {
- "name": "transactionalService",
+ "name": "account",
"type": "object",
"required": false,
- "description": "Settings for transactional service header.",
+ "description": "Object containing settings for the account section of the header.",
"params": [
{
- "name": "name",
+ "name": "items",
+ "type": "array",
+ "required": false,
+ "description": "The search action endpoint. Defaults to `\"https://www.nhs.uk/search\"`",
+ "params": [
+ {
+ "name": "text",
+ "type": "string",
+ "required": false,
+ "description": "The text to display for the item. Ignored if `html` is set."
+ },
+ {
+ "name": "html",
+ "type": "string",
+ "required": false,
+ "description": "The html to display for the item. If set, `text` is ignored"
+ },
+ {
+ "name": "icon",
+ "type": "boolean",
+ "required": false,
+ "description": "Whether to include the account icon for the item. Defaults to `false`."
+ },
+ {
+ "name": "action",
+ "type": "string",
+ "required": false,
+ "description": "If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons."
+ },
+ {
+ "name": "method",
+ "type": "string",
+ "required": false,
+ "description": "The value to use for the `method` of the form if `action` is set. Defaults to `\"post\"`"
+ }
+ ]
+ },
+ {
+ "name": "ariaLabel",
"type": "string",
"required": false,
- "description": "Transactional service name value."
+ "description": "The `aria-label` for the account navigation. Defaults to `\"Account\"`"
},
{
- "name": "href",
+ "name": "classes",
"type": "string",
"required": false,
- "description": "The href of the transactional header name."
+ "description": "Classes to add to the account navigation."
},
{
- "name": "longName",
- "type": "boolean",
+ "name": "attributes",
+ "type": "object",
"required": false,
- "description": "Set this to `true` if the transactional service name is longer than 22 characters."
+ "description": "HTML attributes (for example data attributes) to add to the account navigation."
}
]
},
- {
- "name": "searchAction",
- "type": "string",
- "required": "No",
- "description": "Custom search action endpoint."
- },
- {
- "name": "searchInputName",
- "type": "string",
- "required": "No",
- "description": "The name for the search field. Defaults to `\"q\"`."
- },
{
"name": "baseUrl",
"type": "string",
"required": false,
- "description": "Base URL to prepend to the organisation logo URL."
+ "description": "Base URL to prepend to the `logo.src` path."
},
{
"name": "classes",
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 9839bccbf..59bf9488f 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -1,103 +1,144 @@
{% from "../../macros/attributes.njk" import nhsukAttributes %}
-{# Define some defaults #}
-{% set showNav = params.showNav if params.showNav else "false" %}
-{% set showSearch = params.showSearch if params.showSearch else "false" %}
+{%- set searchAction = params.search.action | default("https://www.nhs.uk/search/") %}
+{%- set searchName = params.search.name | default("q") %}
+{%- set searchPlaceholder = params.search.placeholder | default("Search") %}
+{%- set searchVisuallyHiddenButton = params.search.visuallyHiddenButton | default("Search") %}
+{%- set searchVisuallyHiddenLabel = params.search.visuallyHiddenLabel | default("Search the NHS website") %}
-{% set nhsLogo %}
-
-
-
-
-{% endset %}
+{#- The NHS logo and service name are combined into a single link if either
+ the logo doesn’t have an `href` set but the service name does, or if both
+ have an exact `href`. This avoids having 2 links to same destination. -#}
+{%- set combineLogoAndServiceNameLinks = (params.service.href and not (params.logo.href)) or (params.service.href and (params.service.href == params.logo.href)) %}
-
-
- {# close nhsuk-header__container #}
+{%- macro _serviceName(text, href) %}
+{% if href -%}
+
+{% else -%}
+
+{%- endif -%}
+{% endmacro %}
-{% if showNav == "true" and params.primaryLinks %}
-
-
+
+{% endif %}
diff --git a/packages/core/styles/_icons.scss b/packages/core/styles/_icons.scss
index f35b04357..388284071 100644
--- a/packages/core/styles/_icons.scss
+++ b/packages/core/styles/_icons.scss
@@ -16,7 +16,11 @@
/// Default icon colours
.nhsuk-icon__search {
- fill: $color_nhsuk-blue;
+ fill: currentcolor;
+}
+
+.nhsuk-icon__user {
+ fill: currentcolor;
}
.nhsuk-icon__chevron-left {
@@ -53,19 +57,6 @@
.nhsuk-icon__chevron-down {
fill: currentcolor;
- height: 24px;
- position: absolute;
- right: 4px;
- transform: rotate(90deg);
- width: 24px;
-}
-
-.nhsuk-icon__chevron-up {
- fill: $color_nhsuk-blue;
-
- path {
- fill: $color_nhsuk-white;
- }
}
.nhsuk-icon__emdash {
diff --git a/tests/backstop/bitmaps_reference/Header_default_desktop.png b/tests/backstop/bitmaps_reference/Header_default_desktop.png
index a298b60a6..f1d9a467c 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_desktop.png and b/tests/backstop/bitmaps_reference/Header_default_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_default_large-desktop.png b/tests/backstop/bitmaps_reference/Header_default_large-desktop.png
index 15b14786a..46754ba86 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_default_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_default_mobile.png b/tests/backstop/bitmaps_reference/Header_default_mobile.png
index 8efa79773..7c882b184 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_mobile.png and b/tests/backstop/bitmaps_reference/Header_default_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_default_tablet.png b/tests/backstop/bitmaps_reference/Header_default_tablet.png
index 311238293..8bbbc5598 100644
Binary files a/tests/backstop/bitmaps_reference/Header_default_tablet.png and b/tests/backstop/bitmaps_reference/Header_default_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_desktop.png
index 6876d8a26..8734d8bdf 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png
index 1400a6e6e..0524569ec 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_mobile.png
index 5d896cfaf..b37b9717b 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_mobile.png and b/tests/backstop/bitmaps_reference/Header_organisational_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_tablet.png
index 67bd7c470..5ceb0077a 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_tablet.png and b/tests/backstop/bitmaps_reference/Header_organisational_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_desktop.png
new file mode 100644
index 000000000..2ea7b467a
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_large-desktop.png
new file mode 100644
index 000000000..1759c1a0d
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_mobile.png
new file mode 100644
index 000000000..7dd9426eb
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_tablet.png
new file mode 100644
index 000000000..fc06799fb
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_and_account_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png
index 5559dd7e5..d9aef360e 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_desktop.png
new file mode 100644
index 000000000..172476535
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_large-desktop.png
new file mode 100644
index 000000000..7dd17ba03
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_mobile.png
new file mode 100644
index 000000000..dba76f863
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_tablet.png
new file mode 100644
index 000000000..7b0f7110b
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_focused_search_input_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png
index a518b0773..ed4fa69bc 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png
index 9966dcc3c..84442a47e 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png
index b0995049d..c28959609 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png
index ec783c1e6..4f146f9d9 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png
index 8db97fb28..a4085aa0a 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png
index b924b6813..d791e4d64 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_navigation_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png
index 6065b01d4..0796f4e25 100644
Binary files a/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png and b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_desktop.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_desktop.png
deleted file mode 100644
index cbbe31795..000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_desktop.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_large-desktop.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_large-desktop.png
deleted file mode 100644
index b3dcf84cd..000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_large-desktop.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_mobile.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_mobile.png
deleted file mode 100644
index 974880d6c..000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_mobile.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_tablet.png b/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_tablet.png
deleted file mode 100644
index 743a61f18..000000000
Binary files a/tests/backstop/bitmaps_reference/Header_transactional_with_service_name_tablet.png and /dev/null differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_desktop.png
new file mode 100644
index 000000000..6ae4a4467
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_large-desktop.png
new file mode 100644
index 000000000..a7b5060e8
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_mobile.png
new file mode 100644
index 000000000..3694a2920
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_tablet.png
new file mode 100644
index 000000000..d9c4619c3
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_RBAC_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_desktop.png
new file mode 100644
index 000000000..fd94ee856
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_large-desktop.png
new file mode 100644
index 000000000..a257ea178
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_mobile.png
new file mode 100644
index 000000000..0664aed6e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_in_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_tablet.png
new file mode 100644
index 000000000..5229dd40a
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_in_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_desktop.png
new file mode 100644
index 000000000..5c74452f2
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_large-desktop.png
new file mode 100644
index 000000000..5bda0f604
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_mobile.png
new file mode 100644
index 000000000..dcec3617e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_logged_out_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_tablet.png
new file mode 100644
index 000000000..16431351f
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_logged_out_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_desktop.png
new file mode 100644
index 000000000..5dfcae130
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_large-desktop.png
new file mode 100644
index 000000000..90203e690
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_mobile.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_mobile.png
new file mode 100644
index 000000000..415ac43e0
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_tablet.png b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_tablet.png
new file mode 100644
index 000000000..2a4647c61
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_account_navigation_and_search_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png
index 6520a9713..60be112bd 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png
index adae313b1..0893b98ff 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png
index 7c185de47..7e252528f 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png b/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png
index baf5a2802..796e7e500 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_logo_only_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png
index a9c64387e..095699866 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_desktop.png
new file mode 100644
index 000000000..eb09444bf
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_large-desktop.png
new file mode 100644
index 000000000..98709442a
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_mobile.png
new file mode 100644
index 000000000..f1d9b9546
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_justified_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_tablet.png
new file mode 100644
index 000000000..8c5b8efbe
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_justified_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png
index 795db71fe..a0d9aaad1 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_desktop.png
new file mode 100644
index 000000000..71a078d8e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_large-desktop.png
new file mode 100644
index 000000000..f2b91cae9
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_mobile.png
new file mode 100644
index 000000000..f1d9b9546
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_tablet.png
new file mode 100644
index 000000000..8c5b8efbe
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_navigation_left_aligned_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png
index 9d5b2846f..f1d9b9546 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png b/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png
index cad2799d5..2b232f5d3 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_open_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png
index ebf8401e1..18a600f2b 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_open_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png b/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png
index 0db8a08ff..a72f7173e 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_navigation_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_desktop.png
index f8792cb07..4be235d08 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_search_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_desktop.png
new file mode 100644
index 000000000..e3b6c9549
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_large-desktop.png
new file mode 100644
index 000000000..e73b24819
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_mobile.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_mobile.png
new file mode 100644
index 000000000..c2db0a79b
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_tablet.png b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_tablet.png
new file mode 100644
index 000000000..282733eb1
Binary files /dev/null and b/tests/backstop/bitmaps_reference/Header_with_search_focused_search_input_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png
index edff08e30..fd1afb28c 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_mobile.png b/tests/backstop/bitmaps_reference/Header_with_search_mobile.png
index 627b40640..7ceb48fcc 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_search_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_search_tablet.png b/tests/backstop/bitmaps_reference/Header_with_search_tablet.png
index 04b5f849d..fb29eee7c 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_search_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_search_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png
index fa301b778..fb8a5b0ff 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png
index 76d160c4d..ac8ac2e62 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png b/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png
index 08ec786db..1ad2987fd 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png
index 455fa5457..461950db0 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png
index bc888574e..4a2e5c7c6 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_large-desktop.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png
index 1173239f9..440e0deb1 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_mobile.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png
index 2a37c2f96..39c4b7fbb 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_search_navigation_tablet.png differ
diff --git a/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png b/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png
index 14902ded0..bae959932 100644
Binary files a/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png and b/tests/backstop/bitmaps_reference/Header_with_service_name_tablet.png differ