govuk_publishing_components 24.10.0 → 24.11.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (170) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/pii.js +1 -1
  3. data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +6 -248
  4. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +1 -1
  5. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +1 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/feedback.js +142 -104
  7. data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js +1 -1
  8. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +2 -2
  9. data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js +18 -0
  10. data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss +0 -11
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss +1 -0
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss +15 -18
  13. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss +27 -24
  14. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +1 -1
  15. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +1 -0
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss +1 -0
  17. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +1 -0
  18. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +1 -0
  19. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.scss +1 -0
  20. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.scss +1 -0
  21. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss +19 -16
  22. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.scss +1 -0
  23. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss +30 -27
  24. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss +1 -0
  25. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-callout.scss +1 -0
  26. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.scss +1 -0
  27. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_place.scss +26 -21
  28. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss +1 -0
  29. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss +19 -16
  30. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_summary.scss +21 -18
  31. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_tables.scss +1 -0
  32. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss +1 -0
  33. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +1 -0
  34. data/app/assets/stylesheets/govuk_publishing_components/components/print/_attachment.scss +2 -3
  35. data/app/assets/stylesheets/govuk_publishing_components/components/print/_back-link.scss +2 -3
  36. data/app/assets/stylesheets/govuk_publishing_components/components/print/_button.scss +0 -4
  37. data/app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss +2 -3
  38. data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-footer.scss +2 -6
  39. data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-header.scss +2 -3
  40. data/app/assets/stylesheets/govuk_publishing_components/components/print/_metadata.scss +2 -6
  41. data/app/assets/stylesheets/govuk_publishing_components/components/print/_search.scss +2 -3
  42. data/app/assets/stylesheets/govuk_publishing_components/components/print/_share-links.scss +2 -3
  43. data/app/assets/stylesheets/govuk_publishing_components/components/print/_skip-link.scss +2 -3
  44. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav-header.scss +0 -4
  45. data/app/assets/stylesheets/govuk_publishing_components/components/print/_subscription-links.scss +2 -3
  46. data/app/assets/stylesheets/govuk_publishing_components/components/print/_translation-nav.scss +2 -3
  47. data/app/views/govuk_publishing_components/components/_attachment.html.erb +1 -1
  48. data/app/views/govuk_publishing_components/components/_back_link.html.erb +1 -1
  49. data/app/views/govuk_publishing_components/components/_button.html.erb +1 -1
  50. data/app/views/govuk_publishing_components/components/_feedback.html.erb +1 -1
  51. data/app/views/govuk_publishing_components/components/_government_navigation.html.erb +7 -7
  52. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +5 -3
  53. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +1 -1
  54. data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb +1 -1
  55. data/app/views/govuk_publishing_components/components/_metadata.html.erb +9 -8
  56. data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +1 -5
  57. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +1 -1
  58. data/app/views/govuk_publishing_components/components/_print_link.html.erb +1 -1
  59. data/app/views/govuk_publishing_components/components/_radio.html.erb +6 -11
  60. data/app/views/govuk_publishing_components/components/_search.html.erb +1 -1
  61. data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
  62. data/app/views/govuk_publishing_components/components/_skip_link.html.erb +1 -1
  63. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +6 -6
  64. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +1 -1
  65. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +2 -2
  66. data/app/views/govuk_publishing_components/components/_success_alert.html.erb +1 -1
  67. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
  68. data/app/views/govuk_publishing_components/components/docs/feedback.yml +2 -0
  69. data/app/views/govuk_publishing_components/components/docs/phase_banner.yml +2 -2
  70. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +2 -2
  71. data/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb +4 -4
  72. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +2 -2
  73. data/config/locales/ar.yml +123 -0
  74. data/config/locales/az.yml +123 -0
  75. data/config/locales/be.yml +123 -0
  76. data/config/locales/bg.yml +123 -0
  77. data/config/locales/bn.yml +123 -0
  78. data/config/locales/cs.yml +123 -0
  79. data/config/locales/cy.yml +115 -6
  80. data/config/locales/da.yml +123 -0
  81. data/config/locales/de.yml +123 -0
  82. data/config/locales/dr.yml +123 -0
  83. data/config/locales/el.yml +123 -0
  84. data/config/locales/en.yml +111 -103
  85. data/config/locales/es-419.yml +123 -0
  86. data/config/locales/es.yml +123 -0
  87. data/config/locales/et.yml +120 -0
  88. data/config/locales/fa.yml +123 -0
  89. data/config/locales/fi.yml +123 -0
  90. data/config/locales/fr.yml +120 -0
  91. data/config/locales/gd.yml +123 -0
  92. data/config/locales/gu.yml +123 -0
  93. data/config/locales/he.yml +123 -0
  94. data/config/locales/hi.yml +123 -0
  95. data/config/locales/hr.yml +123 -0
  96. data/config/locales/hu.yml +123 -0
  97. data/config/locales/hy.yml +123 -0
  98. data/config/locales/id.yml +123 -0
  99. data/config/locales/is.yml +123 -0
  100. data/config/locales/it.yml +123 -0
  101. data/config/locales/ja.yml +123 -0
  102. data/config/locales/ka.yml +123 -0
  103. data/config/locales/kk.yml +123 -0
  104. data/config/locales/ko.yml +123 -0
  105. data/config/locales/lt.yml +123 -0
  106. data/config/locales/lv.yml +123 -0
  107. data/config/locales/ms.yml +123 -0
  108. data/config/locales/mt.yml +123 -0
  109. data/config/locales/nl.yml +123 -0
  110. data/config/locales/no.yml +124 -1
  111. data/config/locales/pa-pk.yml +123 -0
  112. data/config/locales/pa.yml +123 -0
  113. data/config/locales/pl.yml +123 -0
  114. data/config/locales/ps.yml +123 -0
  115. data/config/locales/pt.yml +123 -0
  116. data/config/locales/ro.yml +123 -0
  117. data/config/locales/ru.yml +123 -0
  118. data/config/locales/si.yml +123 -0
  119. data/config/locales/sk.yml +123 -0
  120. data/config/locales/sl.yml +123 -0
  121. data/config/locales/so.yml +123 -0
  122. data/config/locales/sq.yml +123 -0
  123. data/config/locales/sr.yml +123 -0
  124. data/config/locales/sv.yml +123 -0
  125. data/config/locales/sw.yml +123 -0
  126. data/config/locales/ta.yml +123 -0
  127. data/config/locales/th.yml +123 -0
  128. data/config/locales/tk.yml +123 -0
  129. data/config/locales/tr.yml +123 -0
  130. data/config/locales/uk.yml +123 -0
  131. data/config/locales/ur.yml +123 -0
  132. data/config/locales/uz.yml +123 -0
  133. data/config/locales/vi.yml +123 -0
  134. data/config/locales/zh-hk.yml +123 -0
  135. data/config/locales/zh-tw.yml +123 -0
  136. data/config/locales/zh.yml +123 -0
  137. data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb +5 -0
  138. data/lib/govuk_publishing_components/presenters/content_breadcrumbs_based_on_taxons.rb +1 -2
  139. data/lib/govuk_publishing_components/presenters/content_item.rb +4 -0
  140. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +4 -0
  141. data/lib/govuk_publishing_components/presenters/machine_readable/page.rb +4 -0
  142. data/lib/govuk_publishing_components/version.rb +1 -1
  143. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +7 -16
  144. data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss +4 -15
  145. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  146. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +3 -3
  147. data/node_modules/govuk-frontend/govuk/components/cookie-banner/README.md +15 -0
  148. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +40 -22
  149. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +6 -6
  150. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +15 -5
  151. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +2 -2
  152. data/node_modules/govuk-frontend/govuk/components/details/_index.scss +5 -1
  153. data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +13 -14
  154. data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json +1 -1
  155. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +14 -19
  156. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +39 -21
  157. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  158. data/node_modules/govuk-frontend/govuk/components/phase-banner/_index.scss +1 -1
  159. data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +3 -3
  160. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  161. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +1 -1
  162. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +1 -6
  163. data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json +1 -1
  164. data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss +10 -0
  165. data/node_modules/govuk-frontend/govuk/core/_links.scss +8 -0
  166. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +153 -38
  167. data/node_modules/govuk-frontend/govuk/settings/_all.scss +2 -0
  168. data/node_modules/govuk-frontend/govuk/settings/_links.scss +62 -0
  169. data/node_modules/govuk-frontend/package.json +1 -1
  170. metadata +20 -3
@@ -8,17 +8,21 @@
8
8
  .govuk-file-upload {
9
9
  @include govuk-font($size: 19);
10
10
  @include govuk-text-colour;
11
- padding-top: $component-padding;
12
- padding-bottom: $component-padding;
11
+ margin-left: -$component-padding;
12
+ padding: $component-padding;
13
+
14
+ // The default file upload button in Safari does not
15
+ // support setting a custom font-size. Set `-webkit-appearance`
16
+ // to `button` to drop out of the native appearance so the
17
+ // font-size is set to 19px
18
+ // https://bugs.webkit.org/show_bug.cgi?id=224746
19
+ &::-webkit-file-upload-button {
20
+ -webkit-appearance: button;
21
+ color: inherit;
22
+ font: inherit;
23
+ }
13
24
 
14
25
  &:focus {
15
- // "Yank" the padding with negative margin to avoid a jump
16
- // when element is focused
17
- margin-right: -$component-padding;
18
- margin-left: -$component-padding;
19
- padding-right: $component-padding;
20
- padding-left: $component-padding;
21
-
22
26
  outline: $govuk-focus-width solid $govuk-focus-colour;
23
27
  // Use `box-shadow` to add border instead of changing `border-width`
24
28
  // (which changes element size) and since `outline` is already used for the
@@ -37,11 +41,6 @@
37
41
  // to recognise `focus-within` and don't set any styles from the block
38
42
  // when it's a selector.
39
43
  &:focus-within {
40
- margin-right: -$component-padding;
41
- margin-left: -$component-padding;
42
- padding-right: $component-padding;
43
- padding-left: $component-padding;
44
-
45
44
  outline: $govuk-focus-width solid $govuk-focus-colour;
46
45
 
47
46
  box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
@@ -54,7 +54,7 @@
54
54
  "name": "classes",
55
55
  "type": "string",
56
56
  "required": false,
57
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
57
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
58
58
  }
59
59
  ]
60
60
  },
@@ -6,17 +6,13 @@
6
6
  // as it'll just be the same as $govuk-footer-border.
7
7
  $govuk-footer-border-top: $govuk-border-colour;
8
8
  $govuk-footer-text: $govuk-text-colour;
9
- $govuk-footer-link: $govuk-footer-text;
10
- $govuk-footer-link-hover: false;
9
+ $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
11
10
 
12
11
  @if ($govuk-use-legacy-palette) {
13
12
  $govuk-footer-border-top: #a1acb2;
14
13
  $govuk-footer-border: govuk-colour("grey-2");
15
14
  $govuk-footer-text: #454a4c;
16
- $govuk-footer-link: $govuk-footer-text;
17
-
18
- // Only used with the legacy palette
19
- $govuk-footer-link-hover: #171819;
15
+ $govuk-footer-link-hover-colour: #171819;
20
16
  }
21
17
 
22
18
  // Based on the govuk-crest-2x.png image dimensions.
@@ -37,27 +33,20 @@
37
33
  }
38
34
 
39
35
  .govuk-footer__link {
36
+ @include govuk-link-common;
37
+
40
38
  @if ($govuk-use-legacy-palette) {
41
39
  &:link,
42
40
  &:visited {
43
- color: $govuk-footer-link;
41
+ color: $govuk-footer-text;
44
42
  }
45
43
 
46
44
  &:hover,
47
45
  &:active {
48
- color: $govuk-footer-link-hover;
46
+ color: $govuk-footer-link-hover-colour;
49
47
  }
50
48
  } @else {
51
- &:link,
52
- &:visited,
53
- &:hover,
54
- &:active {
55
- color: $govuk-footer-link;
56
- }
57
- }
58
-
59
- &:focus {
60
- @include govuk-focused-text;
49
+ @include govuk-link-style-text;
61
50
  }
62
51
 
63
52
  // alphagov/govuk_template includes a specific a:link:focus selector
@@ -134,7 +123,6 @@
134
123
  background-position: 50% 0%;
135
124
  background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
136
125
  text-align: center;
137
- text-decoration: none;
138
126
  white-space: nowrap;
139
127
  }
140
128
 
@@ -210,6 +198,13 @@
210
198
  list-style: none;
211
199
  -webkit-column-gap: $govuk-gutter;
212
200
  column-gap: $govuk-gutter; // Support: Columns
201
+
202
+ // Disable thicker underlines on hover because of a bug in Chromium
203
+ // affecting links within columns
204
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
205
+ .govuk-footer__link:hover {
206
+ text-decoration-thickness: auto;
207
+ }
213
208
  }
214
209
 
215
210
  @include govuk-media-query ($from: desktop) {
@@ -4,10 +4,9 @@
4
4
  $govuk-header-border-color: $govuk-brand-colour;
5
5
  $govuk-header-border-width: govuk-spacing(2);
6
6
  $govuk-header-text: govuk-colour("white");
7
- $govuk-header-link: govuk-colour("white");
8
- $govuk-header-link-hover: govuk-colour("white");
9
7
  $govuk-header-link-active: #1d8feb;
10
8
  $govuk-header-nav-item-border-color: #2e3133;
9
+ $govuk-header-link-underline-thickness: 3px;
11
10
 
12
11
  .govuk-header {
13
12
  @include govuk-font($size: 16);
@@ -36,7 +35,19 @@
36
35
 
37
36
  .govuk-header__logotype {
38
37
  display: inline-block;
38
+
39
+ // Add a gap between logo and any product name
39
40
  margin-right: govuk-spacing(1);
41
+
42
+ // Prevent readability backplate from obscuring underline in Windows
43
+ // High Contrast Mode
44
+ forced-color-adjust: none;
45
+
46
+ // But remove it if there's nothing after the logo to keep hover and focus
47
+ // states neat
48
+ &:last-child {
49
+ margin-right: 0;
50
+ }
40
51
  }
41
52
 
42
53
  .govuk-header__logotype-crown {
@@ -57,33 +68,33 @@
57
68
  .govuk-header__product-name {
58
69
  @include govuk-font($size: 24, $line-height: 1);
59
70
  display: inline-table;
60
- padding-right: govuk-spacing(2);
61
71
  }
62
72
 
63
73
  .govuk-header__link {
64
- text-decoration: none;
74
+ // Avoid using the `govuk-link-common` mixin because the links in the header
75
+ // get a special treatment, because:
76
+ //
77
+ // - underlines are only visible on hover
78
+ // - all links get a 3px underline regardless of text size, as there are
79
+ // multiple grouped elements close to one another and having slightly
80
+ // different underline widths looks unbalanced
81
+ @include govuk-typography-common;
82
+ @include govuk-link-style-inverse;
65
83
 
66
- &:link,
67
- &:visited {
68
- color: $govuk-header-link;
69
- }
84
+ text-decoration: none;
70
85
 
71
86
  &:hover {
72
87
  text-decoration: underline;
88
+ text-decoration-thickness: $govuk-header-link-underline-thickness;
89
+
90
+ @if ($govuk-link-underline-offset) {
91
+ text-underline-offset: $govuk-link-underline-offset;
92
+ }
73
93
  }
74
94
 
75
95
  &:focus {
76
96
  @include govuk-focused-text;
77
97
  }
78
-
79
- // alphagov/govuk_template includes a specific a:link:focus selector
80
- // designed to make unvisited links a slightly darker blue when focussed, so
81
- // we need to override the text colour for that combination of selectors.
82
- @include govuk-compatibility(govuk_template) {
83
- &:link:focus {
84
- @include govuk-text-colour;
85
- }
86
- }
87
98
  }
88
99
 
89
100
  .govuk-header__link--homepage {
@@ -92,6 +103,7 @@
92
103
  @include govuk-font($size: false, $weight: bold);
93
104
 
94
105
  display: inline-block;
106
+ margin-right: govuk-spacing(2);
95
107
  font-size: 30px; // We don't have a mixin that produces 30px font size
96
108
  line-height: 1;
97
109
 
@@ -103,10 +115,10 @@
103
115
  &:hover,
104
116
  &:active {
105
117
  // Negate the added border
106
- margin-bottom: -1px;
118
+ margin-bottom: $govuk-header-link-underline-thickness * -1;
107
119
  // Omitting colour will use default value of currentColor – if we
108
120
  // specified currentColor explicitly IE8 would ignore this rule.
109
- border-bottom: 1px solid;
121
+ border-bottom: $govuk-header-link-underline-thickness solid;
110
122
  }
111
123
 
112
124
  // Remove any borders that show when focused and hovered.
@@ -156,11 +168,17 @@
156
168
  margin: 0;
157
169
  padding: 0;
158
170
  border: 0;
159
- color: $govuk-header-link;
171
+ color: govuk-colour("white");
160
172
  background: none;
173
+ cursor: pointer;
161
174
 
162
175
  &:hover {
163
- text-decoration: underline;
176
+ -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
177
+ text-decoration: solid underline $govuk-header-link-underline-thickness;
178
+
179
+ @if ($govuk-link-underline-offset) {
180
+ text-underline-offset: $govuk-link-underline-offset;
181
+ }
164
182
  }
165
183
 
166
184
  &:focus {
@@ -130,7 +130,7 @@
130
130
  "name": "classes",
131
131
  "type": "string",
132
132
  "required": false,
133
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
133
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
134
134
  }
135
135
  ]
136
136
  },
@@ -22,6 +22,6 @@
22
22
 
23
23
  .govuk-phase-banner__text {
24
24
  display: table-cell;
25
- vertical-align: baseline;
25
+ vertical-align: middle;
26
26
  }
27
27
  }
@@ -3,14 +3,14 @@
3
3
  "name": "fieldset",
4
4
  "type": "object",
5
5
  "required": false,
6
- "description": "Options for the fieldset component (e.g. legend).",
6
+ "description": "Options for the fieldset component (for example legend).",
7
7
  "isComponent": true
8
8
  },
9
9
  {
10
10
  "name": "hint",
11
11
  "type": "object",
12
12
  "required": false,
13
- "description": "Options for the hint component (e.g. text).",
13
+ "description": "Options for the hint component (for example text).",
14
14
  "isComponent": true
15
15
  },
16
16
  {
@@ -30,7 +30,7 @@
30
30
  "name": "classes",
31
31
  "type": "string",
32
32
  "required": false,
33
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
33
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
34
34
  }
35
35
  ]
36
36
  },
@@ -86,7 +86,7 @@
86
86
  "name": "classes",
87
87
  "type": "string",
88
88
  "required": false,
89
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
89
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
90
90
  }
91
91
  ]
92
92
  },
@@ -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
  }
@@ -30,16 +30,11 @@
30
30
  }
31
31
 
32
32
  .govuk-tabs__tab {
33
+ @include govuk-link-common;
33
34
  @include govuk-link-style-default;
34
35
 
35
36
  display: inline-block;
36
37
  margin-bottom: govuk-spacing(2);
37
-
38
- // Focus state for mobile and when JavaScript is disabled
39
- // It is removed for JS-enabled desktop styles
40
- &:focus {
41
- @include govuk-focused-text;
42
- }
43
38
  }
44
39
 
45
40
  .govuk-tabs__panel {
@@ -66,7 +66,7 @@
66
66
  "name": "classes",
67
67
  "type": "string",
68
68
  "required": false,
69
- "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
69
+ "description": "Classes to add to the form group (for example to show error state for the whole group)"
70
70
  }
71
71
  ]
72
72
  },
@@ -46,6 +46,16 @@
46
46
  -moz-user-select: none;
47
47
  -ms-user-select: none;
48
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
+ }
49
59
  }
50
60
 
51
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
  }
@@ -2,7 +2,7 @@
2
2
  /// @group helpers/links
3
3
  ////
4
4
 
5
- /// Common link mixin
5
+ /// Common link styles
6
6
  ///
7
7
  /// Provides the typography and focus state, regardless of link style.
8
8
  ///
@@ -10,18 +10,57 @@
10
10
 
11
11
  @mixin govuk-link-common {
12
12
  @include govuk-typography-common;
13
+ @include govuk-link-decoration;
14
+
15
+ &:hover {
16
+ @include govuk-link-hover-decoration;
17
+ }
13
18
 
14
19
  &:focus {
15
20
  @include govuk-focused-text;
16
21
  }
17
22
  }
18
23
 
19
- /// Default link style mixin
24
+ /// Link decoration
25
+ ///
26
+ /// Provides the text decoration for links, including thickness and underline
27
+ /// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.
28
+ ///
29
+ /// @access public
30
+ @mixin govuk-link-decoration {
31
+ text-decoration: underline;
32
+
33
+ @if ($govuk-new-link-styles) {
34
+ @if ($govuk-link-underline-thickness) {
35
+ text-decoration-thickness: $govuk-link-underline-thickness;
36
+ }
37
+
38
+ @if ($govuk-link-underline-offset) {
39
+ text-underline-offset: $govuk-link-underline-offset;
40
+ }
41
+ }
42
+ }
43
+
44
+ /// Link hover decoration
45
+ ///
46
+ /// Provides the text decoration for links in their hover state, for you to use
47
+ /// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the
48
+ /// `govuk-link-common` mixin.
49
+ ///
50
+ /// @access public
51
+
52
+ @mixin govuk-link-hover-decoration {
53
+ @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
54
+ text-decoration-thickness: $govuk-link-hover-underline-thickness;
55
+ }
56
+ }
57
+
58
+ /// Default link styles
20
59
  ///
21
- /// Provides the default unvisited, visited, hover and active states for links.
60
+ /// Makes links use the default unvisited, visited, hover and active colours.
22
61
  ///
23
- /// If you use this mixin in a component you must also include the
24
- /// govuk-link-common mixin in order to get the focus state.
62
+ /// If you use this mixin in a component, you must also include the
63
+ /// `govuk-link-common` mixin to get the correct focus and hover states.
25
64
  ///
26
65
  /// @example scss
27
66
  /// .govuk-component__link {
@@ -66,12 +105,13 @@
66
105
  }
67
106
  }
68
107
 
69
- /// Error link style mixin
108
+ /// Error link styles
70
109
  ///
71
- /// Provides the error unvisited, visited, hover and active states for links.
110
+ /// Makes links use the error colour. The link will darken if it's active or a
111
+ /// user hovers their cursor over it.
72
112
  ///
73
- /// If you use this mixin in a component you must also include the
74
- /// govuk-link-common mixin in order to get the focus state.
113
+ /// If you use this mixin in a component, you must also include the
114
+ /// `govuk-link-common` mixin to get the correct focus and hover states.
75
115
  ///
76
116
  /// @example scss
77
117
  /// .govuk-component__link {
@@ -113,12 +153,13 @@
113
153
  }
114
154
  }
115
155
 
116
- /// Success link style mixin
156
+ /// Success link styles
117
157
  ///
118
- /// Provides the success unvisited, visited, hover and active states for links.
158
+ /// Makes links use the success colour. The link will darken if it's active or a
159
+ /// user hovers their cursor over it.
119
160
  ///
120
- /// If you use this mixin in a component you must also include the
121
- /// govuk-link-common mixin in order to get the focus state.
161
+ /// If you use this mixin in a component, you must also include the
162
+ /// `govuk-link-common` mixin to get the correct focus and hover states.
122
163
  ///
123
164
  /// @example scss
124
165
  /// .govuk-component__link {
@@ -160,13 +201,13 @@
160
201
  }
161
202
  }
162
203
 
163
- /// Muted style link mixin
204
+ /// Muted link styles
164
205
  ///
165
- /// Used for secondary links on a page - the link will appear in muted colours
166
- /// regardless of visited state.
206
+ /// Makes links use the secondary text colour. The link will darken if it's
207
+ /// active or a user hovers their cursor over it.
167
208
  ///
168
- /// If you use this mixin in a component you must also include the
169
- /// govuk-link-common mixin in order to get the focus state.
209
+ /// If you use this mixin in a component, you must also include the
210
+ /// `govuk-link-common` mixin to get the correct focus and hover states.
170
211
  ///
171
212
  /// @example scss
172
213
  /// .govuk-component__link {
@@ -178,10 +219,13 @@
178
219
 
179
220
  @mixin govuk-link-style-muted {
180
221
  &:link,
181
- &:visited,
222
+ &:visited {
223
+ color: $govuk-secondary-text-colour;
224
+ }
225
+
182
226
  &:hover,
183
227
  &:active {
184
- color: $govuk-secondary-text-colour;
228
+ color: $govuk-text-colour;
185
229
  }
186
230
 
187
231
  // When focussed, the text colour needs to be darker to ensure that colour
@@ -200,13 +244,13 @@
200
244
  }
201
245
  }
202
246
 
203
- /// Text style link mixin
247
+ /// Text link styles
204
248
  ///
205
- /// Overrides the colour of links to match the text colour. Generally used by
249
+ /// Makes links use the primary text colour, in all states. Use this mixin for
206
250
  /// navigation components, such as breadcrumbs or the back link.
207
251
  ///
208
- /// If you use this mixin in a component you must also include the
209
- /// govuk-link-common mixin in order to get the focus state.
252
+ /// If you use this mixin in a component, you must also include the
253
+ /// `govuk-link-common` mixin to get the correct focus and hover states.
210
254
  ///
211
255
  /// @example scss
212
256
  /// .govuk-component__link {
@@ -217,10 +261,17 @@
217
261
  /// @access public
218
262
 
219
263
  @mixin govuk-link-style-text {
220
- // Override link colour to use text colour
221
264
  &:link,
222
- &:visited,
223
- &:hover,
265
+ &:visited {
266
+ @include govuk-text-colour;
267
+ }
268
+
269
+ // Force a colour change on hover to work around a bug in Safari
270
+ // https://bugs.webkit.org/show_bug.cgi?id=224483
271
+ &:hover {
272
+ color: rgba($govuk-text-colour, .99);
273
+ }
274
+
224
275
  &:active,
225
276
  &:focus {
226
277
  @include govuk-text-colour;
@@ -236,17 +287,60 @@
236
287
  }
237
288
  }
238
289
 
239
- /// No visited state link mixin
290
+ /// Inverse link styles
291
+ ///
292
+ /// Makes links white, in all states. Use this mixin if you're displaying links
293
+ /// against a dark background.
294
+ ///
295
+ /// If you use this mixin in a component, you must also include the
296
+ /// `govuk-link-common` mixin to get the correct focus and hover states.
297
+ ///
298
+ /// @example scss
299
+ /// .govuk-component__link {
300
+ /// @include govuk-link-common;
301
+ /// @include govuk-link-style-inverse;
302
+ /// }
303
+ ///
304
+ /// @access public
305
+
306
+ @mixin govuk-link-style-inverse {
307
+ &:link,
308
+ &:visited {
309
+ color: govuk-colour("white");
310
+ }
311
+
312
+ // Force a colour change on hover to work around a bug in Safari
313
+ // https://bugs.webkit.org/show_bug.cgi?id=224483
314
+ &:hover,
315
+ &:active {
316
+ color: rgba(govuk-colour("white"), .99);
317
+ }
318
+
319
+ &:focus {
320
+ color: $govuk-focus-text-colour;
321
+ }
322
+
323
+ // alphagov/govuk_template includes a specific a:link:focus selector designed
324
+ // to make unvisited links a slightly darker blue when focussed, so we need to
325
+ // override the text colour for that combination of selectors.
326
+ @include govuk-compatibility(govuk_template) {
327
+ &:link:focus {
328
+ color: $govuk-focus-text-colour;
329
+ }
330
+ }
331
+ }
332
+
333
+ /// Default link styles, without a visited state
240
334
  ///
241
- /// Used in cases where it is not helpful to distinguish between visited and
242
- /// non-visited links.
335
+ /// Makes links use the default unvisited, hover and active colours, with no
336
+ /// distinct visited state.
243
337
  ///
244
- /// For example, navigation links to pages with dynamic content like admin
245
- /// dashboards. The content on the page is changing all the time, so the fact
246
- /// that you’ve visited it before is not important.
338
+ /// Use this mixin when it's not helpful to distinguish between visited and
339
+ /// non-visited links. For example, when you link to pages with
340
+ /// frequently-changing content, such as the dashboard for an admin interface.
247
341
  ///
248
- /// If you use this mixin in a component you must also include the
249
- /// govuk-link-common mixin in order to get the focus state.
342
+ /// If you use this mixin in a component, you must also include the
343
+ /// `govuk-link-common` mixin to get the correct focus and hover states.
250
344
  ///
251
345
  /// @example scss
252
346
  /// .govuk-component__link {
@@ -280,10 +374,31 @@
280
374
  }
281
375
  }
282
376
 
283
- /// Print friendly link mixin
377
+ /// Remove underline from links
378
+ ///
379
+ /// Remove underlines from links unless the link is active or a user hovers
380
+ /// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
381
+ /// because IE8 does not support `:not`.
382
+ ///
383
+ /// @example scss
384
+ /// .govuk-component__link {
385
+ /// @include govuk-link-common;
386
+ /// @include govuk-link-style-default;
387
+ /// @include govuk-link-style-no-underline;
388
+ /// }
389
+ ///
390
+ /// @access public
391
+
392
+ @mixin govuk-link-style-no-underline {
393
+ &:not(:hover):not(:active) {
394
+ text-decoration: none;
395
+ }
396
+ }
397
+
398
+ /// Include link destination when printing the page
284
399
  ///
285
- /// When printing, append the the destination URL to the link text, as long
286
- /// as the URL starts with either `/`, `http://` or `https://`.
400
+ /// If the user prints the page, add the destination URL after the link text, if
401
+ /// the URL starts with `/`, `http://` or `https://`.
287
402
  ///
288
403
  /// @access public
289
404