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