Skip to content

Commit 00fe295

Browse files
paulrobertlloydpaulrobertlloyd
authored
Show account information and links in the header (#1063)
* Add account links to header * Don’t link to header example with custom HTML * Update backstop references for header component after adding account information to this component * Remove unused backstop images for header component * Add backstop images for header component with account links
1 parent 9982244 commit 00fe295

File tree

64 files changed

+435
-58
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+435
-58
lines changed

‎app/components/header/header-account-custom-html.njk

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{% set html_style = "background-color: #f0f4f5;" %}
2+
{% set title = "Header with account (logged in, custom html)" %}
3+
{% from "components/header/macro.njk" import header %}
4+
{% extends "layout.njk" %}
5+
6+
{% block body %}
7+
<style>
8+
.app-count {
9+
align-self: center;
10+
align-items: center;
11+
background-color: #d5281b;
12+
border-radius: 1em;
13+
color: #fff;
14+
font-size: 14px;
15+
height: 1.5em;
16+
line-height: 1.5em;
17+
min-width: 1.5em;
18+
padding: 0.25em;
19+
display: inline-flex;
20+
justify-content: center;
21+
}
22+
</style>
23+
24+
{{ header({
25+
account: {
26+
items: [
27+
{
28+
href: "#",
29+
text: "Check your profile"
30+
},
31+
{
32+
html: '<a class="nhsuk-header__account-link" href="#">Notifications</a> <span class="app-count">8</span>'
33+
},
34+
{
35+
href: "#",
36+
text: "Sign out"
37+
}
38+
]
39+
},
40+
service: {
41+
name: "Profile manager"
42+
}
43+
}) }}
44+
{% endblock %}

‎app/components/header/header-account-logged-in.njk

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{% set html_style = "background-color: #f0f4f5;" %}
2+
{% set title = "Header with account (logged in)" %}
3+
{% from "components/header/macro.njk" import header %}
4+
{% extends "layout.njk" %}
5+
6+
{% block body %}
7+
{{ header({
8+
account: {
9+
items: [
10+
{
11+
href: "#",
12+
text: "florence.nightingale@nhs.net",
13+
icon: true
14+
},
15+
{
16+
href: "#",
17+
text: "Log out"
18+
}
19+
]
20+
},
21+
primaryLinks: [
22+
{
23+
url: "#",
24+
label: "Home"
25+
},
26+
{
27+
url: "#",
28+
label: "Services"
29+
},
30+
{
31+
url: "#",
32+
label: "Your health"
33+
},
34+
{
35+
url: "#",
36+
label: "Messages"
37+
}, {
38+
url: "#",
39+
label: "Help and support"
40+
}
41+
]
42+
}) }}
43+
{% endblock %}

‎app/components/header/header-account-logged-out.njk

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% set html_style = "background-color: #f0f4f5;" %}
2+
{% set title = "Header with account (logged out)" %}
3+
{% from "components/header/macro.njk" import header %}
4+
{% extends "layout.njk" %}
5+
6+
{% block body %}
7+
{{ header({
8+
account: {
9+
items: [
10+
{
11+
href: "#",
12+
text: "Log in"
13+
}
14+
]
15+
}
16+
}) }}
17+
{% endblock %}

‎app/components/header/header-account-rbac.njk

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{% set html_style = "background-color: #f0f4f5;" %}
2+
{% set title = "Header with account (logged in, RBAC)" %}
3+
{% from "components/header/macro.njk" import header %}
4+
{% extends "layout.njk" %}
5+
6+
{% block body %}
7+
{{ header({
8+
account: {
9+
items: [
10+
{
11+
href: "#",
12+
text: "Florence Nightingale",
13+
icon: true
14+
},
15+
{
16+
text: "RA Manager, Hull and East Yorkshire Hospitals NHS Trust (RWA)"
17+
},
18+
{
19+
href: "#",
20+
text: "Change role"
21+
},
22+
{
23+
href: "#",
24+
text: "Log out"
25+
}
26+
]
27+
},
28+
search: {
29+
placeholder: "User name, UUID or NI number",
30+
visuallyHiddenLabel: "Search for a user"
31+
},
32+
service: {
33+
name: "CIS2 - Care Identity Management"
34+
},
35+
primaryLinks: [
36+
{
37+
url: "#",
38+
label: "Home"
39+
},
40+
{
41+
url: "#",
42+
label: "Create user"
43+
},
44+
{
45+
url: "#",
46+
label: "Find user"
47+
}
48+
]
49+
}) }}
50+
{% endblock %}

‎app/components/header/header-org-white-account.njk

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{% set html_style = "background-color: #f0f4f5;" %}
2+
{% set title = "Header organisational with white header and account" %}
3+
{% from "components/header/macro.njk" import header %}
4+
{% extends "layout.njk" %}
5+
6+
{% block body %}
7+
8+
{{ header({
9+
classes: "nhsuk-header--white nhsuk-header--white-nav",
10+
account: {
11+
items: [
12+
{
13+
text: "Florence Nightingale",
14+
icon: true
15+
},
16+
{
17+
href: "#",
18+
text: "Log out"
19+
}
20+
]
21+
},
22+
organisation: {
23+
name: "Anytown Anyplace",
24+
split: "Anywhere",
25+
descriptor: "NHS Foundation Trust"
26+
},
27+
primaryLinks: [
28+
{
29+
url: "#",
30+
label: "Your hospital visit"
31+
},
32+
{
33+
url: "#",
34+
label: "Wards and departments"
35+
},
36+
{
37+
url: "#",
38+
label: "Conditions and treatments"
39+
},
40+
{
41+
url: "#",
42+
label: "Our people"
43+
},
44+
{
45+
url: "#",
46+
label: "Our research"
47+
}
48+
],
49+
search: {
50+
visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
51+
}
52+
})
53+
}}
54+
55+
{% endblock %}

‎app/components/header/header-service-name-with-account-search-nav.njk

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{% set html_style = "background-color: #f0f4f5;" %}
2+
{% set title = "Header with account, navigation and search" %}
3+
{% from "components/header/macro.njk" import header %}
4+
{% extends "layout.njk" %}
5+
6+
{% block body %}
7+
{{ header({
8+
account: {
9+
items: [
10+
{
11+
text: "Florence Nightingale",
12+
icon: true
13+
},
14+
{
15+
href: "#",
16+
text: "Log out"
17+
}
18+
]
19+
},
20+
service: {
21+
name: "Digital service manual"
22+
},
23+
search: true,
24+
primaryLinks: [
25+
{
26+
url: "#",
27+
label: "NHS service standard"
28+
},
29+
{
30+
url: "#",
31+
label: "Design system"
32+
},
33+
{
34+
url: "#",
35+
label: "Design principles"
36+
},
37+
{
38+
url: "#",
39+
label: "Content guide"
40+
},
41+
{
42+
url: "#",
43+
label: "Accessibility"
44+
},
45+
{
46+
url: "#",
47+
label: "Community and contribution"
48+
}
49+
]
50+
}) }}
51+
{% endblock %}

‎app/pages/examples.njk

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,17 @@
7979
<li><a href="../components/header/index.html">Header (default)</a></li>
8080
<li><a href="../components/header/header-navigation.html">Header with navigation</a></li>
8181
<li><a href="../components/header/header-search.html">Header with search</a></li>
82+
<li><a href="../components/header/header-account-logged-in.html">Header with account (logged in)</a></li>
83+
<li><a href="../components/header/header-account-logged-out.html">Header with account (logged out)</a></li>
84+
<li><a href="../components/header/header-account-rbac.html">Header with account (logged in, RBAC)</a></li>
8285
<li><a href="../components/header/header-logo.html">Header with logo only</a></li>
8386
<li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
8487
<li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
88+
<li><a href="../components/header/header-service-name-with-account-search-nav.html">Header with a service name, account, search and navigation</a></li>
8589
<li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
8690
<li><a href="../components/header/header-org.html">Header organisational</a></li>
8791
<li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
92+
<li><a href="../components/header/header-org-white-account.html">Header organisational with white header and account (logged in)</a></li>
8893
<li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>
8994
<li><a href="../components/hero/index.html">Hero</a></li>
9095
<li><a href="../components/hero/hero-image.html">Hero with image</a></li>
@@ -133,7 +138,7 @@
133138
<li><a href="../components/warning-callout/index.html">Warning callout</a></li>
134139
<li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
135140
</ul>
136-
141+
137142
{% endblock %}
138143

139144
{% block footer %}

‎packages/components/header/README.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
2525
<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>
2626
</a>
2727
</div>
28-
<div class="nhsuk-header__content" id="content-header">
28+
<div class="nhsuk-header__content">
2929
<div class="nhsuk-header__search">
30-
<div class="nhsuk-header__search-wrap" id="wrap-search">
30+
<div class="nhsuk-header__search-wrap">
3131
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
3232
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
3333
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
@@ -240,9 +240,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
240240
<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>
241241
</a>
242242
</div>
243-
<div class="nhsuk-header__content" id="content-header">
243+
<div class="nhsuk-header__content">
244244
<div class="nhsuk-header__search">
245-
<div class="nhsuk-header__search-wrap" id="wrap-search">
245+
<div class="nhsuk-header__search-wrap">
246246
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
247247
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
248248
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
@@ -346,9 +346,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
346346
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
347347
</a>
348348
</div>
349-
<div class="nhsuk-header__content" id="content-header">
349+
<div class="nhsuk-header__content">
350350
<div class="nhsuk-header__search">
351-
<div class="nhsuk-header__search-wrap" id="wrap-search">
351+
<div class="nhsuk-header__search-wrap">
352352
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
353353
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
354354
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
@@ -458,19 +458,19 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
458458
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
459459
</a>
460460
</div>
461-
<div class="nhsuk-header__content" id="content-header">
461+
<div class="nhsuk-header__content">
462462
<div class="nhsuk-header__search">
463-
<div class="nhsuk-header__search-wrap" id="wrap-search">
464-
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
465-
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
466-
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
467-
<button class="nhsuk-search__submit" type="submit">
468-
<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>
469-
<span class="nhsuk-u-visually-hidden">Search</span>
470-
</button>
471-
</form>
472-
</div>
463+
<div class="nhsuk-header__search-wrap">
464+
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
465+
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
466+
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
467+
<button class="nhsuk-search__submit" type="submit">
468+
<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>
469+
<span class="nhsuk-u-visually-hidden">Search</span>
470+
</button>
471+
</form>
473472
</div>
473+
</div>
474474
</div>
475475
</div>
476476
<div class="nhsuk-navigation-container">
@@ -571,9 +571,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
571571
<span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
572572
</a>
573573
</div>
574-
<div class="nhsuk-header__content" id="content-header">
574+
<div class="nhsuk-header__content">
575575
<div class="nhsuk-header__search">
576-
<div class="nhsuk-header__search-wrap" id="wrap-search">
576+
<div class="nhsuk-header__search-wrap">
577577
<form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
578578
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
579579
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >

‎packages/components/header/_header-white.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@
1717
}
1818
}
1919

20+
.nhsuk-header__account,
21+
.nhsuk-header__account-item {
22+
background-color: $color_nhsuk-grey-5;
23+
outline-color: $color_nhsuk-grey-4;
24+
}
25+
26+
.nhsuk-header__account-link {
27+
@include nhsuk-link-style-no-visited-state;
28+
}
29+
2030
.nhsuk-search__input {
2131
border-color: $color_nhsuk-grey-3;
2232

0 commit comments

Comments
 (0)