diff --git a/CHANGELOG.md b/CHANGELOG.md index 4406be279..120f58825 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -164,6 +164,29 @@ We've made fixes to NHS.UK frontend in the following pull requests: :new: **New features** +#### Updated header + +We've added a new header variant to show 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. +- The primary navigation in the header now lets you show which item is the current section or page. +- Update header navigation label from ’Primary navigation’ to ‘Menu’, and remove superfluous `role` and `id` attributes. +- Update header navigation to align items to the left. To restore the previous behaviour, where navigation items appeared evenly spaced out, use the new `.nhsuk-header__navigation-list--justified` modifier class. If you are using the `.nhsuk-header__navigation-list--left-aligned` modifier class, this can now be removed. + +:boom: **Header breaking changes** + +- 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. +- Replace the `searchAction` option with the nested `search.action` option +- Replace the `searchInputName` option with the nested `search.name` option +- Update `primaryLinks` in the header to use `text` and `href` instead of `label` and `url`. +- We've changed the NHS logo in the header to have higher contrast when focused. +- Remove hardcoded home link from navigation. +- Refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element. + +To update your header, compare it with the [HTML markup for the header on the service manual website](https://service-manual.nhs.uk/design-system/components/header). + +[These changes were added in pull request #1058: Header updates - breaking changes.](https://github.com/nhsuk/nhsuk-frontend/pull/1058) + #### Define negative spacing using the `nhsuk-spacing()` function You can now pass the negative equivalent of a point from the typography scale to the `nhsuk-spacing()` function to get negative spacing. diff --git a/app/components/all.njk b/app/components/all.njk index 80560826e..e9beb2ec5 100644 --- a/app/components/all.njk +++ b/app/components/all.njk @@ -9,28 +9,27 @@ }) }} {{ header({ - "showNav": "true", - "showSearch": "true", + "search": true, "primaryLinks": [ { - "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' } ] }) @@ -45,7 +44,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..57ab17c87 --- /dev/null +++ b/app/components/header/header-account-logged-in.njk @@ -0,0 +1,45 @@ +{% 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" + } + ] + }, + primaryLinks: [ + { + 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..0a2338b09 --- /dev/null +++ b/app/components/header/header-account-logged-out.njk @@ -0,0 +1,19 @@ +{% 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..60a9c353b --- /dev/null +++ b/app/components/header/header-account-rbac.njk @@ -0,0 +1,49 @@ +{% 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" + } + ] + }, + primaryLinks: [ + { + 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.njk b/app/components/header/header-navigation.njk index daae074f8..a3b3fdbda 100644 --- a/app/components/header/header-navigation.njk +++ b/app/components/header/header-navigation.njk @@ -5,39 +5,32 @@ {% block main %} {{ header({ - "showNav": "true", - "showSearch": "false", - "primaryLinks": [ - { - "url" : "https://www.nhs.uk/conditions", - "label" : "Health A-Z", - "classes": "app-header__navigation-item--current", - "attributes": { - "aria-current": "true" - } - }, - { - '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' - } - ] - }) - }} - + primaryLinks: [ + { + href: "#", + text: "Health A to Z" + }, + { + href: "#", + text: "Live Well" + }, + { + href: "#", + text: "Mental health" + }, + { + href: "#", + text: "Care and support", + active: true + }, + { + href: "#", + text: "Pregnancy" + }, + { + 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..6dc0240c5 --- /dev/null +++ b/app/components/header/header-org-white-account.njk @@ -0,0 +1,54 @@ +{% 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" + } + ] + }, + primaryLinks: [ + { + href: "#", + text: "Your hospital visit" + }, + { + href: "#", + text: "Wards and departments" + }, + { + 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..8460c33cc 100644 --- a/app/components/header/header-org-white-nav.njk +++ b/app/components/header/header-org-white-nav.njk @@ -3,39 +3,41 @@ {% extends 'example.njk' %} {% 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: "#" + }, + organisation: { + name: "Anytown Anyplace", + split: "Anywhere", + descriptor: "NHS Foundation Trust" }, - "primaryLinks": [ + primaryLinks: [ { - "url" : "#", - "label" : "Your hospital visit" + href: "#", + text: "Your hospital visit" }, { - 'url' : '#', - 'label' : 'Wards and departments' + href: "#", + text: "Wards and departments", + active: true }, { - 'url' : '#', - 'label' : 'Conditions and treatments' + href: "#", + text: "Conditions and treatments" }, { - 'url' : '#', - 'label' : 'Our people' + href: "#", + text: "Our people" }, { - 'url' : '#', - 'label' : 'Our research' + href: "#", + text: "Our research" } - ] - }) -}} - + ], + search: { + visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website" + } + }) }} {% endblock %} diff --git a/app/components/header/header-org-white.njk b/app/components/header/header-org-white.njk index 8c2e0ff5f..3d96261fa 100644 --- a/app/components/header/header-org-white.njk +++ b/app/components/header/header-org-white.njk @@ -3,39 +3,40 @@ {% extends 'example.njk' %} {% 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: "#" + }, + organisation: { + name: "Anytown Anyplace", + split: "Anywhere", + descriptor: "NHS Foundation Trust" }, - "primaryLinks": [ + primaryLinks: [ { - "url" : "#", - "label" : "Your hospital visit" + href: "#", + text: "Your hospital visit" }, { - 'url' : '#', - 'label' : 'Wards and departments' + href: "#", + text: "Wards and departments" }, { - 'url' : '#', - 'label' : 'Conditions and treatments' + href: "#", + text: "Conditions and treatments" }, { - 'url' : '#', - 'label' : 'Our people' + href: "#", + text: "Our people" }, { - 'url' : '#', - 'label' : 'Our research' + href: "#", + text: "Our research" } - ] - }) -}} - + ], + search: { + visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website" + } + }) }} {% endblock %} diff --git a/app/components/header/header-org.njk b/app/components/header/header-org.njk index 39ece7185..78de60509 100644 --- a/app/components/header/header-org.njk +++ b/app/components/header/header-org.njk @@ -3,38 +3,39 @@ {% extends 'example.njk' %} {% block main %} - -{{ header({ - "showNav": "true", - "showSearch": "true", - "organisation": { - "name": "Anytown Anyplace", - "split": "Anywhere", - "descriptor": "NHS Foundation Trust" + {{ header({ + logo: { + href: "#" + }, + organisation: { + name: "Anytown Anyplace", + split: "Anywhere", + descriptor: "NHS Foundation Trust" }, - "primaryLinks": [ + primaryLinks: [ { - "url" : "#", - "label" : "Your hospital visit" + href: "#", + text: "Your hospital visit" }, { - 'url' : '#', - 'label' : 'Wards and departments' + href: "#", + text: "Wards and departments" }, { - 'url' : '#', - 'label' : 'Conditions and treatments' + href: "#", + text: "Conditions and treatments" }, { - 'url' : '#', - 'label' : 'Our people' + href: "#", + text: "Our people" }, { - 'url' : '#', - 'label' : 'Our research' + href: "#", + text: "Our research" } - ] - }) -}} - + ], + search: { + visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website" + } + }) }} {% endblock %} diff --git a/app/components/header/header-search.njk b/app/components/header/header-search.njk index b0a141fcc..b7fe3b582 100644 --- a/app/components/header/header-search.njk +++ b/app/components/header/header-search.njk @@ -3,37 +3,7 @@ {% extends 'example.njk' %} {% 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..757cfd67c --- /dev/null +++ b/app/components/header/header-service-name-combined-with-logo.njk @@ -0,0 +1,12 @@ +{% 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..d6c7f3d5e --- /dev/null +++ b/app/components/header/header-service-name-unlinked.njk @@ -0,0 +1,15 @@ +{% 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..1d4b49a1c --- /dev/null +++ b/app/components/header/header-service-name-with-account-search-nav.njk @@ -0,0 +1,45 @@ +{% 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" + } + ] + }, + primaryLinks: [ + { + 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..e92c31fc5 100644 --- a/app/components/header/header-service-name-with-nav.njk +++ b/app/components/header/header-service-name-with-nav.njk @@ -5,34 +5,39 @@ {% 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" + }, + primaryLinks: [ { - "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..eccca0929 100644 --- a/app/components/header/header-service-name.njk +++ b/app/components/header/header-service-name.njk @@ -5,10 +5,13 @@ {% 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..bcd0e990d 100644 --- a/app/components/header/index.njk +++ b/app/components/header/index.njk @@ -5,35 +5,35 @@ {% block main %} {{ header({ - "showNav": "true", - "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' - } - ] - }) - }} - + logo: { + href: "#" + }, + search: true, + primaryLinks: [ + { + href: "#", + text: "Health A to Z" + }, + { + href: "#", + text: "Live Well" + }, + { + href: "#", + text: "Mental health" + }, + { + href: "#", + text: "Care and support" + }, + { + href: "#", + text: "Pregnancy" + }, + { + href: "#", + text: "NHS services" + } + ] + }) }} {% endblock %} diff --git a/app/index.njk b/app/index.njk index df81454db..8c0ba53be 100644 --- a/app/index.njk +++ b/app/index.njk @@ -90,12 +90,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 un-linked 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 8327a5f03..28043bc3a 100644 --- a/backstop.config.js +++ b/backstop.config.js @@ -594,6 +594,36 @@ module.exports = { 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`, @@ -626,8 +656,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'), @@ -668,6 +698,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 13277c9a8..000000000 --- a/packages/components/header/_header-base.scss +++ /dev/null @@ -1,568 +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 { - @include nhsuk-logo-size; - display: block; - - &: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-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; - } - - &:visited { - color: $color_nhsuk-white; - - @include nhsuk-media-query($from: large-desktop) { - color: $color_nhsuk-white; - } - } - - &:hover { - box-shadow: none; - color: $color_nhsuk-white; - text-decoration: none; - - @include nhsuk-media-query($from: large-desktop) { - color: $color_nhsuk-white; - } - } - - &: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; - } - - &:focus { - text-decoration: none; - - .nhsuk-icon__chevron-down { - fill: $color_nhsuk-black; - } - } -} - -.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-no-visited-state; - } - - .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 f7ac35af6..000000000 --- a/packages/components/header/_header-transactional.scss +++ /dev/null @@ -1,58 +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 { - text-decoration: none; - @include nhsuk-link-style-white; - @include nhsuk-font(19); - - &: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 c4534c00f..000000000 --- a/packages/components/header/_header-white.scss +++ /dev/null @@ -1,133 +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 { - color: $color_nhsuk-blue; - - &:visited { - color: $color_nhsuk-blue; - } - - &:focus { - color: $nhsuk-focus-text-color; - - &:hover { - background: $nhsuk-focus-color; - } - } - } - - .nhsuk-icon__chevron-down { - fill: $color_nhsuk-blue; - } - } -} diff --git a/packages/components/header/_index.scss b/packages/components/header/_index.scss index a9e632ca9..1582be892 100644 --- a/packages/components/header/_index.scss +++ b/packages/components/header/_index.scss @@ -1,5 +1,609 @@ -@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 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] { + text-decoration: none; + @include nhsuk-link-style-header; + + &:hover { + text-decoration: underline; + } + + @include nhsuk-media-query($media-type: print) { + &::after { + content: ""; + } + } +} + +/// Account + +.nhsuk-header__account { + background: nhsuk-shade($color_nhsuk-blue, 20%); + border-radius: $nhsuk-border-radius; + flex-grow: 1; + outline: 1px solid nhsuk-shade($color_nhsuk-blue, 20%); + margin-bottom: 1px; + + @include nhsuk-media-query($from: tablet) { + align-self: start; + } + + .nhsuk-icon__user { + height: 24px; + width: 24px; + flex-shrink: 0; + } +} + +.nhsuk-header__account-list { + display: flex; + flex-wrap: wrap; + gap: 1px; + list-style: none; + margin: 0; + overflow: hidden; + padding: 0; +} + +.nhsuk-header__account-item { + background-color: nhsuk-shade($color_nhsuk-blue, 20%); + display: flex; + flex-grow: 1; + gap: nhsuk-spacing(2); + margin: 0; + outline: 1px solid $color_nhsuk-blue; + overflow-wrap: anywhere; + padding: nhsuk-spacing(2) 12px; + @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-header; +} + +.nhsuk-header__account-button { + background: none; + border: 0; + padding: 0; + text-decoration: underline; + @include nhsuk-font(16); + + &:hover { + cursor: pointer; + text-decoration: none; + } +} + +/// Search + +.nhsuk-header__search { + flex-grow: 1; + position: relative; + z-index: 13; + @include nhsuk-print-hide; + + .nhsuk-icon__search { + height: 28px; + width: 28px; + } +} + +.nhsuk-header__search-form { + display: flex; + height: 100%; + overflow: visible; + + @include nhsuk-media-query($until: tablet) { + position: relative; + } +} + +.nhsuk-header__search-input { + border: 1px solid $color_nhsuk-white; + border-radius: $nhsuk-border-radius 0 0 $nhsuk-border-radius; + font-size: $nhsuk-base-font-size; + height: 40px; + padding: 0 12px; + width: 100%; + + &: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 9px; + } + + &::placeholder { + color: $color_nhsuk-grey-1; + opacity: 1; // Fixes low contrast of placeholder text in firefox + } + + @include nhsuk-media-query($until: tablet) { + border-radius: $nhsuk-border-radius; + } +} + +.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; + height: nhsuk-spacing(6); + line-height: 1; + outline: none; + margin: 0; + width: 44px; + + @include nhsuk-media-query($until: tablet) { + position: absolute; + right: 0; + top: 0; + z-index: 9; + } + + &:hover { + background-color: $color_shade_nhsuk-blue-35; + box-shadow: inset 0 0 0 1px $color_nhsuk-white; + color: $color_nhsuk-white; + cursor: pointer; + } + + &:active { + background-color: $color_shade_nhsuk-blue-50; + } + + &:focus { + background-color: $nhsuk-focus-color; + box-shadow: inset 0 -4px 0 0 $nhsuk-focus-text-color; + @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; + } + + .js-enabled & { + flex-wrap: nowrap; + overflow: hidden; + } +} + +.nhsuk-header__navigation-list--justified { + @include nhsuk-media-query($from: desktop) { + justify-content: space-between; + } +} + +.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-link-style-header; + @include nhsuk-font(16); + + // 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; + overflow: visible; + position: relative; + right: 0; + text-align: center; + vertical-align: top; + width: auto; + z-index: 1; + + &[hidden] { + display: none; + } + + .nhsuk-icon__chevron-down { + height: nhsuk-spacing(4); + transform: rotate(90deg); + width: nhsuk-spacing(4); + } + + &[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-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 { + color: $color_nhsuk-blue; + } + + .nhsuk-header__service-logo:hover { + color: $nhsuk-text-color; + + .nhsuk-header__organisation-name-descriptor { + color: $nhsuk-text-color; + } + } + + .nhsuk-header__account, + .nhsuk-header__account-item { + background-color: $color_nhsuk-grey-5; + outline-color: $color_nhsuk-grey-4; + } + + .nhsuk-header__account-link { + @include nhsuk-link-style-no-visited-state; + } + + .nhsuk-header__search-input { + border-color: $color_nhsuk-grey-3; + + &:focus { + border-color: $nhsuk-focus-text-color; + } + } + + .nhsuk-header__search-submit { + background-color: $color_nhsuk-blue; + color: $color_nhsuk-white; + + &:hover { + background-color: $color_shade_nhsuk-blue-20; + border-color: $color_shade_nhsuk-blue-20; + box-shadow: none; + } + + &:focus { + background-color: $nhsuk-focus-color; + color: $nhsuk-focus-text-color; + } + } + + .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-top-color: $color_nhsuk-grey-5; + border-top-width: 1px; + } + + .nhsuk-header__navigation-link { + @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"] { + 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-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 1ef12c803..a29270045 100644 --- a/packages/components/header/header.js +++ b/packages/components/header/header.js @@ -11,6 +11,7 @@ class Header { this.$module = $module + this.navigation = this.$module.querySelector('.nhsuk-header__navigation') this.navigationList = this.$module.querySelector( '.nhsuk-header__navigation-list' ) @@ -18,30 +19,26 @@ class Header { '.nhsuk-header__navigation-item' ) - this.mobileMenuToggleButton = this.$module.querySelector( - '.nhsuk-header__menu-toggle' - ) - this.mobileMenuContainer = this.$module.querySelector( - '.nhsuk-mobile-menu-container' - ) + this.menu = this.$module.querySelector('.nhsuk-header__menu') + this.menuToggle = this.$module.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.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() @@ -67,10 +64,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 @@ -96,87 +90,66 @@ class Header { } /** - * Add the mobile menu to the DOM + * Add the menu to the DOM */ - setupMobileMenu() { - if (this.mobileMenu.parentElement) { + setupMenu() { + if (this.menuList) { return } - this.mobileMenuContainer.appendChild(this.mobileMenu) - this.mobileMenu.classList.add( - 'nhsuk-header__drop-down', - 'nhsuk-header__drop-down--hidden' - ) + this.menuList = document.createElement('ul') + 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.mobileMenuToggleButton.classList.remove( - 'nhsuk-header__menu-toggle--visible' - ) - - this.mobileMenuContainer.classList.remove( - 'nhsuk-mobile-menu-container--visible' - ) + this.menu.setAttribute('hidden', '') // Remove click listener to toggle menu - this.mobileMenuToggleButton.removeEventListener( - 'click', - this.handleToggleMobileMenu - ) + 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.$module.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) @@ -186,36 +159,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.$module.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) @@ -224,24 +196,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() @@ -251,22 +223,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) } }) } @@ -274,7 +246,7 @@ class Header { module.exports = (options = {}) => { const $scope = options.scope || document - const $module = $scope.querySelector('.nhsuk-navigation') + const $module = $scope.querySelector('.nhsuk-header') new Header($module) } 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..0c3681e51 100644 --- a/packages/components/header/macro-options.json +++ b/packages/components/header/macro-options.json @@ -1,71 +1,73 @@ [ { - "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": "ariaLabel", - "type": "string", - "required": "No", - "description": "Aria label for the logo href. Defaults to `\"NHS homepage\"`." - }, - { - "name": "organisation", + "name": "logo", "type": "object", "required": false, - "description": "Settings for header with organisational logo.", + "description": "Object containing options for the logo", "params": [ { - "name": "name", + "name": "href", "type": "string", "required": false, - "description": "Organisation name value." + "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": "split", + "name": "src", "type": "string", "required": false, - "description": "Longer organisation names can be split onto multiple lines." + "description": "The path of the logo image, if you are not using the default NHS logo." }, { - "name": "descriptor", + "name": "ariaLabel", "type": "string", "required": false, - "description": "Organisation descriptor." + "description": "The `aria-label` for the logo. 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": "logoURL", + "name": "href", "type": "string", "required": false, - "description": "Organisation logo if using a static asset, such as PNG, is preferred." + "description": "The `href` of the link for the service name." } ] }, { - "name": "service", + "name": "organisation", "type": "object", "required": false, - "description": "Settings for the service name in the header.", + "description": "Settings for header with organisational logo.", "params": [ { "name": "name", "type": "string", "required": false, - "description": "Name of the service." + "description": "Organisation name." + }, + { + "name": "split", + "type": "string", + "required": false, + "description": "Longer organisation names can be split onto multiple lines." + }, + { + "name": "descriptor", + "type": "string", + "required": false, + "description": "Organisation descriptor." } ] }, @@ -76,16 +78,28 @@ "description": "Array of navigation links for use in the header.", "params": [ { - "name": "url", + "name": "href", "type": "string", "required": true, "description": "The href of a navigation item in the header." }, { - "name": "label", + "name": "text", "type": "string", "required": false, - "description": "The label of a navigation item in the header." + "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", @@ -102,54 +116,94 @@ ] }, { - "name": "transactional", - "type": "string", - "required": "No", - "description": "Set to `true` if this is a transactional header (with smaller logo)." - }, - { - "name": "transactionalService", + "name": "search", "type": "object", "required": false, - "description": "Settings for transactional service header.", + "description": "Object containing settings for a search box", "params": [ + { + "name": "action", + "type": "string", + "required": false, + "description": "The search action endpoint. Defaults to `\"https://www.nhs.uk/search\"`" + }, { "name": "name", "type": "string", "required": false, - "description": "Transactional service name value." + "description": "The name for the search field. Defaults to `\"q\"`" }, { - "name": "href", + "name": "placeholder", "type": "string", "required": false, - "description": "The href of the transactional header name." + "description": "The placeholder text for the search field. Defaults to `\"Search\"`" }, { - "name": "longName", - "type": "boolean", + "name": "visuallyHiddenLabel", + "type": "string", + "required": false, + "description": "The label for the search field. Defaults to `\"Search the NHS website\"`" + }, + { + "name": "visuallyHiddenButton", + "type": "string", "required": false, - "description": "Set this to `true` if the transactional service name is longer than 22 characters." + "description": "The label for the visually hidden button. Defaults to `\"Search\"`" } ] }, { - "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": "account", + "type": "object", + "required": false, + "description": "Object containing settings for the 'account' section of the header.", + "params": [ + { + "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": "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..2daea6d61 100644 --- a/packages/components/header/template.njk +++ b/packages/components/header/template.njk @@ -1,103 +1,140 @@ {% 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)) %} + +{%- set logoHref = params.service.href if combineLogoAndServiceNameLinks else params.logo.href %} + +{#- The NHS logo can be replaced by a bitmap image and/or suffixed by an + organisation name (with can be split and include a descriptor) -#} +{%- macro _serviceLogo(logoSrc, organisation) %} +{% if logoSrc %} + +{% else %} + +{% endif -%} +{% if organisation -%} +{{ organisation.name }}{% if organisation.split %} {{ organisation.split }}{% endif %} +{%- if organisation.descriptor %}{{ organisation.descriptor }}{% endif -%} +{%- endif -%} +{% endmacro %} + +{%- macro _serviceName(text, href) %} +{% if href -%} +{{ text }} +{% else -%} +{{ text }} +{%- endif -%} +{% endmacro %} + +{%- macro _accountItem(item) %} +{% if item.icon %} + +{%- endif %} +{{- item.html | safe if item.html else item.text -}} +{% endmacro %} 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/packages/core/tools/_links.scss b/packages/core/tools/_links.scss index 05a49569d..d52e99560 100644 --- a/packages/core/tools/_links.scss +++ b/packages/core/tools/_links.scss @@ -76,6 +76,33 @@ } } +/// Header link styling (accounts for different header colour variants) +/// +/// @example scss +/// @include nhsuk-link-style-header; + +@mixin nhsuk-link-style-header { + color: inherit; + + &:link, + &:visited, + &:hover, + &:active { + color: inherit; + } + + &:focus { + background-color: $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; + color: $nhsuk-focus-text-color; + outline: $nhsuk-focus-width solid transparent; + outline-offset: $nhsuk-focus-width; + text-decoration: none; + } +} + /// Default link hover only styling /// /// @example scss diff --git a/tests/backstop/bitmaps_reference/Header_default_desktop.png b/tests/backstop/bitmaps_reference/Header_default_desktop.png index a298b60a6..d8bdfec89 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..da7fe331f 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..67e9c0dcc 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..0c85d19e4 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..6fdd67403 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..0999743ab 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..b0f793687 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..05cb37376 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..c646c2e94 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..a406578bd 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..bc1d6a64a 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..51b151c86 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..fa58f9802 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_large-desktop.png b/tests/backstop/bitmaps_reference/Header_organisational_with_white_header_large-desktop.png index a518b0773..c42140da6 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..bd9c51926 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..b0d2b04d4 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..6d1c5aaf2 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..83e338812 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..04a88e64c 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..322cdc24d 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_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..11b9dbc7c 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..b5176553d 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..42ec4d6d1 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..6dcdfd380 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..700de2e0a 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..57352fd6b 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..531ada63d 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..758f926e2 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..c131b5c95 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..8f03ffc93 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..693e5392e 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..5e097ff34 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..da59de3dc 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..4f43e4958 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..6176e89f3 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..834c2f729 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..65f428c1e 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..c0422030d 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..1198f285b 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_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_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..53eee7e43 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..8f98178b4 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..86b029fbf 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_large-desktop.png b/tests/backstop/bitmaps_reference/Header_with_search_large-desktop.png index edff08e30..1d22cf3dc 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..cdf67d5ab 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..cf6bf8927 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..079ae4c42 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..105f319e6 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..863e9608b 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..2c57e681a 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..5afd3d2ca 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..ebe61c1ba 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..e8cd7e603 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 diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..e73656832 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..d13c091d6 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_2_iPad.png new file mode 100644 index 000000000..18d74cccd Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..96fd53612 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_account_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..b26a67d79 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..1a0a1fb40 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_2_iPad.png new file mode 100644 index 000000000..0a12f72b8 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..1a7d38fd4 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..7d826df64 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..1dce76a60 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_2_iPad.png new file mode 100644 index 000000000..0ad62165f Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..8c4d161d3 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_RBAC_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..7d826df64 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..1dce76a60 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_2_iPad.png new file mode 100644 index 000000000..0ad62165f Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..8c4d161d3 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_in_custom_html_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..47d996af8 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..73da4b82c Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_2_iPad.png new file mode 100644 index 000000000..b1920e757 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..0a30278cf Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_logged_out_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..7bafc1d21 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..a2f74fbb9 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_2_iPad.png new file mode 100644 index 000000000..501cc084d Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..9f29c9a4a Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_account_navigation_and_search_0_document_3_Surface_iPad_Pro.png differ