govuk_publishing_components 28.5.0 → 28.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (138) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js +3 -3
  4. data/app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js +4 -3
  5. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +21 -291
  6. data/app/assets/javascripts/govuk_publishing_components/components/button.js +1 -1
  7. data/app/assets/javascripts/govuk_publishing_components/components/character-count.js +1 -1
  8. data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js +1 -1
  9. data/app/assets/javascripts/govuk_publishing_components/components/details.js +1 -1
  10. data/app/assets/javascripts/govuk_publishing_components/components/error-summary.js +1 -1
  11. data/app/assets/javascripts/govuk_publishing_components/components/feedback.js +7 -6
  12. data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +1 -1
  13. data/app/assets/javascripts/govuk_publishing_components/components/radio.js +1 -1
  14. data/app/assets/javascripts/govuk_publishing_components/components/skip-link.js +5 -0
  15. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +40 -37
  16. data/app/assets/javascripts/govuk_publishing_components/components/tabs.js +1 -1
  17. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js +2 -1
  18. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +8 -10
  19. data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js +4 -3
  20. data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js +4 -3
  21. data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js +4 -3
  22. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +1796 -911
  23. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +1 -329
  24. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +1 -1
  25. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +95 -56
  26. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +6 -17
  27. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +0 -9
  28. data/app/models/govuk_publishing_components/component_docs.rb +1 -1
  29. data/app/views/govuk_publishing_components/components/_accordion.html.erb +31 -16
  30. data/app/views/govuk_publishing_components/components/_attachment.html.erb +3 -1
  31. data/app/views/govuk_publishing_components/components/_button.html.erb +4 -4
  32. data/app/views/govuk_publishing_components/components/_character_count.html.erb +2 -2
  33. data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +2 -2
  34. data/app/views/govuk_publishing_components/components/_error_message.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/_error_summary.html.erb +0 -1
  36. data/app/views/govuk_publishing_components/components/_input.html.erb +3 -3
  37. data/app/views/govuk_publishing_components/components/_inset_text.html.erb +12 -1
  38. data/app/views/govuk_publishing_components/components/_intervention.html.erb +2 -2
  39. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +1 -1
  40. data/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb +1 -1
  41. data/app/views/govuk_publishing_components/components/_radio.html.erb +1 -1
  42. data/app/views/govuk_publishing_components/components/_search.html.erb +2 -4
  43. data/app/views/govuk_publishing_components/components/_select.html.erb +15 -43
  44. data/app/views/govuk_publishing_components/components/_skip_link.html.erb +1 -1
  45. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +7 -8
  46. data/app/views/govuk_publishing_components/components/docs/accordion.yml +2 -97
  47. data/app/views/govuk_publishing_components/components/docs/attachment.yml +11 -0
  48. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +1 -1
  49. data/app/views/govuk_publishing_components/components/docs/inset_text.yml +6 -0
  50. data/app/views/govuk_publishing_components/components/docs/select.yml +1 -1
  51. data/app/views/govuk_publishing_components/components/docs/share_links.yml +1 -1
  52. data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +13 -13
  53. data/app/views/govuk_publishing_components/components/docs/tabs.yml +1 -1
  54. data/app/views/govuk_publishing_components/components/docs/textarea.yml +1 -1
  55. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +11 -11
  56. data/config/initializers/assets.rb +1 -0
  57. data/lib/govuk_publishing_components/presenters/attachment.rb +23 -0
  58. data/lib/govuk_publishing_components/presenters/select_helper.rb +85 -0
  59. data/lib/govuk_publishing_components/version.rb +1 -1
  60. data/lib/govuk_publishing_components.rb +1 -1
  61. data/node_modules/govuk-frontend/govuk/all.js +294 -76
  62. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +274 -99
  63. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +169 -65
  64. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +37 -5
  65. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +4 -4
  66. data/node_modules/govuk-frontend/govuk/components/button/button.js +2 -2
  67. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +3 -3
  68. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +15 -2
  69. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +8 -10
  70. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +52 -15
  71. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +0 -2
  72. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +31 -0
  73. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +25 -25
  74. data/node_modules/govuk-frontend/govuk/components/details/details.js +2 -2
  75. data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss +1 -0
  76. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +8 -8
  77. data/node_modules/govuk-frontend/govuk/components/error-message/template.njk +2 -2
  78. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +24 -3
  79. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +25 -16
  80. data/node_modules/govuk-frontend/govuk/components/error-summary/macro-options.json +6 -0
  81. data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +2 -1
  82. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +4 -4
  83. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +3 -37
  84. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +119 -15
  85. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +6 -0
  86. data/node_modules/govuk-frontend/govuk/components/footer/template.njk +1 -1
  87. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +10 -4
  88. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +11 -11
  89. data/node_modules/govuk-frontend/govuk/components/header/header.js +4 -4
  90. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -3
  91. data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +1 -3
  92. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +1 -1
  93. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +40 -40
  94. data/node_modules/govuk-frontend/govuk/components/input/template.njk +4 -3
  95. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +499 -2
  96. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +2 -2
  97. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +0 -8
  98. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +44 -45
  99. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +4 -4
  100. data/node_modules/govuk-frontend/govuk/components/radios/template.njk +2 -9
  101. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +6 -1
  102. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +3 -3
  103. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +13 -0
  104. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +9 -9
  105. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +1108 -0
  106. data/node_modules/govuk-frontend/govuk/components/skip-link/template.njk +1 -1
  107. data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +20 -23
  108. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +86 -1
  109. data/node_modules/govuk-frontend/govuk/components/summary-list/template.njk +1 -4
  110. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +2 -2
  111. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +2 -2
  112. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +0 -5
  113. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +2 -2
  114. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +1 -1
  115. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +4 -4
  116. data/node_modules/govuk-frontend/govuk/core/_all.scss +0 -1
  117. data/node_modules/govuk-frontend/govuk/core/_global-styles.scss +0 -6
  118. data/node_modules/govuk-frontend/govuk/core/_links.scss +0 -6
  119. data/node_modules/govuk-frontend/govuk/core/_lists.scss +0 -6
  120. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +0 -6
  121. data/node_modules/govuk-frontend/govuk/core/_typography.scss +0 -6
  122. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  123. data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +15 -30
  124. data/node_modules/govuk-frontend/govuk/{core → objects}/_template.scss +1 -5
  125. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +0 -6
  126. data/node_modules/govuk-frontend/govuk/overrides/_spacing.scss +0 -6
  127. data/node_modules/govuk-frontend/govuk/overrides/_text-align.scss +0 -6
  128. data/node_modules/govuk-frontend/govuk/overrides/_typography.scss +0 -6
  129. data/node_modules/govuk-frontend/govuk/overrides/_width.scss +0 -6
  130. data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +3 -0
  131. data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +0 -10
  132. data/node_modules/govuk-frontend/govuk/tools/_all.scss +0 -1
  133. data/node_modules/govuk-frontend/package.json +1 -1
  134. metadata +22 -37
  135. data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js +0 -100
  136. data/lib/govuk_publishing_components/presenters/select.rb +0 -43
  137. data/lib/tasks/govuk_publishing_components_tasks.rake +0 -49
  138. data/node_modules/govuk-frontend/govuk/tools/_iff.scss +0 -17
@@ -259,7 +259,7 @@
259
259
  }
260
260
  ]
261
261
  },
262
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint waste-error\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Select all that apply\n </div>\n\n\n \n \n <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select which types of waste you transport regularly\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
262
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint waste-error\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Select all that apply\n </div>\n\n\n \n \n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select which types of waste you transport regularly\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
263
263
  "hidden": false
264
264
  },
265
265
  {
@@ -298,7 +298,7 @@
298
298
  }
299
299
  ]
300
300
  },
301
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c\" name=\"t-and-c\" type=\"checkbox\" value=\"yes\" aria-describedby=\"t-and-c-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c\">\n I agree to the terms and conditions\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
301
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c\" name=\"t-and-c\" type=\"checkbox\" value=\"yes\" aria-describedby=\"t-and-c-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c\">\n I agree to the terms and conditions\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
302
302
  "hidden": false
303
303
  },
304
304
  {
@@ -318,7 +318,7 @@
318
318
  }
319
319
  ]
320
320
  },
321
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-with-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c-with-hint\" name=\"t-and-c-with-hint\" type=\"checkbox\" value=\"yes\" aria-describedby=\"t-and-c-with-hint-error t-and-c-with-hint-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c-with-hint\">\n I agree to the terms and conditions\n </label>\n \n <div id=\"t-and-c-with-hint-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Go on, you know you want to!\n </div>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
321
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-with-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c-with-hint\" name=\"t-and-c-with-hint\" type=\"checkbox\" value=\"yes\" aria-describedby=\"t-and-c-with-hint-error t-and-c-with-hint-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c-with-hint\">\n I agree to the terms and conditions\n </label>\n \n <div id=\"t-and-c-with-hint-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Go on, you know you want to!\n </div>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
322
322
  "hidden": false
323
323
  },
324
324
  {
@@ -348,7 +348,7 @@
348
348
  }
349
349
  ]
350
350
  },
351
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <span id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Citizen of another country\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
351
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <p id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Citizen of another country\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
352
352
  "hidden": false
353
353
  },
354
354
  {
@@ -378,7 +378,7 @@
378
378
  }
379
379
  ]
380
380
  },
381
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
381
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
382
382
  "hidden": false
383
383
  },
384
384
  {
@@ -417,7 +417,7 @@
417
417
  }
418
418
  ]
419
419
  },
420
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\" aria-describedby=\"waste-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n <div id=\"waste-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\" aria-describedby=\"waste-2-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n <div id=\"waste-2-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\" aria-describedby=\"waste-3-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n <div id=\"waste-3-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
420
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\" aria-describedby=\"waste-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n <div id=\"waste-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\" aria-describedby=\"waste-2-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n <div id=\"waste-2-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\" aria-describedby=\"waste-3-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n <div id=\"waste-3-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
421
421
  "hidden": false
422
422
  },
423
423
  {
@@ -450,7 +450,7 @@
450
450
  }
451
451
  ]
452
452
  },
453
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Maecenas faucibus mollis interdum?\n \n </legend>\n \n\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n\n\n \n \n <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"nullam\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"aenean\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"fusce\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
453
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Maecenas faucibus mollis interdum?\n \n </legend>\n \n\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n\n\n \n \n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"nullam\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"aenean\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"fusce\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
454
454
  "hidden": false
455
455
  },
456
456
  {
@@ -490,6 +490,43 @@
490
490
  "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"with-conditional-items\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"with-conditional-items\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-3\" name=\"with-conditional-items\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
491
491
  "hidden": false
492
492
  },
493
+ {
494
+ "name": "with conditional items with special characters",
495
+ "options": {
496
+ "name": "contact-prefs",
497
+ "idPrefix": "user.profile[contact-prefs]",
498
+ "fieldset": {
499
+ "legend": {
500
+ "text": "How do you want to be contacted?"
501
+ }
502
+ },
503
+ "items": [
504
+ {
505
+ "value": "email",
506
+ "text": "Email",
507
+ "conditional": {
508
+ "html": "<label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
509
+ }
510
+ },
511
+ {
512
+ "value": "phone",
513
+ "text": "Phone",
514
+ "conditional": {
515
+ "html": "<label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
516
+ }
517
+ },
518
+ {
519
+ "value": "text",
520
+ "text": "Text message",
521
+ "conditional": {
522
+ "html": "<label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
523
+ }
524
+ }
525
+ ]
526
+ },
527
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
528
+ "hidden": false
529
+ },
493
530
  {
494
531
  "name": "with conditional item checked",
495
532
  "options": {
@@ -656,7 +693,7 @@
656
693
  }
657
694
  ]
658
695
  },
659
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Filter by\n \n </legend>\n \n\n <span id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </span>\n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
696
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Filter by\n \n </legend>\n \n\n <p id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </p>\n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
660
697
  "hidden": false
661
698
  },
662
699
  {
@@ -994,7 +1031,7 @@
994
1031
  "text": "If you have dual nationality, select all options that are relevant to you."
995
1032
  }
996
1033
  },
997
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\n \n \n <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1034
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\n \n \n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
998
1035
  "hidden": true
999
1036
  },
1000
1037
  {
@@ -1024,7 +1061,7 @@
1024
1061
  }
1025
1062
  ]
1026
1063
  },
1027
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-hint example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\n \n \n <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1064
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-hint example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\n \n \n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1028
1065
  "hidden": true
1029
1066
  },
1030
1067
  {
@@ -1075,7 +1112,7 @@
1075
1112
  }
1076
1113
  ]
1077
1114
  },
1078
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-name-error\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <span id=\"example-name-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1115
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-name-error\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <p id=\"example-name-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1079
1116
  "hidden": true
1080
1117
  },
1081
1118
  {
@@ -1116,7 +1153,7 @@
1116
1153
  }
1117
1154
  ]
1118
1155
  },
1119
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c\" name=\"t-and-c\" type=\"checkbox\" value=\"yes\" aria-describedby=\"some-id t-and-c-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c\">\n I agree to the terms and conditions\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1156
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c\" name=\"t-and-c\" type=\"checkbox\" value=\"yes\" aria-describedby=\"some-id t-and-c-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c\">\n I agree to the terms and conditions\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1120
1157
  "hidden": true
1121
1158
  },
1122
1159
  {
@@ -1137,7 +1174,7 @@
1137
1174
  }
1138
1175
  ]
1139
1176
  },
1140
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-with-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c-with-hint\" name=\"t-and-c-with-hint\" type=\"checkbox\" value=\"yes\" aria-describedby=\"some-id t-and-c-with-hint-error t-and-c-with-hint-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c-with-hint\">\n I agree to the terms and conditions\n </label>\n \n <div id=\"t-and-c-with-hint-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Go on, you know you want to!\n </div>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1177
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-with-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c-with-hint\" name=\"t-and-c-with-hint\" type=\"checkbox\" value=\"yes\" aria-describedby=\"some-id t-and-c-with-hint-error t-and-c-with-hint-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c-with-hint\">\n I agree to the terms and conditions\n </label>\n \n <div id=\"t-and-c-with-hint-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Go on, you know you want to!\n </div>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1141
1178
  "hidden": true
1142
1179
  },
1143
1180
  {
@@ -1155,7 +1192,7 @@
1155
1192
  }
1156
1193
  ]
1157
1194
  },
1158
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"id-prefix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"id-prefix\" name=\"name-of-checkboxes\" type=\"checkbox\" value=\"animal\" aria-describedby=\"id-prefix-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"id-prefix\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1195
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"id-prefix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"id-prefix\" name=\"name-of-checkboxes\" type=\"checkbox\" value=\"animal\" aria-describedby=\"id-prefix-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"id-prefix\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1159
1196
  "hidden": true
1160
1197
  },
1161
1198
  {
@@ -1182,7 +1219,7 @@
1182
1219
  }
1183
1220
  ]
1184
1221
  },
1185
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1222
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1186
1223
  "hidden": true
1187
1224
  }
1188
1225
  ]
@@ -4,8 +4,6 @@
4
4
  $border-bottom-width: govuk-spacing(2);
5
5
 
6
6
  .govuk-cookie-banner {
7
- @include govuk-font($size: 19);
8
-
9
7
  padding-top: govuk-spacing(4);
10
8
  // The component does not set bottom spacing.
11
9
  // The bottom spacing should be created by the items inside the component.
@@ -123,6 +123,37 @@
123
123
  "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Accept analytics cookies\n </button>\n \n \n \n <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Reject analytics cookies\n </button>\n \n \n \n \n \n \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \n \n \n </div>\n \n </div>\n \n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n hidden>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n hidden>\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n Hide this message\n </button>\n \n \n </div>\n \n </div>\n \n</div>",
124
124
  "hidden": false
125
125
  },
126
+ {
127
+ "name": "with html",
128
+ "options": {
129
+ "messages": [
130
+ {
131
+ "headingHtml": "Cookies on <span>my service</span>",
132
+ "html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p><p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>",
133
+ "actions": [
134
+ {
135
+ "text": "Accept analytics cookies",
136
+ "type": "submit",
137
+ "name": "cookies",
138
+ "value": "accept"
139
+ },
140
+ {
141
+ "text": "Reject analytics cookies",
142
+ "type": "submit",
143
+ "name": "cookies",
144
+ "value": "reject"
145
+ },
146
+ {
147
+ "text": "View cookie preferences",
148
+ "href": "/cookie-preferences"
149
+ }
150
+ ]
151
+ }
152
+ ]
153
+ },
154
+ "html": "<div class=\"govuk-cookie-banner \" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n \n \n\n <div class=\"govuk-cookie-banner__message govuk-width-container\"\n >\n\n <div class=\"govuk-grid-row\">\n <div class=\"govuk-grid-column-two-thirds\">\n \n <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n \n\n <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p><p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p></div>\n </div>\n </div>\n\n \n <div class=\"govuk-button-group\">\n \n \n <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Accept analytics cookies\n </button>\n \n \n \n <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n Reject analytics cookies\n </button>\n \n \n \n \n \n \n <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n \n \n \n </div>\n \n </div>\n \n</div>",
155
+ "hidden": false
156
+ },
126
157
  {
127
158
  "name": "heading html",
128
159
  "options": {