govuk_publishing_components 23.12.1 → 23.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/header.js +3 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +5 -0
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +32 -36
  8. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +66 -14
  9. data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +8 -8
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +5 -0
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss +4 -0
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +17 -6
  17. data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +5 -0
  18. data/app/views/govuk_publishing_components/components/_button.html.erb +1 -0
  19. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  20. data/app/views/govuk_publishing_components/components/_document_list.html.erb +1 -1
  21. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +4 -2
  22. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
  23. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  24. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +3 -0
  25. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +82 -0
  26. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +3 -0
  27. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +30 -0
  28. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  29. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +60 -1
  30. data/app/views/govuk_publishing_components/components/docs/document_list.yml +8 -0
  31. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +21 -0
  32. data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
  33. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +3 -0
  34. data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +100 -0
  35. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +3 -1
  36. data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +137 -0
  37. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +3 -3
  38. data/config/initializers/assets.rb +3 -0
  39. data/config/locales/cy.yml +6 -1
  40. data/config/locales/en.yml +8 -3
  41. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +124 -2
  42. data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
  43. data/lib/govuk_publishing_components/version.rb +1 -1
  44. data/node_modules/govuk-frontend/govuk/all.js +57 -0
  45. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  46. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  47. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  48. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  49. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  50. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  51. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  52. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
  53. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  54. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  55. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  56. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  57. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  58. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  59. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
  60. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  61. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  62. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  63. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  64. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  65. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  66. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  67. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  68. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  69. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  70. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  71. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  72. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  73. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  74. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  75. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  76. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  77. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  78. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  79. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  80. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  81. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  82. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  83. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  84. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  85. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  86. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  87. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  88. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  89. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  90. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  91. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  92. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  93. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  94. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  95. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  96. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  97. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  98. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  99. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  100. data/node_modules/govuk-frontend/package.json +1 -1
  101. metadata +18 -4
  102. data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
  103. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
@@ -79,7 +79,12 @@ en:
79
79
  transition:
80
80
  title: "Brexit"
81
81
  link_path: "/transition"
82
- link_text: "Check how the new Brexit rules affect you"
82
+ link_text: "Check what you need to do"
83
+ take_action_list:
84
+ red: Check
85
+ amber: Change
86
+ green: Go
87
+ aria_label: Brexit campaign slogan, Check, Change, Go.
83
88
  related_footer_navigation:
84
89
  collections: "Collections"
85
90
  policies: "Policies"
@@ -92,8 +97,8 @@ en:
92
97
  step_by_step_nav:
93
98
  show: "Show"
94
99
  hide: "Hide"
95
- show_all: "Show all"
96
- hide_all: "Hide all"
100
+ show_all: "Show all steps"
101
+ hide_all: "Hide all steps"
97
102
  step_by_step_nav_related:
98
103
  part_of: "Part of"
99
104
  subscription_links:
@@ -113,8 +113,130 @@ module GovukPublishingComponents
113
113
  tagged_to_brexit? && (page_content_id != brexit_start_page_content_id)
114
114
  end
115
115
 
116
- def transition_countdown_exception?
117
- content_item["content_id"] == "c3752802-f091-43a9-ba90-33568fccf391"
116
+ def brexit_cta_document_exceptions
117
+ # /government/news/30-creative-teams-awarded-up-to-100000-each-for-festival-uk-2022-rd-project
118
+ %w[c3752802-f091-43a9-ba90-33568fccf391]
119
+ end
120
+
121
+ def brexit_cta_document_exception?
122
+ brexit_cta_document_exceptions.include?(content_item["content_id"])
123
+ end
124
+
125
+ def brexit_cta_document_type_exceptions
126
+ %w[
127
+ aaib_report
128
+ answer
129
+ asylum_support_decision
130
+ fatality_notice
131
+ maib_report
132
+ raib_report
133
+ simple_smart_answer
134
+ transaction
135
+ ]
136
+ end
137
+
138
+ def brexit_cta_document_type_exception?
139
+ brexit_cta_document_type_exceptions.include?(content_item["document_type"])
140
+ end
141
+
142
+ def brexit_cta_taxon_allow_list
143
+ # Entering and staying in the UK
144
+ # Going and being abroad
145
+ # Corporate information
146
+ # Transport
147
+ # Environment
148
+ # International
149
+ # Defence and armed forces
150
+ # Society and culture
151
+ # Government
152
+ # Work
153
+ # Welfare
154
+ # Money
155
+ # Business and industry
156
+ # Health and social care
157
+ # Education > Further and higher education
158
+ # Education > Teaching and leadership
159
+ # Education > Funding and finance for students
160
+ # Coronavirus (COVID-19)
161
+ %w[
162
+ ba3a9702-da22-487f-86c1-8334a730e559
163
+ 9597c30a-605a-4e36-8bc1-47e5cdae41b3
164
+ a544d48b-1e9e-47fb-b427-7a987c658c14
165
+ a4038b29-b332-4f13-98b1-1c9709e216bc
166
+ 3cf97f69-84de-41ae-bc7b-7e2cc238fa58
167
+ 37d0fa26-abed-4c74-8835-b3b51ae1c8b2
168
+ e491505c-77ae-45b2-84be-8c94b94f6a2b
169
+ e2ca2f1a-0ff3-43ce-b813-16645ff27904
170
+ e48ab80a-de80-4e83-bf59-26316856a5f9
171
+ d0f1e5a3-c8f4-4780-8678-994f19104b21
172
+ dded88e2-f92e-424f-b73e-6ad24a839c51
173
+ 6acc9db4-780e-4a46-92b4-1812e3c2c48a
174
+ 495afdb6-47be-4df1-8b38-91c8adb1eefc
175
+ 8124ead8-8ebc-4faf-88ad-dd5cbcc92ba8
176
+ dd767840-363e-43ad-8835-c9ab516633de
177
+ ff00b8b2-dcdb-4659-93c2-291c9be354f3
178
+ 23265b25-7ec3-4960-8517-4ff8d4d92cac
179
+ 5b7b9532-a775-4bd2-a3aa-6ce380184b6c
180
+ ]
181
+ end
182
+
183
+ def brexit_cta_taxon_allow_list?
184
+ taxons = content_item.dig("links", "taxons").to_a
185
+ taxons.each do |taxon|
186
+ if brexit_cta_taxon_allow_list.include?(taxon["content_id"]) || parent_taxon_include?(taxon, brexit_cta_taxon_allow_list)
187
+ return true
188
+ end
189
+ end
190
+ false
191
+ end
192
+
193
+ def parent_taxon_include?(taxon, taxon_list)
194
+ if taxon.present?
195
+ if taxon.dig("links", "parent_taxons").to_a.any? { |taxon_item| taxon_list.include?(taxon_item["content_id"]) }
196
+ return true
197
+ end
198
+
199
+ taxon.dig("links", "parent_taxons").to_a.any? { |taxon_item| parent_taxon_include?(taxon_item, taxon_list) }
200
+ else
201
+ false
202
+ end
203
+ end
204
+
205
+ def brexit_cta_taxon_exception_list
206
+ # Entering and staying in the UK > Immigration offences
207
+ # Entering and staying in the UK > Inspections of border, immigration and asylum services
208
+ # Entering and staying in the UK > Refugees, asylum and human rights
209
+ # Transport > Local transport
210
+ # Education > Further and higher education > Education in prisons
211
+ %w[
212
+ fa13521f-9285-45b0-bd65-4a472a8037e7
213
+ 0fab9131-f877-4286-b4d8-922fbfb402b6
214
+ 08a8a69f-2825-4fe2-a4cf-c83458a5629e
215
+ 3b4d6319-fcef-4637-b35a-e3df76321894
216
+ 6426d1c5-93c8-4659-85d5-1f0d3368a124
217
+ ]
218
+ end
219
+
220
+ def brexit_cta_taxon_exception_list?
221
+ taxons = content_item.dig("links", "taxons").to_a
222
+ taxons.each do |taxon|
223
+ if brexit_cta_taxon_exception_list.include?(taxon["content_id"]) || parent_taxon_include?(taxon, brexit_cta_taxon_exception_list)
224
+ return true
225
+ end
226
+ end
227
+ false
228
+ end
229
+
230
+ def brexit_cta_exception?
231
+ brexit_cta_document_exception? ||
232
+ brexit_cta_document_type_exception? ||
233
+ brexit_cta_taxon_exception_list?
234
+ end
235
+
236
+ def show_brexit_cta?
237
+ brexit_cta_taxon_allow_list? &&
238
+ step_by_step_count.zero? &&
239
+ !brexit_cta_exception?
118
240
  end
119
241
 
120
242
  def step_by_step_count
@@ -31,6 +31,8 @@ module GovukPublishingComponents
31
31
  meta_tags["govuk:publishing-application"] = content_item[:publishing_app] if content_item[:publishing_app]
32
32
  meta_tags["govuk:schema-name"] = content_item[:schema_name] if content_item[:schema_name]
33
33
  meta_tags["govuk:content-id"] = content_item[:content_id] if content_item[:content_id]
34
+ meta_tags["govuk:navigation-page-type"] = content_item[:navigation_page_type] if content_item[:navigation_page_type]
35
+ meta_tags["govuk:section"] = content_item[:section] if content_item[:section]
34
36
  meta_tags["govuk:withdrawn"] = "withdrawn" if content_item[:withdrawn_notice].present?
35
37
  meta_tags["govuk:content-has-history"] = "true" if has_content_history?
36
38
  meta_tags["govuk:static-analytics:strip-dates"] = "true" if should_strip_dates_pii?(content_item, local_assigns)
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "23.12.1".freeze
2
+ VERSION = "23.14.0".freeze
3
3
  end
@@ -1959,6 +1959,58 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
1959
1959
  $input.closest('label')
1960
1960
  };
1961
1961
 
1962
+ function NotificationBanner ($module) {
1963
+ this.$module = $module;
1964
+ }
1965
+
1966
+ /**
1967
+ * Initialise the component
1968
+ */
1969
+ NotificationBanner.prototype.init = function () {
1970
+ var $module = this.$module;
1971
+ // Check for module
1972
+ if (!$module) {
1973
+ return
1974
+ }
1975
+
1976
+ this.setFocus();
1977
+ };
1978
+
1979
+ /**
1980
+ * Focus the element
1981
+ *
1982
+ * If `role="alert"` is set, focus the element to help some assistive technologies
1983
+ * prioritise announcing it.
1984
+ *
1985
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
1986
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
1987
+ * with another element which should be focused when the page loads.
1988
+ */
1989
+ NotificationBanner.prototype.setFocus = function () {
1990
+ var $module = this.$module;
1991
+
1992
+ if ($module.getAttribute('data-disable-auto-focus') === 'true') {
1993
+ return
1994
+ }
1995
+
1996
+ if ($module.getAttribute('role') !== 'alert') {
1997
+ return
1998
+ }
1999
+
2000
+ // Set tabindex to -1 to make the element focusable with JavaScript.
2001
+ // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
2002
+ // loaded.
2003
+ if (!$module.getAttribute('tabindex')) {
2004
+ $module.setAttribute('tabindex', '-1');
2005
+
2006
+ $module.addEventListener('blur', function () {
2007
+ $module.removeAttribute('tabindex');
2008
+ });
2009
+ }
2010
+
2011
+ $module.focus();
2012
+ };
2013
+
1962
2014
  function Header ($module) {
1963
2015
  this.$module = $module;
1964
2016
  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
@@ -2476,6 +2528,11 @@ function initAll (options) {
2476
2528
  var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
2477
2529
  new Header($toggleButton).init();
2478
2530
 
2531
+ var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
2532
+ nodeListForEach($notificationBanners, function ($notificationBanner) {
2533
+ new NotificationBanner($notificationBanner).init();
2534
+ });
2535
+
2479
2536
  var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
2480
2537
  nodeListForEach($radios, function ($radio) {
2481
2538
  new Radios($radio).init();
@@ -19,6 +19,7 @@
19
19
  @import "input/index";
20
20
  @import "inset-text/index";
21
21
  @import "label/index";
22
+ @import "notification-banner/index";
22
23
  @import "panel/index";
23
24
  @import "phase-banner/index";
24
25
  @import "tabs/index";
@@ -24,7 +24,8 @@
24
24
  }
25
25
  ]
26
26
  },
27
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>"
27
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
28
+ "hidden": false
28
29
  },
29
30
  {
30
31
  "name": "with additional descriptions",
@@ -55,7 +56,8 @@
55
56
  }
56
57
  ]
57
58
  },
58
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n Test\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n Additional description\n </div>\n \n </div>\n <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n Test 2\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n <span class=\"govuk-!-font-weight-regular\">Additional description</span>\n </div>\n \n </div>\n <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>"
59
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n Test\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n Additional description\n </div>\n \n </div>\n <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n Test 2\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n <span class=\"govuk-!-font-weight-regular\">Additional description</span>\n </div>\n \n </div>\n <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
60
+ "hidden": false
59
61
  },
60
62
  {
61
63
  "name": "with one section open",
@@ -81,7 +83,8 @@
81
83
  }
82
84
  ]
83
85
  },
84
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n \n \n <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>"
86
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n \n \n <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
87
+ "hidden": false
85
88
  },
86
89
  {
87
90
  "name": "with all sections already open",
@@ -108,7 +111,8 @@
108
111
  }
109
112
  ]
110
113
  },
111
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n \n \n <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>"
114
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n \n \n <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n </div>\n </div>\n \n \n</div>",
115
+ "hidden": false
112
116
  },
113
117
  {
114
118
  "name": "with focusable elements inside",
@@ -133,11 +137,13 @@
133
137
  }
134
138
  ]
135
139
  },
136
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n <a class=\"govuk-link\" href=\"#\">Link A</a>\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n <a class=\"govuk-link\" href=\"#\">Link B</a>\n </div>\n </div>\n \n \n</div>"
140
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n <a class=\"govuk-link\" href=\"#\">Link A</a>\n </div>\n </div>\n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n <a class=\"govuk-link\" href=\"#\">Link B</a>\n </div>\n </div>\n \n \n</div>",
141
+ "hidden": false
137
142
  },
138
143
  {
139
144
  "name": "classes",
140
145
  "options": {
146
+ "id": "accordion-classes",
141
147
  "classes": "myClass",
142
148
  "items": [
143
149
  {
@@ -150,11 +156,13 @@
150
156
  }
151
157
  ]
152
158
  },
153
- "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>"
159
+ "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>",
160
+ "hidden": true
154
161
  },
155
162
  {
156
163
  "name": "attributes",
157
164
  "options": {
165
+ "id": "accordion-attributes",
158
166
  "attributes": {
159
167
  "data-attribute": "value"
160
168
  },
@@ -169,11 +177,13 @@
169
177
  }
170
178
  ]
171
179
  },
172
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\" data-attribute=\"value\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>"
180
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>",
181
+ "hidden": true
173
182
  },
174
183
  {
175
184
  "name": "custom heading level",
176
185
  "options": {
186
+ "id": "accordion-heading",
177
187
  "headingLevel": 3,
178
188
  "items": [
179
189
  {
@@ -186,11 +196,13 @@
186
196
  }
187
197
  ]
188
198
  },
189
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h3 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n Section A\n </span>\n </h3>\n \n </div>\n <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>"
199
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h3 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n Section A\n </span>\n </h3>\n \n </div>\n <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>",
200
+ "hidden": true
190
201
  },
191
202
  {
192
203
  "name": "heading html",
193
204
  "options": {
205
+ "id": "accordion-heading-html",
194
206
  "items": [
195
207
  {
196
208
  "heading": {
@@ -202,11 +214,13 @@
202
214
  }
203
215
  ]
204
216
  },
205
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n <span class=\"myClass\">Section A</span>\n </span>\n </h2>\n \n </div>\n <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>"
217
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n <span class=\"myClass\">Section A</span>\n </span>\n </h2>\n \n </div>\n <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n Some content\n </div>\n </div>\n \n \n</div>",
218
+ "hidden": true
206
219
  },
207
220
  {
208
221
  "name": "with falsey values",
209
222
  "options": {
223
+ "id": "accordion-falsey",
210
224
  "items": [
211
225
  {
212
226
  "heading": {
@@ -229,7 +243,8 @@
229
243
  }
230
244
  ]
231
245
  },
232
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n Some content\n </div>\n </div>\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"-heading-5\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-5\">\n Some content\n </div>\n </div>\n \n \n</div>"
246
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-1\">\n Some content\n </div>\n </div>\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-accordion__section \">\n <div class=\"govuk-accordion__section-header\">\n <h2 class=\"govuk-accordion__section-heading\">\n <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n Some content\n </div>\n </div>\n \n \n</div>",
247
+ "hidden": true
233
248
  }
234
249
  ]
235
250
  }
@@ -6,7 +6,8 @@
6
6
  "options": {
7
7
  "href": "#"
8
8
  },
9
- "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>"
9
+ "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>",
10
+ "hidden": false
10
11
  },
11
12
  {
12
13
  "name": "with custom text",
@@ -14,7 +15,8 @@
14
15
  "href": "#",
15
16
  "text": "Back to home"
16
17
  },
17
- "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>"
18
+ "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>",
19
+ "hidden": false
18
20
  },
19
21
  {
20
22
  "name": "classes",
@@ -22,7 +24,8 @@
22
24
  "classes": "app-back-link--custom-class",
23
25
  "href": "#"
24
26
  },
25
- "html": "<a href=\"#\" class=\"govuk-back-link app-back-link--custom-class\">Back</a>"
27
+ "html": "<a href=\"#\" class=\"govuk-back-link app-back-link--custom-class\">Back</a>",
28
+ "hidden": true
26
29
  },
27
30
  {
28
31
  "name": "html as text",
@@ -30,7 +33,8 @@
30
33
  "text": "<b>Home</b>",
31
34
  "href": "#"
32
35
  },
33
- "html": "<a href=\"#\" class=\"govuk-back-link\">&lt;b&gt;Home&lt;/b&gt;</a>"
36
+ "html": "<a href=\"#\" class=\"govuk-back-link\">&lt;b&gt;Home&lt;/b&gt;</a>",
37
+ "hidden": true
34
38
  },
35
39
  {
36
40
  "name": "html",
@@ -38,7 +42,8 @@
38
42
  "html": "<b>Back</b>",
39
43
  "href": "#"
40
44
  },
41
- "html": "<a href=\"#\" class=\"govuk-back-link\"><b>Back</b></a>"
45
+ "html": "<a href=\"#\" class=\"govuk-back-link\"><b>Back</b></a>",
46
+ "hidden": true
42
47
  },
43
48
  {
44
49
  "name": "attributes",
@@ -50,7 +55,8 @@
50
55
  "aria-label": "Back to home"
51
56
  }
52
57
  },
53
- "html": "<a href=\"#\" class=\"govuk-back-link\" data-test=\"attribute\" aria-label=\"Back to home\"><b>Back to home</b></a>"
58
+ "html": "<a href=\"#\" class=\"govuk-back-link\" data-test=\"attribute\" aria-label=\"Back to home\"><b>Back to home</b></a>",
59
+ "hidden": true
54
60
  }
55
61
  ]
56
62
  }
@@ -2,14 +2,14 @@
2
2
  {
3
3
  "name": "text",
4
4
  "type": "string",
5
- "required": true,
6
- "description": "If `html` is set, this is not required. Text to use within the back link component. If `html` is provided, the `text` argument will be ignored."
5
+ "required": false,
6
+ "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
7
7
  },
8
8
  {
9
9
  "name": "html",
10
10
  "type": "string",
11
- "required": true,
12
- "description": "If `text` is set, this is not required. HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored."
11
+ "required": false,
12
+ "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
13
13
  },
14
14
  {
15
15
  "name": "href",