Skip to content

Commit

Permalink
Add account links to header
Browse files Browse the repository at this point in the history
  • Loading branch information
paulrobertlloyd committed Nov 8, 2024
1 parent 1d394a5 commit b4c71cc
Show file tree
Hide file tree
Showing 12 changed files with 405 additions and 58 deletions.
44 changes: 44 additions & 0 deletions app/components/header/header-account-custom-html.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{% set html_style = "background-color: #f0f4f5;" %}
{% set title = "Header with account (logged in, custom html)" %}
{% from "components/header/macro.njk" import header %}
{% extends "layout.njk" %}

{% block body %}
<style>
.app-count {
align-self: center;
align-items: center;
background-color: #d5281b;
border-radius: 1em;
color: #fff;
font-size: 14px;
height: 1.5em;
line-height: 1.5em;
min-width: 1.5em;
padding: 0.25em;
display: inline-flex;
justify-content: center;
}
</style>

{{ header({
account: {
items: [
{
href: "#",
text: "Check your profile"
},
{
html: '<a class="nhsuk-header__account-link" href="#">Notifications</a> <span class="app-count">8</span>'
},
{
href: "#",
text: "Sign out"
}
]
},
service: {
name: "Profile manager"
}
}) }}
{% endblock %}
43 changes: 43 additions & 0 deletions app/components/header/header-account-logged-in.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{% 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: {
items: [
{
href: "#",
text: "[email protected]",
icon: true
},
{
href: "#",
text: "Log out"
}
]
},
primaryLinks: [
{
url: "#",
label: "Home"
},
{
url: "#",
label: "Services"
},
{
url: "#",
label: "Your health"
},
{
url: "#",
label: "Messages"
}, {
url: "#",
label: "Help and support"
}
]
}) }}
{% endblock %}
17 changes: 17 additions & 0 deletions app/components/header/header-account-logged-out.njk
Original file line number Diff line number Diff line change
@@ -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 %}
50 changes: 50 additions & 0 deletions app/components/header/header-account-rbac.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{% set html_style = "background-color: #f0f4f5;" %}
{% set title = "Header with account (logged in, RBAC)" %}
{% from "components/header/macro.njk" import header %}
{% extends "layout.njk" %}

{% block body %}
{{ header({
account: {
items: [
{
href: "#",
text: "Florence Nightingale",
icon: true
},
{
text: "RA Manager, Hull and East Yorkshire Hospitals NHS Trust (RWA)"
},
{
href: "#",
text: "Change role"
},
{
href: "#",
text: "Log out"
}
]
},
search: {
placeholder: "User name, UUID or NI number",
visuallyHiddenLabel: "Search for a user"
},
service: {
name: "CIS2 - Care Identity Management"
},
primaryLinks: [
{
url: "#",
label: "Home"
},
{
url: "#",
label: "Create user"
},
{
url: "#",
label: "Find user"
}
]
}) }}
{% endblock %}
55 changes: 55 additions & 0 deletions app/components/header/header-org-white-account.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{% 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: {
items: [
{
text: "Florence Nightingale",
icon: true
},
{
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 %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{% 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: {
items: [
{
text: "Florence Nightingale",
icon: true
},
{
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 %}
8 changes: 7 additions & 1 deletion app/pages/examples.njk
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,18 @@
<li><a href="../components/header/index.html">Header (default)</a></li>
<li><a href="../components/header/header-navigation.html">Header with navigation</a></li>
<li><a href="../components/header/header-search.html">Header with search</a></li>
<li><a href="../components/header/header-account-logged-in.html">Header with account (logged in)</a></li>
<li><a href="../components/header/header-account-logged-out.html">Header with account (logged out)</a></li>
<li><a href="../components/header/header-account-custom-html.html">Header with account (logged in, custom HTML)</a></li>
<li><a href="../components/header/header-account-rbac.html">Header with account (logged in, RBAC)</a></li>
<li><a href="../components/header/header-logo.html">Header with logo only</a></li>
<li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
<li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
<li><a href="../components/header/header-service-name-with-account-search-nav.html">Header with a service name, account, search and navigation</a></li>
<li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
<li><a href="../components/header/header-org.html">Header organisational</a></li>
<li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
<li><a href="../components/header/header-org-white-account.html">Header organisational with white header and account (logged in)</a></li>
<li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>
<li><a href="../components/hero/index.html">Hero</a></li>
<li><a href="../components/hero/hero-image.html">Hero with image</a></li>
Expand Down Expand Up @@ -131,7 +137,7 @@
<li><a href="../components/warning-callout/index.html">Warning callout</a></li>
<li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
</ul>

{% endblock %}

{% block footer %}
Expand Down
38 changes: 19 additions & 19 deletions packages/components/header/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/></svg>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
Expand Down Expand Up @@ -240,9 +240,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"/></svg>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
Expand Down Expand Up @@ -346,9 +346,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
Expand Down Expand Up @@ -458,19 +458,19 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
</div>
</div>
</div>
<div class="nhsuk-navigation-container">
Expand Down Expand Up @@ -571,9 +571,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
</a>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__content">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<div class="nhsuk-header__search-wrap">
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
Expand Down
10 changes: 10 additions & 0 deletions packages/components/header/_header-white.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@
}
}

.nhsuk-header__account,
.nhsuk-header__account-item {
background-color: $color_nhsuk-grey-5;
outline-color: $color_nhsuk-grey-4;
}

.nhsuk-header__account-link {
@include nhsuk-link-style-no-visited-state;
}

.nhsuk-search__input {
border-color: $color_nhsuk-grey-3;

Expand Down
Loading

0 comments on commit b4c71cc

Please sign in to comment.