govuk_publishing_components 32.1.0 → 33.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (145) 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 +4 -4
  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/single-page-notification-button.js +24 -8
  13. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +22 -1
  14. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +140 -191
  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/views/govuk_publishing_components/components/_accordion.html.erb +14 -1
  21. data/app/views/govuk_publishing_components/components/_error_summary.html.erb +27 -26
  22. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +2 -2
  23. data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +1 -1
  24. data/app/views/govuk_publishing_components/components/_share_links.html.erb +11 -13
  25. data/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb +1 -1
  26. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +4 -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/docs/step_by_step_nav.yml +34 -0
  32. data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +1 -1
  33. data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb +1 -1
  34. data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +3 -3
  35. data/lib/govuk_publishing_components/presenters/button_helper.rb +9 -2
  36. data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb +25 -1
  37. data/lib/govuk_publishing_components/version.rb +1 -1
  38. data/node_modules/axe-core/axe.js +4559 -4673
  39. data/node_modules/axe-core/axe.min.js +2 -2
  40. data/node_modules/axe-core/package.json +2 -2
  41. data/node_modules/axe-core/sri-history.json +4 -0
  42. data/node_modules/govuk-frontend/README.md +1 -2
  43. data/node_modules/govuk-frontend/govuk/all.js +1398 -273
  44. data/node_modules/govuk-frontend/govuk/common/closest-attribute-value.js +70 -0
  45. data/node_modules/govuk-frontend/govuk/common/index.js +172 -0
  46. data/node_modules/govuk-frontend/govuk/common/normalise-dataset.js +373 -0
  47. data/node_modules/govuk-frontend/govuk/common.js +138 -3
  48. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +753 -25
  49. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +54 -22
  50. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +36 -0
  51. data/node_modules/govuk-frontend/govuk/components/accordion/template.njk +7 -1
  52. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -12
  53. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +22 -22
  54. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +23 -5
  55. data/node_modules/govuk-frontend/govuk/components/button/button.js +365 -107
  56. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +85 -66
  57. data/node_modules/govuk-frontend/govuk/components/button/template.njk +1 -1
  58. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +9 -0
  59. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1033 -121
  60. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +112 -36
  61. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +42 -0
  62. data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +27 -3
  63. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +30 -2
  64. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +96 -93
  65. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +46 -46
  66. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +50 -50
  67. data/node_modules/govuk-frontend/govuk/components/details/details.js +43 -13
  68. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +20 -20
  69. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +20 -20
  70. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +268 -6
  71. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +44 -35
  72. data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +25 -21
  73. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +51 -39
  74. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +26 -26
  75. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +1 -1
  76. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +46 -46
  77. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +2 -2
  78. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +93 -38
  79. data/node_modules/govuk-frontend/govuk/components/header/header.js +6 -0
  80. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +8 -2
  81. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -2
  82. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +12 -12
  83. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +80 -80
  84. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +12 -12
  85. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +34 -34
  86. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +56 -46
  87. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +252 -2
  88. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +1 -1
  89. data/node_modules/govuk-frontend/govuk/components/pagination/_index.scss +10 -7
  90. data/node_modules/govuk-frontend/govuk/components/pagination/fixtures.json +33 -26
  91. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +18 -18
  92. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +14 -14
  93. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +94 -91
  94. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +30 -2
  95. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +32 -32
  96. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +22 -20
  97. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +10 -4
  98. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +50 -50
  99. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +1 -1
  100. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +40 -40
  101. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +29 -29
  102. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +28 -0
  103. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -28
  104. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +34 -34
  105. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +14 -14
  106. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +1 -1
  107. data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +2 -2
  108. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +6 -6
  109. data/node_modules/govuk-frontend/govuk/i18n.js +390 -0
  110. data/node_modules/govuk-frontend/govuk/macros/i18n.njk +15 -0
  111. data/node_modules/govuk-frontend/govuk/settings/_all.scss +1 -0
  112. data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +12 -0
  113. data/node_modules/govuk-frontend/govuk/settings/_compatibility.scss +26 -0
  114. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +23 -0
  115. data/node_modules/govuk-frontend/govuk/settings/_typography-responsive.scss +12 -0
  116. data/node_modules/govuk-frontend/govuk/settings/_warnings.scss +53 -0
  117. data/node_modules/govuk-frontend/govuk/tools/_compatibility.scss +20 -6
  118. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Date/now.js +21 -0
  119. data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/dataset.js +300 -0
  120. data/node_modules/govuk-frontend/govuk/vendor/polyfills/String/prototype/trim.js +21 -0
  121. data/node_modules/govuk-frontend/govuk-esm/all.mjs +50 -27
  122. data/node_modules/govuk-frontend/govuk-esm/common/closest-attribute-value.mjs +15 -0
  123. data/node_modules/govuk-frontend/govuk-esm/common/index.mjs +159 -0
  124. data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs +58 -0
  125. data/node_modules/govuk-frontend/govuk-esm/common.mjs +6 -28
  126. data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs +113 -43
  127. data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs +67 -30
  128. data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs +325 -123
  129. data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs +9 -3
  130. data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs +22 -8
  131. data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs +48 -6
  132. data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs +6 -0
  133. data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs +32 -2
  134. data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs +9 -3
  135. data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs +10 -4
  136. data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs +8 -2
  137. data/node_modules/govuk-frontend/govuk-esm/i18n.mjs +380 -0
  138. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Date/now.mjs +13 -0
  139. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/dataset.mjs +68 -0
  140. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/String/prototype/trim.mjs +13 -0
  141. data/node_modules/govuk-frontend/govuk-prototype-kit/init.js +7 -0
  142. data/node_modules/govuk-frontend/govuk-prototype-kit/init.scss +12 -0
  143. data/node_modules/govuk-frontend/govuk-prototype-kit.config.json +138 -7
  144. data/node_modules/govuk-frontend/package.json +1 -1
  145. metadata +22 -3
@@ -24,8 +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 \n <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>",
28
- "hidden": false
27
+ "hidden": false,
28
+ "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 \n <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>"
29
29
  },
30
30
  {
31
31
  "name": "with additional descriptions",
@@ -56,8 +56,8 @@
56
56
  }
57
57
  ]
58
58
  },
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 \n <p class=\"govuk-body\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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 (wrapped in span)</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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>",
60
- "hidden": false
59
+ "hidden": false,
60
+ "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 \n <p class=\"govuk-body\">\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n</p>\n<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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 (wrapped in span)</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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>"
61
61
  },
62
62
  {
63
63
  "name": "with long content and description",
@@ -88,8 +88,8 @@
88
88
  }
89
89
  ]
90
90
  },
91
- "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\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-long-content-and-description-heading-1\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n </div>\n \n </div>\n <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-1\">\n \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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-long-content-and-description-heading-2\">\n Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n </div>\n \n </div>\n <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-2\">\n \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>",
92
- "hidden": false
91
+ "hidden": false,
92
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-long-content-and-description\">\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-long-content-and-description-heading-1\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-1\">\n Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n </div>\n \n </div>\n <div id=\"with-long-content-and-description-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-1\">\n \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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-long-content-and-description-heading-2\">\n Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n </span>\n </h2>\n \n <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-long-content-and-description-summary-2\">\n <span class=\"govuk-!-font-weight-regular\">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>\n </div>\n \n </div>\n <div id=\"with-long-content-and-description-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-long-content-and-description-heading-2\">\n \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>"
93
93
  },
94
94
  {
95
95
  "name": "with one section open",
@@ -115,8 +115,8 @@
115
115
  }
116
116
  ]
117
117
  },
118
- "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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>",
119
- "hidden": false
118
+ "hidden": false,
119
+ "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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>"
120
120
  },
121
121
  {
122
122
  "name": "with all sections already open",
@@ -143,8 +143,8 @@
143
143
  }
144
144
  ]
145
145
  },
146
- "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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>",
147
- "hidden": false
146
+ "hidden": false,
147
+ "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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 1</li>\n</ul>\n\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 \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>"
148
148
  },
149
149
  {
150
150
  "name": "with focusable elements inside",
@@ -169,8 +169,40 @@
169
169
  }
170
170
  ]
171
171
  },
172
- "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 \n <a class=\"govuk-link\" href=\"#\">Link A</a>\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-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 \n <a class=\"govuk-link\" href=\"#\">Link B</a>\n \n </div>\n </div>\n \n \n</div>",
173
- "hidden": false
172
+ "hidden": false,
173
+ "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 \n <a class=\"govuk-link\" href=\"#\">Link A</a>\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-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 \n <a class=\"govuk-link\" href=\"#\">Link B</a>\n \n </div>\n </div>\n \n \n</div>"
174
+ },
175
+ {
176
+ "name": "with translations",
177
+ "options": {
178
+ "id": "with-translations",
179
+ "hideAllSectionsText": "Collapse all sections",
180
+ "showAllSectionsText": "Expand all sections",
181
+ "hideSectionText": "Collapse",
182
+ "hideSectionAriaLabelText": "Collapse this section",
183
+ "showSectionText": "Expand",
184
+ "showSectionAriaLabelText": "Expand this section",
185
+ "items": [
186
+ {
187
+ "heading": {
188
+ "text": "Section A"
189
+ },
190
+ "content": {
191
+ "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
192
+ }
193
+ },
194
+ {
195
+ "heading": {
196
+ "text": "Section B"
197
+ },
198
+ "content": {
199
+ "html": "<ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n"
200
+ }
201
+ }
202
+ ]
203
+ },
204
+ "hidden": false,
205
+ "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-translations\" data-i18n.hide-all-sections=\"Collapse all sections\" data-i18n.hide-section=\"Collapse\" data-i18n.hide-section-aria-label=\"Collapse this section\" data-i18n.show-all-sections=\"Expand all sections\" data-i18n.show-section=\"Expand\" data-i18n.show-section-aria-label=\"Expand this section\">\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-translations-heading-1\">\n Section A\n </span>\n </h2>\n \n </div>\n <div id=\"with-translations-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-1\">\n \n <p class=\"govuk-body\">We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.</p>\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-translations-heading-2\">\n Section B\n </span>\n </h2>\n \n </div>\n <div id=\"with-translations-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-translations-heading-2\">\n \n <ul class=\"govuk-list govuk-list--bullet\">\n <li>Example item 2</li>\n</ul>\n\n \n </div>\n </div>\n \n \n</div>"
174
206
  },
175
207
  {
176
208
  "name": "classes",
@@ -188,8 +220,8 @@
188
220
  }
189
221
  ]
190
222
  },
191
- "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>",
192
- "hidden": true
223
+ "hidden": true,
224
+ "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>"
193
225
  },
194
226
  {
195
227
  "name": "attributes",
@@ -209,8 +241,8 @@
209
241
  }
210
242
  ]
211
243
  },
212
- "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>",
213
- "hidden": true
244
+ "hidden": true,
245
+ "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>"
214
246
  },
215
247
  {
216
248
  "name": "custom heading level",
@@ -228,8 +260,8 @@
228
260
  }
229
261
  ]
230
262
  },
231
- "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>",
232
- "hidden": true
263
+ "hidden": true,
264
+ "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>"
233
265
  },
234
266
  {
235
267
  "name": "heading html",
@@ -246,8 +278,8 @@
246
278
  }
247
279
  ]
248
280
  },
249
- "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>",
250
- "hidden": true
281
+ "hidden": true,
282
+ "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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>"
251
283
  },
252
284
  {
253
285
  "name": "with falsey values",
@@ -275,8 +307,8 @@
275
307
  }
276
308
  ]
277
309
  },
278
- "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 \n <p class=\"govuk-body\">Some content</p>\n \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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>",
279
- "hidden": true
310
+ "hidden": true,
311
+ "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 \n <p class=\"govuk-body\">Some content</p>\n \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 \n <p class=\"govuk-body\">Some content</p>\n \n </div>\n </div>\n \n \n</div>"
280
312
  }
281
313
  ]
282
314
  }
@@ -23,6 +23,42 @@
23
23
  "required": false,
24
24
  "description": "HTML attributes (for example data attributes) to add to the accordion."
25
25
  },
26
+ {
27
+ "name": "hideAllSectionsText",
28
+ "type": "string",
29
+ "required": false,
30
+ "description": "The text content of the 'Hide all sections' button at the top of the accordion when all sections are expanded."
31
+ },
32
+ {
33
+ "name": "hideSectionText",
34
+ "type": "string",
35
+ "required": false,
36
+ "description": "The text content of the 'Hide' button within each section of the accordion, which is visible when the section is expanded."
37
+ },
38
+ {
39
+ "name": "hideSectionAriaLabelText",
40
+ "type": "string",
41
+ "required": false,
42
+ "description": "Text made available to assistive technologies, like screen-readers, as the final part of the toggle's accessible name when the section is expanded. Defaults to 'Hide this section'."
43
+ },
44
+ {
45
+ "name": "showAllSectionsText",
46
+ "type": "string",
47
+ "required": false,
48
+ "description": "The text content of the 'Show all sections' button at the top of the accordion when at least one section is collapsed."
49
+ },
50
+ {
51
+ "name": "showSectionText",
52
+ "type": "string",
53
+ "required": false,
54
+ "description": "The text content of the 'Show' button within each section of the accordion, which is visible when the section is collapsed."
55
+ },
56
+ {
57
+ "name": "showSectionAriaLabelText",
58
+ "type": "string",
59
+ "required": false,
60
+ "description": "Text made available to assistive technologies, like screen-readers, as the final part of the toggle's accessible name when the section is collapsed. Defaults to 'Show this section'."
61
+ },
26
62
  {
27
63
  "name": "items",
28
64
  "type": "array",
@@ -2,7 +2,13 @@
2
2
  {% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
3
3
 
4
4
  <div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}" data-module="govuk-accordion" id="{{ id }}"
5
- {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
5
+ {%- if params.hideAllSectionsText %} data-i18n.hide-all-sections="{{ params.hideAllSectionsText | escape }}"{% endif %}
6
+ {%- if params.hideSectionText %} data-i18n.hide-section="{{ params.hideSectionText | escape }}"{% endif %}
7
+ {%- if params.hideSectionAriaLabelText %} data-i18n.hide-section-aria-label="{{ params.hideSectionAriaLabelText | escape }}"{% endif %}
8
+ {%- if params.showAllSectionsText %} data-i18n.show-all-sections="{{ params.showAllSectionsText | escape }}"{% endif %}
9
+ {%- if params.showSectionText %} data-i18n.show-section="{{ params.showSectionText | escape }}"{% endif %}
10
+ {%- if params.showSectionAriaLabelText %} data-i18n.show-section-aria-label="{{ params.showSectionAriaLabelText | escape }}"{% endif %}
11
+ {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
6
12
  {% for item in params.items %}
7
13
  {% if item %}
8
14
  <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">
@@ -6,8 +6,8 @@
6
6
  "options": {
7
7
  "href": "#"
8
8
  },
9
- "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>",
10
- "hidden": false
9
+ "hidden": false,
10
+ "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>"
11
11
  },
12
12
  {
13
13
  "name": "with custom text",
@@ -15,8 +15,8 @@
15
15
  "href": "#",
16
16
  "text": "Back to home"
17
17
  },
18
- "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>",
19
- "hidden": false
18
+ "hidden": false,
19
+ "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>"
20
20
  },
21
21
  {
22
22
  "name": "classes",
@@ -24,8 +24,8 @@
24
24
  "classes": "app-back-link--custom-class",
25
25
  "href": "#"
26
26
  },
27
- "html": "<a href=\"#\" class=\"govuk-back-link app-back-link--custom-class\">Back</a>",
28
- "hidden": true
27
+ "hidden": true,
28
+ "html": "<a href=\"#\" class=\"govuk-back-link app-back-link--custom-class\">Back</a>"
29
29
  },
30
30
  {
31
31
  "name": "html as text",
@@ -33,8 +33,8 @@
33
33
  "text": "<b>Home</b>",
34
34
  "href": "#"
35
35
  },
36
- "html": "<a href=\"#\" class=\"govuk-back-link\">&lt;b&gt;Home&lt;/b&gt;</a>",
37
- "hidden": true
36
+ "hidden": true,
37
+ "html": "<a href=\"#\" class=\"govuk-back-link\">&lt;b&gt;Home&lt;/b&gt;</a>"
38
38
  },
39
39
  {
40
40
  "name": "html",
@@ -42,8 +42,8 @@
42
42
  "html": "<b>Back</b>",
43
43
  "href": "#"
44
44
  },
45
- "html": "<a href=\"#\" class=\"govuk-back-link\"><b>Back</b></a>",
46
- "hidden": true
45
+ "hidden": true,
46
+ "html": "<a href=\"#\" class=\"govuk-back-link\"><b>Back</b></a>"
47
47
  },
48
48
  {
49
49
  "name": "attributes",
@@ -55,8 +55,8 @@
55
55
  "aria-label": "Back to home"
56
56
  }
57
57
  },
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
58
+ "hidden": true,
59
+ "html": "<a href=\"#\" class=\"govuk-back-link\" data-test=\"attribute\" aria-label=\"Back to home\"><b>Back to home</b></a>"
60
60
  }
61
61
  ]
62
62
  }
@@ -15,8 +15,8 @@
15
15
  }
16
16
  ]
17
17
  },
18
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n </ol>\n</div>",
19
- "hidden": false
18
+ "hidden": false,
19
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n </ol>\n</div>"
20
20
  },
21
21
  {
22
22
  "name": "with one level",
@@ -28,8 +28,8 @@
28
28
  }
29
29
  ]
30
30
  },
31
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n </ol>\n</div>",
32
- "hidden": false
31
+ "hidden": false,
32
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n </ol>\n</div>"
33
33
  },
34
34
  {
35
35
  "name": "with multiple levels",
@@ -53,8 +53,8 @@
53
53
  }
54
54
  ]
55
55
  },
56
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n </li>\n \n \n </ol>\n</div>",
57
- "hidden": false
56
+ "hidden": false,
57
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\">Section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section\">Sub-section</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section/sub-section/sub-sub-section\">Sub Sub-section</a>\n </li>\n \n \n </ol>\n</div>"
58
58
  },
59
59
  {
60
60
  "name": "without the home section",
@@ -70,8 +70,8 @@
70
70
  }
71
71
  ]
72
72
  },
73
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n </li>\n \n \n </ol>\n</div>",
74
- "hidden": false
73
+ "hidden": false,
74
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual\">Service Manual</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/service-manual/agile-delivery\">Agile Delivery</a>\n </li>\n \n \n </ol>\n</div>"
75
75
  },
76
76
  {
77
77
  "name": "with last breadcrumb as current page",
@@ -90,8 +90,8 @@
90
90
  }
91
91
  ]
92
92
  },
93
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n \n \n </ol>\n</div>",
94
- "hidden": false
93
+ "hidden": false,
94
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/browse/abroad\">Passports, travel and living abroad</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Travel abroad</li>\n \n \n </ol>\n</div>"
95
95
  },
96
96
  {
97
97
  "name": "with collapse on mobile",
@@ -112,8 +112,8 @@
112
112
  }
113
113
  ]
114
114
  },
115
- "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n </li>\n \n \n </ol>\n</div>",
116
- "hidden": false
115
+ "hidden": false,
116
+ "html": "<div class=\"govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/\">Home</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education\">Education, training and skills</a>\n </li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/education/special-educational-needs-and-disability-send-and-high-needs\">Special educational needs and disability (SEND) and high needs</a>\n </li>\n \n \n </ol>\n</div>"
117
117
  },
118
118
  {
119
119
  "name": "classes",
@@ -125,8 +125,8 @@
125
125
  }
126
126
  ]
127
127
  },
128
- "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>",
129
- "hidden": true
128
+ "hidden": true,
129
+ "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>"
130
130
  },
131
131
  {
132
132
  "name": "attributes",
@@ -141,8 +141,8 @@
141
141
  }
142
142
  ]
143
143
  },
144
- "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>",
145
- "hidden": true
144
+ "hidden": true,
145
+ "html": "<div class=\"govuk-breadcrumbs\" id=\"my-navigation\" role=\"navigation\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n \n \n </ol>\n</div>"
146
146
  },
147
147
  {
148
148
  "name": "item attributes",
@@ -158,8 +158,8 @@
158
158
  }
159
159
  ]
160
160
  },
161
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n </li>\n \n \n </ol>\n</div>",
162
- "hidden": true
161
+ "hidden": true,
162
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Section 1</a>\n </li>\n \n \n </ol>\n</div>"
163
163
  },
164
164
  {
165
165
  "name": "html as text",
@@ -170,8 +170,8 @@
170
170
  }
171
171
  ]
172
172
  },
173
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n \n \n </ol>\n</div>",
174
- "hidden": true
173
+ "hidden": true,
174
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">&lt;span&gt;Section 1&lt;/span&gt;</li>\n \n \n </ol>\n</div>"
175
175
  },
176
176
  {
177
177
  "name": "html",
@@ -186,8 +186,8 @@
186
186
  }
187
187
  ]
188
188
  },
189
- "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n </li>\n \n \n </ol>\n</div>",
190
- "hidden": true
189
+ "hidden": true,
190
+ "html": "<div class=\"govuk-breadcrumbs\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n \n <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\"><em>Section 1</em></li>\n \n \n \n <li class=\"govuk-breadcrumbs__list-item\">\n <a class=\"govuk-breadcrumbs__link\" href=\"/section-2\"><em>Section 2</em></a>\n </li>\n \n \n </ol>\n</div>"
191
191
  }
192
192
  ]
193
193
  }
@@ -1,8 +1,26 @@
1
+ ////
2
+ /// @group components/button
3
+ ////
4
+
5
+ /// Button component background colour
6
+ ///
7
+ /// @type Colour
8
+ /// @access public
9
+
10
+ $govuk-button-background-colour: govuk-colour("green", $legacy: #00823b) !default;
11
+
12
+ /// Button component text colour
13
+ ///
14
+ /// @type Colour
15
+ /// @access public
16
+
17
+ $govuk-button-text-colour: govuk-colour("white") !default;
18
+
1
19
  @include govuk-exports("govuk/component/button") {
2
- $govuk-button-colour: govuk-colour("green", $legacy: #00823b);
20
+ $govuk-button-colour: $govuk-button-background-colour;
3
21
  $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
4
22
  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
5
- $govuk-button-text-colour: govuk-colour("white");
23
+ $govuk-button-text-colour: $govuk-button-text-colour;
6
24
 
7
25
  // Secondary button variables
8
26
  $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
@@ -101,7 +119,7 @@
101
119
  // we need to override the text colour for that combination of selectors so
102
120
  // so that unvisited links styled as buttons do not end up with dark blue
103
121
  // text when focussed.
104
- @include govuk-compatibility(govuk_template) {
122
+ @include _govuk-compatibility(govuk_template) {
105
123
  &:link:focus {
106
124
  color: $govuk-button-text-colour;
107
125
  }
@@ -184,7 +202,7 @@
184
202
  // we need to override the text colour for that combination of selectors so
185
203
  // so that unvisited links styled as buttons do not end up with dark blue
186
204
  // text when focussed.
187
- @include govuk-compatibility(govuk_template) {
205
+ @include _govuk-compatibility(govuk_template) {
188
206
  &:link:focus {
189
207
  color: $govuk-secondary-button-text-colour;
190
208
  }
@@ -216,7 +234,7 @@
216
234
  // we need to override the text colour for that combination of selectors so
217
235
  // so that unvisited links styled as buttons do not end up with dark blue
218
236
  // text when focussed.
219
- @include govuk-compatibility(govuk_template) {
237
+ @include _govuk-compatibility(govuk_template) {
220
238
  &:link:focus {
221
239
  color: $govuk-warning-button-text-colour;
222
240
  }