govuk_publishing_components 23.13.0 → 24.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (129) 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/accordion.js +286 -4
  6. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +44 -39
  8. data/app/assets/javascripts/govuk_publishing_components/vendor/polyfills/common.js +8 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +302 -14
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  16. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +112 -47
  17. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  18. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  19. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +16 -9
  20. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  21. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  22. data/app/views/govuk_publishing_components/audit/show.html.erb +26 -26
  23. data/app/views/govuk_publishing_components/components/_accordion.html.erb +13 -20
  24. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  25. data/app/views/govuk_publishing_components/components/_document_list.html.erb +12 -2
  26. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  27. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  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/accordion.yml +8 -3
  30. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +65 -1
  31. data/app/views/govuk_publishing_components/components/docs/document_list.yml +50 -7
  32. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  33. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +11 -0
  34. data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +9 -4
  36. data/config/initializers/assets.rb +3 -1
  37. data/config/locales/cy.yml +6 -1
  38. data/config/locales/en.yml +8 -3
  39. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +183 -2
  40. data/lib/govuk_publishing_components/version.rb +1 -1
  41. data/node_modules/govuk-frontend/govuk/all.js +58 -1
  42. data/node_modules/govuk-frontend/govuk/components/_all.scss +2 -0
  43. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  44. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  45. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  46. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  47. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  48. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  49. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  50. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  51. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  52. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  53. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +85 -15
  54. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  55. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  56. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  57. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  58. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  59. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  60. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  61. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  62. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  63. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  64. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  65. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  66. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +35 -15
  67. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  68. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  69. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  70. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  71. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  72. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  73. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  74. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  75. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  76. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  77. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  78. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  79. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  80. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  81. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  82. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  83. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  84. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  85. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  86. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  87. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  88. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  89. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  90. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  91. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  92. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  93. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  94. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  95. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  96. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  97. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  98. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  99. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  100. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  101. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  102. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  103. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  104. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  105. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  106. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  107. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  108. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  109. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  110. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  111. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  112. data/node_modules/govuk-frontend/package.json +1 -1
  113. metadata +21 -18
  114. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  115. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  116. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  117. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  118. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  119. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  120. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  121. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  122. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  123. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  124. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  125. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  126. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
  127. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  128. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  129. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -6,6 +6,7 @@
6
6
  @import "button/index";
7
7
  @import "checkboxes/index";
8
8
  @import "character-count/index";
9
+ @import "cookie-banner/index";
9
10
  @import "summary-list/index";
10
11
  @import "date-input/index";
11
12
  @import "details/index";
@@ -19,6 +20,7 @@
19
20
  @import "input/index";
20
21
  @import "inset-text/index";
21
22
  @import "label/index";
23
+ @import "notification-banner/index";
22
24
  @import "panel/index";
23
25
  @import "phase-banner/index";
24
26
  @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",
@@ -15,7 +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>"
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
19
20
  },
20
21
  {
21
22
  "name": "with one level",
@@ -27,7 +28,8 @@
27
28
  }
28
29
  ]
29
30
  },
30
- "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>"
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
33
  },
32
34
  {
33
35
  "name": "with multiple levels",
@@ -51,7 +53,8 @@
51
53
  }
52
54
  ]
53
55
  },
54
- "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>"
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
55
58
  },
56
59
  {
57
60
  "name": "without the home section",
@@ -67,7 +70,8 @@
67
70
  }
68
71
  ]
69
72
  },
70
- "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>"
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
71
75
  },
72
76
  {
73
77
  "name": "with last breadcrumb as current page",
@@ -86,7 +90,8 @@
86
90
  }
87
91
  ]
88
92
  },
89
- "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>"
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
90
95
  },
91
96
  {
92
97
  "name": "with collapse on mobile",
@@ -107,14 +112,21 @@
107
112
  }
108
113
  ]
109
114
  },
110
- "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>"
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
111
117
  },
112
118
  {
113
119
  "name": "classes",
114
120
  "options": {
115
- "classes": "app-breadcrumbs--custom-modifier"
121
+ "classes": "app-breadcrumbs--custom-modifier",
122
+ "items": [
123
+ {
124
+ "text": "Home"
125
+ }
126
+ ]
116
127
  },
117
- "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n </ol>\n</div>"
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
118
130
  },
119
131
  {
120
132
  "name": "attributes",
@@ -122,9 +134,15 @@
122
134
  "attributes": {
123
135
  "id": "my-navigation",
124
136
  "role": "navigation"
125
- }
137
+ },
138
+ "items": [
139
+ {
140
+ "text": "Home"
141
+ }
142
+ ]
126
143
  },
127
- "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n <ol class=\"govuk-breadcrumbs__list\">\n \n </ol>\n</div>"
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
128
146
  },
129
147
  {
130
148
  "name": "item attributes",
@@ -140,7 +158,8 @@
140
158
  }
141
159
  ]
142
160
  },
143
- "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>"
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
144
163
  },
145
164
  {
146
165
  "name": "html as text",
@@ -151,7 +170,8 @@
151
170
  }
152
171
  ]
153
172
  },
154
- "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>"
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
155
175
  },
156
176
  {
157
177
  "name": "html",
@@ -166,7 +186,8 @@
166
186
  }
167
187
  ]
168
188
  },
169
- "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>"
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
170
191
  }
171
192
  ]
172
193
  }
@@ -26,6 +26,7 @@
26
26
  {
27
27
  "name": "attributes",
28
28
  "type": "object",
29
+ "required": false,
29
30
  "description": "HTML attributes (for example data attributes) to add to the individual crumb."
30
31
  }
31
32
  ]
@@ -1,8 +1,8 @@
1
1
  {# Set classes for this component #}
2
- {%- set classNames = "govuk-breadcrumbs " -%}
2
+ {%- set classNames = "govuk-breadcrumbs" -%}
3
3
 
4
4
  {% if params.classes %}
5
- {% set classNames = classNames + params.classes %}
5
+ {% set classNames = classNames + " " + params.classes %}
6
6
  {% endif -%}
7
7
 
8
8
  {% if params.collapseOnMobile %}
@@ -29,6 +29,8 @@
29
29
  position: relative;
30
30
  width: 100%;
31
31
  margin-top: 0;
32
+ margin-right: 0;
33
+ margin-left: 0;
32
34
  @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
33
35
  padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
34
36
  border: $govuk-border-width-form-element solid transparent;
@@ -6,7 +6,8 @@
6
6
  "options": {
7
7
  "text": "Save and continue"
8
8
  },
9
- "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n Save and continue\n</button>"
9
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n Save and continue\n</button>",
10
+ "hidden": false
10
11
  },
11
12
  {
12
13
  "name": "disabled",
@@ -14,7 +15,8 @@
14
15
  "text": "Disabled button",
15
16
  "disabled": true
16
17
  },
17
- "html": "<button disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled button\n</button>"
18
+ "html": "<button disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled button\n</button>",
19
+ "hidden": false
18
20
  },
19
21
  {
20
22
  "name": "link",
@@ -22,7 +24,8 @@
22
24
  "text": "Link button",
23
25
  "href": "/"
24
26
  },
25
- "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Link button\n</a>"
27
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Link button\n</a>",
28
+ "hidden": false
26
29
  },
27
30
  {
28
31
  "name": "link disabled",
@@ -31,7 +34,8 @@
31
34
  "href": "/",
32
35
  "disabled": true
33
36
  },
34
- "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled link button\n</a>"
37
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled link button\n</a>",
38
+ "hidden": false
35
39
  },
36
40
  {
37
41
  "name": "start link",
@@ -40,7 +44,8 @@
40
44
  "href": "/",
41
45
  "isStartButton": true
42
46
  },
43
- "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n Start now link button\n <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n </svg></a>"
47
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n Start now link button\n <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n </svg></a>",
48
+ "hidden": false
44
49
  },
45
50
  {
46
51
  "name": "input",
@@ -49,7 +54,8 @@
49
54
  "name": "start-now",
50
55
  "text": "Start now"
51
56
  },
52
- "html": "<input value=\"Start now\" type=\"submit\" name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">"
57
+ "html": "<input value=\"Start now\" type=\"submit\" name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">",
58
+ "hidden": false
53
59
  },
54
60
  {
55
61
  "name": "input disabled",
@@ -58,7 +64,8 @@
58
64
  "text": "Explicit input button disabled",
59
65
  "disabled": true
60
66
  },
61
- "html": "<input value=\"Explicit input button disabled\" type=\"submit\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">"
67
+ "html": "<input value=\"Explicit input button disabled\" type=\"submit\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">",
68
+ "hidden": false
62
69
  },
63
70
  {
64
71
  "name": "prevent double click",
@@ -66,7 +73,8 @@
66
73
  "text": "Submit",
67
74
  "preventDoubleClick": true
68
75
  },
69
- "html": "<button data-prevent-double-click=\"true\" class=\"govuk-button\" data-module=\"govuk-button\">\n Submit\n</button>"
76
+ "html": "<button data-prevent-double-click=\"true\" class=\"govuk-button\" data-module=\"govuk-button\">\n Submit\n</button>",
77
+ "hidden": false
70
78
  },
71
79
  {
72
80
  "name": "with active state",
@@ -75,7 +83,8 @@
75
83
  "text": "Active",
76
84
  "classes": ":active"
77
85
  },
78
- "html": "<button name=\"active\" class=\"govuk-button :active\" data-module=\"govuk-button\">\n Active\n</button>"
86
+ "html": "<button name=\"active\" class=\"govuk-button :active\" data-module=\"govuk-button\">\n Active\n</button>",
87
+ "hidden": false
79
88
  },
80
89
  {
81
90
  "name": "with hover state",
@@ -84,7 +93,8 @@
84
93
  "text": "Hovered",
85
94
  "classes": ":hover"
86
95
  },
87
- "html": "<button name=\"hover\" class=\"govuk-button :hover\" data-module=\"govuk-button\">\n Hovered\n</button>"
96
+ "html": "<button name=\"hover\" class=\"govuk-button :hover\" data-module=\"govuk-button\">\n Hovered\n</button>",
97
+ "hidden": false
88
98
  },
89
99
  {
90
100
  "name": "with focus state",
@@ -93,7 +103,8 @@
93
103
  "text": "Focussed",
94
104
  "classes": ":focus"
95
105
  },
96
- "html": "<button name=\"focus\" class=\"govuk-button :focus\" data-module=\"govuk-button\">\n Focussed\n</button>"
106
+ "html": "<button name=\"focus\" class=\"govuk-button :focus\" data-module=\"govuk-button\">\n Focussed\n</button>",
107
+ "hidden": false
97
108
  },
98
109
  {
99
110
  "name": "Secondary",
@@ -102,7 +113,8 @@
102
113
  "text": "Secondary button",
103
114
  "classes": "govuk-button--secondary"
104
115
  },
105
- "html": "<button name=\"secondary\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button\n</button>"
116
+ "html": "<button name=\"secondary\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button\n</button>",
117
+ "hidden": false
106
118
  },
107
119
  {
108
120
  "name": "Secondary disabled",
@@ -112,7 +124,8 @@
112
124
  "classes": "govuk-button--secondary",
113
125
  "disabled": true
114
126
  },
115
- "html": "<button name=\"secondary\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--secondary govuk-button--disabled\" data-module=\"govuk-button\">\n Secondary button disabled\n</button>"
127
+ "html": "<button name=\"secondary\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--secondary govuk-button--disabled\" data-module=\"govuk-button\">\n Secondary button disabled\n</button>",
128
+ "hidden": false
116
129
  },
117
130
  {
118
131
  "name": "Secondary link",
@@ -122,7 +135,8 @@
122
135
  "href": "/",
123
136
  "classes": "govuk-button--secondary"
124
137
  },
125
- "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button\n</a>"
138
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button\n</a>",
139
+ "hidden": false
126
140
  },
127
141
  {
128
142
  "name": "Warning",
@@ -131,7 +145,8 @@
131
145
  "text": "Warning button",
132
146
  "classes": "govuk-button--warning"
133
147
  },
134
- "html": "<button name=\"Warning\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button\n</button>"
148
+ "html": "<button name=\"Warning\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button\n</button>",
149
+ "hidden": false
135
150
  },
136
151
  {
137
152
  "name": "Warning disabled",
@@ -141,7 +156,8 @@
141
156
  "classes": "govuk-button--warning",
142
157
  "disabled": true
143
158
  },
144
- "html": "<button name=\"warning\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--warning govuk-button--disabled\" data-module=\"govuk-button\">\n Warning button disabled\n</button>"
159
+ "html": "<button name=\"warning\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--warning govuk-button--disabled\" data-module=\"govuk-button\">\n Warning button disabled\n</button>",
160
+ "hidden": false
145
161
  },
146
162
  {
147
163
  "name": "Warning link",
@@ -151,88 +167,107 @@
151
167
  "href": "/",
152
168
  "classes": "govuk-button--warning"
153
169
  },
154
- "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button\n</a>"
170
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button\n</a>",
171
+ "hidden": false
155
172
  },
156
173
  {
157
174
  "name": "attributes",
158
175
  "options": {
159
176
  "element": "button",
177
+ "text": "Submit",
160
178
  "attributes": {
161
179
  "aria-controls": "example-id",
162
180
  "data-tracking-dimension": 123
163
181
  }
164
182
  },
165
- "html": "<button class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n \n</button>"
183
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n Submit\n</button>",
184
+ "hidden": true
166
185
  },
167
186
  {
168
187
  "name": "link attributes",
169
188
  "options": {
170
189
  "element": "a",
190
+ "text": "Submit",
171
191
  "attributes": {
172
192
  "aria-controls": "example-id",
173
193
  "data-tracking-dimension": 123
174
194
  }
175
195
  },
176
- "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n \n</a>"
196
+ "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n Submit\n</a>",
197
+ "hidden": true
177
198
  },
178
199
  {
179
200
  "name": "input attributes",
180
201
  "options": {
181
202
  "element": "input",
203
+ "text": "Submit",
182
204
  "attributes": {
183
205
  "aria-controls": "example-id",
184
206
  "data-tracking-dimension": 123
185
207
  }
186
208
  },
187
- "html": "<input value=\"\" type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">"
209
+ "html": "<input value=\"Submit\" type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">",
210
+ "hidden": true
188
211
  },
189
212
  {
190
213
  "name": "classes",
191
214
  "options": {
215
+ "text": "Submit",
192
216
  "element": "button",
193
217
  "classes": "app-button--custom-modifier"
194
218
  },
195
- "html": "<button class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n \n</button>"
219
+ "html": "<button class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n Submit\n</button>",
220
+ "hidden": true
196
221
  },
197
222
  {
198
223
  "name": "link classes",
199
224
  "options": {
225
+ "text": "Submit",
200
226
  "element": "a",
201
227
  "classes": "app-button--custom-modifier"
202
228
  },
203
- "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n \n</a>"
229
+ "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n Submit\n</a>",
230
+ "hidden": true
204
231
  },
205
232
  {
206
233
  "name": "input classes",
207
234
  "options": {
235
+ "text": "Submit",
208
236
  "element": "input",
209
237
  "classes": "app-button--custom-modifier"
210
238
  },
211
- "html": "<input value=\"\" type=\"submit\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">"
239
+ "html": "<input value=\"Submit\" type=\"submit\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">",
240
+ "hidden": true
212
241
  },
213
242
  {
214
243
  "name": "name",
215
244
  "options": {
245
+ "text": "Submit",
216
246
  "element": "button",
217
247
  "name": "start-now"
218
248
  },
219
- "html": "<button name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
249
+ "html": "<button name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">\n Submit\n</button>",
250
+ "hidden": true
220
251
  },
221
252
  {
222
253
  "name": "type",
223
254
  "options": {
255
+ "text": "Submit",
224
256
  "element": "button",
225
257
  "type": "button"
226
258
  },
227
- "html": "<button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
259
+ "html": "<button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Submit\n</button>",
260
+ "hidden": true
228
261
  },
229
262
  {
230
263
  "name": "input type",
231
264
  "options": {
265
+ "text": "Submit",
232
266
  "element": "input",
233
267
  "type": "button"
234
268
  },
235
- "html": "<input value=\"\" type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">"
269
+ "html": "<input value=\"Submit\" type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">",
270
+ "hidden": true
236
271
  },
237
272
  {
238
273
  "name": "explicit link",
@@ -241,35 +276,43 @@
241
276
  "href": "/",
242
277
  "text": "Continue"
243
278
  },
244
- "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Continue\n</a>"
279
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Continue\n</a>",
280
+ "hidden": true
245
281
  },
246
282
  {
247
283
  "name": "no href",
248
284
  "options": {
285
+ "text": "Submit",
249
286
  "element": "a"
250
287
  },
251
- "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</a>"
288
+ "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Submit\n</a>",
289
+ "hidden": true
252
290
  },
253
291
  {
254
292
  "name": "value",
255
293
  "options": {
294
+ "text": "Submit",
256
295
  "element": "button",
257
296
  "value": "start"
258
297
  },
259
- "html": "<button value=\"start\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
298
+ "html": "<button value=\"start\" class=\"govuk-button\" data-module=\"govuk-button\">\n Submit\n</button>",
299
+ "hidden": true
260
300
  },
261
301
  {
262
302
  "name": "html",
263
303
  "options": {
304
+ "text": "Submit",
264
305
  "element": "button",
265
306
  "html": "Start <em>now</em>"
266
307
  },
267
- "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n Start <em>now</em>\n</button>"
308
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n Start <em>now</em>\n</button>",
309
+ "hidden": true
268
310
  },
269
311
  {
270
312
  "name": "no data",
271
313
  "options": {},
272
- "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
314
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>",
315
+ "hidden": true
273
316
  }
274
317
  ]
275
318
  }