govuk_tech_docs 3.0.1 → 3.2.1

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of govuk_tech_docs might be problematic. Click here for more details.

Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +25 -0
  3. data/example/source/code.html.md +3 -26
  4. data/lib/assets/javascripts/_modules/collapsible-navigation.js +13 -7
  5. data/lib/assets/javascripts/_modules/in-page-navigation.js +9 -4
  6. data/lib/assets/javascripts/_modules/search.js +11 -7
  7. data/lib/assets/stylesheets/_govuk_tech_docs.scss +1 -1
  8. data/lib/assets/stylesheets/modules/_anchored-heading.scss +2 -2
  9. data/lib/assets/stylesheets/modules/_search.scss +2 -2
  10. data/lib/assets/stylesheets/modules/_toc.scss +4 -4
  11. data/lib/govuk_tech_docs/pages.rb +4 -2
  12. data/lib/govuk_tech_docs/path_helpers.rb +30 -0
  13. data/lib/govuk_tech_docs/table_of_contents/helpers.rb +7 -7
  14. data/lib/govuk_tech_docs/tech_docs_html_renderer.rb +3 -3
  15. data/lib/govuk_tech_docs/version.rb +1 -1
  16. data/lib/govuk_tech_docs.rb +1 -0
  17. data/lib/source/api/pages.json.erb +1 -1
  18. data/lib/source/layouts/_header.erb +3 -3
  19. data/lib/source/layouts/_search.erb +1 -1
  20. data/lib/source/layouts/core.erb +1 -1
  21. data/node_modules/govuk-frontend/govuk/all.js +272 -75
  22. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +275 -98
  23. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +169 -65
  24. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +3 -4
  25. data/node_modules/govuk-frontend/govuk/components/button/button.js +2 -2
  26. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +3 -3
  27. data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +14 -0
  28. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +8 -10
  29. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +0 -2
  30. data/node_modules/govuk-frontend/govuk/components/details/_index.scss +2 -1
  31. data/node_modules/govuk-frontend/govuk/components/details/details.js +2 -2
  32. data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss +1 -0
  33. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +2 -2
  34. data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +1 -0
  35. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +6 -37
  36. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +10 -4
  37. data/node_modules/govuk-frontend/govuk/components/header/header.js +4 -4
  38. data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +1 -3
  39. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +1 -1
  40. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +499 -2
  41. data/node_modules/govuk-frontend/govuk/components/panel/_index.scss +13 -1
  42. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +14 -0
  43. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +4 -4
  44. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +1 -1
  45. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +13 -0
  46. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +1108 -0
  47. data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +15 -23
  48. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +2 -2
  49. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +2 -2
  50. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +0 -5
  51. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +1 -1
  52. data/node_modules/govuk-frontend/govuk/core/_all.scss +0 -1
  53. data/node_modules/govuk-frontend/govuk/core/_global-styles.scss +0 -6
  54. data/node_modules/govuk-frontend/govuk/core/_links.scss +0 -6
  55. data/node_modules/govuk-frontend/govuk/core/_lists.scss +0 -6
  56. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +0 -6
  57. data/node_modules/govuk-frontend/govuk/core/_typography.scss +0 -6
  58. data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +2 -2
  59. data/node_modules/govuk-frontend/govuk/helpers/_spacing.scss +22 -4
  60. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  61. data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +15 -30
  62. data/node_modules/govuk-frontend/govuk/{core → objects}/_template.scss +1 -5
  63. data/node_modules/govuk-frontend/govuk/overrides/_all.scss +1 -0
  64. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +0 -6
  65. data/node_modules/govuk-frontend/govuk/overrides/_spacing.scss +0 -6
  66. data/node_modules/govuk-frontend/govuk/overrides/_text-align.scss +14 -0
  67. data/node_modules/govuk-frontend/govuk/overrides/_typography.scss +0 -6
  68. data/node_modules/govuk-frontend/govuk/overrides/_width.scss +0 -6
  69. data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +3 -0
  70. data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +0 -10
  71. data/node_modules/govuk-frontend/govuk/tools/_all.scss +0 -1
  72. data/package-lock.json +3 -3
  73. data/package.json +1 -1
  74. metadata +9 -7
  75. data/node_modules/govuk-frontend/govuk/tools/_iff.scss +0 -17
@@ -1,38 +1,36 @@
1
1
  @include govuk-exports("govuk/component/accordion") {
2
+ $govuk-accordion-base-colour: govuk-colour("black");
3
+ $govuk-accordion-hover-colour: govuk-colour("light-grey", $legacy: "grey-3");
4
+ $govuk-accordion-icon-focus-colour: govuk-colour("yellow");
5
+ $govuk-accordion-bottom-border-width: 1px;
6
+
2
7
  .govuk-accordion {
3
8
  @include govuk-responsive-margin(6, "bottom");
4
9
  }
5
10
 
6
- // Borders between accordion sections
7
11
  .govuk-accordion__section {
8
12
  padding-top: govuk-spacing(3);
9
13
  }
10
14
 
11
- .govuk-accordion__section-header {
12
- padding-top: govuk-spacing(3);
13
- padding-bottom: govuk-spacing(3);
14
- }
15
-
16
15
  .govuk-accordion__section-heading {
17
16
  // Override browser defaults to ensure consistent element height
18
- // Font size is set in .govuk-accordion__section-button
19
- @include govuk-font(24);
17
+ margin-top: 0;
18
+ margin-bottom: 0;
20
19
 
21
- margin-top: 0; // Override browser default
22
- margin-bottom: 0; // Override browser default
20
+ padding-top: govuk-spacing(3);
21
+ padding-bottom: govuk-spacing(3);
23
22
  }
24
23
 
25
- // Buttons within the sections don’t need default styling
26
24
  .govuk-accordion__section-button {
27
- @include govuk-font($size: 24, $weight: bold);
28
- display: inline-block;
25
+ @include govuk-text-colour;
26
+
27
+ display: block;
29
28
  margin-bottom: 0;
30
29
  padding-top: govuk-spacing(3);
31
30
  }
32
31
 
33
- .govuk-accordion__section-summary {
34
- margin-top: govuk-spacing(2);
35
- margin-bottom: 0;
32
+ .govuk-accordion__section-heading-text {
33
+ @include govuk-font($size: 24, $weight: bold);
36
34
  }
37
35
 
38
36
  // Remove the bottom margin from the last item inside the content
@@ -44,10 +42,9 @@
44
42
  .js-enabled {
45
43
  .govuk-accordion {
46
44
  // Border at the bottom of the whole accordion
47
- border-bottom: 1px solid $govuk-border-colour;
45
+ border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
48
46
  }
49
47
 
50
- // Borders between accordion sections
51
48
  .govuk-accordion__section {
52
49
  padding-top: 0;
53
50
  }
@@ -55,8 +52,7 @@
55
52
  // Hide the body of collapsed sections
56
53
  .govuk-accordion__section-content {
57
54
  display: none;
58
- @include govuk-responsive-padding(3, "top");
59
- @include govuk-responsive-padding(3, "bottom");
55
+ @include govuk-responsive-padding(8, "bottom");
60
56
  }
61
57
 
62
58
  // Show the body of expanded sections
@@ -64,54 +60,209 @@
64
60
  display: block;
65
61
  }
66
62
 
67
- // This is styled to look like a link not a button
68
- .govuk-accordion__open-all {
69
- @include govuk-font($size: 16);
63
+ .govuk-accordion__show-all {
64
+ @include govuk-font($size: 19);
70
65
  position: relative;
71
66
  z-index: 1;
72
- margin: 0;
73
- padding: 0;
67
+
68
+ margin-bottom: 9px;
69
+ padding: govuk-spacing(1) 2px govuk-spacing(1) 0;
70
+
74
71
  border-width: 0;
72
+
75
73
  color: $govuk-link-colour;
76
74
  background: none;
75
+
77
76
  cursor: pointer;
78
77
  -webkit-appearance: none;
79
78
 
80
- @include govuk-link-common;
81
- @include govuk-link-style-default;
79
+ @include govuk-media-query ($from: desktop) {
80
+ margin-bottom: 14px;
81
+ }
82
82
 
83
83
  // Remove default button focus outline in Firefox
84
84
  &::-moz-focus-inner {
85
85
  padding: 0;
86
86
  border: 0;
87
87
  }
88
+
89
+ &:hover {
90
+ color: $govuk-accordion-base-colour;
91
+ background: $govuk-accordion-hover-colour;
92
+ // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
93
+ // button. We add a grey box-shadow on hover too, to make the height of the hover state
94
+ // match the height of the focus state.
95
+ box-shadow: 0 -2px $govuk-accordion-hover-colour, 0 4px $govuk-accordion-hover-colour;
96
+
97
+ .govuk-accordion__section-toggle-text {
98
+ color: $govuk-accordion-base-colour;
99
+ }
100
+
101
+ .govuk-accordion-nav__chevron {
102
+ color: $govuk-accordion-base-colour;
103
+ background: $govuk-accordion-base-colour;
104
+ }
105
+
106
+ .govuk-accordion-nav__chevron:after {
107
+ color: $govuk-accordion-hover-colour;
108
+ }
109
+ }
110
+
111
+ &:focus {
112
+ @include govuk-focused-text;
113
+
114
+ .govuk-accordion-nav__chevron {
115
+ background: $govuk-accordion-base-colour;
116
+ }
117
+
118
+ .govuk-accordion-nav__chevron:after {
119
+ color: $govuk-accordion-icon-focus-colour;
120
+ }
121
+ }
122
+ }
123
+
124
+ .govuk-accordion__section-heading {
125
+ padding: 0;
88
126
  }
89
127
 
90
- // Section headers have a pointer cursor as an additional affordance
91
- .govuk-accordion__section-header {
128
+ // Create Chevron icon aligned with text
129
+ .govuk-accordion-nav__chevron {
130
+ box-sizing: border-box;
131
+ display: inline-block;
132
+
92
133
  position: relative;
93
- // Safe area on the right to avoid clashing with icon
94
- padding-right: 40px;
95
- border-top: 1px solid $govuk-border-colour;
96
- cursor: pointer;
134
+
135
+ // Set size using rems to make the icon scale with text if user resizes text in their browser
136
+ width: govuk-px-to-rem(20px);
137
+ height: govuk-px-to-rem(20px);
138
+
139
+ border: govuk-px-to-rem(1px) solid;
140
+ border-radius: 50%;
141
+
142
+ vertical-align: middle;
143
+
144
+ // IE8 fallback of icon
145
+ @include govuk-if-ie8 {
146
+ display: inline-block;
147
+ max-height: 20px;
148
+ line-height: 1;
149
+ }
150
+
151
+ // Create inner chevron arrow
152
+ &:after {
153
+ content: "";
154
+ box-sizing: border-box;
155
+ display: block;
156
+
157
+ position: absolute;
158
+ bottom: govuk-px-to-rem(5px);
159
+ left: govuk-px-to-rem(6px);
160
+
161
+ width: govuk-px-to-rem(6px);
162
+ height: govuk-px-to-rem(6px);
163
+
164
+ -webkit-transform: rotate(-45deg);
165
+
166
+ -ms-transform: rotate(-45deg);
167
+
168
+ transform: rotate(-45deg);
169
+
170
+ border-top: govuk-px-to-rem(2px) solid;
171
+ border-right: govuk-px-to-rem(2px) solid;
172
+
173
+ // IE8 fallback of icon with HTML symbol
174
+ @include govuk-if-ie8 {
175
+ content: "\25B2"; // "▲"
176
+ position: relative;
177
+ border: 0;
178
+ }
179
+ }
180
+ }
181
+
182
+ // Rotate icon to create "Down" version
183
+ .govuk-accordion-nav__chevron--down {
184
+ -webkit-transform: rotate(180deg);
185
+ -ms-transform: rotate(180deg);
186
+ transform: rotate(180deg);
187
+
188
+ // IE8 fallback of arrow icon
189
+ @include govuk-if-ie8 {
190
+ &:after {
191
+ content: "\25BC"; // "▼"
192
+ -webkit-transform: none;
193
+ -ms-transform: none;
194
+ transform: none;
195
+ }
196
+ }
97
197
  }
98
198
 
99
- // Buttons within the headers don’t need default styling
100
199
  .govuk-accordion__section-button {
101
- @include govuk-typography-common;
102
- margin-top: 0;
103
- margin-bottom: 0;
104
- margin-left: 0;
105
- padding: 0;
106
- border-width: 0;
107
- color: $govuk-link-colour;
200
+ width: 100%;
201
+
202
+ padding: govuk-spacing(2) 0 0 0;
203
+
204
+ border: 0;
205
+
206
+ border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
207
+
208
+ // Visually separate the section from the one underneath when user changes colours in their
209
+ // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
210
+ border-bottom: govuk-spacing(2) solid transparent;
211
+
212
+ color: $govuk-text-colour;
108
213
  background: none;
214
+
109
215
  text-align: left;
216
+ // Section headers have a pointer cursor as an additional affordance
110
217
  cursor: pointer;
111
218
  -webkit-appearance: none;
112
219
 
220
+ @include govuk-media-query ($from: tablet) {
221
+ padding-bottom: govuk-spacing(2);
222
+ }
223
+
224
+ &:active {
225
+ color: $govuk-link-active-colour;
226
+ background: none;
227
+ }
228
+
229
+ &:hover {
230
+ color: $govuk-accordion-base-colour;
231
+ background: $govuk-accordion-hover-colour;
232
+
233
+ .govuk-accordion__section-toggle-text {
234
+ color: $govuk-accordion-base-colour;
235
+ }
236
+
237
+ .govuk-accordion-nav__chevron {
238
+ color: $govuk-accordion-base-colour;
239
+ background: $govuk-accordion-base-colour;
240
+ }
241
+
242
+ .govuk-accordion-nav__chevron:after {
243
+ color: $govuk-accordion-hover-colour;
244
+ }
245
+ }
246
+
113
247
  &:focus {
114
- @include govuk-focused-text;
248
+ // Remove default focus border around button as
249
+ // styling is being applied to inner text elements that receive focus
250
+ outline: 0;
251
+
252
+ .govuk-accordion__section-heading-text-focus,
253
+ .govuk-accordion__section-summary-focus,
254
+ .govuk-accordion__section-toggle-focus {
255
+ @include govuk-focused-text;
256
+ }
257
+
258
+ .govuk-accordion-nav__chevron {
259
+ color: $govuk-accordion-base-colour;
260
+ background: $govuk-accordion-base-colour;
261
+ }
262
+
263
+ .govuk-accordion-nav__chevron:after {
264
+ color: $govuk-accordion-icon-focus-colour;
265
+ }
115
266
  }
116
267
 
117
268
  // Remove default button focus outline in Firefox
@@ -121,77 +272,103 @@
121
272
  }
122
273
  }
123
274
 
124
- // Extend the touch area of the button to span the section header
125
- .govuk-accordion__section-button:after {
126
- content: "";
127
- position: absolute;
128
- top: 0;
129
- right: 0;
130
- bottom: 0;
131
- left: 0;
275
+ // Remove the transparent border when the section is expanded to make it clear that the heading
276
+ // relates to the content below. Adjust padding to maintain the height of the element.
277
+ // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
278
+ .govuk-accordion__section--expanded .govuk-accordion__section-button {
279
+ padding-bottom: govuk-spacing(4);
280
+ border-bottom: 0;
132
281
  }
133
282
 
134
- .govuk-accordion__section-button:hover:not(:focus) {
135
- color: $govuk-link-hover-colour;
136
- text-decoration: underline;
283
+ // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
284
+ // Styling adds some spacing
285
+ .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
286
+ padding-bottom: 3px;
137
287
 
138
- // This needs to come after the text-decoration property otherwise
139
- // text-decoration, as a shorthand property, resets it to auto
140
- @include govuk-link-hover-decoration;
141
- text-underline-offset: $govuk-link-underline-offset;
288
+ @include govuk-media-query ($from: desktop) {
289
+ padding-bottom: 2px;
290
+ }
142
291
  }
143
292
 
144
- // For devices that can't hover such as touch devices,
145
- // remove hover state as it can be stuck in that state (iOS).
146
- @media (hover: none) {
147
- .govuk-accordion__section-button:hover {
148
- text-decoration: none;
293
+ .govuk-accordion__section-toggle,
294
+ .govuk-accordion__section-heading-text,
295
+ .govuk-accordion__section-summary {
296
+ display: block;
297
+ margin-bottom: 13px;
298
+
299
+ .govuk-accordion__section-heading-text-focus,
300
+ .govuk-accordion__section-summary-focus,
301
+ .govuk-accordion__section-toggle-focus {
302
+ display: inline;
149
303
  }
150
304
  }
151
305
 
152
- .govuk-accordion__controls {
153
- text-align: right;
306
+ // Add toggle link with Chevron icon on left.
307
+ .govuk-accordion__section-toggle {
308
+ @include govuk-font($size: 19);
309
+ color: $govuk-link-colour;
154
310
  }
155
311
 
156
- // Display an icon to the right of each header to indicate open/closed status,
157
- // and as an additional affordance.
158
- .govuk-accordion__icon {
159
- position: absolute;
160
- top: 50%;
161
- right: 15px;
162
- width: 16px;
163
- height: 16px;
164
- margin-top: -8px;
312
+ // Add space between the icon and text.
313
+ // Avoid applying spacing directly to the icon as the use of `transform` will change the
314
+ // placement of any margins.
315
+ .govuk-accordion__show-all-text,
316
+ .govuk-accordion__section-toggle-text {
317
+ margin-left: govuk-spacing(1);
318
+ vertical-align: middle;
165
319
  }
166
320
 
167
- .govuk-accordion__icon:after,
168
- .govuk-accordion__icon:before {
169
- content: "";
170
- box-sizing: border-box;
171
- position: absolute;
172
- top: 0;
173
- right: 0;
174
- bottom: 0;
175
- left: 0;
176
- width: 25%;
177
- height: 25%;
178
- margin: auto;
179
- border: 2px solid transparent;
180
- background-color: govuk-colour("black");
181
- }
182
-
183
- .govuk-accordion__icon:before {
184
- width: 100%;
185
- }
321
+ // Background colour adjustment when user changes colours in Firefox
322
+ //
323
+ // When user changes colours in Firefox, text colour inside <button> is always black
324
+ // (regardless of the custom colours the user has set). This is fine when the text in the
325
+ // button is not nested inside another element because when user changes colours in Firefox,
326
+ // the immediate background colour of buttons is always white (again, regardless of user's
327
+ // custom colours).
328
+ //
329
+ // However, when the text inside <button> is wrapped inside another element AND that element
330
+ // sets a background colour, the text colour is still black but the background of that nested
331
+ // element gets the user's custom background colour. When the custom background is a lighter
332
+ // hue, the contrast might be sufficient. But if the user's custom background colour is a
333
+ // darker colour, the contrast with the text might not be sufficient.
334
+ //
335
+ // To ensure sufficient contrast, override the background colour set by the focus state on the
336
+ // nested elements to be transparent.
337
+ //
338
+ // Also override the background colour of the Show/Hide chevrons which set a background colour
339
+ // on hover.
340
+ @media screen and (forced-colors: active) {
341
+ .govuk-accordion__show-all:hover,
342
+ .govuk-accordion__section-button:hover {
343
+ .govuk-accordion-nav__chevron {
344
+ background-color: transparent;
345
+ }
346
+ }
186
347
 
187
- .govuk-accordion__icon:after {
188
- height: 100%;
348
+ .govuk-accordion__show-all:focus,
349
+ .govuk-accordion__section-button:focus {
350
+ .govuk-accordion__section-heading-text-focus,
351
+ .govuk-accordion__section-summary-focus,
352
+ .govuk-accordion__section-toggle-focus,
353
+ .govuk-accordion-nav__chevron {
354
+ background: transparent;
355
+ background-color: transparent;
356
+ }
357
+ }
189
358
  }
190
359
 
191
- // Vertical bar should be hidden when section is open, to display a '-' icon
192
- .govuk-accordion__section--expanded .govuk-accordion__icon:after {
193
- content: " ";
194
- display: none;
360
+ // For devices that can't hover such as touch devices,
361
+ // remove hover state as it can be stuck in that state (iOS).
362
+ @media (hover: none) {
363
+ .govuk-accordion__section-header:hover {
364
+ border-top-color: $govuk-border-colour;
365
+
366
+ box-shadow: inset 0 3px 0 0 $govuk-link-colour;
367
+
368
+ .govuk-accordion__section-button {
369
+ border-top-color: $govuk-border-colour;
370
+ }
371
+ }
195
372
  }
196
373
  }
197
374
  }