govuk_publishing_components 23.12.1 → 23.14.0

Sign up to get free protection for your applications and to get access to all the features.
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",