govuk_publishing_components 24.8.0 → 24.9.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js +7 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +35 -4
  4. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +1 -1
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +0 -2
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss +0 -8
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +0 -37
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss +1 -2
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +0 -4
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +1 -11
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss +0 -1
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss +0 -1
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss +0 -1
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +0 -1
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss +0 -4
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss +0 -1
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +1 -32
  18. data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss +0 -4
  19. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +16 -2
  20. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +0 -1
  21. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +15 -0
  22. data/app/views/govuk_publishing_components/component_guide/index.html.erb +2 -2
  23. data/app/views/govuk_publishing_components/component_guide/show.html.erb +1 -1
  24. data/app/views/govuk_publishing_components/components/_accordion.html.erb +25 -0
  25. data/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb +1 -1
  26. data/app/views/govuk_publishing_components/components/_image_card.html.erb +14 -11
  27. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +2 -2
  28. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +2 -2
  29. data/app/views/govuk_publishing_components/components/_print_link.html.erb +2 -2
  30. data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
  31. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +4 -4
  32. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +3 -3
  33. data/app/views/govuk_publishing_components/components/_success_alert.html.erb +24 -8
  34. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +9 -27
  36. data/app/views/govuk_publishing_components/components/docs/accordion.yml +73 -73
  37. data/app/views/govuk_publishing_components/components/docs/image_card.yml +12 -0
  38. data/app/views/govuk_publishing_components/components/docs/modal_dialogue.yml +3 -0
  39. data/app/views/govuk_publishing_components/components/docs/success_alert.yml +17 -1
  40. data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +1 -1
  41. data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb +2 -1
  42. data/config/locales/cy.yml +0 -5
  43. data/config/locales/en.yml +12 -6
  44. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +0 -4
  45. data/lib/govuk_publishing_components/presenters/shared_helper.rb +10 -0
  46. data/lib/govuk_publishing_components/version.rb +1 -1
  47. metadata +22 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: '0970bb03929bfc783d477b903ce46f8f8fa47ad800b74303f61c4f2e473a914e'
4
- data.tar.gz: e1bc0b5d89be175278b988b30b85269b7128fc9fa5fbb3286b582bf66c91b7f0
3
+ metadata.gz: 2bd078802da71df0c44ec962126f7ee3df520df0dd8a656d48ee356b993dcb02
4
+ data.tar.gz: 7a418d59b3d7ee4663cf711c01dfffe9af817f38c67d5c5e4a3d4c037a652eb9
5
5
  SHA512:
6
- metadata.gz: 7dfb6d556b81cc890eec0fa6884a7738d2c47b0b5bba80d0f8b35788682ba8cd0c4d9528370f7175c3b2361f47592fa405ebb43e8b5fa43954fc57bc23960dcc
7
- data.tar.gz: 3e58e5f9b229c8c85e734b74fd2ba98db39cd9f66ba80bab12cf8ac6acc8a482a059f200d9b721e530c190a6dff73915c9641377a77afaef5506eef8d4ca9aaf
6
+ metadata.gz: bed7da741ac9e3b4542179b46e5a63a1ca18b82c2a17bd24b29943c112f7f6a8bb6d0d1c93ee9adb2461c8e62cf182ff1527178d0b9a064eb1b061c6b0bb01be
7
+ data.tar.gz: 41ed5cf47472133919e3f995e989b9b137ee76465b2ec7e5626fd627f74b4113febb664ea76065faac782dcfd202721d0f7468be0ced18303d532d25e2636036
@@ -433,6 +433,13 @@
433
433
  ['Percent', 60],
434
434
  ['Percent', 80],
435
435
  ['Percent', 100]
436
+ ],
437
+ '/get-coronavirus-test': [
438
+ ['Percent', 20],
439
+ ['Percent', 40],
440
+ ['Percent', 60],
441
+ ['Percent', 80],
442
+ ['Percent', 100]
436
443
  ]
437
444
  }
438
445
 
@@ -31,7 +31,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
31
31
  this.upChevonIconClass = 'gem-c-accordion-nav__chevron'
32
32
  this.downChevonIconClass = 'gem-c-accordion-nav__chevron--down'
33
33
 
34
- // Indicate that js has worked
34
+ // Translated component content and language attribute pulled from data attributes
35
+ this.$module.actions = {}
36
+ this.$module.actions.locale = this.$module.getAttribute('data-locale')
37
+ this.$module.actions.showText = this.$module.getAttribute('data-show-text')
38
+ this.$module.actions.hideText = this.$module.getAttribute('data-hide-text')
39
+ this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
40
+ this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
41
+ this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
42
+
43
+ // Indicate that JavaScript has worked
35
44
  this.$module.classList.add('gem-c-accordion--active')
36
45
 
37
46
  this.initControls()
@@ -117,7 +126,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
117
126
  // Build additional copy for assistive technology
118
127
  var srAdditionalCopy = document.createElement('span')
119
128
  srAdditionalCopy.classList.add('govuk-visually-hidden')
120
- srAdditionalCopy.innerHTML = ' this section'
129
+ srAdditionalCopy.innerHTML = this.$module.actions.thisSectionVisuallyHidden
130
+
131
+ if (this.$module.actions.locale) {
132
+ srAdditionalCopy.lang = this.filterLocale('this_section_visually_hidden')
133
+ }
121
134
 
122
135
  // Build additional wrapper for toggle text, place icon after wrapped text.
123
136
  var wrapperShowHideIcon = document.createElement('span')
@@ -178,12 +191,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
178
191
  var icon = section.querySelector('.' + this.upChevonIconClass)
179
192
  var showHideText = section.querySelector('.' + this.sectionShowHideTextClass)
180
193
  var button = section.querySelector('.' + this.sectionButtonClass)
181
- var newButtonText = expanded ? 'Hide' : 'Show'
194
+ var newButtonText = expanded ? this.$module.actions.hideText : this.$module.actions.showText
182
195
 
183
196
  showHideText.innerHTML = newButtonText
184
197
  button.setAttribute('aria-expanded', expanded)
185
198
  button.classList.add(this.toggleLinkClass)
186
199
 
200
+ if (this.$module.actions.locale) {
201
+ showHideText.lang = this.filterLocale(expanded ? 'hide_text' : 'show_text')
202
+ }
203
+
187
204
  // Swap icon, change class
188
205
  if (expanded) {
189
206
  section.classList.add(this.sectionExpandedClass)
@@ -218,10 +235,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
218
235
  GemAccordion.prototype.updateOpenAllButton = function (expanded) {
219
236
  var icon = this.openAllButton.querySelector('.' + this.upChevonIconClass)
220
237
  var openAllCopy = this.openAllButton.querySelector('.' + this.openAllTextClass)
221
- var newButtonText = expanded ? 'Hide all sections' : 'Show all sections'
238
+ var newButtonText = expanded ? this.$module.actions.hideAllText : this.$module.actions.showAllText
239
+
222
240
  this.openAllButton.setAttribute('aria-expanded', expanded)
223
241
  openAllCopy.innerHTML = newButtonText
224
242
 
243
+ if (this.$module.actions.locale) {
244
+ openAllCopy.lang = this.filterLocale(expanded ? 'hide_all_text' : 'show_all_text')
245
+ }
246
+
225
247
  // Swap icon, toggle class
226
248
  if (expanded) {
227
249
  icon.classList.remove(this.downChevonIconClass)
@@ -329,5 +351,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
329
351
  return target
330
352
  }
331
353
 
354
+ GemAccordion.prototype.filterLocale = function (key) {
355
+ if (this.$module.actions.locale && this.$module.actions.locale.indexOf('{') !== -1) {
356
+ var locales = JSON.parse(this.$module.actions.locale)
357
+ return locales[key]
358
+ } else if (this.$module.actions.locale) {
359
+ return this.$module.actions.locale
360
+ }
361
+ }
362
+
332
363
  Modules.GemAccordion = GemAccordion
333
364
  })(window.GOVUK.Modules)
@@ -188,7 +188,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
188
188
  toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
189
189
  toggleStatus.setAttribute('role', 'alert')
190
190
 
191
- link.classList.add('mc-toggle-button')
191
+ link.classList.add('govuk-body-s', 'mc-toggle-button')
192
192
  link.appendChild(toggleText)
193
193
  link.appendChild(toggleStatus)
194
194
 
@@ -1,5 +1,3 @@
1
- $gem-hover-dark-background: #dddcdb;
2
-
3
1
  .gem-c-action-link {
4
2
  display: table;
5
3
 
@@ -1,13 +1,5 @@
1
1
  @import "govuk/components/button/button";
2
2
 
3
- $gem-secondary-button-colour: #00823b;
4
- $gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
5
- $gem-secondary-button-background-colour: govuk-colour("white");
6
- $gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
7
-
8
- $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
9
- $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
10
-
11
3
  // Because govuk-frontend adds a responsive bottom margin by default for each component
12
4
  // we reset it to zero so we can set it separately using `gem-c-button--bottom-margin`
13
5
  // If we decide to use responsive margins consistently across components we can remove this
@@ -1,12 +1,10 @@
1
1
  $transition-campaign-red: #ff003b;
2
- $transition-campaign-dark-blue: #1e1348;
3
2
 
4
3
  .gem-c-contextual-sidebar__brexit-related-links {
5
4
  border-top: 2px solid $govuk-brand-colour;
6
5
  }
7
6
 
8
7
  .gem-c-contextual-sidebar__brexit-heading {
9
- @extend %govuk-heading-s;
10
8
  margin-top: govuk-spacing(3);
11
9
  margin-bottom: govuk-spacing(2);
12
10
  }
@@ -24,45 +22,10 @@ $transition-campaign-dark-blue: #1e1348;
24
22
  }
25
23
 
26
24
  .gem-c-contextual-sidebar__brexit-text {
27
- @extend %govuk-link;
28
25
  @include govuk-font(16);
29
-
30
- margin-top: 0;
31
26
  margin-bottom: govuk-spacing(1);
32
- text-decoration: underline;
33
-
34
27
  @include govuk-media-query($from: tablet) {
35
28
  margin-bottom: govuk-spacing(2);
36
29
  }
37
30
  }
38
31
  }
39
-
40
- .gem-c-contextual-sidebar__brexit-cta:focus {
41
- .gem-c-contextual-sidebar__brexit-text {
42
- text-decoration: none;
43
- }
44
- }
45
-
46
- .gem-c-contextual-sidebar__take-action-traffic-lights {
47
- text-align: left;
48
- margin-bottom: govuk-spacing(2);
49
- }
50
-
51
- .gem-c-contextual-sidebar__take-action-traffic-lights > li {
52
- white-space: nowrap;
53
- display: inline;
54
- margin-right: 7px;
55
- margin-bottom: govuk-spacing(1);
56
- }
57
-
58
- .gem-c-contextual-sidebar__take-action-traffic-lists-icon {
59
- vertical-align: middle;
60
- margin-top: -2px;
61
- width: 22px;
62
- margin-right: 2px;
63
- }
64
-
65
- .gem-c-contextual-sidebar__take-action-traffic-lists-text {
66
- @include govuk-font($size: 19, $weight: bold, $line-height: 2);
67
- vertical-align: middle;
68
- }
@@ -50,11 +50,10 @@
50
50
  }
51
51
 
52
52
  .gem-c-highlight-boxes__title {
53
- @extend %govuk-link;
54
53
  @include govuk-font(19, $weight: bold);
55
54
  display: block;
56
55
  text-decoration: underline;
57
- margin-bottom: 5px;
56
+ margin-bottom: govuk-spacing(1);
58
57
  }
59
58
 
60
59
  .gem-c-highlight-boxes--inverse .gem-c-highlight-boxes__title {
@@ -59,12 +59,10 @@
59
59
  }
60
60
 
61
61
  .gem-c-image-card__title {
62
- @include govuk-font(19, $weight: bold);
63
62
  margin: 0;
64
63
  }
65
64
 
66
65
  .gem-c-image-card__title-link {
67
- @extend %govuk-link;
68
66
  text-decoration: none;
69
67
 
70
68
  &:hover {
@@ -136,7 +134,6 @@
136
134
  }
137
135
 
138
136
  .gem-c-image-card__list-item-link {
139
- @extend %govuk-link;
140
137
  line-height: 1.35em;
141
138
  }
142
139
 
@@ -193,7 +190,6 @@
193
190
  }
194
191
 
195
192
  .gem-c-image-card__title {
196
- @include govuk-font(24, $weight: bold);
197
193
  padding-bottom: govuk-spacing(2);
198
194
  }
199
195
 
@@ -33,7 +33,7 @@
33
33
  .gem-c-layout-header--search-left {
34
34
  .gem-c-header__menu-button.govuk-header__menu-button {
35
35
  margin-top: - govuk-spacing(7);
36
- left: 0;
36
+ left: govuk-spacing(3);
37
37
  }
38
38
 
39
39
  .gem-c-header__nav-wrapper {
@@ -78,16 +78,6 @@
78
78
  }
79
79
  }
80
80
 
81
- @include govuk-compatibility(govuk_template) {
82
- .gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
83
- .gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
84
- .gem-c-layout-header__search.govuk-grid-column-one-third,
85
- .gem-c-layout-header__logo.govuk-grid-column-two-thirds {
86
- padding-right: 0;
87
- padding-left: 0;
88
- }
89
- }
90
-
91
81
  .gem-c-layout-header__logo,
92
82
  .gem-c-layout-header__search {
93
83
  @include govuk-media-query($until: "tablet") {
@@ -18,7 +18,6 @@
18
18
  }
19
19
 
20
20
  .gem-c-pagination__link {
21
- @extend %govuk-link;
22
21
  display: block;
23
22
  text-decoration: none;
24
23
  padding-bottom: govuk-spacing(4);
@@ -41,7 +41,6 @@ $gem-c-print-link-background-height: 18px;
41
41
  }
42
42
 
43
43
  .gem-c-print-link__button {
44
- @extend %govuk-body-s;
45
44
  border: 1px solid $govuk-border-colour;
46
45
  color: $govuk-link-colour;
47
46
  cursor: pointer;
@@ -66,7 +66,6 @@
66
66
  }
67
67
 
68
68
  .gem-c-related-navigation__section-link {
69
- @extend %govuk-link;
70
69
  font-weight: bold;
71
70
 
72
71
  @include govuk-template-link-focus-override;
@@ -20,7 +20,6 @@ $share-button-height: 32px;
20
20
  }
21
21
 
22
22
  .gem-c-share-links__link {
23
- @extend %govuk-link;
24
23
  @include govuk-font(16, $weight: bold);
25
24
  margin-right: govuk-spacing(6);
26
25
  text-decoration: none;
@@ -46,7 +46,3 @@
46
46
  .gem-c-step-nav-related__link-item {
47
47
  margin-top: govuk-spacing(3);
48
48
  }
49
-
50
- .gem-c-step-nav-related__link {
51
- @extend %govuk-link;
52
- }
@@ -44,7 +44,6 @@
44
44
  }
45
45
 
46
46
  .gem-c-subscription-links__item {
47
- @extend %govuk-link;
48
47
  display: inline-block;
49
48
  text-decoration: none;
50
49
  background-repeat: no-repeat;
@@ -1,36 +1,5 @@
1
- .gem-c-success-alert {
2
- color: $govuk-text-colour;
3
- padding: govuk-spacing(3);
4
- border: $govuk-border-width-narrow solid $govuk-success-colour;
5
- @include govuk-responsive-margin(8, "bottom");
6
-
7
- @include govuk-media-query($from: tablet) {
8
- padding: govuk-spacing(4);
9
- border-width: $govuk-border-width;
10
- }
11
- }
1
+ @import "govuk/components/notification-banner/notification-banner";
12
2
 
13
3
  .gem-c-success-alert__message {
14
4
  @include govuk-font(19, $weight: bold);
15
- margin: 0;
16
- }
17
-
18
- .gem-c-success-summary__title {
19
- margin-top: 0;
20
- margin-bottom: govuk-spacing(3);
21
-
22
- @include govuk-media-query($from: tablet) {
23
- margin-bottom: govuk-spacing(4);
24
- }
25
-
26
- @include govuk-font(24, $weight: bold);
27
- }
28
-
29
- .gem-c-success-summary__body {
30
- @include govuk-font(19);
31
- margin: 0;
32
- }
33
-
34
- .gem-c-success-alert:focus {
35
- outline: $govuk-focus-width solid $govuk-focus-colour;
36
5
  }
@@ -30,10 +30,6 @@
30
30
  }
31
31
  }
32
32
 
33
- .gem-c-translation-nav__link {
34
- @extend %govuk-link;
35
- }
36
-
37
33
  .gem-c-translation-nav--inverse {
38
34
  border-color: govuk-colour("white");
39
35
 
@@ -1,7 +1,21 @@
1
- @import "govuk/components/button/button";
2
-
3
1
  // stylelint-disable scss/at-extend-no-missing-placeholder
4
2
  .gem-c-govspeak {
3
+ @import "govuk/components/button/button";
4
+
5
+ // Some links in Govspeak should look like buttons[1] when using:
6
+ // ```
7
+ // {button}[Random page](https://gov.uk/random){/button}
8
+ // ```.
9
+ //
10
+ // To make sure that the link styles don't override the button styles this
11
+ // needs more specificity.
12
+ //
13
+ // Govspeak targets link by using element selectors; so the selector
14
+ // `.gem-c-govspeak a:link` will override `.govuk-button`. Extending
15
+ // `govuk-button` here gives `gem-c-govspeak .gem-c-button` and prevents the
16
+ // link-that-looks-like-a-button from being overriden.
17
+
18
+ // [1]: https://github.com/alphagov/govspeak#button
5
19
  .gem-c-button {
6
20
  @extend .govuk-button;
7
21
  }
@@ -271,7 +271,6 @@
271
271
  }
272
272
 
273
273
  .mc-toggle-button {
274
- @extend %govuk-body-s;
275
274
  border: 1px solid $govuk-border-colour;
276
275
  color: $govuk-link-colour;
277
276
  cursor: pointer;
@@ -2,3 +2,18 @@
2
2
  // It provides govuk-frontend but adds no weight to the compiled CSS
3
3
  @import "components/helpers/govuk-frontend-settings";
4
4
  @import "govuk/base";
5
+
6
+ @import 'components/mixins/margins';
7
+ // TODO: remove this focus override when govuk_template is no longer used
8
+ @import 'components/mixins/govuk-template-link-focus-override';
9
+ @import 'components/mixins/css3';
10
+
11
+ $gem-secondary-button-colour: #00823b;
12
+ $gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
13
+ $gem-secondary-button-background-colour: govuk-colour("white");
14
+ $gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
15
+
16
+ $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
17
+ $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
18
+
19
+ $gem-hover-dark-background: #dddcdb;
@@ -79,7 +79,7 @@
79
79
 
80
80
  <% unless ENV["MAIN_COMPONENT_GUIDE"] %>
81
81
  <h2 class="component-doc-h2">Components in this application (<%= @component_docs.length %>)</h2>
82
- <ul class="component-list">
82
+ <ul class="component-list" id="list-components-in-this-application">
83
83
  <% @component_docs.each do |component_doc| %>
84
84
  <li>
85
85
  <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
@@ -93,7 +93,7 @@
93
93
  <h2 class="component-doc-h2">All gem components (<%= @gem_component_docs.length %>)</h2>
94
94
  <% end %>
95
95
 
96
- <ul class="component-list">
96
+ <ul class="component-list" id="list-all-components-in-the-gem">
97
97
  <% @gem_component_docs.each do |component_doc| %>
98
98
  <li>
99
99
  <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>