govuk_publishing_components 24.9.1 → 24.9.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +35 -4
  3. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +1 -1
  4. data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss +0 -2
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss +0 -8
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +2 -2
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss +1 -2
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +1 -11
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss +0 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss +0 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss +0 -1
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +0 -1
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss +0 -4
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss +0 -1
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss +0 -4
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss +16 -2
  17. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +0 -1
  18. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +15 -0
  19. data/app/views/govuk_publishing_components/component_guide/index.html.erb +2 -2
  20. data/app/views/govuk_publishing_components/component_guide/show.html.erb +1 -1
  21. data/app/views/govuk_publishing_components/components/_accordion.html.erb +25 -0
  22. data/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb +1 -1
  23. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +2 -2
  24. data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb +2 -2
  25. data/app/views/govuk_publishing_components/components/_print_link.html.erb +2 -2
  26. data/app/views/govuk_publishing_components/components/_share_links.html.erb +1 -1
  27. data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb +4 -4
  28. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +3 -3
  29. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +1 -1
  30. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +1 -1
  31. data/app/views/govuk_publishing_components/components/docs/accordion.yml +73 -73
  32. data/config/locales/en.yml +9 -0
  33. data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb +1 -0
  34. data/lib/govuk_publishing_components/version.rb +1 -1
  35. metadata +22 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ed769524a5b5079bce70c275a1cb341e287f5575bdb669b389b045f3aa79e50c
4
- data.tar.gz: bf256f385c94da52726c3685d92f42239f08347d9f6506930f5773839ea81b8e
3
+ metadata.gz: 9ad726f2e544e7165c409104245f6b1e8e0c9bf97c4e10984db45411cc007892
4
+ data.tar.gz: 7aca349410d2615a5ba3810bdd90c4a355477dc017c7e72f9b626c35630139ba
5
5
  SHA512:
6
- metadata.gz: b95c734d8d88b6193ce60fb522787b947b6cefd2d5d35dfa13eb681786155689714b1838f7d67aa6a3fcdf222388a72216a1ec9db78bdf854429356673225026
7
- data.tar.gz: f94cb6822b42112e4bc47516a27ffdc302163da8b27c01f9be865f06bdaad146e6d346609bd570f6197993af8e9044aec51deb59042e1a33aa2b1ef0732169c2
6
+ metadata.gz: 850ab9d67ae304803e0060aa16c969cc621df866eca8ea15eff8617e68d0149e618d0cc946da6da4b5bce7549033b8d60f0fb93d0fd316fe60e0f0ce75df606d
7
+ data.tar.gz: 9cdda0e734f05dd8c89e3bebd17800401492977650cfa2016eb51abec02362f1faf3d0668b33b2ead3067386b1c8c278a5fda1a269fb40685c0d23f659dc5343
@@ -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
@@ -6,7 +6,6 @@ $transition-campaign-dark-blue: #1e1348;
6
6
  }
7
7
 
8
8
  .gem-c-contextual-sidebar__brexit-heading {
9
- @extend %govuk-heading-s;
10
9
  margin-top: govuk-spacing(3);
11
10
  margin-bottom: govuk-spacing(2);
12
11
  }
@@ -24,7 +23,6 @@ $transition-campaign-dark-blue: #1e1348;
24
23
  }
25
24
 
26
25
  .gem-c-contextual-sidebar__brexit-text {
27
- @extend %govuk-link;
28
26
  @include govuk-font(16);
29
27
 
30
28
  margin-top: 0;
@@ -38,6 +36,8 @@ $transition-campaign-dark-blue: #1e1348;
38
36
  }
39
37
 
40
38
  .gem-c-contextual-sidebar__brexit-cta:focus {
39
+ box-shadow: 0 $govuk-focus-width $govuk-focus-text-colour;
40
+
41
41
  .gem-c-contextual-sidebar__brexit-text {
42
42
  text-decoration: none;
43
43
  }
@@ -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 {
@@ -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;
@@ -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" %>
@@ -24,7 +24,7 @@
24
24
  </div>
25
25
  </div>
26
26
  <% end %>
27
- <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
27
+ <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.</p>
28
28
  </div>
29
29
  </div>
30
30
 
@@ -11,9 +11,34 @@
11
11
  accordion_classes << 'gem-c-accordion--condensed' if condensed
12
12
  accordion_classes << (shared_helper.get_margin_bottom)
13
13
 
14
+ translations = {
15
+ show_text: "components.accordion.show",
16
+ hide_text: "components.accordion.hide",
17
+ show_all_text: "components.accordion.show_all",
18
+ hide_all_text: "components.accordion.hide_all",
19
+ this_section_visually_hidden: "components.accordion.this_section_visually_hidden",
20
+ }
21
+
22
+ locales = {}
23
+
14
24
  data_attributes ||= {}
15
25
  data_attributes[:module] = 'gem-accordion'
16
26
  data_attributes[:anchor_navigation] = anchor_navigation
27
+
28
+ translations.each do |key, translation|
29
+ locales[key] = shared_helper.t_locale(translation)
30
+ data_attributes[key] = t(translation)
31
+ end
32
+
33
+ unique_locales = locales.values.uniq
34
+
35
+ if unique_locales.length > 1
36
+ data_attributes[:locale] = locales
37
+ else
38
+ if unique_locales[0] != I18n.locale
39
+ data_attributes[:locale] = unique_locales[0]
40
+ end
41
+ end
17
42
  %>
18
43
  <% if items.any? %>
19
44
  <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>
@@ -17,7 +17,7 @@
17
17
  <%= link_to(
18
18
  content_item[:link].fetch(:text),
19
19
  content_item[:link].fetch(:path),
20
- class: "gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
20
+ class: "govuk-link gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
21
21
  data: content_item[:link][:data_attributes]
22
22
  )
23
23
  %>
@@ -18,12 +18,12 @@
18
18
  <header class="<%= header_classes.join(' ') %>" role="banner" data-module="govuk-header">
19
19
  <div class="govuk-header__container <%= width_class %>">
20
20
  <% if search_left %>
21
- <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
21
+ <div class="govuk-grid-row">
22
22
  <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
23
23
  <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
24
24
  </div>
25
25
  </div>
26
- <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
26
+ <div class="govuk-grid-row">
27
27
  <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
28
28
  <%= render "govuk_publishing_components/components/layout_header/search" %>
29
29
  </div>
@@ -8,7 +8,7 @@
8
8
  <% if local_assigns.include?(:previous_page) %>
9
9
  <li class="gem-c-pagination__item gem-c-pagination__item--previous">
10
10
  <a href="<%= previous_page[:url] %>"
11
- class="gem-c-pagination__link"
11
+ class="govuk-link gem-c-pagination__link"
12
12
  rel="prev"
13
13
  data-track-category="contentsClicked"
14
14
  data-track-action="previous"
@@ -34,7 +34,7 @@
34
34
  <% if local_assigns.include?(:next_page) %>
35
35
  <li class="gem-c-pagination__item gem-c-pagination__item--next">
36
36
  <a href="<%= next_page[:url] %>"
37
- class="gem-c-pagination__link"
37
+ class="govuk-link gem-c-pagination__link"
38
38
  rel="next"
39
39
  data-track-category="contentsClicked"
40
40
  data-track-action="next"
@@ -18,8 +18,8 @@
18
18
  wrapper_classes << (shared_helper.get_margin_top)
19
19
  wrapper_classes << (shared_helper.get_margin_bottom)
20
20
 
21
- classes = %w(govuk-link)
22
- classes << "gem-c-print-link__button" if href.nil?
21
+ classes = %w[govuk-link]
22
+ classes << "govuk-body-s gem-c-print-link__button" if href.nil?
23
23
  classes << "gem-c-print-link__link govuk-link--no-visited-state" if href.present?
24
24
  %>
25
25
 
@@ -52,7 +52,7 @@
52
52
  'track-action': link[:icon],
53
53
  'track-options': track_options
54
54
  },
55
- class: "gem-c-share-links__link #{brand_helper.color_class}" do %>
55
+ class: "govuk-link gem-c-share-links__link #{brand_helper.color_class}" do %>
56
56
  <span class="gem-c-share-links__link-icon">
57
57
  <% if link[:icon] == 'facebook' %>
58
58
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">
@@ -4,14 +4,14 @@
4
4
  always_display_as_list ||= false
5
5
  %>
6
6
  <% if links.any? %>
7
- <div
8
- class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
7
+ <div
8
+ class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
9
9
  data-module="gem-track-click">
10
10
  <h2 class="gem-c-step-nav-related__heading">
11
11
  <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
12
12
  <% if links.length == 1 && !always_display_as_list %>
13
13
  <a href="<%= links[0][:href] %>"
14
- class="gem-c-step-nav-related__link"
14
+ class="govuk-link"
15
15
  data-track-category="stepNavPartOfClicked"
16
16
  data-track-action="<%= pretitle %>"
17
17
  data-track-label="<%= links[0][:href] %>"
@@ -27,7 +27,7 @@
27
27
  <% links.each do |link| %>
28
28
  <li class="gem-c-step-nav-related__link-item">
29
29
  <a href="<%= link[:href] %>"
30
- class="gem-c-step-nav-related__link"
30
+ class="govuk-link"
31
31
  data-track-category="stepNavPartOfClicked"
32
32
  data-track-action="<%= pretitle %>"
33
33
  data-track-label="<%= link[:href] %>"
@@ -36,7 +36,7 @@
36
36
  <%= sl_helper.email_signup_link_text %>
37
37
  <% end %>
38
38
  <%= link_to email_link_text, sl_helper.email_signup_link, {
39
- class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
39
+ class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
40
40
  data: sl_helper.email_signup_link_data_attributes,
41
41
  lang: email_signup_link_text_locale
42
42
  } %>
@@ -50,13 +50,13 @@
50
50
  <%= sl_helper.feed_link_text %>
51
51
  <% end %>
52
52
  <%= tag.button feed_link_text, {
53
- class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
53
+ class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
54
54
  data: sl_helper.feed_link_data_attributes,
55
55
  lang: feed_link_text_locale
56
56
  } if sl_helper.feed_link_box_value %>
57
57
  <%= link_to feed_link_text, sl_helper.feed_link,
58
58
  {
59
- class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
59
+ class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
60
60
  data: sl_helper.feed_link_data_attributes,
61
61
  lang: feed_link_text_locale
62
62
  } unless sl_helper.feed_link_box_value %>
@@ -19,7 +19,7 @@
19
19
  hreflang: translation[:locale],
20
20
  lang: translation[:locale],
21
21
  rel: "alternate",
22
- class: "gem-c-translation-nav__link #{brand_helper.color_class}",
22
+ class: "govuk-link gem-c-translation-nav__link #{brand_helper.color_class}",
23
23
  data: translation[:data_attributes]
24
24
  %>
25
25
  <% end %>
@@ -16,7 +16,7 @@
16
16
  data: data_attributes,
17
17
  aria: { label: "#{t("components.related_navigation.take_action_list.aria_label")} #{link_text}" },
18
18
  lang: shared_helper.t_locale("components.related_navigation.transition.title") do %>
19
- <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
19
+ <h2 class="gem-c-contextual-sidebar__brexit-heading govuk-heading-s"><%= t("components.related_navigation.transition.title") %></h2>
20
20
  <ul class="govuk-list gem-c-contextual-sidebar__take-action-traffic-lights">
21
21
  <li>
22
22
  <%= image_tag 'govuk_publishing_components/take-action-red.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
@@ -40,21 +40,21 @@ examples:
40
40
  data:
41
41
  items:
42
42
  - heading:
43
- text: "Writing well for the web"
43
+ text: Writing well for the web
44
44
  content:
45
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
45
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
46
46
  - heading:
47
- text: "Writing well for specialists"
47
+ text: Writing well for specialists
48
48
  content:
49
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
49
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
50
50
  - heading:
51
- text: "Know your audience"
51
+ text: Know your audience
52
52
  content:
53
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
53
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
54
54
  - heading:
55
- text: "How people read"
55
+ text: How people read
56
56
  content:
57
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
57
+ html: <p class="govuk-body">This is the content for How people read.</p>
58
58
  with_supplied_identification:
59
59
  description: |
60
60
  An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
@@ -66,29 +66,29 @@ examples:
66
66
  id: with-supplied-id-thats-unique-across-the-domain
67
67
  items:
68
68
  - heading:
69
- text: "Writing well for the web"
69
+ text: Writing well for the web
70
70
  content:
71
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
71
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
72
72
  - heading:
73
- text: "Writing well for specialists"
73
+ text: Writing well for specialists
74
74
  content:
75
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
75
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
76
76
  - heading:
77
- text: "Know your audience"
77
+ text: Know your audience
78
78
  content:
79
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
79
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
80
80
  - heading:
81
- text: "How people read"
81
+ text: How people read
82
82
  content:
83
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
83
+ html: <p class="govuk-body">This is the content for How people read.</p>
84
84
  with_summary:
85
85
  description: Adds a subheading below each section heading.
86
86
  data:
87
87
  items:
88
88
  - heading:
89
- text: "Understanding agile project management"
89
+ text: Understanding agile project management
90
90
  summary:
91
- text: "Introductions, methods, core features."
91
+ text: Introductions, methods, core features.
92
92
  content:
93
93
  html:
94
94
  '<ul class="govuk-list">
@@ -103,9 +103,9 @@ examples:
103
103
  </li>
104
104
  </ul>'
105
105
  - heading:
106
- text: "Working with agile methods"
106
+ text: Working with agile methods
107
107
  summary:
108
- text: "Workspaces, tools and techniques, user stories, planning."
108
+ text: Workspaces, tools and techniques, user stories, planning.
109
109
  content:
110
110
  html:
111
111
  '<ul class="govuk-list">
@@ -132,9 +132,9 @@ examples:
132
132
  </li>
133
133
  </ul>'
134
134
  - heading:
135
- text: "Governing agile services"
135
+ text: Governing agile services
136
136
  summary:
137
- text: "Principles, measuring progress, spending money."
137
+ text: Principles, measuring progress, spending money.
138
138
  content:
139
139
  html:
140
140
  '<ul class="govuk-list">
@@ -158,9 +158,9 @@ examples:
158
158
  </li>
159
159
  </ul>'
160
160
  - heading:
161
- text: "Phases of an agile project"
161
+ text: Phases of an agile project
162
162
  summary:
163
- text: "Discovery, alpha, beta, live and retirement."
163
+ text: Discovery, alpha, beta, live and retirement.
164
164
  content:
165
165
  html:
166
166
  '<ul class="govuk-list">
@@ -190,54 +190,54 @@ examples:
190
190
 
191
191
  data:
192
192
  data_attributes:
193
- gtm: 'gtm-accordion'
194
- ga: 'ga-accordion'
193
+ gtm: gtm-accordion
194
+ ga: ga-accordion
195
195
  items:
196
196
  - heading:
197
- text: "Writing well for the web"
197
+ text: Writing well for the web
198
198
  content:
199
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
199
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
200
200
  data_attributes:
201
- gtm: 'gtm-accordion-item-1'
201
+ gtm: gtm-accordion-item-1
202
202
  - heading:
203
- text: "Writing well for specialists"
203
+ text: Writing well for specialists
204
204
  content:
205
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
205
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
206
206
  data_attributes:
207
- gtm: 'gtm-accordion-item-2'
207
+ gtm: gtm-accordion-item-2
208
208
  - heading:
209
- text: "Know your audience"
209
+ text: Know your audience
210
210
  content:
211
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
211
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
212
212
  data_attributes:
213
- gtm: 'gtm-accordion-item-3'
213
+ gtm: gtm-accordion-item-3
214
214
  - heading:
215
- text: "How people read"
215
+ text: How people read
216
216
  content:
217
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
217
+ html: <p class="govuk-body">This is the content for How people read.</p>
218
218
  data_attributes:
219
- gtm: 'gtm-accordion-item-4'
219
+ gtm: gtm-accordion-item-4
220
220
  different_heading_level:
221
221
  description: This will alter the level of the heading, not the appearance of the heading.
222
222
  data:
223
223
  heading_level: 3
224
224
  items:
225
225
  - heading:
226
- text: "Writing well for the web"
226
+ text: Writing well for the web
227
227
  content:
228
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
228
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
229
229
  - heading:
230
- text: "Writing well for specialists"
230
+ text: Writing well for specialists
231
231
  content:
232
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
232
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
233
233
  - heading:
234
- text: "Know your audience"
234
+ text: Know your audience
235
235
  content:
236
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
236
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
237
237
  - heading:
238
- text: "How people read"
238
+ text: How people read
239
239
  content:
240
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
240
+ html: <p class="govuk-body">This is the content for How people read.</p>
241
241
  with_margin_bottom:
242
242
  description: |
243
243
  The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 30px.
@@ -245,35 +245,35 @@ examples:
245
245
  margin_bottom: 0
246
246
  items:
247
247
  - heading:
248
- text: "Writing well for the web"
248
+ text: Writing well for the web
249
249
  content:
250
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
250
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
251
251
  - heading:
252
- text: "Writing well for specialists"
252
+ text: Writing well for specialists
253
253
  content:
254
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
254
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
255
255
  with_section_open:
256
256
  description: |
257
257
  Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
258
258
  data:
259
259
  items:
260
260
  - heading:
261
- text: "Writing well for the web"
261
+ text: Writing well for the web
262
262
  content:
263
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
263
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
264
264
  expanded: true
265
265
  - heading:
266
- text: "Writing well for specialists"
266
+ text: Writing well for specialists
267
267
  content:
268
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
268
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
269
269
  - heading:
270
- text: "Know your audience"
270
+ text: Know your audience
271
271
  content:
272
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
272
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
273
273
  - heading:
274
- text: "How people read"
274
+ text: How people read
275
275
  content:
276
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
276
+ html: <p class="govuk-body">This is the content for How people read.</p>
277
277
  with_the_anchor_link_navigation:
278
278
  description: |
279
279
  Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
@@ -287,22 +287,22 @@ examples:
287
287
  anchor_navigation: true
288
288
  items:
289
289
  - heading:
290
- text: "Writing well for the web"
291
- id: "writing-well-for-the-web"
290
+ text: Writing well for the web
291
+ id: writing-well-for-the-web
292
292
  content:
293
- html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
293
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
294
294
  - heading:
295
- text: "Writing well for specialists"
295
+ text: Writing well for specialists
296
296
  content:
297
- html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
297
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
298
298
  - heading:
299
- text: "Know your audience"
299
+ text: Know your audience
300
300
  content:
301
- html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
301
+ html: <p class="govuk-body">This is the content for Know your audience.</p>
302
302
  - heading:
303
- text: "How people read"
303
+ text: How people read
304
304
  content:
305
- html: "<p class='govuk-body'>This is the content for How people read.</p>"
305
+ html: <p class="govuk-body">This is the content for How people read.</p>
306
306
  condensed_layout:
307
307
  description: |
308
308
  This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
@@ -310,7 +310,7 @@ examples:
310
310
  condensed: true
311
311
  items:
312
312
  - heading:
313
- text: "Understanding agile project management"
313
+ text: Understanding agile project management
314
314
  content:
315
315
  html:
316
316
  '<ul class="govuk-list">
@@ -325,9 +325,9 @@ examples:
325
325
  </li>
326
326
  </ul>'
327
327
  - heading:
328
- text: "Working with agile methods"
328
+ text: Working with agile methods
329
329
  summary:
330
- text: "Workspaces, tools and techniques, user stories, planning."
330
+ text: Workspaces, tools and techniques, user stories, planning.
331
331
  content:
332
332
  html:
333
333
  '<ul class="govuk-list">
@@ -354,7 +354,7 @@ examples:
354
354
  </li>
355
355
  </ul>'
356
356
  - heading:
357
- text: "Governing agile services"
357
+ text: Governing agile services
358
358
  content:
359
359
  html:
360
360
  '<ul class="govuk-list">
@@ -378,7 +378,7 @@ examples:
378
378
  </li>
379
379
  </ul>'
380
380
  - heading:
381
- text: "Phases of an agile project"
381
+ text: Phases of an agile project
382
382
  content:
383
383
  html:
384
384
  '<ul class="govuk-list">
@@ -397,4 +397,4 @@ examples:
397
397
  <li>
398
398
  <a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
399
399
  </li>
400
- </ul>'
400
+ </ul>'
@@ -23,6 +23,12 @@ en:
23
23
  common:
24
24
  translations: "Translations"
25
25
  components:
26
+ accordion:
27
+ show: "Show"
28
+ hide: "Hide"
29
+ show_all: "Show all sections"
30
+ hide_all: "Hide all sections"
31
+ this_section_visually_hidden: " this section"
26
32
  attachment:
27
33
  opendocument_html: "This file is in an <a href='https://www.gov.uk/guidance/using-open-document-formats-odf-in-your-organisation' target=%{target} class='govuk-link'>OpenDocument</a> format"
28
34
  request_format_text: "This file may not be suitable for users of assistive technology."
@@ -58,6 +64,9 @@ en:
58
64
  search_button: "Search GOV.UK"
59
65
  show_button: "Show search"
60
66
  hide_button: "Hide search"
67
+ top_level: "Top level"
68
+ nav_items_aria_label: "Show or hide Top Level Navigation"
69
+ menu: "Menu"
61
70
  organisation_schema:
62
71
  all_content_search_description: "Find all content from %{organisation}"
63
72
  radio:
@@ -67,6 +67,7 @@ module GovukPublishingComponents
67
67
 
68
68
  def section_css_class(css_class, section_title, link: {}, link_is_inline: false)
69
69
  css_classes = [css_class]
70
+ css_classes << "govuk-link"
70
71
  css_classes << "#{css_class}--#{@context}" unless @context.nil?
71
72
  css_classes << "#{css_class}--inline" if link_is_inline
72
73
 
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "24.9.1".freeze
2
+ VERSION = "24.9.2".freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 24.9.1
4
+ version: 24.9.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-04-09 00:00:00.000000000 Z
11
+ date: 2021-04-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -192,6 +192,26 @@ dependencies:
192
192
  - - "~>"
193
193
  - !ruby/object:Gem::Version
194
194
  version: 3.0.0
195
+ - !ruby/object:Gem::Dependency
196
+ name: percy-capybara
197
+ requirement: !ruby/object:Gem::Requirement
198
+ requirements:
199
+ - - "~>"
200
+ - !ruby/object:Gem::Version
201
+ version: '4.0'
202
+ - - ">="
203
+ - !ruby/object:Gem::Version
204
+ version: 4.0.2
205
+ type: :development
206
+ prerelease: false
207
+ version_requirements: !ruby/object:Gem::Requirement
208
+ requirements:
209
+ - - "~>"
210
+ - !ruby/object:Gem::Version
211
+ version: '4.0'
212
+ - - ">="
213
+ - !ruby/object:Gem::Version
214
+ version: 4.0.2
195
215
  - !ruby/object:Gem::Dependency
196
216
  name: pry-byebug
197
217
  requirement: !ruby/object:Gem::Requirement