govuk_publishing_components 56.3.1 → 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/analytics-ga4/ga4-form-tracker.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +5 -1
- data/app/assets/javascripts/govuk_publishing_components/components/cross-service-header.js +2 -3
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js +10 -4
- 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/app/views/govuk_publishing_components/components/docs/govspeak.yml +5 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +2 -3
- 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
|
|
@@ -86,7 +86,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
|
86
86
|
|
|
87
87
|
if (inputType === 'checkbox' && elem.checked) {
|
|
88
88
|
input.answer = labelText
|
|
89
|
-
} else if (inputNodename === 'SELECT' && elem.options[elem.selectedIndex].value) {
|
|
89
|
+
} else if (inputNodename === 'SELECT' && elem.options[elem.selectedIndex] && elem.options[elem.selectedIndex].value) {
|
|
90
90
|
input.answer = elem.options[elem.selectedIndex].text
|
|
91
91
|
} else if (inputTypes.indexOf(inputType) !== -1 && elem.value) {
|
|
92
92
|
if (this.includeTextInputValues || elem.hasAttribute('data-ga4-form-include-input')) {
|
|
@@ -67,7 +67,11 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
|
67
67
|
tool_name: this.getToolName(),
|
|
68
68
|
spelling_suggestion: this.getMetaContent('spelling-suggestion'),
|
|
69
69
|
discovery_engine_attribution_token: this.getMetaContent('discovery-engine-attribution-token'),
|
|
70
|
-
canonical_url: this.getCanonicalHref()
|
|
70
|
+
canonical_url: this.getCanonicalHref(),
|
|
71
|
+
|
|
72
|
+
user_created_at: this.getMetaContent('user-created-at'),
|
|
73
|
+
user_organisation_name: this.getMetaContent('user-organisation-name'),
|
|
74
|
+
user_role: this.getMetaContent('user-role')
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
window.GOVUK.analyticsGa4.core.sendData(data)
|
|
@@ -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/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
var YoutubeLinkEnhancement = function ($element, $classOverride) {
|
|
7
7
|
this.$element = $element
|
|
8
8
|
this.$classOverride = typeof $classOverride !== 'undefined' ? $classOverride : 'gem-c-govspeak__youtube-video'
|
|
9
|
+
this.punctuationRegex = /[\.!\?"']/g // eslint-disable-line no-useless-escape
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
YoutubeLinkEnhancement.prototype.init = function () {
|
|
@@ -18,12 +19,15 @@
|
|
|
18
19
|
this.startModule()
|
|
19
20
|
}
|
|
20
21
|
|
|
22
|
+
YoutubeLinkEnhancement.prototype.paragraphHasOtherContent = function (paragraph, link) {
|
|
23
|
+
return paragraph.innerHTML.replaceAll(this.punctuationRegex, '') !== link.outerHTML.replaceAll(this.punctuationRegex, '')
|
|
24
|
+
}
|
|
25
|
+
|
|
21
26
|
YoutubeLinkEnhancement.prototype.decorateLink = function () {
|
|
22
27
|
var $youtubeLinks = this.$element.querySelectorAll('a[href*="youtube.com"], a[href*="youtu.be"]')
|
|
23
28
|
for (var i = 0; i < $youtubeLinks.length; ++i) {
|
|
24
29
|
var $link = $youtubeLinks[i]
|
|
25
|
-
|
|
26
|
-
if (this.hasDisabledEmbed($link)) {
|
|
30
|
+
if (this.hasDisabledEmbed($link) || $link.getAttribute('href').includes('/playlist')) {
|
|
27
31
|
continue
|
|
28
32
|
}
|
|
29
33
|
|
|
@@ -31,7 +35,8 @@
|
|
|
31
35
|
|
|
32
36
|
// Only replace the <p> with a YT embed if the YT link is the only thing in the <p>.
|
|
33
37
|
// This prevents other content in the <p> being lost.
|
|
34
|
-
if
|
|
38
|
+
// However, if a <p> exists with only a YT link and punctuation, we do allow the punctuation characters to be lost to the YT embed.
|
|
39
|
+
if (this.paragraphHasOtherContent($linkParent, $link)) {
|
|
35
40
|
continue
|
|
36
41
|
}
|
|
37
42
|
var href = $link.getAttribute('href')
|
|
@@ -102,7 +107,8 @@
|
|
|
102
107
|
|
|
103
108
|
// Only replace the <p> with a YT embed if the YT link is the only thing in the <p>.
|
|
104
109
|
// This prevents other content in the <p> being lost.
|
|
105
|
-
if
|
|
110
|
+
// However, if a <p> exists with only a YT link and punctuation, we do allow the punctuation characters to be lost to the YT embed.
|
|
111
|
+
if (this.paragraphHasOtherContent(parentPara, $link)) {
|
|
106
112
|
return
|
|
107
113
|
}
|
|
108
114
|
|
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: "#"
|
|
@@ -1027,6 +1027,11 @@ examples:
|
|
|
1027
1027
|
block: |
|
|
1028
1028
|
<p>This content has a YouTube video link, converted to an accessible embedded player by component JavaScript. Bear in mind that the link will not convert if the paragraph it is in contains other content.</p>
|
|
1029
1029
|
<p><a href="https://www.youtube.com/watch?v=y6hbrS3DheU">Operations: a developer's guide, by Anna Shipman</a></p>
|
|
1030
|
+
youtube_embed_with_punctuation:
|
|
1031
|
+
description: YouTube links should still be enhanced if punctuation is in the same paragraph but outside the YT <a> tag.
|
|
1032
|
+
data:
|
|
1033
|
+
block: |
|
|
1034
|
+
<p>"<a href="https://www.youtube.com/watch?v=y6hbrS3DheU">Operations: a developer's guide, by Anna Shipman</a>."</p>
|
|
1030
1035
|
youtube_embed_disabled_by_component:
|
|
1031
1036
|
data:
|
|
1032
1037
|
disable_youtube_expansions: true
|
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
|
|
@@ -2039,7 +2038,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
2039
2038
|
- !ruby/object:Gem::Version
|
|
2040
2039
|
version: '0'
|
|
2041
2040
|
requirements: []
|
|
2042
|
-
rubygems_version: 3.6.
|
|
2041
|
+
rubygems_version: 3.6.9
|
|
2043
2042
|
specification_version: 4
|
|
2044
2043
|
summary: A gem to document components in GOV.UK frontend applications
|
|
2045
2044
|
test_files: []
|
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 %>
|