govuk_publishing_components 29.7.0 → 29.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (182) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/explicit-cross-domain-links.js +72 -73
  3. data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js +13 -2
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js +49 -0
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js +1 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +0 -1
  7. data/app/assets/javascripts/govuk_publishing_components/modules.js +0 -1
  8. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-measurer.js +37 -0
  9. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +166 -142
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_cards.scss +11 -4
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +20 -0
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +3 -8
  13. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss +8 -2
  14. data/app/controllers/govuk_publishing_components/audit_controller.rb +3 -2
  15. data/app/controllers/govuk_publishing_components/component_guide_controller.rb +0 -9
  16. data/app/models/govuk_publishing_components/audit_comparer.rb +92 -34
  17. data/app/views/govuk_publishing_components/audit/_applications.html.erb +20 -9
  18. data/app/views/govuk_publishing_components/component_guide/index.html.erb +3 -21
  19. data/app/views/govuk_publishing_components/component_guide/show.html.erb +1 -1
  20. data/app/views/govuk_publishing_components/components/_cards.html.erb +13 -11
  21. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +20 -2
  22. data/app/views/govuk_publishing_components/components/_summary_list.html.erb +4 -5
  23. data/app/views/govuk_publishing_components/components/contextual_sidebar/_ukraine_cta.html.erb +18 -19
  24. data/app/views/govuk_publishing_components/components/docs/contents_list.yml +1 -1
  25. data/app/views/govuk_publishing_components/components/docs/document_list.yml +4 -4
  26. data/app/views/govuk_publishing_components/components/docs/heading.yml +1 -1
  27. data/app/views/govuk_publishing_components/components/docs/image_card.yml +1 -1
  28. data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +4 -4
  29. data/app/views/govuk_publishing_components/components/docs/metadata.yml +1 -1
  30. data/app/views/govuk_publishing_components/components/docs/share_links.yml +1 -1
  31. data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +1 -1
  32. data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +1 -2
  33. data/config/locales/ar.yml +1 -2
  34. data/config/locales/az.yml +1 -2
  35. data/config/locales/be.yml +1 -2
  36. data/config/locales/bg.yml +1 -2
  37. data/config/locales/bn.yml +1 -2
  38. data/config/locales/cs.yml +1 -2
  39. data/config/locales/cy.yml +1 -2
  40. data/config/locales/da.yml +1 -2
  41. data/config/locales/de.yml +1 -2
  42. data/config/locales/dr.yml +1 -2
  43. data/config/locales/el.yml +1 -2
  44. data/config/locales/en.yml +9 -2
  45. data/config/locales/es-419.yml +1 -2
  46. data/config/locales/es.yml +1 -2
  47. data/config/locales/et.yml +1 -2
  48. data/config/locales/fa.yml +1 -2
  49. data/config/locales/fi.yml +1 -2
  50. data/config/locales/fr.yml +1 -2
  51. data/config/locales/gd.yml +1 -2
  52. data/config/locales/gu.yml +1 -2
  53. data/config/locales/he.yml +1 -2
  54. data/config/locales/hi.yml +1 -2
  55. data/config/locales/hr.yml +1 -2
  56. data/config/locales/hu.yml +1 -2
  57. data/config/locales/hy.yml +1 -2
  58. data/config/locales/id.yml +1 -2
  59. data/config/locales/is.yml +1 -2
  60. data/config/locales/it.yml +1 -2
  61. data/config/locales/ja.yml +1 -2
  62. data/config/locales/ka.yml +1 -2
  63. data/config/locales/kk.yml +1 -2
  64. data/config/locales/ko.yml +1 -2
  65. data/config/locales/lt.yml +1 -2
  66. data/config/locales/lv.yml +1 -2
  67. data/config/locales/ms.yml +1 -2
  68. data/config/locales/mt.yml +1 -2
  69. data/config/locales/nl.yml +1 -2
  70. data/config/locales/no.yml +1 -2
  71. data/config/locales/pa-pk.yml +1 -2
  72. data/config/locales/pa.yml +1 -2
  73. data/config/locales/pl.yml +1 -2
  74. data/config/locales/ps.yml +1 -2
  75. data/config/locales/pt.yml +1 -2
  76. data/config/locales/ro.yml +1 -2
  77. data/config/locales/ru.yml +1 -2
  78. data/config/locales/si.yml +1 -2
  79. data/config/locales/sk.yml +1 -2
  80. data/config/locales/sl.yml +1 -2
  81. data/config/locales/so.yml +1 -2
  82. data/config/locales/sq.yml +1 -2
  83. data/config/locales/sr.yml +1 -2
  84. data/config/locales/sv.yml +1 -2
  85. data/config/locales/sw.yml +1 -2
  86. data/config/locales/ta.yml +1 -2
  87. data/config/locales/th.yml +1 -2
  88. data/config/locales/tk.yml +1 -2
  89. data/config/locales/tr.yml +1 -2
  90. data/config/locales/uk.yml +1 -2
  91. data/config/locales/ur.yml +1 -2
  92. data/config/locales/uz.yml +1 -2
  93. data/config/locales/vi.yml +1 -2
  94. data/config/locales/zh-hk.yml +1 -2
  95. data/config/locales/zh-tw.yml +1 -2
  96. data/config/locales/zh.yml +1 -2
  97. data/lib/generators/govuk_publishing_components/templates/_component.html.erb +1 -1
  98. data/lib/govuk_publishing_components/app_helpers/brand_helper.rb +1 -1
  99. data/lib/govuk_publishing_components/presenters/attachment_helper.rb +1 -3
  100. data/lib/govuk_publishing_components/presenters/public_layout_helper.rb +35 -16
  101. data/lib/govuk_publishing_components/version.rb +1 -1
  102. data/node_modules/govuk-frontend/govuk/all.js +120 -49
  103. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +2 -2
  104. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss +0 -2
  105. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +2 -2
  106. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +6 -16
  107. data/node_modules/govuk-frontend/govuk/components/button/macro-options.json +2 -2
  108. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +120 -49
  109. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +33 -17
  110. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +2 -2
  111. data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +1 -4
  112. data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +3 -2
  113. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +22 -10
  114. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  115. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +23 -23
  116. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  117. data/node_modules/govuk-frontend/govuk/components/details/macro-options.json +4 -4
  118. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +2 -2
  119. data/node_modules/govuk-frontend/govuk/components/error-summary/macro-options.json +3 -3
  120. data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +2 -2
  121. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +12 -22
  122. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +13 -3
  123. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  124. data/node_modules/govuk-frontend/govuk/components/hint/macro-options.json +2 -2
  125. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +4 -13
  126. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +5 -5
  127. data/node_modules/govuk-frontend/govuk/components/inset-text/macro-options.json +2 -2
  128. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +2 -2
  129. data/node_modules/govuk-frontend/govuk/components/panel/_index.scss +1 -1
  130. data/node_modules/govuk-frontend/govuk/components/panel/macro-options.json +4 -4
  131. data/node_modules/govuk-frontend/govuk/components/phase-banner/macro-options.json +2 -2
  132. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +5 -4
  133. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +17 -12
  134. data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +2 -2
  135. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +1 -3
  136. data/node_modules/govuk-frontend/govuk/components/skip-link/macro-options.json +2 -2
  137. data/node_modules/govuk-frontend/govuk/components/summary-list/macro-options.json +5 -5
  138. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +4 -4
  139. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +2 -2
  140. data/node_modules/govuk-frontend/govuk/components/tag/macro-options.json +2 -2
  141. data/node_modules/govuk-frontend/govuk/components/warning-text/macro-options.json +2 -2
  142. data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +3 -3
  143. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +7 -5
  144. data/node_modules/govuk-frontend/govuk/helpers/_media-queries.scss +2 -2
  145. data/node_modules/govuk-frontend/govuk/helpers/_shape-arrow.scss +1 -1
  146. data/node_modules/govuk-frontend/govuk/helpers/_spacing.scss +3 -3
  147. data/node_modules/govuk-frontend/govuk/helpers/_typography.scss +2 -2
  148. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +10 -26
  149. data/node_modules/govuk-frontend/govuk/objects/_template.scss +1 -1
  150. data/node_modules/govuk-frontend/govuk/objects/_width-container.scss +0 -4
  151. data/node_modules/govuk-frontend/govuk/tools/_exports.scss +1 -1
  152. data/node_modules/govuk-frontend/govuk/tools/_font-url.scss +1 -1
  153. data/node_modules/govuk-frontend/govuk/tools/_image-url.scss +1 -1
  154. data/node_modules/govuk-frontend/govuk/tools/_px-to-em.scss +2 -2
  155. data/node_modules/govuk-frontend/govuk/tools/_px-to-rem.scss +1 -1
  156. data/node_modules/govuk-frontend/govuk-esm/all.mjs +88 -0
  157. data/node_modules/govuk-frontend/govuk-esm/common.mjs +28 -0
  158. data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs +374 -0
  159. data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs +64 -0
  160. data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs +251 -0
  161. data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs +164 -0
  162. data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs +147 -0
  163. data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs +168 -0
  164. data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs +52 -0
  165. data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs +55 -0
  166. data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs +122 -0
  167. data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs +94 -0
  168. data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs +282 -0
  169. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/DOMTokenList.js +264 -0
  170. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Document.js +26 -0
  171. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/classList.js +93 -0
  172. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/closest.js +24 -0
  173. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/matches.js +23 -0
  174. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/nextElementSibling.js +22 -0
  175. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/previousElementSibling.js +22 -0
  176. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element.js +114 -0
  177. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Event.js +252 -0
  178. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Function/prototype/bind.js +159 -0
  179. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Object/defineProperty.js +86 -0
  180. data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Window.js +20 -0
  181. data/node_modules/govuk-frontend/package.json +8 -1
  182. metadata +30 -3
@@ -6,7 +6,7 @@
6
6
  "options": {
7
7
  "id": "dob"
8
8
  },
9
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
9
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
10
10
  "hidden": false
11
11
  },
12
12
  {
@@ -37,7 +37,7 @@
37
37
  }
38
38
  ]
39
39
  },
40
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
40
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
41
41
  "hidden": false
42
42
  },
43
43
  {
@@ -67,7 +67,7 @@
67
67
  }
68
68
  ]
69
69
  },
70
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
70
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
71
71
  "hidden": false
72
72
  },
73
73
  {
@@ -100,7 +100,7 @@
100
100
  }
101
101
  ]
102
102
  },
103
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
103
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
104
104
  "hidden": false
105
105
  },
106
106
  {
@@ -134,7 +134,7 @@
134
134
  }
135
135
  ]
136
136
  },
137
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
137
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-day-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
138
138
  "hidden": false
139
139
  },
140
140
  {
@@ -168,7 +168,7 @@
168
168
  }
169
169
  ]
170
170
  },
171
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
171
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-month-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
172
172
  "hidden": false
173
173
  },
174
174
  {
@@ -202,7 +202,7 @@
202
202
  }
203
203
  ]
204
204
  },
205
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
205
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n \n \n <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-year-error\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
206
206
  "hidden": false
207
207
  },
208
208
  {
@@ -219,7 +219,7 @@
219
219
  "text": "For example, 31 3 1980"
220
220
  }
221
221
  },
222
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
222
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
223
223
  "hidden": false
224
224
  },
225
225
  {
@@ -239,7 +239,7 @@
239
239
  "classes": "extra-class"
240
240
  }
241
241
  },
242
- "html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
242
+ "html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
243
243
  "hidden": false
244
244
  },
245
245
  {
@@ -273,7 +273,7 @@
273
273
  }
274
274
  ]
275
275
  },
276
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
276
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
277
277
  "hidden": false
278
278
  },
279
279
  {
@@ -313,7 +313,7 @@
313
313
  }
314
314
  ]
315
315
  },
316
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-day=\"day\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-month=\"month\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-year=\"year\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
316
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" inputmode=\"numeric\" data-example-day=\"day\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" inputmode=\"numeric\" data-example-month=\"month\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" inputmode=\"numeric\" data-example-year=\"year\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
317
317
  "hidden": false
318
318
  },
319
319
  {
@@ -322,7 +322,7 @@
322
322
  "id": "with-classes",
323
323
  "classes": "app-date-input--custom-modifier"
324
324
  },
325
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
325
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
326
326
  "hidden": true
327
327
  },
328
328
  {
@@ -333,7 +333,7 @@
333
333
  "data-attribute": "my data value"
334
334
  }
335
335
  },
336
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
336
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
337
337
  "hidden": true
338
338
  },
339
339
  {
@@ -342,7 +342,7 @@
342
342
  "id": "with-empty-items",
343
343
  "items": []
344
344
  },
345
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
345
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-empty-items\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
346
346
  "hidden": true
347
347
  },
348
348
  {
@@ -390,7 +390,7 @@
390
390
  }
391
391
  ]
392
392
  },
393
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n Day[dd]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n Month[mm]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n Year[yyyy]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
393
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-nested-name\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n Day[dd]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n Month[mm]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n Year[yyyy]\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
394
394
  "hidden": true
395
395
  },
396
396
  {
@@ -412,7 +412,7 @@
412
412
  }
413
413
  ]
414
414
  },
415
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
415
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-id\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
416
416
  "hidden": true
417
417
  },
418
418
  {
@@ -431,7 +431,7 @@
431
431
  }
432
432
  ]
433
433
  },
434
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
434
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"my-date-input\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
435
435
  "hidden": true
436
436
  },
437
437
  {
@@ -454,7 +454,7 @@
454
454
  }
455
455
  ]
456
456
  },
457
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-values\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
457
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-values\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
458
458
  "hidden": true
459
459
  },
460
460
  {
@@ -471,7 +471,7 @@
471
471
  "text": "For example, 31 3 1980"
472
472
  }
473
473
  },
474
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
474
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n For example, 31 3 1980\n </div>\n\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
475
475
  "hidden": true
476
476
  },
477
477
  {
@@ -488,7 +488,7 @@
488
488
  "text": "Error message goes here"
489
489
  }
490
490
  },
491
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
491
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your date of birth?\n \n </legend>\n \n\n <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n\n <div class=\"govuk-date-input\" id=\"dob-errors\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
492
492
  "hidden": true
493
493
  },
494
494
  {
@@ -501,7 +501,7 @@
501
501
  }
502
502
  }
503
503
  },
504
- "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>date of birth</b>?\n \n </legend>\n \n\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
504
+ "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>date of birth</b>?\n \n </legend>\n \n\n <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n \n\n</fieldset>\n\n\n</div>",
505
505
  "hidden": true
506
506
  },
507
507
  {
@@ -523,7 +523,7 @@
523
523
  }
524
524
  ]
525
525
  },
526
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
526
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"with-item-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
527
527
  "hidden": true
528
528
  },
529
529
  {
@@ -542,7 +542,7 @@
542
542
  }
543
543
  ]
544
544
  },
545
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
545
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-date-input\" id=\"without-item-classes\">\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n Day\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n Month\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n <div class=\"govuk-date-input__item\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n Year\n </label>\n \n <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n \n </div>\n </div>\n \n </div>\n\n</div>",
546
546
  "hidden": true
547
547
  }
548
548
  ]
@@ -68,7 +68,7 @@
68
68
  type: "text",
69
69
  inputmode: item.inputmode if item.inputmode else "numeric",
70
70
  autocomplete: item.autocomplete,
71
- pattern: item.pattern if item.pattern else "[0-9]*",
71
+ pattern: item.pattern,
72
72
  attributes: item.attributes
73
73
  }) | indent(6) | trim }}
74
74
  </div>
@@ -3,25 +3,25 @@
3
3
  "name": "summaryText",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": "If `summmaryHtml` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored."
6
+ "description": "If `summmaryHtml` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` option will be ignored."
7
7
  },
8
8
  {
9
9
  "name": "summaryHtml",
10
10
  "type": "string",
11
11
  "required": true,
12
- "description": "If `summmaryText` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored."
12
+ "description": "If `summmaryText` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` option will be ignored."
13
13
  },
14
14
  {
15
15
  "name": "text",
16
16
  "type": "string",
17
17
  "required": true,
18
- "description": "If `html` is set, this is not required. Text to use within the disclosed part of the details element. If `html` is provided, the `text` argument will be ignored."
18
+ "description": "If `html` is set, this is not required. Text to use within the disclosed part of the details element. If `html` is provided, the `text` option will be ignored."
19
19
  },
20
20
  {
21
21
  "name": "html",
22
22
  "type": "string",
23
23
  "required": true,
24
- "description": "If `text` is set, this is not required. HTML to use within the disclosed part of the details element. If `html` is provided, the `text` argument will be ignored."
24
+ "description": "If `text` is set, this is not required. HTML to use within the disclosed part of the details element. If `html` is provided, the `text` option will be ignored."
25
25
  },
26
26
  {
27
27
  "name": "id",
@@ -3,13 +3,13 @@
3
3
  "name": "text",
4
4
  "type": "string",
5
5
  "required": true,
6
- "description": "If `html` is set, this is not required. Text to use within the error message. If `html` is provided, the `text` argument will be ignored."
6
+ "description": "If `html` is set, this is not required. Text to use within the error message. If `html` is provided, the `text` option will be ignored."
7
7
  },
8
8
  {
9
9
  "name": "html",
10
10
  "type": "string",
11
11
  "required": true,
12
- "description": "If `text` is set, this is not required. HTML to use within the error message. If `html` is provided, the `text` argument will be ignored."
12
+ "description": "If `text` is set, this is not required. HTML to use within the error message. If `html` is provided, the `text` option will be ignored."
13
13
  },
14
14
  {
15
15
  "name": "id",
@@ -27,7 +27,7 @@
27
27
  "name": "errorList",
28
28
  "type": "array",
29
29
  "required": true,
30
- "description": "Contains an array of error link items and all their available arguments.",
30
+ "description": "The list of errors to include in the summary",
31
31
  "params": [
32
32
  {
33
33
  "name": "href",
@@ -39,13 +39,13 @@
39
39
  "name": "text",
40
40
  "type": "string",
41
41
  "required": true,
42
- "description": "If `html` is set, this is not required. Text for the error link item. If `html` is provided, the `text` argument will be ignored."
42
+ "description": "If `html` is set, this is not required. Text for the error link item. If `html` is provided, the `text` option will be ignored."
43
43
  },
44
44
  {
45
45
  "name": "html",
46
46
  "type": "string",
47
47
  "required": true,
48
- "description": "If `text` is set, this is not required. HTML for the error link item. If `html` is provided, the `text` argument will be ignored."
48
+ "description": "If `text` is set, this is not required. HTML for the error link item. If `html` is provided, the `text` option will be ignored."
49
49
  },
50
50
  {
51
51
  "name": "attributes",
@@ -15,13 +15,13 @@
15
15
  "name": "text",
16
16
  "type": "string",
17
17
  "required": true,
18
- "description": "If `html` is set, this is not required. Text to use within the legend. If `html` is provided, the `text` argument will be ignored."
18
+ "description": "If `html` is set, this is not required. Text to use within the legend. If `html` is provided, the `text` option will be ignored."
19
19
  },
20
20
  {
21
21
  "name": "html",
22
22
  "type": "string",
23
23
  "required": true,
24
- "description": "If `text` is set, this is not required. HTML to use within the legend. If `html` is provided, the `text` argument will be ignored."
24
+ "description": "If `text` is set, this is not required. HTML to use within the legend. If `html` is provided, the `text` option will be ignored."
25
25
  },
26
26
  {
27
27
  "name": "classes",
@@ -8,7 +8,7 @@
8
8
  $govuk-footer-text: $govuk-text-colour;
9
9
  $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
10
10
 
11
- @if ($govuk-use-legacy-palette) {
11
+ @if $govuk-use-legacy-palette {
12
12
  $govuk-footer-border-top: #a1acb2;
13
13
  $govuk-footer-border: govuk-colour("grey-2");
14
14
  $govuk-footer-text: #454a4c;
@@ -35,7 +35,7 @@
35
35
  .govuk-footer__link {
36
36
  @include govuk-link-common;
37
37
 
38
- @if ($govuk-use-legacy-palette) {
38
+ @if $govuk-use-legacy-palette {
39
39
  &:link,
40
40
  &:visited {
41
41
  color: $govuk-footer-text;
@@ -67,23 +67,16 @@
67
67
  }
68
68
 
69
69
  .govuk-footer__meta {
70
- display: -webkit-box;
71
- display: -webkit-flex;
72
70
  display: -ms-flexbox;
73
71
  display: flex; // Support: Flexbox
74
72
  margin-right: -$govuk-gutter-half;
75
73
  margin-left: -$govuk-gutter-half;
76
- -webkit-flex-wrap: wrap;
77
- -ms-flex-wrap: wrap;
78
- flex-wrap: wrap; // Support: Flexbox
79
- -webkit-box-align: end;
80
- -webkit-align-items: flex-end;
81
- -ms-flex-align: end;
82
- align-items: flex-end; // Support: Flexbox
83
- -webkit-box-pack: center;
84
- -webkit-justify-content: center;
85
- -ms-flex-pack: center;
86
- justify-content: center; // Support: Flexbox
74
+ -ms-flex-wrap: wrap;
75
+ flex-wrap: wrap; // Support: Flexbox
76
+ -ms-flex-align: end;
77
+ align-items: flex-end; // Support: Flexbox
78
+ -ms-flex-pack: center;
79
+ justify-content: center; // Support: Flexbox
87
80
  }
88
81
 
89
82
  .govuk-footer__meta-item {
@@ -93,14 +86,11 @@
93
86
  }
94
87
 
95
88
  .govuk-footer__meta-item--grow {
96
- -webkit-box-flex: 1;
97
- -webkit-flex: 1;
98
- -ms-flex: 1;
99
- flex: 1; // Support: Flexbox
89
+ -ms-flex: 1;
90
+ flex: 1; // Support: Flexbox
100
91
  @include govuk-media-query ($until: tablet) {
101
- -webkit-flex-basis: 320px;
102
- -ms-flex-preferred-size: 320px;
103
- flex-basis: 320px; // Support: Flexbox
92
+ -ms-flex-preferred-size: 320px;
93
+ flex-basis: 320px; // Support: Flexbox
104
94
  }
105
95
  }
106
96
 
@@ -58,7 +58,7 @@
58
58
  position: relative;
59
59
  top: -1px;
60
60
  margin-right: 1px;
61
- fill: currentColor;
61
+ fill: currentcolor;
62
62
  vertical-align: top;
63
63
  }
64
64
 
@@ -91,7 +91,7 @@
91
91
  text-decoration: underline;
92
92
  text-decoration-thickness: $govuk-header-link-underline-thickness;
93
93
 
94
- @if ($govuk-link-underline-offset) {
94
+ @if $govuk-link-underline-offset {
95
95
  text-underline-offset: $govuk-link-underline-offset;
96
96
  }
97
97
  }
@@ -111,6 +111,16 @@
111
111
  font-size: 30px; // We don't have a mixin that produces 30px font size
112
112
  line-height: 1;
113
113
 
114
+ @include govuk-media-query($from: tablet) {
115
+ display: inline;
116
+
117
+ &:focus {
118
+ // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
119
+ // This is to stop the logo getting cut off by the box shadow when focused on above a product name
120
+ box-shadow: 0 0 $govuk-focus-colour;
121
+ }
122
+ }
123
+
114
124
  &:link,
115
125
  &:visited {
116
126
  text-decoration: none;
@@ -180,7 +190,7 @@
180
190
  -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
181
191
  text-decoration: solid underline $govuk-header-link-underline-thickness;
182
192
 
183
- @if ($govuk-link-underline-offset) {
193
+ @if $govuk-link-underline-offset {
184
194
  text-underline-offset: $govuk-link-underline-offset;
185
195
  }
186
196
  }