dxw_govuk_frontend_rails 3.8.0 → 3.12.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 (66) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +2 -2
  3. data/README.md +61 -40
  4. data/lib/dxw_govuk_frontend_rails/version.rb +1 -1
  5. data/package-lock.json +22 -4
  6. data/package.json +1 -1
  7. data/vendor/assets/javascripts/govuk_frontend_rails.js +84 -33
  8. data/vendor/assets/stylesheets/components/_all.scss +2 -0
  9. data/vendor/assets/stylesheets/components/accordion/_index.scss +7 -17
  10. data/vendor/assets/stylesheets/components/back-link/_index.scss +4 -17
  11. data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss +0 -1
  12. data/vendor/assets/stylesheets/components/button/_index.scss +5 -3
  13. data/vendor/assets/stylesheets/components/character-count/_index.scss +1 -4
  14. data/vendor/assets/stylesheets/components/checkboxes/_index.scss +13 -13
  15. data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss +2 -0
  16. data/vendor/assets/stylesheets/components/cookie-banner/_index.scss +51 -0
  17. data/vendor/assets/stylesheets/components/details/_index.scss +5 -2
  18. data/vendor/assets/stylesheets/components/error-summary/_index.scss +2 -14
  19. data/vendor/assets/stylesheets/components/fieldset/_index.scss +1 -1
  20. data/vendor/assets/stylesheets/components/file-upload/_index.scss +13 -14
  21. data/vendor/assets/stylesheets/components/footer/_index.scss +14 -20
  22. data/vendor/assets/stylesheets/components/header/_index.scss +41 -26
  23. data/vendor/assets/stylesheets/components/hint/_index.scss +0 -2
  24. data/vendor/assets/stylesheets/components/input/_index.scss +91 -0
  25. data/vendor/assets/stylesheets/components/notification-banner/_index.scss +89 -0
  26. data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss +2 -0
  27. data/vendor/assets/stylesheets/components/panel/_index.scss +6 -2
  28. data/vendor/assets/stylesheets/components/phase-banner/_index.scss +1 -1
  29. data/vendor/assets/stylesheets/components/radios/_index.scss +13 -13
  30. data/vendor/assets/stylesheets/components/select/_index.scss +0 -1
  31. data/vendor/assets/stylesheets/components/skip-link/_index.scss +1 -1
  32. data/vendor/assets/stylesheets/components/summary-list/_index.scss +2 -10
  33. data/vendor/assets/stylesheets/components/table/_index.scss +21 -0
  34. data/vendor/assets/stylesheets/components/tabs/_index.scss +4 -12
  35. data/vendor/assets/stylesheets/components/tag/_index.scss +0 -1
  36. data/vendor/assets/stylesheets/components/textarea/_index.scss +0 -1
  37. data/vendor/assets/stylesheets/components/warning-text/_index.scss +10 -1
  38. data/vendor/assets/stylesheets/core/_links.scss +8 -0
  39. data/vendor/assets/stylesheets/helpers/_device-pixels.scss +3 -3
  40. data/vendor/assets/stylesheets/helpers/_font-faces.scss +9 -11
  41. data/vendor/assets/stylesheets/helpers/_links.scss +239 -32
  42. data/vendor/assets/stylesheets/helpers/_media-queries.scss +1 -5
  43. data/vendor/assets/stylesheets/helpers/_spacing.scss +2 -1
  44. data/vendor/assets/stylesheets/helpers/_typography.scss +7 -6
  45. data/vendor/assets/stylesheets/objects/_all.scss +1 -0
  46. data/vendor/assets/stylesheets/objects/_button-group.scss +94 -0
  47. data/vendor/assets/stylesheets/objects/_form-group.scss +0 -1
  48. data/vendor/assets/stylesheets/objects/_grid.scss +2 -3
  49. data/vendor/assets/stylesheets/objects/_main-wrapper.scss +0 -1
  50. data/vendor/assets/stylesheets/overrides/_display.scss +1 -1
  51. data/vendor/assets/stylesheets/overrides/_width.scss +1 -0
  52. data/vendor/assets/stylesheets/settings/_all.scss +2 -0
  53. data/vendor/assets/stylesheets/settings/_colours-applied.scss +9 -3
  54. data/vendor/assets/stylesheets/settings/_colours-organisations.scss +3 -0
  55. data/vendor/assets/stylesheets/settings/_colours-palette.scss +42 -35
  56. data/vendor/assets/stylesheets/settings/_compatibility.scss +0 -1
  57. data/vendor/assets/stylesheets/settings/_links.scss +62 -0
  58. data/vendor/assets/stylesheets/settings/_measurements.scss +0 -4
  59. data/vendor/assets/stylesheets/settings/_typography-font-families.scss +2 -2
  60. data/vendor/assets/stylesheets/settings/_typography-font.scss +14 -5
  61. data/vendor/assets/stylesheets/settings/_typography-responsive.scss +6 -2
  62. data/vendor/assets/stylesheets/tools/_font-url.scss +0 -3
  63. data/vendor/assets/stylesheets/tools/_image-url.scss +0 -3
  64. data/vendor/assets/stylesheets/utilities/_visually-hidden.scss +0 -1
  65. data/vendor/assets/stylesheets/vendor/_sass-mq.scss +0 -4
  66. metadata +9 -3
@@ -77,7 +77,7 @@
77
77
  }
78
78
 
79
79
  // ( ) Radio ring
80
- .govuk-radios__label::before {
80
+ .govuk-radios__label:before {
81
81
  content: "";
82
82
  box-sizing: border-box;
83
83
  position: absolute;
@@ -96,7 +96,7 @@
96
96
  //
97
97
  // We create the 'button' entirely out of 'border' so that they remain
98
98
  // 'filled' even when colours are overridden in the browser.
99
- .govuk-radios__label::after {
99
+ .govuk-radios__label:after {
100
100
  content: "";
101
101
 
102
102
  position: absolute;
@@ -119,13 +119,13 @@
119
119
  }
120
120
 
121
121
  // Focused state
122
- .govuk-radios__input:focus + .govuk-radios__label::before {
122
+ .govuk-radios__input:focus + .govuk-radios__label:before {
123
123
  border-width: 4px;
124
124
  box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
125
125
  }
126
126
 
127
127
  // Selected state
128
- .govuk-radios__input:checked + .govuk-radios__label::after {
128
+ .govuk-radios__input:checked + .govuk-radios__label:after {
129
129
  opacity: 1;
130
130
  }
131
131
 
@@ -260,7 +260,7 @@
260
260
  //
261
261
  // Reduce the size of the control [1], vertically centering it within the
262
262
  // touch target [2]
263
- .govuk-radios__label::before {
263
+ .govuk-radios__label:before {
264
264
  top: $input-offset - $govuk-border-width-form-element; // 2
265
265
  width: $govuk-small-radios-size; // 1
266
266
  height: $govuk-small-radios-size; // 1
@@ -269,7 +269,7 @@
269
269
  // • Radio button
270
270
  //
271
271
  // Reduce the size of the 'button' and center it within the ring
272
- .govuk-radios__label::after {
272
+ .govuk-radios__label:after {
273
273
  top: 15px;
274
274
  left: 7px;
275
275
  border-width: 5px;
@@ -308,7 +308,7 @@
308
308
  // is so much larger than their visible size, and so we need to provide
309
309
  // feedback to the user as to which radio they will select when their
310
310
  // cursor is outside of the visible area.
311
- .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
311
+ .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
312
312
  box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
313
313
  }
314
314
 
@@ -317,10 +317,10 @@
317
317
  //
318
318
  // We use two box shadows, one that restores the original focus state [1]
319
319
  // and another that then applies the hover state [2].
320
- .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
321
- // sass-lint:disable indentation
322
- box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
323
- 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
320
+ .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
321
+ box-shadow:
322
+ 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
323
+ 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
324
324
  }
325
325
 
326
326
  // For devices that explicitly don't support hover, don't provide a hover
@@ -330,11 +330,11 @@
330
330
  // state in browsers that don't support `@media (hover)` (like Internet
331
331
  // Explorer) – so we have to 'undo' the hover state instead.
332
332
  @media (hover: none), (pointer: coarse) {
333
- .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
333
+ .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
334
334
  box-shadow: initial;
335
335
  }
336
336
 
337
- .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
337
+ .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
338
338
  box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
339
339
  }
340
340
  }
@@ -46,5 +46,4 @@
46
46
  border-color: $govuk-input-border-colour;
47
47
  }
48
48
  }
49
-
50
49
  }
@@ -2,6 +2,7 @@
2
2
  .govuk-skip-link {
3
3
  @include govuk-visually-hidden-focusable;
4
4
  @include govuk-typography-common;
5
+ @include govuk-link-decoration;
5
6
  @include govuk-link-style-text;
6
7
  @include govuk-typography-responsive($size: 16);
7
8
 
@@ -27,7 +28,6 @@
27
28
  // Undo unwanted changes when global styles are enabled
28
29
  @if ($govuk-global-styles) {
29
30
  box-shadow: none;
30
- text-decoration: underline;
31
31
  }
32
32
  }
33
33
  }
@@ -1,5 +1,4 @@
1
1
  @include govuk-exports("govuk/component/summary-list") {
2
-
3
2
  .govuk-summary-list {
4
3
  @include govuk-font($size: 19);
5
4
  @include govuk-text-colour;
@@ -29,15 +28,8 @@
29
28
 
30
29
  @include govuk-media-query($from: tablet) {
31
30
  display: table-cell;
32
- padding-right: govuk-spacing(4);
33
- }
34
- }
35
-
36
- .govuk-summary-list__key,
37
- .govuk-summary-list__value,
38
- .govuk-summary-list__actions {
39
- @include govuk-media-query($from: tablet) {
40
31
  padding-top: govuk-spacing(2);
32
+ padding-right: govuk-spacing(4);
41
33
  padding-bottom: govuk-spacing(2);
42
34
  border-bottom: 1px solid $govuk-border-colour;
43
35
  }
@@ -99,7 +91,7 @@
99
91
 
100
92
  .govuk-summary-list__actions-list-item {
101
93
  display: inline;
102
- margin-right: govuk-spacing(2);
94
+ margin-right: govuk-spacing(2);
103
95
  padding-right: govuk-spacing(2);
104
96
  }
105
97
 
@@ -47,4 +47,25 @@
47
47
  display: table-caption;
48
48
  text-align: left;
49
49
  }
50
+
51
+ // Modifiers that make captions look more like their equivalent headings
52
+
53
+ .govuk-table__caption--xl {
54
+ @include govuk-font($size: 48, $weight: bold);
55
+ margin-bottom: govuk-spacing(3);
56
+ }
57
+
58
+ .govuk-table__caption--l {
59
+ @include govuk-font($size: 36, $weight: bold);
60
+ margin-bottom: govuk-spacing(3);
61
+ }
62
+
63
+ .govuk-table__caption--m {
64
+ @include govuk-font($size: 24, $weight: bold);
65
+ margin-bottom: govuk-spacing(3);
66
+ }
67
+
68
+ .govuk-table__caption--s {
69
+ @include govuk-font($size: 19, $weight: bold);
70
+ }
50
71
  }
@@ -1,5 +1,4 @@
1
1
  @include govuk-exports("govuk/component/tabs") {
2
-
3
2
  .govuk-tabs {
4
3
  @include govuk-responsive-margin(1, "top");
5
4
  @include govuk-responsive-margin(6, "bottom");
@@ -22,7 +21,7 @@
22
21
  @include govuk-font($size: 19);
23
22
  margin-left: govuk-spacing(5);
24
23
 
25
- &::before {
24
+ &:before {
26
25
  @include govuk-text-colour;
27
26
  content: "\2014 "; // "— "
28
27
  margin-left: - govuk-spacing(5);
@@ -31,16 +30,11 @@
31
30
  }
32
31
 
33
32
  .govuk-tabs__tab {
33
+ @include govuk-link-common;
34
34
  @include govuk-link-style-default;
35
35
 
36
36
  display: inline-block;
37
37
  margin-bottom: govuk-spacing(2);
38
-
39
- // Focus state for mobile and when JavaScript is disabled
40
- // It is removed for JS-enabled desktop styles
41
- &:focus {
42
- @include govuk-focused-text;
43
- }
44
38
  }
45
39
 
46
40
  .govuk-tabs__panel {
@@ -51,7 +45,6 @@
51
45
  .js-enabled {
52
46
 
53
47
  @include govuk-media-query($from: tablet) {
54
-
55
48
  .govuk-tabs__list {
56
49
  @include govuk-clearfix;
57
50
  margin-bottom: 0;
@@ -74,7 +67,7 @@
74
67
  background-color: govuk-colour("light-grey", $legacy: "grey-4");
75
68
  text-align: center;
76
69
 
77
- &::before {
70
+ &:before {
78
71
  content: none;
79
72
  }
80
73
  }
@@ -108,7 +101,7 @@
108
101
 
109
102
  margin-bottom: 0;
110
103
 
111
- &::after {
104
+ &:after {
112
105
  content: "";
113
106
  position: absolute;
114
107
  top: 0;
@@ -133,6 +126,5 @@
133
126
  display: none;
134
127
  }
135
128
  }
136
-
137
129
  }
138
130
  }
@@ -83,5 +83,4 @@
83
83
  color: govuk-shade(govuk-colour("green"), 20);
84
84
  background: govuk-tint(govuk-colour("green"), 80);
85
85
  }
86
-
87
86
  }
@@ -43,6 +43,5 @@
43
43
  &:focus {
44
44
  border-color: $govuk-input-border-colour;
45
45
  }
46
-
47
46
  }
48
47
  }
@@ -1,5 +1,4 @@
1
1
  @include govuk-exports("govuk/component/warning-text") {
2
-
3
2
  .govuk-warning-text {
4
3
  position: relative;
5
4
  @include govuk-responsive-margin(6, "bottom");
@@ -47,6 +46,16 @@
47
46
  -moz-user-select: none;
48
47
  -ms-user-select: none;
49
48
  user-select: none;
49
+
50
+ // Improve rendering in Windows High Contrast Mode (Edge), where a
51
+ // readability backplate behind the exclamation mark obscures the circle
52
+ forced-color-adjust: none;
53
+
54
+ @media screen and (forced-colors: active) {
55
+ border-color: windowText;
56
+ color: windowText;
57
+ background: transparent;
58
+ }
50
59
  }
51
60
 
52
61
  .govuk-warning-text__text {
@@ -27,6 +27,14 @@
27
27
  @include govuk-link-style-text;
28
28
  }
29
29
 
30
+ .govuk-link--inverse {
31
+ @include govuk-link-style-inverse;
32
+ }
33
+
34
+ .govuk-link--no-underline {
35
+ @include govuk-link-style-no-underline;
36
+ }
37
+
30
38
  .govuk-link--no-visited-state {
31
39
  @include govuk-link-style-no-visited-state;
32
40
  }
@@ -28,10 +28,10 @@
28
28
  /// @access public
29
29
 
30
30
  @mixin govuk-device-pixel-ratio($ratio: 2) {
31
+ // stylelint-disable indentation
31
32
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
32
- only screen and ( min-device-pixel-ratio: $ratio),
33
- only screen and ( min-resolution: #{($ratio*96)}dpi),
34
- only screen and ( min-resolution: #{$ratio}dppx) {
33
+ only screen and (min-resolution: #{($ratio * 96)}dpi),
34
+ only screen and (min-resolution: #{$ratio}dppx) {
35
35
  @content;
36
36
  }
37
37
  }
@@ -2,9 +2,6 @@
2
2
  /// @group helpers
3
3
  ////
4
4
 
5
- // Disables linting for this file only
6
- // sass-lint:disable no-css-comments, no-duplicate-properties, property-sort-order, indentation
7
-
8
5
  @import "../tools/exports";
9
6
 
10
7
  /// Font Face - GDS Transport
@@ -18,23 +15,24 @@
18
15
  @include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
19
16
  @include govuk-exports("govuk/helpers/font-faces") {
20
17
  @at-root {
21
- /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
22
-
18
+ /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud */
23
19
  @font-face {
24
20
  font-family: "GDS Transport";
25
- src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
26
- govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
27
- font-weight: normal;
28
21
  font-style: normal;
22
+ font-weight: normal;
23
+ src:
24
+ govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
25
+ govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
29
26
  font-display: fallback;
30
27
  }
31
28
 
32
29
  @font-face {
33
30
  font-family: "GDS Transport";
34
- src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
35
- govuk-font-url("bold-affa96571d-v2.woff") format("woff");
36
- font-weight: bold;
37
31
  font-style: normal;
32
+ font-weight: bold;
33
+ src:
34
+ govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
35
+ govuk-font-url("bold-affa96571d-v2.woff") format("woff");
38
36
  font-display: fallback;
39
37
  }
40
38
  }