Skip to content

Commit aa6eb5a

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

File tree

10 files changed

+305
-27
lines changed

10 files changed

+305
-27
lines changed

‎app/components/header/header-account-logged-in.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)" %}
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@nhs.net"
11+
},
12+
items: [
13+
{
14+
href: "#",
15+
text: "Account and settings"
16+
}, {
17+
href: "#",
18+
text: "Log out"
19+
}
20+
]
21+
},
22+
primaryLinks: [
23+
{
24+
url: "#",
25+
label: "Home"
26+
},
27+
{
28+
url: "#",
29+
label: "Services"
30+
},
31+
{
32+
url: "#",
33+
label: "Your health"
34+
},
35+
{
36+
url: "#",
37+
label: "Messages"
38+
}, {
39+
url: "#",
40+
label: "Help and support"
41+
}
42+
]
43+
}) }}
44+
{% 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: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,18 @@
1717
}
1818
}
1919

20+
.nhsuk-header__account-item {
21+
background-color: $color_nhsuk-grey-5;
22+
}
23+
24+
.nhsuk-header__account-link {
25+
@include nhsuk-link-style-no-visited-state;
26+
27+
&:active {
28+
background-color: $color_nhsuk-grey-4;
29+
}
30+
}
31+
2032
.nhsuk-search__input {
2133
border-color: $color_nhsuk-grey-3;
2234

‎packages/components/header/_header.scss

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,19 +78,82 @@
7878
}
7979

8080
/**
81-
* Content area (top-right)
81+
* Search/account content area (top-right)
8282
*/
8383
.nhsuk-header__content {
84+
display: flex;
85+
flex-direction: column;
86+
gap: nhsuk-spacing(3);
87+
justify-content: end;
88+
8489
@include mq($from: tablet) {
90+
align-items: end;
91+
flex: 1;
8592
margin-left: auto;
8693
}
94+
95+
@include mq($from: large-desktop) {
96+
align-items: start;
97+
flex-direction: row;
98+
}
99+
}
100+
101+
/**
102+
* Account
103+
*/
104+
.nhsuk-header__account {
105+
border-radius: $nhsuk-border-radius;
106+
display: flex;
107+
flex-wrap: wrap;
108+
gap: 1px;
109+
overflow: hidden;
110+
111+
.nhsuk-icon {
112+
flex-shrink: 0;
113+
position: relative;
114+
top: 1px;
115+
}
116+
}
117+
118+
.nhsuk-header__account-item {
119+
align-items: stretch;
120+
background-color: shade($nhsuk-link-color, 20%);
121+
display: flex;
122+
flex-grow: 1;
123+
justify-content: stretch;
124+
}
125+
126+
.nhsuk-header__account-item--user {
127+
display: inline-flex;
128+
flex-basis: 999;
129+
flex-grow: 999;
130+
gap: nhsuk-spacing(2);
131+
}
132+
133+
.nhsuk-header__account-item--user,
134+
.nhsuk-header__account-link,
135+
.nhsuk-header__account-text {
136+
padding: nhsuk-spacing(2) nhsuk-spacing(3);
137+
}
138+
139+
.nhsuk-header__account-link {
140+
@include nhsuk-link-style-header;
141+
142+
&:active {
143+
background-color: $nhsuk-link-active-color;
144+
}
145+
146+
&:focus {
147+
box-shadow: inset 0 -4px 0 0 $nhsuk-focus-text-color;
148+
}
87149
}
88150

89151
/**
90152
* Search
91153
*/
92154
.nhsuk-header__search {
93155
@include print-hide();
156+
margin-bottom: auto;
94157
position: relative;
95158
z-index: 13;
96159
}
@@ -158,9 +221,7 @@
158221

159222
&:focus {
160223
@include nhsuk-focused-button();
161-
box-shadow:
162-
0 -2px $nhsuk-focus-color,
163-
0 $nhsuk-focus-width $nhsuk-focus-text-color;
224+
box-shadow: inset 0 -4px 0 0 $nhsuk-focus-text-color;
164225
}
165226

166227
&:active {

0 commit comments

Comments
 (0)