govuk_publishing_components 56.3.2 → 57.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/cross-service-header.js +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss +44 -156
- data/app/views/govuk_publishing_components/components/_cross_service_header.html.erb +4 -5
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +2 -1
- data/app/views/govuk_publishing_components/components/cross_service_header/_one_login_header.html.erb +13 -12
- data/app/views/govuk_publishing_components/components/docs/cross_service_header.yml +18 -4
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +1 -2
- data/app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb +0 -49
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 50bbd34ad9dc438f04744bb32de8cb56cb59f593009f15ebd401e2e720586571
|
|
4
|
+
data.tar.gz: ec69cb3d9394362344d1dc291cb21150c825bbe22f9a84c9be1cb43729e66efc
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 791b028d9e1ffddae346e2689e7f5bfbce4a4c1b1ea7bf70d61663e78c6f757d453b93cbfd6fde9cca7eb11b6cc6b6728f55b1da836b8cd31e6c56d264c05b87
|
|
7
|
+
data.tar.gz: aa9e66a15fa8a93681bdb5a2979a9684b6e1d127884e303704cf6ffd2722c28851288c1c3e036b3998a51a32eed087399c588f651923e7d6df54fc38131426a6
|
|
@@ -23,9 +23,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
23
23
|
return
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
|
-
* The header
|
|
27
|
-
*
|
|
28
|
-
* functionality for all navs that have a menu button which has:
|
|
26
|
+
* The header navigation elements collapse into dropdowns on the mobile variation.
|
|
27
|
+
* This initialises the dropdown functionality for all navs that have a menu button which has:
|
|
29
28
|
* 1. a class of .js-x-header-toggle
|
|
30
29
|
* 2. an aria-controls attribute which can be mapped to the ID of the element
|
|
31
30
|
* that should be hidden on mobile
|
data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss
CHANGED
|
@@ -1,50 +1,7 @@
|
|
|
1
1
|
@import "govuk_publishing_components/individual_component_support";
|
|
2
2
|
|
|
3
|
-
// start mixins and variables
|
|
4
3
|
$govuk-header-link-underline-thickness: 3px;
|
|
5
4
|
|
|
6
|
-
@mixin toggle-button-focus($default-text-colour) {
|
|
7
|
-
color: $default-text-colour;
|
|
8
|
-
// apply focus style on :focus for browsers which support :focus but not :focus-visible
|
|
9
|
-
&:focus {
|
|
10
|
-
@include govuk-focused-text;
|
|
11
|
-
|
|
12
|
-
// overwrite previous styles for browsers which support :focus-visible
|
|
13
|
-
&:not(:focus-visible) {
|
|
14
|
-
outline: none;
|
|
15
|
-
color: $default-text-colour;
|
|
16
|
-
background: none;
|
|
17
|
-
box-shadow: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// apply focus style on :focus-visible for browsers which support :focus-visible
|
|
21
|
-
&-visible {
|
|
22
|
-
@include govuk-focused-text;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@mixin nav-style($nav-open-class) {
|
|
28
|
-
display: block;
|
|
29
|
-
// if JS is unavailable, the nav links are expanded and the toggle button is hidden
|
|
30
|
-
.toggle-enabled & {
|
|
31
|
-
display: none;
|
|
32
|
-
|
|
33
|
-
&#{$nav-open-class} {
|
|
34
|
-
display: block;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@include govuk-media-query($from: tablet) {
|
|
38
|
-
display: block;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@include govuk-media-query($until: tablet) {
|
|
43
|
-
width: 100%;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
// end mixins and variables
|
|
47
|
-
|
|
48
5
|
.gem-c-cross-service-header__button {
|
|
49
6
|
display: none;
|
|
50
7
|
position: relative;
|
|
@@ -88,12 +45,25 @@ $govuk-header-link-underline-thickness: 3px;
|
|
|
88
45
|
}
|
|
89
46
|
}
|
|
90
47
|
|
|
91
|
-
&.gem-c-cross-service-header__button--service-header {
|
|
92
|
-
@include toggle-button-focus($govuk-link-colour);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
48
|
&.gem-c-cross-service-header__button--one-login {
|
|
96
|
-
|
|
49
|
+
color: govuk-colour("white");
|
|
50
|
+
// apply focus style on :focus for browsers which support :focus but not :focus-visible
|
|
51
|
+
&:focus {
|
|
52
|
+
@include govuk-focused-text;
|
|
53
|
+
|
|
54
|
+
// overwrite previous styles for browsers which support :focus-visible
|
|
55
|
+
&:not(:focus-visible) {
|
|
56
|
+
outline: none;
|
|
57
|
+
color: govuk-colour("white");
|
|
58
|
+
background: none;
|
|
59
|
+
box-shadow: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// apply focus style on :focus-visible for browsers which support :focus-visible
|
|
63
|
+
&-visible {
|
|
64
|
+
@include govuk-focused-text;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
97
67
|
}
|
|
98
68
|
}
|
|
99
69
|
|
|
@@ -192,10 +162,14 @@ $govuk-header-link-underline-thickness: 3px;
|
|
|
192
162
|
|
|
193
163
|
.gem-c-one-login-header__logotype {
|
|
194
164
|
display: inline-block;
|
|
165
|
+
position: relative;
|
|
166
|
+
top: -3px;
|
|
195
167
|
|
|
196
168
|
// Add a gap after the logo in case it's followed by a product name. This
|
|
197
169
|
// gets removed later if the logotype is a :last-child.
|
|
198
170
|
margin-right: govuk-spacing(1);
|
|
171
|
+
fill: currentcolor;
|
|
172
|
+
vertical-align: top;
|
|
199
173
|
|
|
200
174
|
// Prevent readability backplate from obscuring underline in Windows High
|
|
201
175
|
// Contrast Mode
|
|
@@ -211,22 +185,6 @@ $govuk-header-link-underline-thickness: 3px;
|
|
|
211
185
|
}
|
|
212
186
|
}
|
|
213
187
|
|
|
214
|
-
.gem-c-one-login-header__logotype-crown {
|
|
215
|
-
position: relative;
|
|
216
|
-
top: -1px;
|
|
217
|
-
margin-right: 1px;
|
|
218
|
-
fill: currentcolor;
|
|
219
|
-
vertical-align: top;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
// Spacing adjustment for Tudor crown, as the new graphic is narrower than the
|
|
223
|
-
// existing crown. In Frontend v5, this rule should replace the equivalent in
|
|
224
|
-
// the block above.
|
|
225
|
-
.gem-c-one-login-header__logotype-crown[width="32"] {
|
|
226
|
-
top: -3px;
|
|
227
|
-
margin-right: 2px;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
188
|
.gem-c-one-login-header__logotype-crown-fallback-image {
|
|
231
189
|
width: 36px;
|
|
232
190
|
height: 32px;
|
|
@@ -276,7 +234,10 @@ $govuk-header-link-underline-thickness: 3px;
|
|
|
276
234
|
}
|
|
277
235
|
|
|
278
236
|
.gem-c-one-login-header__nav {
|
|
279
|
-
@include
|
|
237
|
+
@include govuk-media-query ($until: tablet) {
|
|
238
|
+
width: 100%;
|
|
239
|
+
}
|
|
240
|
+
|
|
280
241
|
@include govuk-media-query($from: tablet) {
|
|
281
242
|
max-width: 66%;
|
|
282
243
|
}
|
|
@@ -286,6 +247,24 @@ $govuk-header-link-underline-thickness: 3px;
|
|
|
286
247
|
margin: 0;
|
|
287
248
|
padding: 0;
|
|
288
249
|
list-style: none;
|
|
250
|
+
display: block;
|
|
251
|
+
|
|
252
|
+
// if JS is unavailable, the nav links are expanded and the toggle button is hidden
|
|
253
|
+
.toggle-enabled & {
|
|
254
|
+
@include govuk-media-query ($until: tablet) {
|
|
255
|
+
display: none;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@include govuk-media-query ($from: tablet) {
|
|
259
|
+
display: flex;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.gem-c-one-login-header__nav--open & {
|
|
264
|
+
@include govuk-media-query ($until: tablet) {
|
|
265
|
+
display: block;
|
|
266
|
+
}
|
|
267
|
+
}
|
|
289
268
|
|
|
290
269
|
@include govuk-media-query($from: tablet) {
|
|
291
270
|
padding: govuk-spacing(2) 0;
|
|
@@ -346,97 +325,6 @@ $govuk-header-link-underline-thickness: 3px;
|
|
|
346
325
|
}
|
|
347
326
|
// end One Login header styles
|
|
348
327
|
|
|
349
|
-
// start service navigation styles
|
|
350
|
-
.gem-c-service-header {
|
|
351
|
-
background-color: govuk-colour("light-grey");
|
|
352
|
-
border-bottom: 1px solid govuk-colour("mid-grey");
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
.gem-c-service-header__container {
|
|
356
|
-
padding-top: govuk-spacing(1);
|
|
357
|
-
|
|
358
|
-
@include govuk-media-query ($until: tablet) {
|
|
359
|
-
margin-bottom: govuk-spacing(1);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
@include govuk-media-query ($from: tablet) {
|
|
363
|
-
display: flex;
|
|
364
|
-
flex-wrap: wrap;
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
.gem-c-service-header__heading {
|
|
369
|
-
color: $govuk-text-colour;
|
|
370
|
-
padding: govuk-spacing(3) 0;
|
|
371
|
-
margin: 0;
|
|
372
|
-
flex-grow: 1;
|
|
373
|
-
@include govuk-font($size: 24, $weight: bold);
|
|
374
|
-
|
|
375
|
-
@include govuk-media-query($until: tablet) {
|
|
376
|
-
padding: govuk-spacing(1) 0;
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
.gem-c-service-header__nav {
|
|
381
|
-
@include nav-style(".gem-c-service-header__nav--open");
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
.gem-c-service-header__nav-list {
|
|
385
|
-
list-style: none;
|
|
386
|
-
margin: 0;
|
|
387
|
-
padding: 0;
|
|
388
|
-
@include govuk-font($size: 19, $weight: bold);
|
|
389
|
-
|
|
390
|
-
@include govuk-media-query($from: tablet) {
|
|
391
|
-
@include govuk-font($size: 19, $weight: bold);
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
.gem-c-service-header__nav-list-item {
|
|
396
|
-
margin: govuk-spacing(3) 0 govuk-spacing(4);
|
|
397
|
-
|
|
398
|
-
&.gem-c-service-header__nav-list-item--active {
|
|
399
|
-
padding-left: govuk-spacing(3);
|
|
400
|
-
border-left: govuk-spacing(1) solid $govuk-link-colour;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
@include govuk-media-query($from: tablet) {
|
|
404
|
-
display: inline-block;
|
|
405
|
-
margin: 0 govuk-spacing(6) 0 0;
|
|
406
|
-
border-bottom: govuk-spacing(1) solid transparent;
|
|
407
|
-
|
|
408
|
-
&:last-of-type {
|
|
409
|
-
margin: 0;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
&.gem-c-service-header__nav-list-item--active {
|
|
413
|
-
border-left: 0;
|
|
414
|
-
padding-left: 0;
|
|
415
|
-
border-bottom: govuk-spacing(1) solid $govuk-link-colour;
|
|
416
|
-
}
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
.gem-c-service-header__nav-list-item-link {
|
|
421
|
-
@include govuk-link-common;
|
|
422
|
-
@include govuk-link-style-default;
|
|
423
|
-
@include govuk-link-style-no-visited-state;
|
|
424
|
-
|
|
425
|
-
&:not(:hover) {
|
|
426
|
-
text-decoration: none;
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
@include govuk-media-query($from: tablet) {
|
|
430
|
-
display: inline-block;
|
|
431
|
-
padding: govuk-spacing(3) 0 govuk-spacing(3);
|
|
432
|
-
|
|
433
|
-
&:focus {
|
|
434
|
-
box-shadow: 0 (-(govuk-spacing(1))) $govuk-focus-colour, 0 govuk-spacing(1) $govuk-focus-text-colour;
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
// end service navigation styles
|
|
439
|
-
|
|
440
328
|
@include govuk-media-query($media-type: print) {
|
|
441
329
|
.gem-c-cross-service-header {
|
|
442
330
|
margin-bottom: 5mm;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<%
|
|
2
2
|
add_gem_component_stylesheet("cross-service-header")
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
service_name ||= nil
|
|
5
5
|
one_login_navigation_items ||= []
|
|
6
6
|
service_navigation_items ||= []
|
|
7
7
|
service_navigation_aria_label ||= "Service menu"
|
|
@@ -11,9 +11,8 @@
|
|
|
11
11
|
<%= render "govuk_publishing_components/components/cross_service_header/one_login_header", {
|
|
12
12
|
one_login_navigation_items: one_login_navigation_items,
|
|
13
13
|
} %>
|
|
14
|
-
<%= render "govuk_publishing_components/components/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
product_name: product_name,
|
|
14
|
+
<%= render "govuk_publishing_components/components/service_navigation", {
|
|
15
|
+
service_name: service_name,
|
|
16
|
+
navigation_items: service_navigation_items,
|
|
18
17
|
} %>
|
|
19
18
|
</header>
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
omit_footer_border ||= false
|
|
20
20
|
omit_header ||= false
|
|
21
21
|
product_name ||= nil
|
|
22
|
+
service_name ||= nil
|
|
22
23
|
show_cross_service_header ||= false
|
|
23
24
|
draft_watermark ||= false
|
|
24
25
|
title ||= "GOV.UK - The best place to find government services and information"
|
|
@@ -104,7 +105,7 @@
|
|
|
104
105
|
<%= render "govuk_publishing_components/components/cross_service_header", {
|
|
105
106
|
one_login_navigation_items: one_login_navigation_items,
|
|
106
107
|
service_navigation_items: service_navigation_items,
|
|
107
|
-
|
|
108
|
+
service_name: service_name,
|
|
108
109
|
} %>
|
|
109
110
|
<% elsif homepage %>
|
|
110
111
|
<%= render "govuk_publishing_components/components/layout_for_public/layout_super_navigation_header_homepage", {
|
|
@@ -5,17 +5,18 @@
|
|
|
5
5
|
<div class="gem-c-one-login-header__container govuk-width-container">
|
|
6
6
|
<div class="gem-c-one-login-header__logo">
|
|
7
7
|
<a href="https://www.gov.uk/" class="gem-c-one-login-header__link gem-c-one-login-header__link--homepage">
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
</
|
|
18
|
-
|
|
8
|
+
<svg
|
|
9
|
+
focusable="false"
|
|
10
|
+
role="img"
|
|
11
|
+
class="gem-c-one-login-header__logotype"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
viewBox="0 0 148 30"
|
|
14
|
+
height="30"
|
|
15
|
+
width="148"
|
|
16
|
+
aria-label="GOV.UK">
|
|
17
|
+
<title>GOV.UK</title>
|
|
18
|
+
<path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
|
|
19
|
+
</svg>
|
|
19
20
|
</a>
|
|
20
21
|
</div>
|
|
21
22
|
|
|
@@ -52,7 +53,7 @@
|
|
|
52
53
|
<!--<![endif]-->
|
|
53
54
|
</button>
|
|
54
55
|
|
|
55
|
-
<nav aria-label="GOV.UK One Login
|
|
56
|
+
<nav aria-label="GOV.UK One Login" class="gem-c-one-login-header__nav govuk-!-display-none-print" data-open-class="gem-c-one-login-header__nav--open" id="one-login-header__nav">
|
|
56
57
|
<ul class="gem-c-one-login-header__nav__list">
|
|
57
58
|
<li class="gem-c-one-login-header__nav__list-item">
|
|
58
59
|
<%= link_to one_login_home[:href], class: "gem-c-one-login-header__nav__link gem-c-one-login-header__nav__link--one-login", data: one_login_home[:data] do %>
|
|
@@ -1,14 +1,28 @@
|
|
|
1
1
|
name: Cross service header
|
|
2
2
|
description: |
|
|
3
|
-
The One Login header contains two distinct navigation menus - one for GOV.UK One Login links and another for internal service navigation.
|
|
3
|
+
The One Login header contains two distinct navigation menus - one for GOV.UK One Login links and another for internal service navigation, which uses the Design System service navigation component.
|
|
4
4
|
body: |
|
|
5
|
+
On smaller screens, both menus collapse and can be shown and hidden using Javascript.
|
|
6
|
+
|
|
7
|
+
You’ll need to adapt the internal service navigation so that it includes content specific to your service. This includes adapting the accessibility markup in the internal service navigation.
|
|
8
|
+
|
|
9
|
+
## GOV.UK One Login links in the header
|
|
10
|
+
|
|
5
11
|
The header contains two links:
|
|
6
12
|
|
|
7
13
|
* "GOV.UK One Login": this takes the user to their One Login ‘home’ area, where they can manage their credentials and see and access the services they've used - you don't need to update the url this points to
|
|
8
14
|
* "Sign out": you'll need to adapt this link so that it signs the user out of your service and signs them out of One Login - how you do this will depend on how you've implemented sign out functionality in your service
|
|
15
|
+
|
|
16
|
+
## Internal service navigation links in the header
|
|
17
|
+
|
|
18
|
+
The header has space to optionally add links to different parts of your service, just as the current ‘service header’ component from the Design System does. Follow the same patterns for internal service navigation links as you do with the Design System service header.
|
|
19
|
+
|
|
20
|
+
Please refer to the [One Login Service Header GitHub repo](https://github.com/govuk-one-login/service-header) for further information
|
|
9
21
|
shared_accessibility_criteria:
|
|
10
22
|
- link
|
|
11
23
|
accessibility_criteria:
|
|
24
|
+
govuk_frontend_components:
|
|
25
|
+
- service-navigation
|
|
12
26
|
accessibility_excluded_rules:
|
|
13
27
|
- landmark-banner-is-top-level
|
|
14
28
|
- duplicate-id-aria
|
|
@@ -20,7 +34,7 @@ examples:
|
|
|
20
34
|
data:
|
|
21
35
|
show_account_layout: true
|
|
22
36
|
show_cross_service_header: true
|
|
23
|
-
|
|
37
|
+
service_name: GOV.UK email subscriptions
|
|
24
38
|
one_login_navigation_items:
|
|
25
39
|
one_login_home:
|
|
26
40
|
href: "#"
|
|
@@ -30,7 +44,7 @@ examples:
|
|
|
30
44
|
data:
|
|
31
45
|
show_account_layout: true
|
|
32
46
|
show_cross_service_header: true
|
|
33
|
-
|
|
47
|
+
service_name: GOV.UK email subscriptions
|
|
34
48
|
one_login_navigation_items:
|
|
35
49
|
one_login_home:
|
|
36
50
|
href: "#"
|
|
@@ -45,7 +59,7 @@ examples:
|
|
|
45
59
|
data:
|
|
46
60
|
show_account_layout: true
|
|
47
61
|
show_cross_service_header: true
|
|
48
|
-
|
|
62
|
+
service_name: GOV.UK email subscriptions
|
|
49
63
|
one_login_navigation_items:
|
|
50
64
|
one_login_home:
|
|
51
65
|
href: "#"
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 57.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
@@ -773,7 +773,6 @@ files:
|
|
|
773
773
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_spreadsheet.html.erb
|
|
774
774
|
- app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb
|
|
775
775
|
- app/views/govuk_publishing_components/components/cross_service_header/_one_login_header.html.erb
|
|
776
|
-
- app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb
|
|
777
776
|
- app/views/govuk_publishing_components/components/docs/accordion.yml
|
|
778
777
|
- app/views/govuk_publishing_components/components/docs/action_link.yml
|
|
779
778
|
- app/views/govuk_publishing_components/components/docs/add_another.yml
|
data/app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
<% service_navigation_aria_label ||= "Service menu" %>
|
|
2
|
-
|
|
3
|
-
<% if product_name %>
|
|
4
|
-
<div class="gem-c-service-header" data-one-login-header-nav>
|
|
5
|
-
<div class="govuk-width-container">
|
|
6
|
-
<div class="gem-c-service-header__container">
|
|
7
|
-
<!-- The name of your service goes here -->
|
|
8
|
-
<h2 class="gem-c-service-header__heading"><%= product_name %></h2>
|
|
9
|
-
<% if service_navigation_items.any? %>
|
|
10
|
-
<div>
|
|
11
|
-
<button type="button"
|
|
12
|
-
aria-controls="service-header__nav"
|
|
13
|
-
data-open-class="gem-c-cross-service-header__button--open"
|
|
14
|
-
aria-label="Show service navigation menu"
|
|
15
|
-
data-label-for-show="Show service navigation menu"
|
|
16
|
-
data-label-for-hide="Hide service navigation menu"
|
|
17
|
-
data-text-for-show="Menu"
|
|
18
|
-
data-text-for-hide="Close"
|
|
19
|
-
aria-expanded="false"
|
|
20
|
-
class="gem-c-cross-service-header__button gem-c-cross-service-header__button--gem-c-service-header js-x-header-toggle govuk-!-display-none-print">
|
|
21
|
-
<span class="gem-c-service-header__button-content">Menu</span>
|
|
22
|
-
</button>
|
|
23
|
-
<!-- Important! Label your navigation appropriately! When there are multiple navigation landmarks on a page, additional labelling is required to provide support for screen reader users -->
|
|
24
|
-
<nav aria-label="<%= service_navigation_aria_label %>">
|
|
25
|
-
<ul class="gem-c-service-header__nav-list gem-c-service-header__nav govuk-!-display-none-print" id="service-header__nav" data-open-class="gem-c-service-header__nav--open">
|
|
26
|
-
<% service_navigation_items.each_with_index do |item, index| %>
|
|
27
|
-
<%
|
|
28
|
-
li_classes = %w(gem-c-service-header__nav-list-item)
|
|
29
|
-
li_classes << "gem-c-service-header__nav-list-item--active" if item[:active]
|
|
30
|
-
aria_current = item[:active] ? "page" : nil
|
|
31
|
-
%>
|
|
32
|
-
<%= tag.li class: li_classes do %>
|
|
33
|
-
<%= link_to(
|
|
34
|
-
item[:text],
|
|
35
|
-
item[:href],
|
|
36
|
-
class: 'gem-c-service-header__nav-list-item-link',
|
|
37
|
-
data: item[:data],
|
|
38
|
-
aria: { current: aria_current }
|
|
39
|
-
) %>
|
|
40
|
-
<% end %>
|
|
41
|
-
<% end %>
|
|
42
|
-
</ul>
|
|
43
|
-
</nav>
|
|
44
|
-
</div>
|
|
45
|
-
<% end %>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
<% end %>
|