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..d917ed387 --- /dev/null +++ b/app/components/header/header-account-logged-in.njk @@ -0,0 +1,42 @@ +{% set html_style = "background-color: #f0f4f5;" %} +{% set title = "Header with account (logged in)" %} +{% from "components/header/macro.njk" import header %} +{% extends "layout.njk" %} + +{% block body %} + {{ header({ + account: { + user: { + href: "#", + text: "florence.nightingale@nhs.net" + }, + items: [ + { + href: "#", + text: "Log out" + } + ] + }, + primaryLinks: [ + { + url: "#", + label: "Home" + }, + { + url: "#", + label: "Services" + }, + { + url: "#", + label: "Your health" + }, + { + url: "#", + label: "Messages" + }, { + url: "#", + label: "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..a95356c81 --- /dev/null +++ b/app/components/header/header-account-logged-out.njk @@ -0,0 +1,17 @@ +{% set html_style = "background-color: #f0f4f5;" %} +{% set title = "Header with account (logged out)" %} +{% from "components/header/macro.njk" import header %} +{% extends "layout.njk" %} + +{% block body %} + {{ header({ + account: { + items: [ + { + href: "#", + text: "Log in" + } + ] + } + }) }} +{% 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..732f91d7c --- /dev/null +++ b/app/components/header/header-org-white-account.njk @@ -0,0 +1,54 @@ +{% set html_style = "background-color: #f0f4f5;" %} +{% set title = "Header organisational with account (logged in)" %} +{% from "components/header/macro.njk" import header %} +{% extends "layout.njk" %} + +{% block body %} + +{{ header({ + classes: "nhsuk-header--white nhsuk-header--white-nav", + account: { + user: { + text: "Florence Nightingale" + }, + items: [ + { + href: "#", + text: "Log out" + } + ] + }, + organisation: { + name: "Anytown Anyplace", + split: "Anywhere", + descriptor: "NHS Foundation Trust" + }, + primaryLinks: [ + { + url: "#", + label: "Your hospital visit" + }, + { + url: "#", + label: "Wards and departments" + }, + { + url: "#", + label: "Conditions and treatments" + }, + { + url: "#", + label: "Our people" + }, + { + url: "#", + label: "Our research" + } + ], + search: { + visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website" + } + }) +}} + +{% 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..1dc461c97 --- /dev/null +++ b/app/components/header/header-service-name-with-account-search-nav.njk @@ -0,0 +1,50 @@ +{% set html_style = "background-color: #f0f4f5;" %} +{% set title = "Header with account, navigation and search" %} +{% from "components/header/macro.njk" import header %} +{% extends "layout.njk" %} + +{% block body %} + {{ header({ + account: { + user: { + text: "Florence Nightingale" + }, + items: [ + { + href: "#", + text: "Log out" + } + ] + }, + service: { + name: "Digital service manual" + }, + search: true, + primaryLinks: [ + { + url: "#", + label: "NHS service standard" + }, + { + url: "#", + label: "Design system" + }, + { + url: "#", + label: "Design principles" + }, + { + url: "#", + label: "Content guide" + }, + { + url: "#", + label: "Accessibility" + }, + { + url: "#", + label: "Community and contribution" + } + ] + }) }} +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 857e28214..bee924080 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -79,12 +79,16 @@
  • Header (default)
  • Header with navigation
  • Header with search
    • +
  • Header with account (logged in)
    • +
  • Header with account (logged out)
  • Header with logo only
  • Header with a service name
  • Header with a service name, search and navigation
    • +
  • Header with a service name, account, search and navigation
  • Header transactional with service name
  • 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
    • @@ -131,7 +135,7 @@
  • Warning callout
  • Warning callout with custom heading
    • - + {% endblock %} {% block footer %} diff --git a/packages/components/header/README.md b/packages/components/header/README.md index 86b633ded..033c122c7 100644 --- a/packages/components/header/README.md +++ b/packages/components/header/README.md @@ -25,9 +25,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen -
    +
    -
    +
    -
    +
    -
    +
    @@ -346,9 +346,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen NHS Foundation Trust
    -
    +
    -
    +
    @@ -458,19 +458,19 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen NHS Foundation Trust
    -
    +
    -
    - - - - - -
    +
    +
    +
    @@ -571,9 +571,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen NHS Foundation Trust
    -
    +
    -
    +
    {%- endif %} -{%- if params.search %} -
    +{%- if params.account or params.search %} +
    + {%- if params.search %}
    -
    +
    @@ -61,6 +62,39 @@
    + {%- endif %} + + {% if params.account %} + + {%- endif %}
    {%- endif %}
    diff --git a/packages/core/styles/_icons.scss b/packages/core/styles/_icons.scss index c96788a7e..9f549ce39 100644 --- a/packages/core/styles/_icons.scss +++ b/packages/core/styles/_icons.scss @@ -17,6 +17,12 @@ width: 28px; } +.nhsuk-icon__user { + fill: currentColor; + height: 22px; + width: 22px; +} + .nhsuk-icon__chevron-left { fill: $color_nhsuk-blue; }