govuk_publishing_components 35.22.0 → 35.23.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/config/govuk_publishing_components_manifest.js +1 -0
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +2 -0
- data/app/assets/javascripts/govuk_publishing_components/components/cross-service-header.js +78 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss +430 -0
- data/app/views/govuk_publishing_components/components/_cross_service_header.html.erb +19 -0
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +9 -0
- data/app/views/govuk_publishing_components/components/cross_service_header/_one_login_header.html.erb +97 -0
- data/app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb +49 -0
- data/app/views/govuk_publishing_components/components/docs/cross_service_header.yml +64 -0
- data/lib/govuk_publishing_components/app_helpers/asset_helper.rb +1 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e557b51d72b7858a00cdad6c54582292ea879bc1946dfd8270c6b511bfad6733
|
|
4
|
+
data.tar.gz: 83254be91d64c54e216e34d56a4412014e6e89865decb03ac3e67dfec7a6d7a9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 587ee2f4ef4387524b0343c1f0f08b8157a5c7820eb36d7fbfe89567708e2e1d7f9626a63a88eb88c6bf35b4e32a705bcf7f979ad8a2b7cfd9d569dd7dc72110
|
|
7
|
+
data.tar.gz: 5e2ce07e04779116ad682cd59139abbc04c4a8cc46832dedc66b5b7937bd5db0dd5949a0c89ceacbdacc29a17ce9ec24b688652a796175754124bbee6ab10fe7
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
//= link govuk_publishing_components/components/_contextual-sidebar.css
|
|
31
31
|
//= link govuk_publishing_components/components/_cookie-banner.css
|
|
32
32
|
//= link govuk_publishing_components/components/_copy-to-clipboard.css
|
|
33
|
+
//= link govuk_publishing_components/components/_cross-service-header.css
|
|
33
34
|
//= link govuk_publishing_components/components/_date-input.css
|
|
34
35
|
//= link govuk_publishing_components/components/_details.css
|
|
35
36
|
//= link govuk_publishing_components/components/_devolved-nations.css
|
|
@@ -135,6 +135,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
|
|
|
135
135
|
return 'command/win click'
|
|
136
136
|
} else if (event.shiftKey) {
|
|
137
137
|
return 'shift click'
|
|
138
|
+
} else if (event.altKey) {
|
|
139
|
+
return 'alt/option click'
|
|
138
140
|
} else {
|
|
139
141
|
return 'primary click'
|
|
140
142
|
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
window.GOVUK = window.GOVUK || {}
|
|
2
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
3
|
+
|
|
4
|
+
(function (Modules) {
|
|
5
|
+
/**
|
|
6
|
+
* A modified adaptation of the Design System header script
|
|
7
|
+
* To initialise the One Login header, run:
|
|
8
|
+
* new window.CrossServiceHeader(document.querySelector("[data-module='one-login-header']")).init();
|
|
9
|
+
*/
|
|
10
|
+
function CrossServiceHeader ($module) {
|
|
11
|
+
this.$header = $module
|
|
12
|
+
this.$navigation = $module && $module.querySelectorAll('[data-one-login-header-nav]')
|
|
13
|
+
this.$numberOfNavs = this.$navigation && this.$navigation.length
|
|
14
|
+
if (this.$header) {
|
|
15
|
+
this.$header.classList.add('js-enabled')
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Initialise header
|
|
20
|
+
*
|
|
21
|
+
* Check for the presence of the header, menu and menu button – if any are
|
|
22
|
+
* missing then there's nothing to do so return early.
|
|
23
|
+
*/
|
|
24
|
+
CrossServiceHeader.prototype.init = function () {
|
|
25
|
+
if (!this.$header && !this.$numberOfNavs) {
|
|
26
|
+
return
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* The header can render with one or two navigation elements which collapse
|
|
30
|
+
* into dropdowns on the mobile variation. This initialises the dropdown
|
|
31
|
+
* functionality for all navs that have a menu button which has:
|
|
32
|
+
* 1. a class of .js-x-header-toggle
|
|
33
|
+
* 2. an aria-controls attribute which can be mapped to the ID of the element
|
|
34
|
+
* that should be hidden on mobile
|
|
35
|
+
*/
|
|
36
|
+
for (var i = 0; i < this.$numberOfNavs; i++) {
|
|
37
|
+
var $nav = this.$navigation[i]
|
|
38
|
+
$nav.$menuButton = $nav.querySelector('.js-x-header-toggle')
|
|
39
|
+
|
|
40
|
+
$nav.$menu = $nav.$menuButton && $nav.querySelector(
|
|
41
|
+
'#' + $nav.$menuButton.getAttribute('aria-controls')
|
|
42
|
+
)
|
|
43
|
+
if (!$nav.$menuButton || !$nav.$menu) {
|
|
44
|
+
return
|
|
45
|
+
}
|
|
46
|
+
$nav.$menuOpenClass = $nav.$menu && $nav.$menu.dataset.openClass
|
|
47
|
+
$nav.$menuButtonOpenClass = $nav.$menuButton && $nav.$menuButton.dataset.openClass
|
|
48
|
+
$nav.$menuButtonOpenLabel = $nav.$menuButton && $nav.$menuButton.dataset.labelForShow
|
|
49
|
+
$nav.$menuButtonCloseLabel = $nav.$menuButton && $nav.$menuButton.dataset.labelForHide
|
|
50
|
+
$nav.$menuButtonOpenText = $nav.$menuButton && $nav.$menuButton.dataset.textForShow
|
|
51
|
+
$nav.$menuButtonCloseText = $nav.$menuButton && $nav.$menuButton.dataset.textForHide
|
|
52
|
+
$nav.isOpen = false
|
|
53
|
+
|
|
54
|
+
$nav.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind($nav))
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Handle menu button click
|
|
60
|
+
*
|
|
61
|
+
* When the menu button is clicked, change the visibility of the menu and then
|
|
62
|
+
* sync the accessibility state and menu button state
|
|
63
|
+
*/
|
|
64
|
+
CrossServiceHeader.prototype.handleMenuButtonClick = function () {
|
|
65
|
+
this.isOpen = !this.isOpen
|
|
66
|
+
this.$menuOpenClass && this.$menu.classList.toggle(this.$menuOpenClass, this.isOpen)
|
|
67
|
+
this.$menuButtonOpenClass && this.$menuButton.classList.toggle(this.$menuButtonOpenClass, this.isOpen)
|
|
68
|
+
this.$menuButton.setAttribute('aria-expanded', this.isOpen)
|
|
69
|
+
if (this.$menuButtonCloseLabel && this.$menuButtonOpenLabel) {
|
|
70
|
+
this.$menuButton.setAttribute('aria-label', (this.isOpen ? this.$menuButtonCloseLabel : this.$menuButtonOpenLabel))
|
|
71
|
+
}
|
|
72
|
+
if (this.$menuButtonCloseText && this.$menuButtonOpenText) {
|
|
73
|
+
this.$menuButton.innerHTML = this.isOpen ? this.$menuButtonCloseText : this.$menuButtonOpenText
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
Modules.CrossServiceHeader = CrossServiceHeader
|
|
78
|
+
})(window.GOVUK.Modules)
|
|
@@ -27,6 +27,7 @@ $govuk-new-link-styles: true;
|
|
|
27
27
|
@import "components/contextual-sidebar";
|
|
28
28
|
@import "components/cookie-banner";
|
|
29
29
|
@import "components/copy-to-clipboard";
|
|
30
|
+
@import "components/cross-service-header";
|
|
30
31
|
@import "components/date-input";
|
|
31
32
|
@import "components/details";
|
|
32
33
|
@import "components/devolved-nations";
|
|
@@ -0,0 +1,430 @@
|
|
|
1
|
+
@import "govuk_publishing_components/individual_component_support";
|
|
2
|
+
|
|
3
|
+
// start mixins and variables
|
|
4
|
+
$govuk-header-link-underline-thickness: 3px;
|
|
5
|
+
|
|
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
|
+
.gem-c-cross-service-header.js-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
|
+
.gem-c-cross-service-header__button {
|
|
49
|
+
display: none;
|
|
50
|
+
|
|
51
|
+
.gem-c-cross-service-header.js-enabled & {
|
|
52
|
+
display: inline;
|
|
53
|
+
display: flex;
|
|
54
|
+
|
|
55
|
+
@include govuk-media-query($from: tablet) {
|
|
56
|
+
display: none;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@include govuk-font($size: 19, $weight: bold);
|
|
61
|
+
position: relative;
|
|
62
|
+
align-items: center;
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
min-width: 240px;
|
|
65
|
+
min-width: max-content;
|
|
66
|
+
border: 0;
|
|
67
|
+
margin: 0;
|
|
68
|
+
padding: govuk-spacing(2) 0 govuk-spacing(1) govuk-spacing(4);
|
|
69
|
+
background: none;
|
|
70
|
+
|
|
71
|
+
&::before {
|
|
72
|
+
content: "";
|
|
73
|
+
position: absolute;
|
|
74
|
+
left: 0.15rem;
|
|
75
|
+
top: 50%;
|
|
76
|
+
box-sizing: border-box;
|
|
77
|
+
display: inline-block;
|
|
78
|
+
width: 0.6rem;
|
|
79
|
+
height: 0.6rem;
|
|
80
|
+
transform: translateY(-65%) rotate(135deg);
|
|
81
|
+
border-top: 0.15rem solid;
|
|
82
|
+
border-right: 0.15rem solid;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.gem-c-cross-service-header__button--open {
|
|
86
|
+
&::before {
|
|
87
|
+
transform: translateY(-15%) rotate(-45deg);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&.gem-c-cross-service-header__button--service-header {
|
|
92
|
+
@include toggle-button-focus($govuk-link-colour);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.gem-c-cross-service-header__button--one-login {
|
|
96
|
+
@include toggle-button-focus(govuk-colour("white"));
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.gem-c-cross-service-header__button-icon {
|
|
101
|
+
margin-left: govuk-spacing(2);
|
|
102
|
+
font-size: 0;
|
|
103
|
+
|
|
104
|
+
&.gem-c-cross-service-header__button-icon--focus {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// apply focus style on :focus for browsers which support :focus but not :focus-visible
|
|
109
|
+
.gem-c-cross-service-header__button:focus & {
|
|
110
|
+
&.gem-c-cross-service-header__button-icon--default {
|
|
111
|
+
display: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.gem-c-cross-service-header__button-icon--focus {
|
|
115
|
+
display: inline;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// overwrite previous styles for browsers which support :focus-visible
|
|
120
|
+
.gem-c-cross-service-header__button:focus:not(:focus-visible) & {
|
|
121
|
+
&.gem-c-cross-service-header__button-icon--default {
|
|
122
|
+
display: inline;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&.gem-c-cross-service-header__button-icon--focus {
|
|
126
|
+
display: none;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// apply focus style on :focus-visible for browsers which support :focus-visible
|
|
131
|
+
.gem-c-cross-service-header__button:focus-visible & {
|
|
132
|
+
&.gem-c-cross-service-header__button-icon--default {
|
|
133
|
+
display: none;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&.gem-c-cross-service-header__button-icon--focus {
|
|
137
|
+
display: inline;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// start One Login header styles
|
|
143
|
+
.gem-c-one-login-header {
|
|
144
|
+
@include govuk-font($size: 19);
|
|
145
|
+
color: govuk-colour("white");
|
|
146
|
+
background: govuk-colour("black");
|
|
147
|
+
border-bottom: govuk-spacing(2) solid $govuk-link-colour;
|
|
148
|
+
position: relative;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.gem-c-one-login-header__container {
|
|
152
|
+
display: flex;
|
|
153
|
+
position: relative;
|
|
154
|
+
justify-content: space-between;
|
|
155
|
+
align-items: center;
|
|
156
|
+
flex-wrap: wrap;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.gem-c-one-login-header__logo {
|
|
160
|
+
min-width: max-content;
|
|
161
|
+
padding-top: govuk-spacing(2);
|
|
162
|
+
padding-bottom: govuk-spacing(2);
|
|
163
|
+
max-width: 33.33%;
|
|
164
|
+
@include govuk-media-query($from: desktop) {
|
|
165
|
+
width: 33.33%;
|
|
166
|
+
padding-right: govuk-spacing(3);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.gem-c-one-login-header__link,
|
|
171
|
+
.gem-c-one-login-header__nav__link {
|
|
172
|
+
&:link,
|
|
173
|
+
&:visited {
|
|
174
|
+
@include govuk-typography-common;
|
|
175
|
+
@include govuk-link-style-inverse;
|
|
176
|
+
text-decoration: none;
|
|
177
|
+
|
|
178
|
+
&:hover {
|
|
179
|
+
text-decoration: underline;
|
|
180
|
+
text-decoration-thickness: $govuk-header-link-underline-thickness;
|
|
181
|
+
|
|
182
|
+
@if $govuk-link-underline-offset {
|
|
183
|
+
text-underline-offset: $govuk-link-underline-offset;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
&:focus {
|
|
188
|
+
@include govuk-focused-text;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.gem-c-one-login-header__logotype {
|
|
194
|
+
display: inline-block;
|
|
195
|
+
|
|
196
|
+
// Add a gap after the logo in case it's followed by a product name. This
|
|
197
|
+
// gets removed later if the logotype is a :last-child.
|
|
198
|
+
margin-right: govuk-spacing(1);
|
|
199
|
+
|
|
200
|
+
// Prevent readability backplate from obscuring underline in Windows High
|
|
201
|
+
// Contrast Mode
|
|
202
|
+
@media (forced-colors: active) {
|
|
203
|
+
forced-color-adjust: none;
|
|
204
|
+
color: linktext;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// Remove the gap after the logo if there's no product name to keep hover
|
|
208
|
+
// and focus states neat
|
|
209
|
+
&:last-child {
|
|
210
|
+
margin-right: 0;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
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
|
+
.gem-c-one-login-header__logotype-crown-fallback-image {
|
|
223
|
+
width: 36px;
|
|
224
|
+
height: 32px;
|
|
225
|
+
border: 0;
|
|
226
|
+
vertical-align: bottom;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.gem-c-one-login-header__link--homepage {
|
|
230
|
+
// Font size needs to be set on the link so that the box sizing is correct
|
|
231
|
+
// in Firefox
|
|
232
|
+
@include govuk-font($size: false, $weight: bold);
|
|
233
|
+
|
|
234
|
+
display: inline-block;
|
|
235
|
+
margin-right: govuk-spacing(2);
|
|
236
|
+
font-size: 30px; // We don't have a mixin that produces 30px font size
|
|
237
|
+
line-height: 1;
|
|
238
|
+
|
|
239
|
+
@include govuk-media-query($from: tablet) {
|
|
240
|
+
display: inline;
|
|
241
|
+
|
|
242
|
+
&:focus {
|
|
243
|
+
// Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
|
|
244
|
+
// This is to stop the logo getting cut off by the box shadow when focused on above a product name
|
|
245
|
+
box-shadow: 0 0 $govuk-focus-colour;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
&:link,
|
|
250
|
+
&:visited {
|
|
251
|
+
text-decoration: none;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
&:hover,
|
|
255
|
+
&:active {
|
|
256
|
+
// Negate the added border
|
|
257
|
+
margin-bottom: $govuk-header-link-underline-thickness * -1;
|
|
258
|
+
// Omitting colour will use default value of currentColor – if we
|
|
259
|
+
// specified currentColor explicitly IE8 would ignore this rule.
|
|
260
|
+
border-bottom: $govuk-header-link-underline-thickness solid;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
// Remove any borders that show when focused and hovered.
|
|
264
|
+
&:focus {
|
|
265
|
+
margin-bottom: 0;
|
|
266
|
+
border-bottom: 0;
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.gem-c-one-login-header__nav {
|
|
271
|
+
@include nav-style(".gem-c-one-login-header__nav--open");
|
|
272
|
+
@include govuk-media-query($from: tablet) {
|
|
273
|
+
max-width: 66%;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.gem-c-one-login-header__nav__list {
|
|
278
|
+
margin: 0;
|
|
279
|
+
padding: 0;
|
|
280
|
+
list-style: none;
|
|
281
|
+
|
|
282
|
+
@include govuk-media-query($from: tablet) {
|
|
283
|
+
padding: govuk-spacing(2) 0;
|
|
284
|
+
display: flex;
|
|
285
|
+
align-items: center;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.gem-c-one-login-header__nav__list-item {
|
|
290
|
+
display: inline-block;
|
|
291
|
+
padding: govuk-spacing(2) 0;
|
|
292
|
+
|
|
293
|
+
@include govuk-media-query($from: tablet) {
|
|
294
|
+
padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
|
|
295
|
+
border-left: 1px solid $govuk-border-colour;
|
|
296
|
+
align-self: stretch;
|
|
297
|
+
|
|
298
|
+
&:not(:last-child) {
|
|
299
|
+
margin-right: govuk-spacing(4);
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
@include govuk-media-query($until: tablet) {
|
|
304
|
+
width: 100%;
|
|
305
|
+
|
|
306
|
+
&:not(:last-child) {
|
|
307
|
+
border-bottom: 1px solid $govuk-border-colour;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.gem-c-one-login-header__nav__link {
|
|
313
|
+
font-weight: bold;
|
|
314
|
+
|
|
315
|
+
&.gem-c-one-login-header__nav__link--one-login {
|
|
316
|
+
@include govuk-media-query($from: tablet) {
|
|
317
|
+
display: flex;
|
|
318
|
+
justify-content: center;
|
|
319
|
+
|
|
320
|
+
// stylelint-disable max-nesting-depth
|
|
321
|
+
&:focus {
|
|
322
|
+
.gem-c-cross-service-header__button-icon {
|
|
323
|
+
display: none;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.gem-c-cross-service-header__button-icon--focus {
|
|
327
|
+
display: inline;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
@include govuk-media-query($until: tablet) {
|
|
333
|
+
.gem-c-cross-service-header__button-icon {
|
|
334
|
+
display: none;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
// end One Login header styles
|
|
340
|
+
|
|
341
|
+
// start service navigation styles
|
|
342
|
+
.gem-c-service-header {
|
|
343
|
+
background-color: govuk-colour("light-grey");
|
|
344
|
+
border-bottom: 1px solid govuk-colour("mid-grey");
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.gem-c-service-header__container {
|
|
348
|
+
padding-top: govuk-spacing(1);
|
|
349
|
+
|
|
350
|
+
@include govuk-media-query ($until: tablet) {
|
|
351
|
+
margin-bottom: govuk-spacing(1);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
@include govuk-media-query ($from: tablet) {
|
|
355
|
+
display: flex;
|
|
356
|
+
flex-wrap: wrap;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.gem-c-service-header__heading {
|
|
361
|
+
@include govuk-font($size: 24, $weight: bold);
|
|
362
|
+
color: $govuk-text-colour;
|
|
363
|
+
padding: govuk-spacing(3) 0;
|
|
364
|
+
margin: 0;
|
|
365
|
+
flex-grow: 1;
|
|
366
|
+
|
|
367
|
+
@include govuk-media-query($until: tablet) {
|
|
368
|
+
padding: govuk-spacing(1) 0;
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.gem-c-service-header__nav {
|
|
373
|
+
@include nav-style(".gem-c-service-header__nav--open");
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.gem-c-service-header__nav-list {
|
|
377
|
+
@include govuk-font($size: 19, $weight: bold);
|
|
378
|
+
list-style: none;
|
|
379
|
+
margin: 0;
|
|
380
|
+
padding: 0;
|
|
381
|
+
|
|
382
|
+
@include govuk-media-query($from: tablet) {
|
|
383
|
+
@include govuk-font($size: 19, $weight: bold);
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.gem-c-service-header__nav-list-item {
|
|
388
|
+
margin: govuk-spacing(3) 0 govuk-spacing(4);
|
|
389
|
+
|
|
390
|
+
&.gem-c-service-header__nav-list-item--active {
|
|
391
|
+
padding-left: govuk-spacing(3);
|
|
392
|
+
border-left: govuk-spacing(1) solid $govuk-link-colour;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
@include govuk-media-query($from: tablet) {
|
|
396
|
+
display: inline-block;
|
|
397
|
+
margin: 0 govuk-spacing(6) 0 0;
|
|
398
|
+
border-bottom: govuk-spacing(1) solid transparent;
|
|
399
|
+
|
|
400
|
+
&:last-of-type {
|
|
401
|
+
margin: 0;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
&.gem-c-service-header__nav-list-item--active {
|
|
405
|
+
border-left: 0;
|
|
406
|
+
padding-left: 0;
|
|
407
|
+
border-bottom: govuk-spacing(1) solid $govuk-link-colour;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.gem-c-service-header__nav-list-item-link {
|
|
413
|
+
@include govuk-link-common;
|
|
414
|
+
@include govuk-link-style-default;
|
|
415
|
+
@include govuk-link-style-no-visited-state;
|
|
416
|
+
|
|
417
|
+
&:not(:hover) {
|
|
418
|
+
text-decoration: none;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
@include govuk-media-query($from: tablet) {
|
|
422
|
+
display: inline-block;
|
|
423
|
+
padding: govuk-spacing(3) 0 govuk-spacing(3);
|
|
424
|
+
|
|
425
|
+
&:focus {
|
|
426
|
+
box-shadow: 0 (-(govuk-spacing(1))) $govuk-focus-colour, 0 govuk-spacing(1) $govuk-focus-text-colour;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
// end service navigation styles
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<%
|
|
2
|
+
add_gem_component_stylesheet("cross-service-header")
|
|
3
|
+
|
|
4
|
+
product_name ||= nil
|
|
5
|
+
one_login_navigation_items ||= []
|
|
6
|
+
service_navigation_items ||= []
|
|
7
|
+
service_navigation_aria_label ||= "Service menu"
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<header class="gem-c-cross-service-header" role="banner" data-module="cross-service-header">
|
|
11
|
+
<%= render "govuk_publishing_components/components/cross_service_header/one_login_header", {
|
|
12
|
+
one_login_navigation_items: one_login_navigation_items,
|
|
13
|
+
} %>
|
|
14
|
+
<%= render "govuk_publishing_components/components/cross_service_header/service_header", {
|
|
15
|
+
service_navigation_aria_label: service_navigation_aria_label,
|
|
16
|
+
service_navigation_items: service_navigation_items,
|
|
17
|
+
product_name: product_name,
|
|
18
|
+
} %>
|
|
19
|
+
</header>
|
|
@@ -11,12 +11,15 @@
|
|
|
11
11
|
blue_bar_background_colour = layout_helper.blue_bar_background_colours.include?(blue_bar_background_colour) ? blue_bar_background_colour : nil
|
|
12
12
|
logo_link ||= "/"
|
|
13
13
|
navigation_items ||= []
|
|
14
|
+
one_login_navigation_items ||= {}
|
|
15
|
+
service_navigation_items ||= []
|
|
14
16
|
omit_feedback_form ||= false
|
|
15
17
|
omit_footer_navigation ||= false
|
|
16
18
|
omit_footer_border ||= false
|
|
17
19
|
omit_header ||= false
|
|
18
20
|
product_name ||= nil
|
|
19
21
|
show_explore_header ||= false
|
|
22
|
+
show_cross_service_header ||= false
|
|
20
23
|
draft_watermark ||= false
|
|
21
24
|
show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
|
|
22
25
|
title ||= "GOV.UK - The best place to find government services and information"
|
|
@@ -113,6 +116,12 @@
|
|
|
113
116
|
logo_link: logo_link,
|
|
114
117
|
} %>
|
|
115
118
|
<% end %>
|
|
119
|
+
<% elsif show_cross_service_header %>
|
|
120
|
+
<%= render "govuk_publishing_components/components/cross_service_header", {
|
|
121
|
+
one_login_navigation_items: one_login_navigation_items,
|
|
122
|
+
service_navigation_items: service_navigation_items,
|
|
123
|
+
product_name: product_name,
|
|
124
|
+
} %>
|
|
116
125
|
<% else %>
|
|
117
126
|
<%= render "govuk_publishing_components/components/layout_header", {
|
|
118
127
|
search: show_search,
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<% one_login_home = one_login_navigation_items[:one_login_home] %>
|
|
2
|
+
<% one_login_sign_out = one_login_navigation_items[:one_login_sign_out] %>
|
|
3
|
+
|
|
4
|
+
<div class="gem-c-one-login-header" data-one-login-header-nav>
|
|
5
|
+
<div class="gem-c-one-login-header__container govuk-width-container">
|
|
6
|
+
<div class="gem-c-one-login-header__logo">
|
|
7
|
+
<a href="https://www.gov.uk/" class="gem-c-one-login-header__link gem-c-one-login-header__link--homepage">
|
|
8
|
+
<span class="gem-c-one-login-header__logotype">
|
|
9
|
+
<!--[if gt IE 8]><!-->
|
|
10
|
+
<svg aria-hidden="true" focusable="false" class="gem-c-one-login-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
|
|
11
|
+
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
|
|
12
|
+
</svg>
|
|
13
|
+
<!--<![endif]-->
|
|
14
|
+
<span>
|
|
15
|
+
GOV.UK
|
|
16
|
+
</span>
|
|
17
|
+
</span>
|
|
18
|
+
</a>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<button type="button"
|
|
22
|
+
aria-controls="one-login-header__nav"
|
|
23
|
+
aria-label="Show GOV.UK One Login menu"
|
|
24
|
+
data-open-class="gem-c-cross-service-header__button--open"
|
|
25
|
+
data-label-for-show="Show GOV.UK One Login menu"
|
|
26
|
+
data-label-for-hide="Hide GOV.UK One Login menu"
|
|
27
|
+
aria-expanded="false"
|
|
28
|
+
class="gem-c-cross-service-header__button gem-c-cross-service-header__button--one-login js-x-header-toggle">
|
|
29
|
+
<span class="gem-c-cross-service-header__button-content">One Login</span>
|
|
30
|
+
|
|
31
|
+
<!--[if gt IE 8]><!-->
|
|
32
|
+
<span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--default">
|
|
33
|
+
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
34
|
+
<circle cx="11" cy="11" r="11" fill="white"/>
|
|
35
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="#1D70B8"/>
|
|
36
|
+
<circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
|
|
37
|
+
<circle cx="11" cy="11" r="10" stroke="white" stroke-width="2"/>
|
|
38
|
+
</svg>
|
|
39
|
+
</span>
|
|
40
|
+
<!--<![endif]-->
|
|
41
|
+
|
|
42
|
+
<!--[if gt IE 8]><!-->
|
|
43
|
+
<span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--focus">
|
|
44
|
+
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
45
|
+
<circle cx="11" cy="11" r="11" fill="black"/>
|
|
46
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="white"/>
|
|
47
|
+
<circle cx="11" cy="7.75" r="3.75" fill="white"/>
|
|
48
|
+
<circle cx="11" cy="11" r="10" stroke="black" stroke-width="2"/>
|
|
49
|
+
</svg>
|
|
50
|
+
</span>
|
|
51
|
+
<!--<![endif]-->
|
|
52
|
+
</button>
|
|
53
|
+
|
|
54
|
+
<nav aria-label="GOV.UK One Login menu" class="gem-c-one-login-header__nav" data-open-class="gem-c-one-login-header__nav--open" id="one-login-header__nav">
|
|
55
|
+
<ul class="gem-c-one-login-header__nav__list">
|
|
56
|
+
<li class="gem-c-one-login-header__nav__list-item">
|
|
57
|
+
<%= 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 %>
|
|
58
|
+
<span class="gem-c-one-login-header__nav__link-content">
|
|
59
|
+
GOV.UK One Login
|
|
60
|
+
</span>
|
|
61
|
+
|
|
62
|
+
<!--[if gt IE 8]><!-->
|
|
63
|
+
<span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--default">
|
|
64
|
+
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
65
|
+
<circle cx="11" cy="11" r="11" fill="white"/>
|
|
66
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="#1D70B8"/>
|
|
67
|
+
<circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
|
|
68
|
+
<circle cx="11" cy="11" r="10" stroke="white" stroke-width="2"/>
|
|
69
|
+
</svg>
|
|
70
|
+
</span>
|
|
71
|
+
<!--<![endif]-->
|
|
72
|
+
|
|
73
|
+
<!--[if gt IE 8]><!-->
|
|
74
|
+
<span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--focus">
|
|
75
|
+
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
|
|
76
|
+
<circle cx="11" cy="11" r="11" fill="black"/>
|
|
77
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29297 18.8487C4.23255 15.4753 7.32741 13 11.0004 13C14.6731 13 17.7678 15.4749 18.7076 18.848C17.8058 19.7338 16.752 20.4654 15.5889 21H11.0004H6.41097C5.24819 20.4655 4.19463 19.7342 3.29297 18.8487Z" fill="white"/>
|
|
78
|
+
<circle cx="11" cy="7.75" r="3.75" fill="white"/>
|
|
79
|
+
<circle cx="11" cy="11" r="10" stroke="black" stroke-width="2"/>
|
|
80
|
+
</svg>
|
|
81
|
+
</span>
|
|
82
|
+
<!--<![endif]-->
|
|
83
|
+
<% end %>
|
|
84
|
+
</li>
|
|
85
|
+
<li class="gem-c-one-login-header__nav__list-item">
|
|
86
|
+
<%= link_to(
|
|
87
|
+
one_login_sign_out[:text],
|
|
88
|
+
one_login_sign_out[:href],
|
|
89
|
+
class: 'gem-c-one-login-header__nav__link',
|
|
90
|
+
data: one_login_sign_out[:data],
|
|
91
|
+
) %>
|
|
92
|
+
</li>
|
|
93
|
+
</ul>
|
|
94
|
+
</nav>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
data/app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
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">
|
|
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" 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 %>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
name: Cross service header
|
|
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.
|
|
4
|
+
body: |
|
|
5
|
+
The header contains two links:
|
|
6
|
+
|
|
7
|
+
* "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
|
+
* "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
|
|
9
|
+
shared_accessibility_criteria:
|
|
10
|
+
- link
|
|
11
|
+
accessibility_criteria:
|
|
12
|
+
accessibility_excluded_rules:
|
|
13
|
+
- landmark-banner-is-top-level
|
|
14
|
+
- duplicate-id-aria
|
|
15
|
+
- landmark-no-duplicate-banner
|
|
16
|
+
- landmark-unique
|
|
17
|
+
examples:
|
|
18
|
+
default:
|
|
19
|
+
description:
|
|
20
|
+
data:
|
|
21
|
+
show_account_layout: true
|
|
22
|
+
show_cross_service_header: true
|
|
23
|
+
product_name: GOV.UK email subscriptions
|
|
24
|
+
one_login_navigation_items:
|
|
25
|
+
one_login_home:
|
|
26
|
+
href: "#"
|
|
27
|
+
one_login_sign_out:
|
|
28
|
+
text: Sign out
|
|
29
|
+
with_data_attributes:
|
|
30
|
+
data:
|
|
31
|
+
show_account_layout: true
|
|
32
|
+
show_cross_service_header: true
|
|
33
|
+
product_name: GOV.UK email subscriptions
|
|
34
|
+
one_login_navigation_items:
|
|
35
|
+
one_login_home:
|
|
36
|
+
href: "#"
|
|
37
|
+
data:
|
|
38
|
+
module: explicit-cross-domain-links
|
|
39
|
+
one_login_sign_out:
|
|
40
|
+
text: Sign out
|
|
41
|
+
data:
|
|
42
|
+
module: explicit-cross-domain-links
|
|
43
|
+
with_service_navigation_links:
|
|
44
|
+
description: 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](https://design-system.service.gov.uk/components/header/).
|
|
45
|
+
data:
|
|
46
|
+
show_account_layout: true
|
|
47
|
+
show_cross_service_header: true
|
|
48
|
+
product_name: GOV.UK email subscriptions
|
|
49
|
+
one_login_navigation_items:
|
|
50
|
+
one_login_home:
|
|
51
|
+
href: "#"
|
|
52
|
+
data:
|
|
53
|
+
module: explicit-cross-domain-links
|
|
54
|
+
one_login_sign_out:
|
|
55
|
+
text: Sign out
|
|
56
|
+
data:
|
|
57
|
+
module: explicit-cross-domain-links
|
|
58
|
+
service_navigation_items:
|
|
59
|
+
- text: Example link 1
|
|
60
|
+
href: "#"
|
|
61
|
+
- text: Example link 2
|
|
62
|
+
href: "#"
|
|
63
|
+
- text: Example link 3
|
|
64
|
+
href: "#"
|
|
@@ -28,6 +28,7 @@ module GovukPublishingComponents
|
|
|
28
28
|
govuk_publishing_components/components/_title.css
|
|
29
29
|
|
|
30
30
|
govuk_publishing_components/components/_cookie-banner.css
|
|
31
|
+
govuk_publishing_components/components/_cross-service-header.css
|
|
31
32
|
govuk_publishing_components/components/_feedback.css
|
|
32
33
|
govuk_publishing_components/components/_layout-footer.css
|
|
33
34
|
govuk_publishing_components/components/_layout-for-public.css
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 35.
|
|
4
|
+
version: 35.23.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-11-
|
|
11
|
+
date: 2023-11-20 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|
|
@@ -487,6 +487,7 @@ files:
|
|
|
487
487
|
- app/assets/javascripts/govuk_publishing_components/components/contextual-guidance.js
|
|
488
488
|
- app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js
|
|
489
489
|
- app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js
|
|
490
|
+
- app/assets/javascripts/govuk_publishing_components/components/cross-service-header.js
|
|
490
491
|
- app/assets/javascripts/govuk_publishing_components/components/details.js
|
|
491
492
|
- app/assets/javascripts/govuk_publishing_components/components/error-summary.js
|
|
492
493
|
- app/assets/javascripts/govuk_publishing_components/components/feedback.js
|
|
@@ -553,6 +554,7 @@ files:
|
|
|
553
554
|
- app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss
|
|
554
555
|
- app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
|
|
555
556
|
- app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
|
|
557
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss
|
|
556
558
|
- app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss
|
|
557
559
|
- app/assets/stylesheets/govuk_publishing_components/components/_details.scss
|
|
558
560
|
- app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss
|
|
@@ -688,6 +690,7 @@ files:
|
|
|
688
690
|
- app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb
|
|
689
691
|
- app/views/govuk_publishing_components/components/_cookie_banner.html.erb
|
|
690
692
|
- app/views/govuk_publishing_components/components/_copy_to_clipboard.html.erb
|
|
693
|
+
- app/views/govuk_publishing_components/components/_cross_service_header.html.erb
|
|
691
694
|
- app/views/govuk_publishing_components/components/_date_input.html.erb
|
|
692
695
|
- app/views/govuk_publishing_components/components/_details.html.erb
|
|
693
696
|
- app/views/govuk_publishing_components/components/_devolved_nations.html.erb
|
|
@@ -755,6 +758,8 @@ files:
|
|
|
755
758
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_html.html.erb
|
|
756
759
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_spreadsheet.html.erb
|
|
757
760
|
- app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb
|
|
761
|
+
- app/views/govuk_publishing_components/components/cross_service_header/_one_login_header.html.erb
|
|
762
|
+
- app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb
|
|
758
763
|
- app/views/govuk_publishing_components/components/docs/accordion.yml
|
|
759
764
|
- app/views/govuk_publishing_components/components/docs/action_link.yml
|
|
760
765
|
- app/views/govuk_publishing_components/components/docs/attachment.yml
|
|
@@ -773,6 +778,7 @@ files:
|
|
|
773
778
|
- app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml
|
|
774
779
|
- app/views/govuk_publishing_components/components/docs/cookie_banner.yml
|
|
775
780
|
- app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml
|
|
781
|
+
- app/views/govuk_publishing_components/components/docs/cross_service_header.yml
|
|
776
782
|
- app/views/govuk_publishing_components/components/docs/date_input.yml
|
|
777
783
|
- app/views/govuk_publishing_components/components/docs/details.yml
|
|
778
784
|
- app/views/govuk_publishing_components/components/docs/devolved_nations.yml
|