Skip to content

Commit 95ea098

Browse files
paulrobertlloydpaulrobertlloyd
committed
Add account links to header
1 parent 1d394a5 commit 95ea098

File tree

10 files changed

+318
-31
lines changed

10 files changed

+318
-31
lines changed

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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+
user: {
10+
href: "#",
11+
text: "florence.nightingale@nhs.net"
12+
},
13+
items: [
14+
{
15+
href: "#",
16+
text: "Log out"
17+
}
18+
]
19+
},
20+
primaryLinks: [
21+
{
22+
url: "#",
23+
label: "Home"
24+
},
25+
{
26+
url: "#",
27+
label: "Services"
28+
},
29+
{
30+
url: "#",
31+
label: "Your health"
32+
},
33+
{
34+
url: "#",
35+
label: "Messages"
36+
}, {
37+
url: "#",
38+
label: "Help and support"
39+
}
40+
]
41+
}) }}
42+
{% 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-org-white-account.njk

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{% set html_style = "background-color: #f0f4f5;" %}
2+
{% set title = "Header organisational with account (logged in)" %}
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+
user: {
12+
text: "Florence Nightingale"
13+
},
14+
items: [
15+
{
16+
href: "#",
17+
text: "Log out"
18+
}
19+
]
20+
},
21+
organisation: {
22+
name: "Anytown Anyplace",
23+
split: "Anywhere",
24+
descriptor: "NHS Foundation Trust"
25+
},
26+
primaryLinks: [
27+
{
28+
url: "#",
29+
label: "Your hospital visit"
30+
},
31+
{
32+
url: "#",
33+
label: "Wards and departments"
34+
},
35+
{
36+
url: "#",
37+
label: "Conditions and treatments"
38+
},
39+
{
40+
url: "#",
41+
label: "Our people"
42+
},
43+
{
44+
url: "#",
45+
label: "Our research"
46+
}
47+
],
48+
search: {
49+
visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
50+
}
51+
})
52+
}}
53+
54+
{% endblock %}

‎app/components/header/header-service-name-with-account-search-nav.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, navigation and search" %}
3+
{% from "components/header/macro.njk" import header %}
4+
{% extends "layout.njk" %}
5+
6+
{% block body %}
7+
{{ header({
8+
account: {
9+
user: {
10+
text: "Florence Nightingale"
11+
},
12+
items: [
13+
{
14+
href: "#",
15+
text: "Log out"
16+
}
17+
]
18+
},
19+
service: {
20+
name: "Digital service manual"
21+
},
22+
search: true,
23+
primaryLinks: [
24+
{
25+
url: "#",
26+
label: "NHS service standard"
27+
},
28+
{
29+
url: "#",
30+
label: "Design system"
31+
},
32+
{
33+
url: "#",
34+
label: "Design principles"
35+
},
36+
{
37+
url: "#",
38+
label: "Content guide"
39+
},
40+
{
41+
url: "#",
42+
label: "Accessibility"
43+
},
44+
{
45+
url: "#",
46+
label: "Community and contribution"
47+
}
48+
]
49+
}) }}
50+
{% endblock %}

‎app/pages/examples.njk

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,16 @@
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>
8284
<li><a href="../components/header/header-logo.html">Header with logo only</a></li>
8385
<li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
8486
<li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
87+
<li><a href="../components/header/header-service-name-with-account-search-nav.html">Header with a service name, account, search and navigation</a></li>
8588
<li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
8689
<li><a href="../components/header/header-org.html">Header organisational</a></li>
8790
<li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
91+
<li><a href="../components/header/header-org-white-account.html">Header organisational with white header and account (logged in)</a></li>
8892
<li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>
8993
<li><a href="../components/hero/index.html">Hero</a></li>
9094
<li><a href="../components/hero/hero-image.html">Hero with image</a></li>
@@ -131,7 +135,7 @@
131135
<li><a href="../components/warning-callout/index.html">Warning callout</a></li>
132136
<li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
133137
</ul>
134-
138+
135139
{% endblock %}
136140

137141
{% 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: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,23 @@
1717
}
1818
}
1919

20+
.nhsuk-header__account-link,
21+
.nhsuk-header__account-text {
22+
background-color: $color_nhsuk-grey-5;
23+
}
24+
25+
.nhsuk-header__account-link {
26+
@include nhsuk-link-style-no-visited-state;
27+
28+
&:active {
29+
background-color: $color_nhsuk-grey-4;
30+
}
31+
32+
&:focus {
33+
background-color: $nhsuk-focus-color;
34+
}
35+
}
36+
2037
.nhsuk-search__input {
2138
border-color: $color_nhsuk-grey-3;
2239

0 commit comments

Comments
 (0)