govuk_publishing_components 59.1.1 → 59.2.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.
Files changed (19) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/component_guide/application.scss +3 -3
  3. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +0 -1
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +55 -31
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss +1 -1
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss +274 -231
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +11 -9
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss +1 -2
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss +1 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +2 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_secondary-navigation.scss +2 -4
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss +2 -3
  13. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +1 -1
  14. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss +18 -14
  15. data/app/views/govuk_publishing_components/components/_action_link.html.erb +25 -14
  16. data/app/views/govuk_publishing_components/components/_cross_service_header.html.erb +1 -2
  17. data/app/views/govuk_publishing_components/components/cross_service_header/_one_login_header.html.erb +41 -68
  18. data/lib/govuk_publishing_components/version.rb +1 -1
  19. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4bf3ab25ab42797830c9959305eb90b72e2d5cb4850ffe2f9d0a0092b84ee784
4
- data.tar.gz: bc7546e1616973abe9f4bafb0b244bd0e483f977122a626e5debe39a15fa59c7
3
+ metadata.gz: 41f82022780f797229d0b34e4198883f6cf2db82f52423ba99f1572f7fc8145a
4
+ data.tar.gz: 23a2b1366c0b460fa28e92db4ba538fc0e994b42d4f41e3f02487052e61636d7
5
5
  SHA512:
6
- metadata.gz: 7241b5c9233ab7df264c4ddc82e4a4533fb8b336d7afd5e952ea13f0a7dcaf673ad66658c8333324bf99025a92c8f549b606660d936c1230db6522f8670520dd
7
- data.tar.gz: f551678d5847390efcae700a1cf6678d5eeb7604224fb428e0f0cf9aa170b9b36fbd2228bc28692c14283fb8374e43301691b9e62d99d245899d0687aabffad0
6
+ metadata.gz: a7c4703e1b53cb9d00b644dd1e4e4b72f5c2335dd85e981fe76e4dd1a96d45ae27ec5e8298154ea2b330f2816043031e3cf18c880499fb565f382a8e58fa1980
7
+ data.tar.gz: f8efc7e2c88acfd7fd9b480b44cc0f827038ed50732747ae971366c237ef5d1a78cff10d9b5a6077907ade0ce01cbb434fb59b17e9e7f806ce9a67ce1367027e
data/app/assets/stylesheets/component_guide/application.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  // This file contains the styles for the Component Guide.
2
-
2
+ @use "sass:color";
3
3
  @import "govuk_publishing_components/govuk_frontend_support";
4
4
  @import "govuk_publishing_components/component_support";
5
5
 
@@ -267,10 +267,10 @@ html {
267
267
  // Rouge syntax highlighting
268
268
  // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
269
269
 
270
- $code-00: scale-color(govuk-colour("light-grey"), $lightness: 50%); // Default Background
270
+ $code-00: color.scale(govuk-colour("light-grey"), $lightness: 50%); // Default Background
271
271
  $code-01: #f5f5f5; // Lighter Background (Unused)
272
272
  $code-02: #bfc1c3; // Selection Background
273
- $code-03: darken($govuk-secondary-text-colour, 2%); // Comments, Invisibles, Line Highlighting
273
+ $code-03: color.adjust($govuk-secondary-text-colour, $lightness: -2%); // Comments, Invisibles, Line Highlighting
274
274
  $code-04: #e8e8e8; // Dark Foreground (Unused)
275
275
  $code-05: $govuk-text-colour; // Default Foreground, Caret, Delimiters, Operators
276
276
  $code-06: #ffffff; // Light Foreground (Unused)
data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @import "govuk_publishing_components/individual_component_support";
2
- @import "mixins/prefixed-transform";
3
2
  @import "govuk/components/accordion/accordion";
4
3
 
5
4
  // Prevent elements inside the button from receiving click events
data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss CHANGED
@@ -6,49 +6,73 @@
6
6
  @include govuk-media-query($until: tablet) {
7
7
  max-width: 410px;
8
8
  }
9
+ }
10
+
11
+ .gem-c-action-link__icon {
12
+ display: table-cell;
13
+ line-height: 1;
14
+ width: 36px;
9
15
 
10
- &::before {
11
- content: "";
12
- display: table-cell;
13
- width: 36px;
16
+ svg {
14
17
  height: 28px;
15
- background: url("govuk_publishing_components/action-link-arrow--light.svg");
16
- background-repeat: no-repeat;
17
- background-size: 28px auto;
18
- background-position: 0 0;
18
+ vertical-align: middle;
19
+ width: 28px;
20
+
21
+ .gem-c-action-link__icon__circle {
22
+ fill: #eeefef;
23
+
24
+ // stylelint-disable max-nesting-depth
25
+ @media (forced-colors: active) {
26
+ fill: LinkText;
27
+ }
28
+ // stylelint-enable max-nesting-depth
29
+ }
19
30
 
20
- @include govuk-media-query($from: tablet) {
21
- width: 45px;
31
+ .gem-c-action-link__icon__arrow {
32
+ fill: #000000;
33
+
34
+ // stylelint-disable max-nesting-depth
35
+ @media (forced-colors: active) {
36
+ fill: Canvas;
37
+ }
38
+ // stylelint-enable max-nesting-depth
39
+ }
40
+ }
41
+
42
+ @include govuk-media-query($from: tablet) {
43
+ width: 45px;
44
+
45
+ svg {
22
46
  height: 35px;
23
- background-size: 35px auto;
47
+ width: 35px;
24
48
  }
25
49
  }
26
50
  }
27
51
 
28
- .gem-c-action-link__link-wrapper {
29
- display: table-cell;
30
- vertical-align: middle;
31
- @include govuk-font(19, $weight: bold, $line-height: 1.3);
32
- }
52
+ .gem-c-action-link__icon--simple {
53
+ padding-top: 2px;
54
+ width: 30px;
55
+
56
+ svg {
57
+ height: 25px;
58
+ width: 25px;
33
59
 
34
- .gem-c-action-link__link {
35
- color: inherit;
60
+ .gem-c-action-link__icon__arrow {
61
+ fill: #272828;
36
62
 
37
- &:focus {
38
- text-decoration: none;
39
- color: $govuk-focus-text-colour;
63
+ // stylelint-disable max-nesting-depth
64
+ @media (forced-colors: active) {
65
+ fill: currentcolor;
66
+ }
67
+ // stylelint-enable max-nesting-depth
68
+ }
40
69
  }
41
70
  }
42
71
 
43
- .gem-c-action-link--simple {
44
- &::before {
45
- width: 30px;
46
- height: 30px;
47
- background: url("govuk_publishing_components/action-link-arrow--simple.svg");
48
- background-repeat: no-repeat;
49
- background-size: 25px auto;
50
- background-position: 0 2px;
51
- }
72
+ .gem-c-action-link__link-wrapper {
73
+ display: table-cell;
74
+ vertical-align: middle;
75
+ @include govuk-font(19, $weight: bold, $line-height: 1.3);
52
76
  }
53
77
 
54
78
  @include govuk-media-query($media-type: print) {
@@ -57,7 +81,7 @@
57
81
  color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
58
82
  }
59
83
 
60
- &::before {
84
+ .gem-c-action-link__icon {
61
85
  display: none;
62
86
  }
63
87
  }
data/app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss CHANGED
@@ -77,8 +77,8 @@ $thumbnail-icon-border-colour: govuk-colour("mid-grey");
77
77
  .govspeak,
78
78
  .gem-c-govspeak {
79
79
  .gem-c-attachment__title {
80
- @include govuk-font($size: 27, $weight: regular);
81
80
  margin: 0 0 govuk-spacing(3) 0;
81
+ @include govuk-font($size: 27, $weight: regular);
82
82
  }
83
83
 
84
84
  .gem-c-attachment__metadata {
data/app/assets/stylesheets/govuk_publishing_components/components/_cross-service-header.scss CHANGED
@@ -1,175 +1,51 @@
1
1
  @import "govuk_publishing_components/individual_component_support";
2
2
 
3
3
  $govuk-header-link-underline-thickness: 3px;
4
-
5
- .gem-c-cross-service-header__button {
6
- display: none;
7
- position: relative;
8
- align-items: center;
9
- cursor: pointer;
10
- min-width: 240px;
11
- min-width: max-content;
12
- border: 0;
13
- margin: 0;
14
- padding: govuk-spacing(2) 0 govuk-spacing(1) govuk-spacing(4);
15
- background: none;
16
-
17
- @include govuk-font($size: 19, $weight: bold);
18
-
19
- .toggle-enabled & {
20
- display: inline;
21
- display: flex;
22
-
23
- @include govuk-media-query($from: tablet) {
24
- display: none;
25
- }
26
- }
27
-
28
- &::before {
29
- content: "";
30
- position: absolute;
31
- left: 0.15rem;
32
- top: 50%;
33
- box-sizing: border-box;
34
- display: inline-block;
35
- width: 0.6rem;
36
- height: 0.6rem;
37
- transform: translateY(-65%) rotate(135deg);
38
- border-top: 0.15rem solid;
39
- border-right: 0.15rem solid;
40
- }
41
-
42
- &.gem-c-cross-service-header__button--open {
43
- &::before {
44
- transform: translateY(-15%) rotate(-45deg);
45
- }
46
- }
47
-
48
- &.gem-c-cross-service-header__button--one-login {
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
- }
67
- }
68
- }
69
-
70
- .gem-c-cross-service-header__button-icon {
71
- margin-left: govuk-spacing(2);
72
- font-size: 0;
73
-
74
- &.gem-c-cross-service-header__button-icon--focus {
75
- display: none;
76
- }
77
-
78
- // apply focus style on :focus for browsers which support :focus but not :focus-visible
79
- .gem-c-cross-service-header__button:focus & {
80
- &.gem-c-cross-service-header__button-icon--default {
81
- display: none;
82
- }
83
-
84
- &.gem-c-cross-service-header__button-icon--focus {
85
- display: inline;
86
- }
87
- }
88
-
89
- // overwrite previous styles for browsers which support :focus-visible
90
- .gem-c-cross-service-header__button:focus:not(:focus-visible) & {
91
- &.gem-c-cross-service-header__button-icon--default {
92
- display: inline;
93
- }
94
-
95
- &.gem-c-cross-service-header__button-icon--focus {
96
- display: none;
97
- }
98
- }
99
-
100
- // apply focus style on :focus-visible for browsers which support :focus-visible
101
- .gem-c-cross-service-header__button:focus-visible & {
102
- &.gem-c-cross-service-header__button-icon--default {
103
- display: none;
104
- }
105
-
106
- &.gem-c-cross-service-header__button-icon--focus {
107
- display: inline;
108
- }
109
- }
110
- }
111
-
112
- // start One Login header styles
113
- .gem-c-one-login-header {
4
+ $toggle-content-spacing: 8px;
5
+ $toggle-padding: 15px;
6
+ $block-link-spacing: govuk-spacing(3);
7
+ $logo-height: 30px;
8
+ $toggle-border-height: 3px;
9
+
10
+ .gem-c-rebranded-one-login-header {
11
+ @include govuk-font($size: 16);
114
12
  color: govuk-colour("white");
115
- background: govuk-colour("black");
116
- border-bottom: govuk-spacing(2) solid $govuk-link-colour;
117
13
  position: relative;
118
- @include govuk-font($size: 19);
14
+ background: $govuk-brand-colour;
119
15
  }
120
16
 
121
- .gem-c-one-login-header__container {
17
+ .gem-c-rebranded-one-login-header__container {
122
18
  display: flex;
123
19
  position: relative;
124
20
  justify-content: space-between;
125
21
  align-items: center;
126
22
  flex-wrap: wrap;
23
+ border-bottom: 1px solid transparent;
127
24
  }
128
25
 
129
- .gem-c-one-login-header__logo {
26
+ .gem-c-rebranded-one-login-header__logo {
130
27
  min-width: max-content;
131
- padding-top: govuk-spacing(2);
132
- padding-bottom: govuk-spacing(2);
133
28
  max-width: 33.33%;
29
+ // this strange non-standard spacing came from the Design System
30
+ padding-top: 16px;
31
+ padding-bottom: 12px;
32
+ box-sizing: border-box;
33
+
134
34
  @include govuk-media-query($from: desktop) {
135
35
  width: 33.33%;
136
- padding-right: govuk-spacing(3);
137
- }
138
- }
139
-
140
- .gem-c-one-login-header__link,
141
- .gem-c-one-login-header__nav__link {
142
- &:link,
143
- &:visited {
144
- text-decoration: none;
145
- @include govuk-typography-common;
146
- @include govuk-link-style-inverse;
147
-
148
- &:hover {
149
- text-decoration: underline;
150
- text-decoration-thickness: $govuk-header-link-underline-thickness;
151
-
152
- @if $govuk-link-underline-offset {
153
- text-underline-offset: $govuk-link-underline-offset;
154
- }
155
- }
156
-
157
- &:focus {
158
- @include govuk-focused-text;
159
- }
36
+ padding-right: $toggle-padding;
160
37
  }
161
38
  }
162
39
 
163
- .gem-c-one-login-header__logotype {
40
+ .gem-c-rebranded-one-login-header__logotype {
164
41
  display: inline-block;
165
42
  position: relative;
166
43
  top: -3px;
167
-
168
- // Add a gap after the logo in case it's followed by a product name. This
169
- // gets removed later if the logotype is a :last-child.
170
- margin-right: govuk-spacing(1);
44
+ margin-bottom: 2px;
45
+ // this is in place to ensure the GOVUK logo doesn't overflow when text magnification is used
46
+ max-width: 80vw;
171
47
  fill: currentcolor;
172
- vertical-align: top;
48
+ vertical-align: sub;
173
49
 
174
50
  // Prevent readability backplate from obscuring underline in Windows High
175
51
  // Contrast Mode
@@ -177,34 +53,18 @@ $govuk-header-link-underline-thickness: 3px;
177
53
  forced-color-adjust: none;
178
54
  color: linktext;
179
55
  }
180
-
181
- // Remove the gap after the logo if there's no product name to keep hover
182
- // and focus states neat
183
- &:last-child {
184
- margin-right: 0;
185
- }
186
- }
187
-
188
- .gem-c-one-login-header__logotype-crown-fallback-image {
189
- width: 36px;
190
- height: 32px;
191
- border: 0;
192
- vertical-align: bottom;
193
56
  }
194
57
 
195
- .gem-c-one-login-header__link--homepage {
196
- display: inline-block;
197
- margin-right: govuk-spacing(2);
198
- font-size: 30px; // We don't have a mixin that produces 30px font size
199
- line-height: 1;
200
-
58
+ .gem-c-rebranded-one-login-header__link--homepage {
201
59
  // Font size needs to be set on the link so that the box sizing is correct
202
60
  // in Firefox
203
61
  @include govuk-font($size: false, $weight: bold);
62
+ display: inline;
63
+ margin-right: govuk-spacing(2);
64
+ font-size: 30px; // We don't have a mixin that produces 30px font size
65
+ line-height: 1;
204
66
 
205
67
  @include govuk-media-query($from: tablet) {
206
- display: inline;
207
-
208
68
  &:focus {
209
69
  // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
210
70
  // This is to stop the logo getting cut off by the box shadow when focused on above a product name
@@ -233,9 +93,48 @@ $govuk-header-link-underline-thickness: 3px;
233
93
  }
234
94
  }
235
95
 
236
- .gem-c-one-login-header__nav {
237
- @include govuk-media-query ($until: tablet) {
96
+ .gem-c-rebranded-one-login-header__link,
97
+ .gem-c-rebranded-one-login-header__nav__link {
98
+ &:link,
99
+ &:visited {
100
+ @include govuk-typography-common;
101
+ @include govuk-link-style-inverse;
102
+ text-decoration: none;
103
+
104
+ &:hover {
105
+ text-decoration: underline;
106
+ text-decoration-thickness: $govuk-header-link-underline-thickness;
107
+
108
+ @if $govuk-link-underline-offset {
109
+ text-underline-offset: $govuk-link-underline-offset;
110
+ }
111
+ }
112
+
113
+ &:focus {
114
+ @include govuk-focused-text;
115
+ }
116
+ }
117
+ }
118
+
119
+ .gem-c-rebranded-one-login-header__link {
120
+ word-spacing: -0.375rem;
121
+
122
+ & > * {
123
+ word-spacing: 0;
124
+ }
125
+
126
+ &:not(:focus) {
127
+ background-color: $govuk-brand-colour;
128
+ }
129
+ }
130
+
131
+ .gem-c-rebranded-one-login-header__nav {
132
+ @include govuk-media-query($until: tablet) {
238
133
  width: 100%;
134
+
135
+ &.gem-c-rebranded-one-login-header__nav--open {
136
+ border-top: 1px solid transparent;
137
+ }
239
138
  }
240
139
 
241
140
  @include govuk-media-query($from: tablet) {
@@ -243,115 +142,259 @@ $govuk-header-link-underline-thickness: 3px;
243
142
  }
244
143
  }
245
144
 
246
- .gem-c-one-login-header__nav__list {
247
- margin: 0;
248
- padding: 0;
249
- list-style: none;
250
- display: block;
145
+ .gem-c-rebranded-one-login-header__nav__link {
146
+ font-weight: bold;
147
+
148
+ @include govuk-media-query($from: tablet) {
149
+ position: relative;
150
+ padding: $block-link-spacing 0;
251
151
 
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) {
152
+ &::after {
153
+ content: "";
255
154
  display: none;
155
+ position: absolute;
156
+ height: $toggle-border-height;
157
+ width: calc(100% - $block-link-spacing * 2);
158
+ bottom: 0;
159
+ left: $block-link-spacing;
256
160
  }
257
161
 
258
- @include govuk-media-query ($from: tablet) {
259
- display: flex;
162
+ // this degree of specificity is only needed in order to overrule DS rules
163
+ &:link:link,
164
+ &:link:visited,
165
+ &:visited:link,
166
+ &:visited:visited {
167
+ &:hover,
168
+ &:active {
169
+ text-decoration: none;
170
+
171
+ &::after {
172
+ display: block;
173
+ background-color: govuk-colour("white");
174
+ }
175
+ }
176
+
177
+ &:focus {
178
+ box-shadow: none;
179
+
180
+ &::after {
181
+ display: block;
182
+ background-color: $govuk-focus-text-colour;
183
+ }
184
+ }
260
185
  }
261
186
  }
262
187
 
263
- .gem-c-one-login-header__nav--open & {
264
- @include govuk-media-query ($until: tablet) {
265
- display: block;
188
+ @include govuk-media-query($until: tablet) {
189
+ &:link:link,
190
+ &:link:visited,
191
+ &:visited:link,
192
+ &:visited:visited {
193
+ color: $govuk-brand-colour;
194
+
195
+ &:focus {
196
+ color: $govuk-focus-text-colour;
197
+ }
266
198
  }
267
199
  }
200
+ }
268
201
 
202
+ .gem-c-rebranded-one-login-header__nav__link-content {
269
203
  @include govuk-media-query($from: tablet) {
270
- padding: govuk-spacing(2) 0;
204
+ padding: 0 $block-link-spacing;
271
205
  display: flex;
272
206
  align-items: center;
207
+
208
+ &--sign-out {
209
+ height: $logo-height;
210
+ border-left: 1px solid govuk-colour("white");
211
+ }
273
212
  }
274
213
  }
275
214
 
276
- .gem-c-one-login-header__nav__list-item {
277
- display: inline-block;
278
- padding: govuk-spacing(2) 0;
215
+ .gem-c-rebranded-one-login-header__nav__list {
216
+ margin: 0;
217
+ padding: 0;
218
+ list-style: none;
279
219
 
280
220
  @include govuk-media-query($from: tablet) {
281
- padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(6);
282
- border-left: 1px solid $govuk-border-colour;
283
- align-self: stretch;
221
+ display: flex;
222
+ align-items: center;
223
+ }
284
224
 
285
- &:not(:last-child) {
286
- margin-right: govuk-spacing(4);
287
- }
225
+ @include govuk-media-query($until: tablet) {
226
+ background-color: govuk-colour("white");
227
+ color: $govuk-brand-colour;
228
+ margin-right: -(govuk-spacing(3));
229
+ margin-left: -(govuk-spacing(3));
230
+ padding: 0 govuk-spacing(3);
231
+ }
232
+ }
233
+
234
+ // if JS is unavailable, the nav links are expanded and the toggle button is hidden
235
+ .toggle-enabled .gem-c-rebranded-one-login-header__nav__list {
236
+ @include govuk-media-query($until: tablet) {
237
+ display: none;
288
238
  }
289
239
 
240
+ @include govuk-media-query($from: tablet) {
241
+ display: flex;
242
+ }
243
+ }
244
+
245
+ .gem-c-rebranded-one-login-header__nav--open .gem-c-rebranded-one-login-header__nav__list {
290
246
  @include govuk-media-query($until: tablet) {
291
- width: 100%;
247
+ display: block;
248
+ }
249
+ }
250
+
251
+ .gem-c-rebranded-one-login-header__nav__list-item {
252
+ @include govuk-media-query($from: tablet) {
253
+ border-left: none;
254
+ margin-right: 0;
255
+ padding: 0;
256
+ display: flex;
257
+ align-items: center;
258
+ }
259
+
260
+ @include govuk-media-query($until: tablet) {
261
+ padding: govuk-spacing(3) 0;
292
262
 
293
263
  &:not(:last-child) {
294
- border-bottom: 1px solid $govuk-border-colour;
264
+ border-bottom: 1px solid govuk-colour("mid-grey");
295
265
  }
296
266
  }
297
267
  }
298
268
 
299
- .gem-c-one-login-header__nav__link {
300
- font-weight: bold;
269
+ .gem-c-rebranded-cross-service-header__logo {
270
+ margin-right: $toggle-content-spacing;
271
+ }
301
272
 
302
- &.gem-c-one-login-header__nav__link--one-login {
303
- @include govuk-media-query($from: tablet) {
304
- display: flex;
305
- justify-content: center;
273
+ .gem-c-rebranded-cross-service-header__logo--nav {
274
+ @include govuk-media-query($until: tablet) {
275
+ display: none;
276
+ }
277
+ }
306
278
 
307
- // stylelint-disable max-nesting-depth
308
- &:focus {
309
- .gem-c-cross-service-header__button-icon {
310
- display: none;
311
- }
279
+ .gem-c-rebranded-cross-service-header__toggle {
280
+ display: none;
281
+ @include govuk-font($size: 16, $weight: bold);
282
+ position: absolute;
283
+ right: 0;
284
+ top: 0;
285
+ cursor: pointer;
286
+ border: 0;
287
+ margin: 0;
288
+ background: none;
289
+ color: inherit;
290
+ padding: $toggle-padding $toggle-padding calc($toggle-padding + 1px) $toggle-padding;
291
+ margin-right: -(govuk-spacing(3));
292
+
293
+ @mixin toggle-button-focus {
294
+ color: $govuk-focus-text-colour;
295
+ background-color: $govuk-focus-colour;
296
+ outline: 3px solid transparent;
297
+ }
312
298
 
313
- .gem-c-cross-service-header__button-icon--focus {
314
- display: inline;
315
- }
316
- }
299
+ &:focus {
300
+ @include toggle-button-focus;
301
+
302
+ &.gem-c-rebranded-cross-service-header__toggle--open {
303
+ @include toggle-button-focus;
317
304
  }
318
305
 
319
- @include govuk-media-query($until: tablet) {
320
- .gem-c-cross-service-header__button-icon {
321
- display: none;
306
+ // apply focus style on :focus-visible for browsers which support :focus-visible
307
+ &-visible {
308
+ @include toggle-button-focus;
309
+
310
+ &.gem-c-rebranded-cross-service-header__toggle--open {
311
+ @include toggle-button-focus;
322
312
  }
323
313
  }
324
314
  }
315
+
316
+ &.gem-c-rebranded-cross-service-header__toggle--open {
317
+ background-color: govuk-colour("white");
318
+ color: $govuk-brand-colour;
319
+ }
325
320
  }
326
- // end One Login header styles
327
321
 
328
- @include govuk-media-query($media-type: print) {
329
- .gem-c-cross-service-header {
330
- margin-bottom: 5mm;
322
+ .toggle-enabled .gem-c-rebranded-cross-service-header__toggle {
323
+ display: inline;
324
+
325
+ @include govuk-media-query($from: tablet) {
326
+ display: none;
331
327
  }
328
+ }
332
329
 
333
- .gem-c-one-login-header {
334
- background: none;
335
- border-bottom: 2pt solid $govuk-print-text-colour;
330
+ .gem-c-rebranded-cross-service-header__toggle-content-wrapper {
331
+ position: relative;
332
+ display: flex;
333
+ align-items: center;
336
334
 
337
- * {
338
- color: $govuk-print-text-colour;
339
- }
335
+ &::after {
336
+ content: "";
337
+ display: inline-block;
338
+ margin-left: $toggle-content-spacing;
339
+ top: 50%;
340
+ width: 0.6rem;
341
+ height: 0.6rem;
342
+ // this is in place to ensure the caret renders as intended when text magnification is useds
343
+ min-width: 0.6rem;
344
+ transform: translateY(-20%) rotate(135deg);
345
+ border-top: 0.15rem solid;
346
+ border-right: 0.15rem solid;
340
347
 
341
- .govuk-width-container {
342
- margin: 0;
348
+ .gem-c-rebranded-cross-service-header__toggle--open & {
349
+ transform: translateY(30%) rotate(-45deg);
343
350
  }
344
351
  }
345
352
 
346
- .gem-c-service-header {
347
- background: none;
353
+ &::before {
354
+ content: "";
355
+ display: inline-block;
356
+ position: absolute;
357
+ width: 100%;
358
+ height: $toggle-border-height;
359
+ background-color: transparent;
360
+ // the underline that appears on hover/focus should be 1px from the bottom of the container
361
+ bottom: calc(1px - $toggle-padding);
348
362
 
349
- .govuk-width-container {
350
- margin: 0;
363
+ .gem-c-rebranded-cross-service-header__toggle:hover & {
364
+ background-color: govuk-colour("white");
351
365
  }
352
366
 
353
- .gem-c-service-header__container {
354
- padding: 0;
367
+ .gem-c-rebranded-cross-service-header__toggle--open &,
368
+ .gem-c-rebranded-cross-service-header__toggle--open:hover & {
369
+ background-color: $govuk-brand-colour;
355
370
  }
371
+
372
+ .gem-c-rebranded-cross-service-header__toggle:focus &,
373
+ .gem-c-rebranded-cross-service-header__toggle:focus-visible & {
374
+ background-color: $govuk-focus-text-colour;
375
+
376
+ &:hover {
377
+ background-color: $govuk-focus-text-colour;
378
+ }
379
+ }
380
+ }
381
+ }
382
+
383
+ .gem-c-rebranded-one-login-header__logo-dot {
384
+ fill: #00ffe0;
385
+
386
+ // Override Dot colour when printing
387
+ @include govuk-media-query($media-type: print) {
388
+ fill: currentcolor;
389
+ }
390
+
391
+ // Override Dot colour on forced colours mode
392
+ @media (forced-colors: active) {
393
+ fill: currentcolor;
394
+ }
395
+
396
+ // Override Dot colour on focus
397
+ :focus & {
398
+ fill: currentcolor;
356
399
  }
357
400
  }
data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss CHANGED
@@ -286,10 +286,10 @@ $search-icon-height: 20px;
286
286
  }
287
287
 
288
288
  @include focus-and-focus-visible {
289
+ // this declaration overrides govuk-focused-text but the compiler prefers @include to be last
290
+ box-shadow: none !important; // stylelint-disable-line declaration-no-important
289
291
  @include govuk-focused-text;
290
292
 
291
- box-shadow: none;
292
-
293
293
  &::after {
294
294
  background-color: govuk-colour("black");
295
295
  }
@@ -366,8 +366,9 @@ $search-icon-height: 20px;
366
366
  // Styles the "Menu" open state
367
367
  .gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__open-button {
368
368
  @include focus-and-focus-visible {
369
+ // this declaration overrides govuk-focused-text because the compiler prefers @include to be last
370
+ box-shadow: none !important; // stylelint-disable-line declaration-no-important
369
371
  @include govuk-focused-text;
370
- box-shadow: none;
371
372
 
372
373
  &::after {
373
374
  background-color: govuk-colour("black");
@@ -435,11 +436,11 @@ $search-icon-height: 20px;
435
436
  }
436
437
 
437
438
  @include focus-and-focus-visible {
438
- @include govuk-focused-text;
439
-
440
- border-color: $govuk-focus-colour;
441
- box-shadow: none;
442
439
  z-index: 11;
440
+ // these declarations override govuk-focused-text because the compiler prefers @include to be last
441
+ border-color: $govuk-focus-colour !important; // stylelint-disable-line declaration-no-important
442
+ box-shadow: none !important; // stylelint-disable-line declaration-no-important
443
+ @include govuk-focused-text;
443
444
 
444
445
  &::after {
445
446
  background: govuk-colour("black");
@@ -481,9 +482,10 @@ $search-icon-height: 20px;
481
482
  color: govuk-colour("blue");
482
483
 
483
484
  @include focus-and-focus-visible {
485
+ // these declarations override govuk-focused-text because the compiler prefers @include to be last
486
+ border-color: $govuk-focus-colour !important; // stylelint-disable-line declaration-no-important
487
+ box-shadow: none !important; // stylelint-disable-line declaration-no-important
484
488
  @include govuk-focused-text;
485
- border-color: $govuk-focus-colour;
486
- box-shadow: none;
487
489
 
488
490
  &::after {
489
491
  background: govuk-colour("black");
data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss CHANGED
@@ -140,11 +140,10 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
140
140
 
141
141
  &:focus,
142
142
  &:hover {
143
- @include govuk-focused-text;
144
-
145
143
  outline: none;
146
144
  box-shadow: none;
147
145
  color: govuk-colour("black");
148
146
  background: $govuk-focus-colour;
147
+ @include govuk-focused-text;
149
148
  }
150
149
  }
data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss CHANGED
@@ -49,8 +49,8 @@ $gem-c-print-link-background-height: 18px;
49
49
  margin: govuk-spacing(0);
50
50
 
51
51
  &:focus {
52
- @include govuk-focused-text;
53
52
  background-color: $govuk-focus-colour;
54
53
  border-color: transparent;
54
+ @include govuk-focused-text;
55
55
  }
56
56
  }
data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use "sass:color";
1
2
  @import "govuk_publishing_components/individual_component_support";
2
3
 
3
4
  $input-size: 40px;
@@ -206,7 +207,7 @@ $search-submit-button-hover-colour: $govuk-blue-tint-95;
206
207
  color: govuk-colour("white");
207
208
 
208
209
  &:hover {
209
- background-color: lighten(govuk-colour("blue"), 5%);
210
+ background-color: color.adjust(govuk-colour("blue"), $lightness: 5%);
210
211
  }
211
212
  }
212
213
 
data/app/assets/stylesheets/govuk_publishing_components/components/_secondary-navigation.scss CHANGED
@@ -62,11 +62,10 @@
62
62
  }
63
63
 
64
64
  .gem-c-secondary-navigation__list-item-link:focus {
65
- @include govuk-focused-text;
66
-
67
65
  border-color: $govuk-focus-text-colour;
68
66
  border-left-color: transparent;
69
67
  position: relative;
68
+ @include govuk-focused-text;
70
69
 
71
70
  @include govuk-media-query($from: tablet) {
72
71
  box-shadow: none;
@@ -82,10 +81,9 @@
82
81
  }
83
82
 
84
83
  .gem-c-secondary-navigation__list-item-link:focus {
85
- @include govuk-focused-text;
86
-
87
84
  border-color: $govuk-focus-text-colour;
88
85
  border-left-color: transparent;
86
+ @include govuk-focused-text;
89
87
 
90
88
  @include govuk-media-query($from: tablet) {
91
89
  box-shadow: none;
data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss CHANGED
@@ -9,10 +9,8 @@
9
9
  background: none;
10
10
 
11
11
  &:focus {
12
- @include govuk-focused-text;
13
- background-color: $govuk-focus-colour;
14
12
  border-color: transparent;
15
- box-shadow: 0 $govuk-focus-width $govuk-text-colour;
13
+ @include govuk-focused-text;
16
14
  }
17
15
 
18
16
  &:hover {
@@ -21,6 +19,7 @@
21
19
 
22
20
  &:focus {
23
21
  color: $govuk-text-colour;
22
+ box-shadow: 0 $govuk-focus-width $govuk-text-colour;
24
23
  }
25
24
  }
26
25
  }
data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss CHANGED
@@ -296,9 +296,9 @@
296
296
  }
297
297
 
298
298
  &:focus {
299
- @include govuk-focused-text;
300
299
  background-color: $govuk-focus-colour;
301
300
  border-color: transparent;
301
+ @include govuk-focused-text;
302
302
  }
303
303
  }
304
304
 
data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_grid-helper.scss CHANGED
@@ -1,3 +1,7 @@
1
+ @use "sass:list";
2
+ @use "sass:string";
3
+ @use "sass:math";
4
+
1
5
  /// Set grid row or column value using the fraction unit.
2
6
  ///
3
7
  /// @param {Integer} $number - number of fractions that the grid row or column
@@ -16,7 +20,7 @@
16
20
  $fractions: $fractions + " 1fr";
17
21
  }
18
22
 
19
- @return unquote($fractions);
23
+ @return string.unquote($fractions);
20
24
  }
21
25
 
22
26
  /// Arrange items into columns
@@ -48,7 +52,7 @@
48
52
  /// }
49
53
  ///
50
54
  @mixin columns($items, $columns, $selector: "*", $flow: row) {
51
- $rows: ceil(calc($items / $columns));
55
+ $rows: math.ceil(calc($items / $columns));
52
56
 
53
57
  display: -ms-grid;
54
58
  display: grid;
@@ -73,19 +77,19 @@
73
77
 
74
78
  // stylelint-disable max-nesting-depth
75
79
  @if $counter <= $items {
76
- $this-row: append($this-row, $counter);
80
+ $this-row: list.append($this-row, $counter);
77
81
  }
78
82
  // stylelint-enable max-nesting-depth
79
83
  }
80
84
 
81
- $grid: append($grid, $this-row, "comma");
85
+ $grid: list.append($grid, $this-row, "comma");
82
86
  }
83
87
 
84
- @for $row-count from 1 through length($grid) {
85
- $this-column: nth($grid, $row-count);
88
+ @for $row-count from 1 through list.length($grid) {
89
+ $this-column: list.nth($grid, $row-count);
86
90
 
87
- @for $item-index from 1 through length($this-column) {
88
- $this-item: nth($this-column, $item-index);
91
+ @for $item-index from 1 through list.length($this-column) {
92
+ $this-item: list.nth($this-column, $item-index);
89
93
 
90
94
  & > #{$selector}:nth-child(#{$this-item}) {
91
95
  -ms-grid-column: $item-index;
@@ -113,23 +117,23 @@
113
117
 
114
118
  // stylelint-disable max-nesting-depth
115
119
  @if $counter <= $items {
116
- $this-row: append($this-row, $counter);
120
+ $this-row: list.append($this-row, $counter);
117
121
  }
118
122
  // stylelint-enable max-nesting-depth
119
123
  }
120
124
 
121
- $grid: append($grid, $this-row, "comma");
125
+ $grid: list.append($grid, $this-row, "comma");
122
126
  }
123
127
 
124
128
  // Now we can loop through the list of lists to create the rules needed for
125
129
  // the older grid syntax; fist looping through the list to get the number
126
130
  // needed for the column, then looping again to get the number for the grid
127
131
  // row:
128
- @for $column_index from 1 through length($grid) {
129
- $this-row: nth($grid, $column_index);
132
+ @for $column_index from 1 through list.length($grid) {
133
+ $this-row: list.nth($grid, $column_index);
130
134
 
131
- @for $item-index from 1 through length($this-row) {
132
- $this-item: nth($this-row, $item-index);
135
+ @for $item-index from 1 through list.length($this-row) {
136
+ $this-item: list.nth($this-row, $item-index);
133
137
 
134
138
  & > #{$selector}:nth-child(#{$this-item}) {
135
139
  -ms-grid-column: $column_index;
data/app/views/govuk_publishing_components/components/_action_link.html.erb CHANGED
@@ -18,21 +18,32 @@
18
18
  %>
19
19
  <% if text.present? %>
20
20
  <%= tag.div(**component_helper.all_attributes) do %>
21
- <% contents = capture do %>
22
- <span class="gem-c-action-link__link-wrapper">
23
- <% main_text = capture do %>
24
- <%= text %>
25
- <% end %>
26
-
27
- <% if href.present? %>
28
- <%= link_to href, class: link_classes do %>
29
- <%= main_text %>
30
- <% end %>
31
- <% else %>
32
- <%= main_text %>
33
- <% end %>
21
+ <% if simple || simple_light %>
22
+ <span class="gem-c-action-link__icon gem-c-action-link__icon--simple" hidden>
23
+ <svg xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 23 23">
24
+ <g class="gem-c-action-link__icon__arrow">
25
+ <path d="M14.943 11.795 10.44 7.292 11.733 6l5.795 5.795-5.795 5.795-1.293-1.292 4.503-4.503Z" />
26
+ <path d="M3.956 10.881h11.485v1.828H3.956v-1.828Z" />
27
+ </g>
28
+ </svg>
29
+ </span>
30
+ <% elsif %>
31
+ <span class="gem-c-action-link__icon" hidden>
32
+ <svg xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 27 27">
33
+ <circle class="gem-c-action-link__icon__circle" cx="13.5" cy="13.5" r="13.5" />
34
+ <g class="gem-c-action-link__icon__arrow">
35
+ <path d="m17.701 13.526-3.827-3.828L14.973 8.6l4.926 4.926-4.926 4.926-1.099-1.099 3.827-3.827Z"/>
36
+ <path d="M8.363 12.749h9.762v1.554H8.363v-1.554Z"/>
37
+ </g>
38
+ </svg>
34
39
  </span>
35
40
  <% end %>
36
- <%= contents %>
41
+ <span class="gem-c-action-link__link-wrapper">
42
+ <% if href.present? %>
43
+ <%= link_to text, href, class: link_classes %>
44
+ <% else %>
45
+ <%= text %>
46
+ <% end %>
47
+ </span>
37
48
  <% end %>
38
49
  <% end %>
data/app/views/govuk_publishing_components/components/_cross_service_header.html.erb CHANGED
@@ -4,10 +4,9 @@
4
4
  service_name ||= nil
5
5
  one_login_navigation_items ||= []
6
6
  service_navigation_items ||= []
7
- service_navigation_aria_label ||= "Service menu"
8
7
  %>
9
8
 
10
- <header class="gem-c-cross-service-header" data-module="cross-service-header">
9
+ <header class="gem-c-cross-service-header gem-c-rebranded-cross-service-header" data-module="cross-service-header">
11
10
  <%= render "govuk_publishing_components/components/cross_service_header/one_login_header", {
12
11
  one_login_navigation_items: one_login_navigation_items,
13
12
  } %>
data/app/views/govuk_publishing_components/components/cross_service_header/_one_login_header.html.erb CHANGED
@@ -1,99 +1,72 @@
1
1
  <% one_login_home = one_login_navigation_items[:one_login_home] %>
2
2
  <% one_login_sign_out = one_login_navigation_items[:one_login_sign_out] %>
3
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">
4
+ <div class="gem-c-rebranded-one-login-header" data-one-login-header-nav>
5
+ <div class="gem-c-rebranded-one-login-header__container govuk-width-container">
6
+ <div class="gem-c-rebranded-one-login-header__logo">
7
+ <a href="https://www.gov.uk/" class="gem-c-rebranded-one-login-header__link gem-c-rebranded-one-login-header__link--homepage">
8
8
  <svg
9
9
  focusable="false"
10
10
  role="img"
11
- class="gem-c-one-login-header__logotype"
12
11
  xmlns="http://www.w3.org/2000/svg"
13
- viewBox="0 0 148 30"
12
+ viewBox="0 0 324 60"
14
13
  height="30"
15
- width="148"
14
+ width="162"
15
+ fill="currentcolor"
16
+ class="gem-c-rebranded-one-login-header__logotype"
16
17
  aria-label="GOV.UK">
17
18
  <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
+ <g>
20
+ <circle cx="20" cy="17.6" r="3.7"></circle>
21
+ <circle cx="10.2" cy="23.5" r="3.7"></circle>
22
+ <circle cx="3.7" cy="33.2" r="3.7"></circle>
23
+ <circle cx="31.7" cy="30.6" r="3.7"></circle>
24
+ <circle cx="43.3" cy="17.6" r="3.7"></circle>
25
+ <circle cx="53.2" cy="23.5" r="3.7"></circle>
26
+ <circle cx="59.7" cy="33.2" r="3.7"></circle>
27
+ <circle cx="31.7" cy="30.6" r="3.7"></circle>
28
+ <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"></path>
29
+ </g>
30
+ <circle class="gem-c-rebranded-one-login-header__logo-dot" cx="226" cy="36" r="7.3"></circle>
31
+ <path d="M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9"></path>
19
32
  </svg>
20
33
  </a>
21
34
  </div>
22
-
23
35
  <button type="button"
24
36
  aria-controls="one-login-header__nav"
25
37
  aria-label="Show GOV.UK One Login menu"
26
- data-open-class="gem-c-cross-service-header__button--open"
38
+ data-open-class="gem-c-rebranded-cross-service-header__toggle--open"
27
39
  data-label-for-show="Show GOV.UK One Login menu"
28
40
  data-label-for-hide="Hide GOV.UK One Login menu"
29
41
  aria-expanded="false"
30
- class="gem-c-cross-service-header__button gem-c-cross-service-header__button--one-login js-x-header-toggle">
31
- <span class="gem-c-cross-service-header__button-content">One Login</span>
32
-
33
- <!--[if gt IE 8]><!-->
34
- <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--default">
35
- <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
36
- <circle cx="11" cy="11" r="11" fill="white"/>
37
- <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"/>
38
- <circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
39
- <circle cx="11" cy="11" r="10" stroke="white" stroke-width="2"/>
42
+ class="gem-c-rebranded-cross-service-header__toggle js-x-header-toggle">
43
+ <span class="gem-c-rebranded-cross-service-header__toggle-content-wrapper">
44
+ <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="150 150 250 250" fill="currentcolor" class="gem-c-rebranded-cross-service-header__logo ">
45
+ <path d="M300.002 312.261C249.445 312.261 208.346 271.165 208.346 220.608C208.346 170.051 249.445 128.954 300.002 128.954C350.559 128.954 391.655 170.051 391.655 220.608C391.655 271.165 350.559 312.261 300.002 312.261ZM300.002 170.892C272.673 170.892 250.389 193.175 250.389 220.504C250.389 247.83 272.673 270.113 300.002 270.113C327.33 270.113 349.611 247.83 349.611 220.504C349.611 193.175 327.33 170.892 300.002 170.892Z" />
46
+ <path d="M221.275 471.046H179.231V365.202H420.769V407.246H221.275V471.046Z"/>
40
47
  </svg>
48
+ <span class="gem-c-rebranded-cross-service-header__toggle-content">One Login</span>
41
49
  </span>
42
- <!--<![endif]-->
43
-
44
- <!--[if gt IE 8]><!-->
45
- <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--focus">
46
- <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
47
- <circle cx="11" cy="11" r="11" fill="black"/>
48
- <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"/>
49
- <circle cx="11" cy="7.75" r="3.75" fill="white"/>
50
- <circle cx="11" cy="11" r="10" stroke="black" stroke-width="2"/>
51
- </svg>
52
- </span>
53
- <!--<![endif]-->
54
50
  </button>
55
-
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">
57
- <ul class="gem-c-one-login-header__nav__list">
58
- <li class="gem-c-one-login-header__nav__list-item">
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 %>
60
- <span class="gem-c-one-login-header__nav__link-content">
61
- GOV.UK One Login
62
- </span>
63
-
64
- <!--[if gt IE 8]><!-->
65
- <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--default">
66
- <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
67
- <circle cx="11" cy="11" r="11" fill="white"/>
68
- <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"/>
69
- <circle cx="11" cy="7.75" r="3.75" fill="#1D70B8"/>
70
- <circle cx="11" cy="11" r="10" stroke="white" stroke-width="2"/>
71
- </svg>
72
- </span>
73
- <!--<![endif]-->
74
-
75
- <!--[if gt IE 8]><!-->
76
- <span class="gem-c-cross-service-header__button-icon gem-c-cross-service-header__button-icon--focus">
77
- <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
78
- <circle cx="11" cy="11" r="11" fill="black"/>
79
- <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"/>
80
- <circle cx="11" cy="7.75" r="3.75" fill="white"/>
81
- <circle cx="11" cy="11" r="10" stroke="black" stroke-width="2"/>
51
+ <nav aria-label="GOV.UK One Login" class="gem-c-rebranded-one-login-header__nav" data-open-class="gem-c-rebranded-one-login-header__nav--open" id="one-login-header__nav">
52
+ <ul class="gem-c-rebranded-one-login-header__nav__list">
53
+ <li class="gem-c-rebranded-one-login-header__nav__list-item">
54
+ <%= link_to one_login_home[:href], class: "gem-c-rebranded-one-login-header__nav__link", data: one_login_home[:data] do %>
55
+ <span class="gem-c-rebranded-one-login-header__nav__link-content">
56
+ <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="150 150 250 250" fill="currentcolor" class="gem-c-rebranded-cross-service-header__logo gem-c-rebranded-cross-service-header__logo--nav">
57
+ <path d="M300.002 312.261C249.445 312.261 208.346 271.165 208.346 220.608C208.346 170.051 249.445 128.954 300.002 128.954C350.559 128.954 391.655 170.051 391.655 220.608C391.655 271.165 350.559 312.261 300.002 312.261ZM300.002 170.892C272.673 170.892 250.389 193.175 250.389 220.504C250.389 247.83 272.673 270.113 300.002 270.113C327.33 270.113 349.611 247.83 349.611 220.504C349.611 193.175 327.33 170.892 300.002 170.892Z" />
58
+ <path d="M221.275 471.046H179.231V365.202H420.769V407.246H221.275V471.046Z"/>
82
59
  </svg>
60
+ GOV.UK One Login
83
61
  </span>
84
- <!--<![endif]-->
85
62
  <% end %>
86
63
  </li>
87
- <li class="gem-c-one-login-header__nav__list-item">
88
- <%= link_to(
89
- one_login_sign_out[:text],
90
- one_login_sign_out[:href],
91
- class: 'gem-c-one-login-header__nav__link',
92
- data: one_login_sign_out[:data],
93
- ) %>
64
+ <li class="gem-c-rebranded-one-login-header__nav__list-item">
65
+ <%= link_to one_login_sign_out[:href], class: "gem-c-rebranded-one-login-header__nav__link", data: one_login_sign_out[:data] do %>
66
+ <%= tag.span one_login_sign_out[:text], class: "gem-c-rebranded-one-login-header__nav__link-content gem-c-rebranded-one-login-header__nav__link-content--sign-out" %>
67
+ <% end %>
94
68
  </li>
95
69
  </ul>
96
70
  </nav>
97
71
  </div>
98
72
  </div>
99
-
data/lib/govuk_publishing_components/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "59.1.1".freeze
2
+ VERSION = "59.2.0".freeze
3
3
  end
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: 59.1.1
4
+ version: 59.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev