govuk_publishing_components 32.0.0 → 33.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (206) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/component_guide/accessibility-test.js +0 -1
  3. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +175 -0
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js +1 -1
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js +5 -13
  6. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +80 -309
  7. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +2 -2
  8. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js +140 -0
  9. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js +3 -0
  10. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js +1 -0
  11. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +12 -1
  12. data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js +13 -4
  13. data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js +24 -8
  14. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +83 -86
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss +2 -5
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +1 -5
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +3 -5
  18. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +10 -30
  19. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +0 -7
  20. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +0 -6
  21. data/app/views/govuk_publishing_components/components/_accordion.html.erb +14 -1
  22. data/app/views/govuk_publishing_components/components/_error_summary.html.erb +27 -26
  23. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +2 -2
  24. data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +1 -1
  25. data/app/views/govuk_publishing_components/components/_share_links.html.erb +18 -15
  26. data/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb +1 -1
  27. data/app/views/govuk_publishing_components/components/docs/accordion.yml +15 -3
  28. data/app/views/govuk_publishing_components/components/docs/button.yml +10 -0
  29. data/app/views/govuk_publishing_components/components/docs/share_links.yml +59 -30
  30. data/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml +10 -1
  31. data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +3 -3
  32. data/config/locales/ar.yml +4 -1
  33. data/config/locales/az.yml +4 -1
  34. data/config/locales/be.yml +4 -1
  35. data/config/locales/bg.yml +4 -1
  36. data/config/locales/bn.yml +4 -1
  37. data/config/locales/cs.yml +4 -1
  38. data/config/locales/cy.yml +4 -1
  39. data/config/locales/da.yml +4 -1
  40. data/config/locales/de.yml +4 -1
  41. data/config/locales/dr.yml +4 -1
  42. data/config/locales/el.yml +4 -1
  43. data/config/locales/en.yml +20 -17
  44. data/config/locales/es-419.yml +4 -1
  45. data/config/locales/es.yml +4 -1
  46. data/config/locales/et.yml +4 -1
  47. data/config/locales/fa.yml +4 -1
  48. data/config/locales/fi.yml +4 -1
  49. data/config/locales/fr.yml +4 -1
  50. data/config/locales/gd.yml +4 -1
  51. data/config/locales/gu.yml +4 -1
  52. data/config/locales/he.yml +4 -1
  53. data/config/locales/hi.yml +4 -1
  54. data/config/locales/hr.yml +4 -1
  55. data/config/locales/hu.yml +4 -1
  56. data/config/locales/hy.yml +4 -1
  57. data/config/locales/id.yml +4 -1
  58. data/config/locales/is.yml +4 -1
  59. data/config/locales/it.yml +4 -1
  60. data/config/locales/ja.yml +4 -1
  61. data/config/locales/ka.yml +4 -1
  62. data/config/locales/kk.yml +4 -1
  63. data/config/locales/ko.yml +4 -1
  64. data/config/locales/lt.yml +4 -1
  65. data/config/locales/lv.yml +4 -1
  66. data/config/locales/ms.yml +4 -1
  67. data/config/locales/mt.yml +4 -1
  68. data/config/locales/nl.yml +4 -1
  69. data/config/locales/no.yml +4 -1
  70. data/config/locales/pa-pk.yml +4 -1
  71. data/config/locales/pa.yml +4 -1
  72. data/config/locales/pl.yml +4 -1
  73. data/config/locales/ps.yml +4 -1
  74. data/config/locales/pt.yml +4 -1
  75. data/config/locales/ro.yml +4 -1
  76. data/config/locales/ru.yml +4 -1
  77. data/config/locales/si.yml +4 -1
  78. data/config/locales/sk.yml +4 -1
  79. data/config/locales/sl.yml +4 -1
  80. data/config/locales/so.yml +4 -1
  81. data/config/locales/sq.yml +4 -1
  82. data/config/locales/sr.yml +4 -1
  83. data/config/locales/sv.yml +4 -1
  84. data/config/locales/sw.yml +4 -1
  85. data/config/locales/ta.yml +4 -1
  86. data/config/locales/th.yml +4 -1
  87. data/config/locales/tk.yml +4 -1
  88. data/config/locales/tr.yml +4 -1
  89. data/config/locales/uk.yml +4 -1
  90. data/config/locales/ur.yml +4 -1
  91. data/config/locales/uz.yml +4 -1
  92. data/config/locales/vi.yml +4 -1
  93. data/config/locales/zh-hk.yml +4 -1
  94. data/config/locales/zh-tw.yml +4 -1
  95. data/config/locales/zh.yml +4 -1
  96. data/lib/govuk_publishing_components/presenters/button_helper.rb +7 -1
  97. data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb +25 -1
  98. data/lib/govuk_publishing_components/version.rb +1 -1
  99. data/node_modules/axe-core/axe.js +4567 -4678
  100. data/node_modules/axe-core/axe.min.js +2 -2
  101. data/node_modules/axe-core/package.json +2 -2
  102. data/node_modules/axe-core/sri-history.json +8 -0
  103. data/node_modules/govuk-frontend/README.md +1 -2
  104. data/node_modules/govuk-frontend/govuk/all.js +1398 -273
  105. data/node_modules/govuk-frontend/govuk/common/closest-attribute-value.js +70 -0
  106. data/node_modules/govuk-frontend/govuk/common/index.js +172 -0
  107. data/node_modules/govuk-frontend/govuk/common/normalise-dataset.js +373 -0
  108. data/node_modules/govuk-frontend/govuk/common.js +138 -3
  109. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +753 -25
  110. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +54 -22
  111. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +36 -0
  112. data/node_modules/govuk-frontend/govuk/components/accordion/template.njk +7 -1
  113. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -12
  114. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +22 -22
  115. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +23 -5
  116. data/node_modules/govuk-frontend/govuk/components/button/button.js +365 -107
  117. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +85 -66
  118. data/node_modules/govuk-frontend/govuk/components/button/template.njk +1 -1
  119. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +9 -0
  120. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1033 -121
  121. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +112 -36
  122. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +42 -0
  123. data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +27 -3
  124. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +30 -2
  125. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +96 -93
  126. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +46 -46
  127. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +50 -50
  128. data/node_modules/govuk-frontend/govuk/components/details/details.js +43 -13
  129. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +20 -20
  130. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +20 -20
  131. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +268 -6
  132. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +44 -35
  133. data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +25 -21
  134. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +51 -39
  135. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +26 -26
  136. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +1 -1
  137. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +46 -46
  138. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +2 -2
  139. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +93 -38
  140. data/node_modules/govuk-frontend/govuk/components/header/header.js +6 -0
  141. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +8 -2
  142. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -2
  143. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +12 -12
  144. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +80 -80
  145. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +12 -12
  146. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +34 -34
  147. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +56 -46
  148. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +252 -2
  149. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +1 -1
  150. data/node_modules/govuk-frontend/govuk/components/pagination/_index.scss +10 -7
  151. data/node_modules/govuk-frontend/govuk/components/pagination/fixtures.json +33 -26
  152. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +18 -18
  153. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +14 -14
  154. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +94 -91
  155. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +30 -2
  156. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +32 -32
  157. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +22 -20
  158. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +10 -4
  159. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +50 -50
  160. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +1 -1
  161. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +40 -40
  162. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +29 -29
  163. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +28 -0
  164. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -28
  165. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +34 -34
  166. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +14 -14
  167. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +1 -1
  168. data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +2 -2
  169. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +6 -6
  170. data/node_modules/govuk-frontend/govuk/i18n.js +390 -0
  171. data/node_modules/govuk-frontend/govuk/macros/i18n.njk +15 -0
  172. data/node_modules/govuk-frontend/govuk/settings/_all.scss +1 -0
  173. data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +12 -0
  174. data/node_modules/govuk-frontend/govuk/settings/_compatibility.scss +26 -0
  175. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +23 -0
  176. data/node_modules/govuk-frontend/govuk/settings/_typography-responsive.scss +12 -0
  177. data/node_modules/govuk-frontend/govuk/settings/_warnings.scss +53 -0
  178. data/node_modules/govuk-frontend/govuk/tools/_compatibility.scss +20 -6
  179. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Date/now.js +21 -0
  180. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/dataset.js +300 -0
  181. data/node_modules/govuk-frontend/govuk/vendor/polyfills/String/prototype/trim.js +21 -0
  182. data/node_modules/govuk-frontend/govuk-esm/all.mjs +50 -27
  183. data/node_modules/govuk-frontend/govuk-esm/common/closest-attribute-value.mjs +15 -0
  184. data/node_modules/govuk-frontend/govuk-esm/common/index.mjs +159 -0
  185. data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs +58 -0
  186. data/node_modules/govuk-frontend/govuk-esm/common.mjs +6 -28
  187. data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs +113 -43
  188. data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs +67 -30
  189. data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs +325 -123
  190. data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs +9 -3
  191. data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs +22 -8
  192. data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs +48 -6
  193. data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs +6 -0
  194. data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs +32 -2
  195. data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs +9 -3
  196. data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs +10 -4
  197. data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs +8 -2
  198. data/node_modules/govuk-frontend/govuk-esm/i18n.mjs +380 -0
  199. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Date/now.mjs +13 -0
  200. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/dataset.mjs +68 -0
  201. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/String/prototype/trim.mjs +13 -0
  202. data/node_modules/govuk-frontend/govuk-prototype-kit/init.js +7 -0
  203. data/node_modules/govuk-frontend/govuk-prototype-kit/init.scss +12 -0
  204. data/node_modules/govuk-frontend/govuk-prototype-kit.config.json +138 -7
  205. data/node_modules/govuk-frontend/package.json +1 -1
  206. metadata +22 -3
@@ -97,13 +97,6 @@ $large-input-size: 50px;
97
97
  }
98
98
  }
99
99
 
100
- @include govuk-compatibility(govuk_template) {
101
- // ultra specific rule overrides focus styling from govuk_template
102
- #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
103
- @extend %gem-c-search-input-focus;
104
- }
105
- }
106
-
107
100
  @mixin icon-positioning($container-size) {
108
101
  $icon-dimension: 20px;
109
102
  $icon-position: ($container-size - $icon-dimension) / 2;
@@ -26,12 +26,6 @@ $share-button-height: 30px;
26
26
  @include govuk-template-link-focus-override;
27
27
  }
28
28
 
29
- .gem-c-share-links__title {
30
- @include govuk-text-colour;
31
- @include govuk-font($size: 16, $line-height: 1.5);
32
- margin: 0 0 govuk-spacing(2) 0;
33
- }
34
-
35
29
  .gem-c-share-links__link-icon {
36
30
  position: absolute;
37
31
  top: 0;
@@ -23,10 +23,12 @@
23
23
 
24
24
  data_attributes ||= {}
25
25
  ((data_attributes[:module] ||= "") << " " << "govuk-accordion gem-accordion").strip!
26
+ ga4_tracking ||= false
27
+ data_attributes[:module] << " ga4-event-tracker" if ga4_tracking
28
+ data_attributes[:ga4_expandable] = '' if ga4_tracking
26
29
  data_attributes[:anchor_navigation] = anchor_navigation
27
30
  data_attributes[:track_show_all_clicks] = track_show_all_clicks
28
31
  data_attributes[:track_sections] = track_sections
29
-
30
32
  data_attributes_show_all ||= nil
31
33
  data_attributes[:show_all_attributes] = data_attributes_show_all if data_attributes_show_all
32
34
 
@@ -57,6 +59,17 @@
57
59
 
58
60
  item[:data_attributes] ||= nil
59
61
 
62
+ if ga4_tracking
63
+ item[:data_attributes] ||= {}
64
+ item[:data_attributes][:ga4_event] = {
65
+ event_name: "select_content",
66
+ type: "accordion",
67
+ text: item[:heading][:text],
68
+ index: index,
69
+ index_total: items.length
70
+ }.to_json
71
+ end
72
+
60
73
  section_classes = %w(govuk-accordion__section)
61
74
  section_classes << 'govuk-accordion__section--expanded' if item[:expanded]
62
75
 
@@ -4,7 +4,6 @@
4
4
  description ||= false
5
5
  data_attributes ||= {}
6
6
  items ||= []
7
- title_id ||= "error-summary-title-#{SecureRandom.hex(4)}"
8
7
  if items.empty? && !title
9
8
  raise ArgumentError, "The error_summary component needs at least one item or a title in order to render."
10
9
  end
@@ -12,33 +11,35 @@
12
11
  <%= tag.div(
13
12
  class: "gem-c-error-summary govuk-error-summary",
14
13
  data: { module: "govuk-error-summary" }.merge(data_attributes),
15
- aria: { labelledby: title_id },
16
- role: "alert",
17
14
  id: id,
18
15
  ) do %>
19
- <% if title %>
20
- <h2 class="govuk-error-summary__title" id="<%= title_id %>">
21
- <%= title %>
22
- </h2>
23
- <% end %>
24
- <div class="govuk-error-summary__body">
25
- <% if description %>
26
- <p><%= description %></p>
16
+ <%= tag.div(
17
+ role: "alert",
18
+ ) do %>
19
+ <% if title %>
20
+ <h2 class="govuk-error-summary__title">
21
+ <%= title %>
22
+ </h2>
27
23
  <% end %>
28
- <% if items.present? %>
29
- <ul class="govuk-list govuk-error-summary__list">
30
- <% items.each_with_index do |item, index| %>
31
- <li class="gem-c-error-summary__list-item">
32
- <% if item[:href] %>
33
- <%= link_to item[:text], item[:href], target: item[:target], data: item[:data_attributes] %>
34
- <% else %>
35
- <%= tag.span data: item[:data_attributes] do %>
36
- <%= item[:text] %>
24
+ <div class="govuk-error-summary__body">
25
+ <% if description %>
26
+ <p><%= description %></p>
27
+ <% end %>
28
+ <% if items.present? %>
29
+ <ul class="govuk-list govuk-error-summary__list">
30
+ <% items.each_with_index do |item, index| %>
31
+ <li class="gem-c-error-summary__list-item">
32
+ <% if item[:href] %>
33
+ <%= link_to item[:text], item[:href], target: item[:target], data: item[:data_attributes] %>
34
+ <% else %>
35
+ <%= tag.span data: item[:data_attributes] do %>
36
+ <%= item[:text] %>
37
+ <% end %>
37
38
  <% end %>
38
- <% end %>
39
- </li>
40
- <% end %>
41
- </ul>
42
- <% end %>
43
- </div>
39
+ </li>
40
+ <% end %>
41
+ </ul>
42
+ <% end %>
43
+ </div>
44
+ <% end %>
44
45
  <% end %>
@@ -78,7 +78,7 @@
78
78
  hidden
79
79
  id="super-navigation-menu-toggle"
80
80
  type="button"
81
- data-ga4="<%= {
81
+ data-ga4-event="<%= {
82
82
  "event_name": "select_content",
83
83
  "type": "header menu bar",
84
84
  "text": "Menu",
@@ -233,7 +233,7 @@
233
233
  hidden
234
234
  id="super-search-menu-toggle"
235
235
  type="button"
236
- data-ga4="<%= {
236
+ data-ga4-event="<%= {
237
237
  "event_name": "select_content",
238
238
  "type": "header menu bar",
239
239
  "text": "Search",
@@ -8,7 +8,7 @@ unless message.present?
8
8
  if phase == "beta"
9
9
  message = raw("This part of GOV.UK is being rebuilt &ndash; <a class=\"govuk-link\" href=\"/help/beta\">find out what beta means</a>")
10
10
  elsif phase == "alpha"
11
- message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/phases/ideal-alphas\">find out what alpha means</a>")
11
+ message = raw("This part of GOV.UK is being built &ndash; <a class=\"govuk-link\" href=\"/service-manual/agile-delivery/how-the-alpha-phase-works\">find out what alpha means</a>")
12
12
  end
13
13
  end
14
14
 
@@ -15,14 +15,17 @@
15
15
  classes << brand_helper.brand_class
16
16
 
17
17
  data_attributes ||= {}
18
- data_attributes[:module] = 'gem-track-click'
18
+ ((data_attributes[:module] ||= "") << " " << "gem-track-click").strip!
19
+ data_attributes[:module] << " ga4-link-tracker" if track_as_sharing || track_as_follow
19
20
  %>
20
21
  <% if links.any? %>
21
22
  <%= tag.div(class: classes, data: data_attributes) do %>
22
23
  <% if title %>
23
- <h2 class="gem-c-share-links__title"><%= title %></h2>
24
+ <h2 class="govuk-heading-s"><%= title %></h2>
24
25
  <% end %>
25
-
26
+ <p class="govuk-body-s">
27
+ <%= t('components.share_links.all_opens_in_new_tab') %>
28
+ </p>
26
29
  <ul class="gem-c-share-links__list">
27
30
  <% links.each_with_index do |link, index| %>
28
31
  <% link_text = capture do %>
@@ -34,6 +37,9 @@
34
37
  <% end %>
35
38
  </span>
36
39
  <%= link[:text] %>
40
+ <span class="govuk-visually-hidden">
41
+ <%= t('components.share_links.opens_in_new_tab') %>
42
+ </span>
37
43
  <% end %>
38
44
  <li class="gem-c-share-links__list-item">
39
45
  <%
@@ -49,7 +55,6 @@
49
55
  'index': index + 1,
50
56
  'index_total': links.length,
51
57
  'text': link[:icon],
52
- 'method': 'populated-via-js'
53
58
  }
54
59
  end
55
60
  if track_as_follow
@@ -57,23 +62,21 @@
57
62
  'event_name': 'navigation',
58
63
  'type': 'follow us',
59
64
  'index': index + 1,
60
- 'index_total': links.length,
61
- 'text': link[:text],
62
- 'external': 'populated-via-js',
63
- 'url': link[:href],
64
- 'method': 'populated-via-js'
65
+ 'index_total': links.length
65
66
  }
66
67
  end
67
68
  %>
69
+ <%
70
+ data_attributes = link[:data_attributes] ||= {}
71
+ data_attributes[:track_category] = 'social media'
72
+ data_attributes[:track_action] = link[:icon]
73
+ data_attributes[:track_options] = track_options
74
+ data_attributes[:ga4_link] = ga4_link_data
75
+ %>
68
76
  <%= link_to link[:href],
69
77
  target: "_blank",
70
78
  rel: "noopener noreferrer external",
71
- data: {
72
- 'track-category': 'social media',
73
- 'track-action': link[:icon],
74
- 'track-options': track_options,
75
- 'ga4-link': ga4_link_data
76
- },
79
+ data: data_attributes,
77
80
  class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %>
78
81
  <span class="gem-c-share-links__link-icon">
79
82
  <% if link[:icon] == 'facebook' %>
@@ -6,7 +6,7 @@
6
6
  wrapper_classes << shared_helper.get_margin_bottom
7
7
  %>
8
8
  <% button_text = capture do %>
9
- <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
9
+ <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><span class="gem-c-single-page-notication-button__text"><%= component_helper.button_text %></span>
10
10
  <% end %>
11
11
  <%= tag.div class: wrapper_classes, data: { module: "gem-track-click"} do %>
12
12
  <%= tag.form class: component_helper.classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
@@ -181,21 +181,33 @@ examples:
181
181
  <a class="govuk-link" href="#">Retiring your service</a>
182
182
  </li>
183
183
  </ul>'
184
+ with_ga4_tracking:
185
+ description: |
186
+ Allows you to add GA4 tracking to an accordion. This will add a data module and data-attributes with JSONs to the accordion. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
187
+ data:
188
+ ga4_tracking: true
189
+ items:
190
+ - heading:
191
+ text: Writing well for the web
192
+ content:
193
+ html: <p class="govuk-body">This is the content for Writing well for the web.</p>
194
+ - heading:
195
+ text: Writing well for specialists
196
+ content:
197
+ html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
184
198
  with_data_attributes:
185
199
  description: |
186
200
  Adds custom data attributes to each section of the accordion. Accepts a hash, so multiple attributes can be added.
187
201
 
188
202
  The `data_attributes` option applies attributes to the outermost element in the accordion. Each item can also have a `data_attributes` hash, which are placed on the `button` that triggers the opening and closing - useful for differentiating between each section of the accordion.
189
203
 
190
- Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). More details on how this can be used with the GA4 event tracking can be found in the 'Advanced' section of the [event tracking documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md).
204
+ Data attributes can be added to the 'Show/hide all' link using the `data_attributes_show_all` option, primarily where custom tracking is required. These attributes are read from the accordion markup and then added to the link by JavaScript (which is how the link is created). Currently, this is only used for tracking with Universal Analytics.
191
205
 
192
206
  If `track_options` within `data_attributes_show_all` is set, then it is possible to pass a custom dimension when 'Show/Hide all' is clicked.
193
207
  data:
194
208
  data_attributes:
195
209
  custom_data_attr: custom-data-attr-accordion
196
210
  data_attributes_show_all:
197
- custom_data_attr-event-name: example
198
- custom_data_attr-attributes: "{ 'ui': { 'type': 'type value', 'section': 'section value' } }"
199
211
  tracking-options: "{ 'dimension114': 1 }"
200
212
  items:
201
213
  - heading:
@@ -129,3 +129,13 @@ examples:
129
129
  data:
130
130
  text: Button
131
131
  aria_label: Button with custom label
132
+ with_aria_controls:
133
+ description: Used to identify what element(s) the button controls, this can be useful for users with visual impairment. In the example shown, the button controls the page wrapper with ID `wrapper` but it could be another identifying attribute.
134
+ data:
135
+ text: Button
136
+ aria_controls: wrapper
137
+ with_aria_describedby:
138
+ description: Can be used to give context to a button, this will be read after aria-label by a screenreader
139
+ data:
140
+ text: Button
141
+ aria_describedby: with_aria_describedby
@@ -3,6 +3,8 @@ description: Social media links for linking to or sharing the current page on so
3
3
  body: |
4
4
  The component will not process a URL into a share link itself. Pass complete share URLs to the component.
5
5
 
6
+ Note that the component automatically appends visually hidden text to the link (default: `Share on <your text> (opens in a new tab)`). Consider this when setting the link text.
7
+
6
8
  Real world examples:
7
9
 
8
10
  - [News article](https://www.gov.uk/government/news/fast-tracking-uk-innovation-apply-for-business-funding)
@@ -44,36 +46,27 @@ examples:
44
46
  ]
45
47
  context:
46
48
  right_to_left: true
47
- track_as_sharing_links:
48
- description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
49
- data:
50
- track_as_sharing: true
51
- links: [
52
- {
53
- href: 'share',
54
- text: 'Share on Facebook',
55
- icon: 'facebook'
56
- },
57
- {
58
- href: 'share',
59
- text: 'Share on Twitter',
60
- icon: 'twitter'
61
- },
62
- ]
63
- track_as_follow_links:
64
- description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
49
+ with_data_attributes:
50
+ description: Data attributes can be added to both the parent element and the individual share links, as shown. Note that the component defaults to having a `data-module` of `gem-track-click`, but this is preserved even if another value for module is passed.
65
51
  data:
66
- track_as_follow: true
52
+ data_attributes:
53
+ module: 'example-passed-module'
67
54
  links: [
68
55
  {
69
- href: 'follow',
70
- text: 'Follow us on Facebook',
71
- icon: 'facebook'
56
+ href: '/facebook-share-link',
57
+ text: 'Facebook',
58
+ icon: 'facebook',
59
+ data_attributes: {
60
+ meeting: 'hello'
61
+ },
72
62
  },
73
63
  {
74
- href: 'follow',
75
- text: 'Follow us on Twitter',
76
- icon: 'twitter'
64
+ href: '/twitter-share-link',
65
+ text: 'Twitter',
66
+ icon: 'twitter',
67
+ data_attributes: {
68
+ departing: 'goodbye'
69
+ },
77
70
  },
78
71
  ]
79
72
  with_title:
@@ -83,9 +76,22 @@ examples:
83
76
  {
84
77
  href: 'share',
85
78
  text: 'Share on Facebook',
79
+ hidden_text: '',
86
80
  icon: 'facebook'
87
81
  }
88
82
  ]
83
+ with_branding:
84
+ description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_branding.md) can be added to the component as shown.
85
+ data:
86
+ brand: 'attorney-generals-office'
87
+ links: [
88
+ {
89
+ href: 'share',
90
+ text: 'Follow the Attorney General on Twitter',
91
+ hidden_text: '',
92
+ icon: 'twitter'
93
+ }
94
+ ]
89
95
  with_custom_visually_hidden_text:
90
96
  description: |
91
97
  Use this option to specify a visually hidden text for screenreaders to prepend to the link text.
@@ -100,16 +106,39 @@ examples:
100
106
  icon: 'facebook'
101
107
  }
102
108
  ]
103
- with_branding:
104
- description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_branding.md) can be added to the component as shown.
109
+ track_as_sharing_links:
110
+ description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
105
111
  data:
106
- brand: 'attorney-generals-office'
112
+ track_as_sharing: true
107
113
  links: [
108
114
  {
109
115
  href: 'share',
110
- text: 'Follow the Attorney General on Twitter',
116
+ text: 'Share on Facebook',
117
+ icon: 'facebook'
118
+ },
119
+ {
120
+ href: 'share',
121
+ text: 'Share on Twitter',
111
122
  icon: 'twitter'
112
- }
123
+ },
124
+ ]
125
+ track_as_follow_links:
126
+ description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
127
+ data:
128
+ track_as_follow: true
129
+ links: [
130
+ {
131
+ href: 'follow',
132
+ text: 'Follow us on Facebook',
133
+ hidden_text: '',
134
+ icon: 'facebook'
135
+ },
136
+ {
137
+ href: 'follow',
138
+ text: 'Follow us on Twitter',
139
+ hidden_text: '',
140
+ icon: 'twitter'
141
+ },
113
142
  ]
114
143
  stack_vertically:
115
144
  data:
@@ -33,7 +33,8 @@ examples:
33
33
  margin_bottom: 5
34
34
  with_js_enhancement:
35
35
  description: |
36
- If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
36
+ If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page and accordingly updates its tracking attribute and (optionally) button text.
37
+
37
38
  data:
38
39
  base_path: '/current-page-path'
39
40
  js_enhancement: true
@@ -48,3 +49,11 @@ examples:
48
49
  base_path: '/current-page-path'
49
50
  js_enhancement: true
50
51
  button_location: 'top'
52
+ with_custom_button_text:
53
+ description: The component accepts custom button text, provided that both subscribe and unsubscribe text is provided.
54
+ data:
55
+ base_path: '/current-page-path'
56
+ js_enhancement: true
57
+ button_text:
58
+ subscribe: 'Subscribe to this page of things'
59
+ unsubscribe: 'Unsubscribe to this page of things'
@@ -21,12 +21,12 @@
21
21
  <% end %>
22
22
  </li>
23
23
  <li class="gem-c-feedback__option-list-item">
24
- <button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick" data-ga4='{"event_name":"form_submit","type":"feedback","text":"Yes", "section": "Is this page useful?"}'>
24
+ <button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick" data-ga4-event='{"event_name":"form_submit","type":"feedback","text":"Yes", "section": "Is this page useful?"}'>
25
25
  <%= t("components.feedback.yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful") %></span>
26
26
  </button>
27
27
  </li>
28
28
  <li class="gem-c-feedback__option-list-item">
29
- <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4='{"event_name":"form_submit","type":"feedback","text":"No", "section": "Is this page useful?"}'>
29
+ <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4-event='{"event_name":"form_submit","type":"feedback","text":"No", "section": "Is this page useful?"}'>
30
30
  <%= t("components.feedback.no") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful") %></span>
31
31
  </button>
32
32
  </li>
@@ -39,7 +39,7 @@
39
39
  </div>
40
40
 
41
41
  <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
42
- <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false" data-ga4='{"event_name":"form_submit","type":"feedback","text":"Report a problem with this page", "section": "Is this page useful?"}'>
42
+ <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false" data-ga4-event='{"event_name":"form_submit","type":"feedback","text":"Report a problem with this page", "section": "Is this page useful?"}'>
43
43
  <%= t("components.feedback.something_wrong") %>
44
44
  </button>
45
45
  </div>
@@ -167,13 +167,16 @@ ar:
167
167
  link_text: تحقق مما تحتاج إلى القيام به
168
168
  title: برِيكْسِت
169
169
  ukraine:
170
- title:
171
170
  links:
171
+ title:
172
172
  world_locations: المواقع العالمية
173
173
  search_box:
174
174
  input_title: بحث
175
175
  label: بحث على GOV.UK
176
176
  search_button: بحث
177
+ share_links:
178
+ all_opens_in_new_tab:
179
+ opens_in_new_tab:
177
180
  show_password:
178
181
  announce_hide: كلمة مرورك مخفيَّة
179
182
  announce_show: كلمة مرورك معروضة
@@ -163,13 +163,16 @@ az:
163
163
  link_text: Nələri etməli olduğunuzu yoxlayın
164
164
  title: Brexit
165
165
  ukraine:
166
- title:
167
166
  links:
167
+ title:
168
168
  world_locations: Dünya üzrə yerləri
169
169
  search_box:
170
170
  input_title: Axtar
171
171
  label: GOV.UK-də axtar
172
172
  search_button: Axtar
173
+ share_links:
174
+ all_opens_in_new_tab:
175
+ opens_in_new_tab:
173
176
  show_password:
174
177
  announce_hide: Şifrəniz gizlədilib
175
178
  announce_show: Şifrəniz göstərilir
@@ -170,13 +170,16 @@ be:
170
170
  link_text: Праверце, што вам трэба зрабіць
171
171
  title: Брэкзiт
172
172
  ukraine:
173
- title:
174
173
  links:
174
+ title:
175
175
  world_locations: Мы ў свеце
176
176
  search_box:
177
177
  input_title: Пошук
178
178
  label: Шукаць на GOV.UK
179
179
  search_button: Пошук
180
+ share_links:
181
+ all_opens_in_new_tab:
182
+ opens_in_new_tab:
180
183
  show_password:
181
184
  announce_hide: Ваш пароль схаваны
182
185
  announce_show: Ваш пароль адлюстроўваецца
@@ -168,13 +168,16 @@ bg:
168
168
  link_text: Проверете какво трябва да направите
169
169
  title: Брекзит
170
170
  ukraine:
171
- title:
172
171
  links:
172
+ title:
173
173
  world_locations: Местоположения по света
174
174
  search_box:
175
175
  input_title: Търсене
176
176
  label: Търсене в GOV.UK
177
177
  search_button: Търсене
178
+ share_links:
179
+ all_opens_in_new_tab:
180
+ opens_in_new_tab:
178
181
  show_password:
179
182
  announce_hide: Вашата парола е скрита
180
183
  announce_show: Вашата парола е видима
@@ -165,13 +165,16 @@ bn:
165
165
  link_text: আপনার যা করা প্রয়োজন তা দেখুন
166
166
  title: ব্রেক্সিট
167
167
  ukraine:
168
- title:
169
168
  links:
169
+ title:
170
170
  world_locations: বিশ্বের অবস্থানসমূহ
171
171
  search_box:
172
172
  input_title: খুঁজুন
173
173
  label: GOV.UK-এ অনুসন্ধান করুন
174
174
  search_button: খুঁজুন
175
+ share_links:
176
+ all_opens_in_new_tab:
177
+ opens_in_new_tab:
175
178
  show_password:
176
179
  announce_hide: আপনার পাসওয়ার্ড লুকানো
177
180
  announce_show: আপনার পাসওয়ার্ড দেখানো হয়েছে
@@ -169,13 +169,16 @@ cs:
169
169
  link_text: Zkontrolujte, co je třeba udělat
170
170
  title: Brexit
171
171
  ukraine:
172
- title:
173
172
  links:
173
+ title:
174
174
  world_locations: Místa ve světě
175
175
  search_box:
176
176
  input_title: Vyhledávání
177
177
  label: Vyhledávání na GOV.UK
178
178
  search_button: Vyhledávání
179
+ share_links:
180
+ all_opens_in_new_tab:
181
+ opens_in_new_tab:
179
182
  show_password:
180
183
  announce_hide: Vaše heslo je skryté
181
184
  announce_show: Zobrazí se vaše heslo
@@ -168,13 +168,16 @@ cy:
168
168
  link_text: Gwiriwch beth mae angen i chi wneud
169
169
  title: Brexit
170
170
  ukraine:
171
- title:
172
171
  links:
172
+ title:
173
173
  world_locations: Lleoliadau byd-eang
174
174
  search_box:
175
175
  input_title: Chwilio
176
176
  label: Chwilio ar GOV.UK
177
177
  search_button: Chwilio
178
+ share_links:
179
+ all_opens_in_new_tab:
180
+ opens_in_new_tab:
178
181
  show_password:
179
182
  announce_hide: Mae eich cyfrinair wedi'i guddio
180
183
  announce_show: Mae eich cyfrinair yn cael ei ddangos
@@ -165,13 +165,16 @@ da:
165
165
  link_text: Tjek hvad du skal gøre
166
166
  title: Brexit
167
167
  ukraine:
168
- title:
169
168
  links:
169
+ title:
170
170
  world_locations: Verden Placeringer
171
171
  search_box:
172
172
  input_title: Søge
173
173
  label: Søg i GOV.UK
174
174
  search_button: Søge
175
+ share_links:
176
+ all_opens_in_new_tab:
177
+ opens_in_new_tab:
175
178
  show_password:
176
179
  announce_hide: Din adgangskode er skjult
177
180
  announce_show: Din adgangskode vises
@@ -168,13 +168,16 @@ de:
168
168
  link_text: Prüfen Sie, was Sie machen müssen
169
169
  title: Brexit
170
170
  ukraine:
171
- title:
172
171
  links:
172
+ title:
173
173
  world_locations: Weltweite Standorte
174
174
  search_box:
175
175
  input_title: Suche
176
176
  label: Auf GOV.UK suchen
177
177
  search_button: Suche
178
+ share_links:
179
+ all_opens_in_new_tab:
180
+ opens_in_new_tab:
178
181
  show_password:
179
182
  announce_hide: Ihr Passwort ist ausgeblendet
180
183
  announce_show: Ihr Passwort ist eingeblendet