govuk_publishing_components 28.5.0 → 28.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (118) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js +4 -3
  3. data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +21 -291
  4. data/app/assets/javascripts/govuk_publishing_components/components/button.js +1 -1
  5. data/app/assets/javascripts/govuk_publishing_components/components/character-count.js +1 -1
  6. data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js +1 -1
  7. data/app/assets/javascripts/govuk_publishing_components/components/details.js +1 -1
  8. data/app/assets/javascripts/govuk_publishing_components/components/error-summary.js +1 -1
  9. data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +1 -1
  10. data/app/assets/javascripts/govuk_publishing_components/components/radio.js +1 -1
  11. data/app/assets/javascripts/govuk_publishing_components/components/skip-link.js +5 -0
  12. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +40 -37
  13. data/app/assets/javascripts/govuk_publishing_components/components/tabs.js +1 -1
  14. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js +2 -1
  15. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +8 -10
  16. data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js +4 -3
  17. data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js +4 -3
  18. data/app/assets/javascripts/govuk_publishing_components/lib/toggle.js +4 -3
  19. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +1 -329
  20. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +1 -1
  21. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +95 -56
  22. data/app/assets/stylesheets/govuk_publishing_components/components/print/_accordion.scss +6 -17
  23. data/app/assets/stylesheets/govuk_publishing_components/govuk_frontend_support.scss +0 -9
  24. data/app/views/govuk_publishing_components/components/_accordion.html.erb +31 -16
  25. data/app/views/govuk_publishing_components/components/_button.html.erb +1 -1
  26. data/app/views/govuk_publishing_components/components/_character_count.html.erb +2 -2
  27. data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +2 -2
  28. data/app/views/govuk_publishing_components/components/_error_message.html.erb +1 -1
  29. data/app/views/govuk_publishing_components/components/_error_summary.html.erb +0 -1
  30. data/app/views/govuk_publishing_components/components/_inset_text.html.erb +12 -1
  31. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +1 -1
  32. data/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb +1 -1
  33. data/app/views/govuk_publishing_components/components/_radio.html.erb +1 -1
  34. data/app/views/govuk_publishing_components/components/_skip_link.html.erb +1 -1
  35. data/app/views/govuk_publishing_components/components/docs/accordion.yml +2 -97
  36. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +1 -1
  37. data/app/views/govuk_publishing_components/components/docs/inset_text.yml +6 -0
  38. data/app/views/govuk_publishing_components/components/docs/share_links.yml +1 -1
  39. data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +13 -13
  40. data/app/views/govuk_publishing_components/components/docs/tabs.yml +1 -1
  41. data/app/views/govuk_publishing_components/components/docs/textarea.yml +1 -1
  42. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +11 -11
  43. data/lib/govuk_publishing_components/version.rb +1 -1
  44. data/node_modules/govuk-frontend/govuk/all.js +294 -76
  45. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +274 -99
  46. data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +169 -65
  47. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +37 -5
  48. data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +4 -4
  49. data/node_modules/govuk-frontend/govuk/components/button/button.js +2 -2
  50. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +3 -3
  51. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +15 -2
  52. data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +8 -10
  53. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +52 -15
  54. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +0 -2
  55. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +31 -0
  56. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +25 -25
  57. data/node_modules/govuk-frontend/govuk/components/details/details.js +2 -2
  58. data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss +1 -0
  59. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +8 -8
  60. data/node_modules/govuk-frontend/govuk/components/error-message/template.njk +2 -2
  61. data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +24 -3
  62. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +25 -16
  63. data/node_modules/govuk-frontend/govuk/components/error-summary/macro-options.json +6 -0
  64. data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +2 -1
  65. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +4 -4
  66. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +3 -37
  67. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +119 -15
  68. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +6 -0
  69. data/node_modules/govuk-frontend/govuk/components/footer/template.njk +1 -1
  70. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +10 -4
  71. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +11 -11
  72. data/node_modules/govuk-frontend/govuk/components/header/header.js +4 -4
  73. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -3
  74. data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +1 -3
  75. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +1 -1
  76. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +40 -40
  77. data/node_modules/govuk-frontend/govuk/components/input/template.njk +4 -3
  78. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +499 -2
  79. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +2 -2
  80. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +0 -8
  81. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +44 -45
  82. data/node_modules/govuk-frontend/govuk/components/radios/radios.js +4 -4
  83. data/node_modules/govuk-frontend/govuk/components/radios/template.njk +2 -9
  84. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +6 -1
  85. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +3 -3
  86. data/node_modules/govuk-frontend/govuk/components/skip-link/_index.scss +13 -0
  87. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +9 -9
  88. data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +1108 -0
  89. data/node_modules/govuk-frontend/govuk/components/skip-link/template.njk +1 -1
  90. data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +20 -23
  91. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +86 -1
  92. data/node_modules/govuk-frontend/govuk/components/summary-list/template.njk +1 -4
  93. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +2 -2
  94. data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +2 -2
  95. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +0 -5
  96. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +2 -2
  97. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +1 -1
  98. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +4 -4
  99. data/node_modules/govuk-frontend/govuk/core/_all.scss +0 -1
  100. data/node_modules/govuk-frontend/govuk/core/_global-styles.scss +0 -6
  101. data/node_modules/govuk-frontend/govuk/core/_links.scss +0 -6
  102. data/node_modules/govuk-frontend/govuk/core/_lists.scss +0 -6
  103. data/node_modules/govuk-frontend/govuk/core/_section-break.scss +0 -6
  104. data/node_modules/govuk-frontend/govuk/core/_typography.scss +0 -6
  105. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  106. data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +15 -30
  107. data/node_modules/govuk-frontend/govuk/{core → objects}/_template.scss +1 -5
  108. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +0 -6
  109. data/node_modules/govuk-frontend/govuk/overrides/_spacing.scss +0 -6
  110. data/node_modules/govuk-frontend/govuk/overrides/_text-align.scss +0 -6
  111. data/node_modules/govuk-frontend/govuk/overrides/_typography.scss +0 -6
  112. data/node_modules/govuk-frontend/govuk/overrides/_width.scss +0 -6
  113. data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +3 -0
  114. data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +0 -10
  115. data/node_modules/govuk-frontend/govuk/tools/_all.scss +0 -1
  116. data/node_modules/govuk-frontend/package.json +1 -1
  117. metadata +8 -7
  118. data/node_modules/govuk-frontend/govuk/tools/_iff.scss +0 -17
@@ -10,7 +10,7 @@
10
10
  "id": "input-example",
11
11
  "name": "test-name"
12
12
  },
13
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>",
13
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n\n</div>",
14
14
  "hidden": false
15
15
  },
16
16
  {
@@ -25,7 +25,7 @@
25
25
  "id": "input-with-hint-text",
26
26
  "name": "test-name-2"
27
27
  },
28
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-hint-text\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>",
28
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-hint-text\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n\n</div>",
29
29
  "hidden": false
30
30
  },
31
31
  {
@@ -43,7 +43,7 @@
43
43
  "text": "Error message goes here"
44
44
  }
45
45
  },
46
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <span id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>",
46
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-error-message\">\n National Insurance number\n </label>\n\n \n \n <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n \n \n <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n\n</div>",
47
47
  "hidden": false
48
48
  },
49
49
  {
@@ -59,7 +59,7 @@
59
59
  "name": "test-width-2",
60
60
  "classes": "govuk-input--width-2"
61
61
  },
62
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-2\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>",
62
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-2\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n\n</div>",
63
63
  "hidden": false
64
64
  },
65
65
  {
@@ -75,7 +75,7 @@
75
75
  "name": "test-width-3",
76
76
  "classes": "govuk-input--width-3"
77
77
  },
78
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-3\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>",
78
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-3\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n\n</div>",
79
79
  "hidden": false
80
80
  },
81
81
  {
@@ -91,7 +91,7 @@
91
91
  "name": "test-width-4",
92
92
  "classes": "govuk-input--width-4"
93
93
  },
94
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-4\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>",
94
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-4\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n\n</div>",
95
95
  "hidden": false
96
96
  },
97
97
  {
@@ -107,7 +107,7 @@
107
107
  "name": "test-width-5",
108
108
  "classes": "govuk-input--width-5"
109
109
  },
110
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-5\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>",
110
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-5\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n\n</div>",
111
111
  "hidden": false
112
112
  },
113
113
  {
@@ -123,7 +123,7 @@
123
123
  "name": "test-width-10",
124
124
  "classes": "govuk-input--width-10"
125
125
  },
126
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-10\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>",
126
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-10\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n\n</div>",
127
127
  "hidden": false
128
128
  },
129
129
  {
@@ -139,7 +139,7 @@
139
139
  "name": "test-width-20",
140
140
  "classes": "govuk-input--width-20"
141
141
  },
142
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-20\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>",
142
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-20\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n\n</div>",
143
143
  "hidden": false
144
144
  },
145
145
  {
@@ -155,7 +155,7 @@
155
155
  "name": "test-width-30",
156
156
  "classes": "govuk-input--width-30"
157
157
  },
158
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-30\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>",
158
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-width-30\">\n National insurance number\n </label>\n\n \n \n <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n\n</div>",
159
159
  "hidden": false
160
160
  },
161
161
  {
@@ -168,7 +168,7 @@
168
168
  "id": "input-with-page-heading",
169
169
  "name": "test-name"
170
170
  },
171
- "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"input-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>",
171
+ "html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"input-with-page-heading\">\n National Insurance number\n </label>\n </h1>\n\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n\n</div>",
172
172
  "hidden": false
173
173
  },
174
174
  {
@@ -183,7 +183,7 @@
183
183
  "classes": "extra-class"
184
184
  }
185
185
  },
186
- "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>",
186
+ "html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n\n</div>",
187
187
  "hidden": false
188
188
  },
189
189
  {
@@ -196,7 +196,7 @@
196
196
  "name": "postcode",
197
197
  "autocomplete": "postal-code"
198
198
  },
199
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n Postcode\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>",
199
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n Postcode\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n\n</div>",
200
200
  "hidden": false
201
201
  },
202
202
  {
@@ -210,7 +210,7 @@
210
210
  "type": "number",
211
211
  "pattern": "[0-9]*"
212
212
  },
213
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n Numbers only\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>",
213
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n Numbers only\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n\n</div>",
214
214
  "hidden": false
215
215
  },
216
216
  {
@@ -224,7 +224,7 @@
224
224
  "type": "text",
225
225
  "spellcheck": true
226
226
  },
227
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>",
227
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n\n</div>",
228
228
  "hidden": false
229
229
  },
230
230
  {
@@ -238,7 +238,7 @@
238
238
  "type": "text",
239
239
  "spellcheck": false
240
240
  },
241
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>",
241
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n\n</div>",
242
242
  "hidden": false
243
243
  },
244
244
  {
@@ -253,7 +253,7 @@
253
253
  "text": "£"
254
254
  }
255
255
  },
256
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
256
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>",
257
257
  "hidden": false
258
258
  },
259
259
  {
@@ -268,7 +268,7 @@
268
268
  "text": "kg"
269
269
  }
270
270
  },
271
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n </div>\n</div>",
271
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n </div>\n\n</div>",
272
272
  "hidden": false
273
273
  },
274
274
  {
@@ -286,7 +286,7 @@
286
286
  "text": "per item"
287
287
  }
288
288
  },
289
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
289
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n\n</div>",
290
290
  "hidden": false
291
291
  },
292
292
  {
@@ -304,7 +304,7 @@
304
304
  "text": "per household member"
305
305
  }
306
306
  },
307
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds, per household member\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n </div>\n</div>",
307
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds, per household member\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n </div>\n\n</div>",
308
308
  "hidden": false
309
309
  },
310
310
  {
@@ -325,7 +325,7 @@
325
325
  "text": "Error message goes here"
326
326
  }
327
327
  },
328
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <span id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </span>\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
328
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n\n \n \n <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n </p>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n\n</div>",
329
329
  "hidden": false
330
330
  },
331
331
  {
@@ -344,7 +344,7 @@
344
344
  "text": "per item"
345
345
  }
346
346
  },
347
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n</div>",
347
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n Cost per item, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n </div>\n\n</div>",
348
348
  "hidden": false
349
349
  },
350
350
  {
@@ -357,7 +357,7 @@
357
357
  },
358
358
  "classes": "app-input--custom-modifier"
359
359
  },
360
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>",
360
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n\n</div>",
361
361
  "hidden": true
362
362
  },
363
363
  {
@@ -370,7 +370,7 @@
370
370
  },
371
371
  "type": "number"
372
372
  },
373
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-type\">\n With custom type\n </label>\n\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>",
373
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-type\">\n With custom type\n </label>\n\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n\n</div>",
374
374
  "hidden": true
375
375
  },
376
376
  {
@@ -383,7 +383,7 @@
383
383
  },
384
384
  "value": "QQ 12 34 56 C"
385
385
  },
386
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-value\">\n With value\n </label>\n\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>",
386
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-value\">\n With value\n </label>\n\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n\n</div>",
387
387
  "hidden": true
388
388
  },
389
389
  {
@@ -396,7 +396,7 @@
396
396
  },
397
397
  "describedBy": "some-id"
398
398
  },
399
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n</div>",
399
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n\n</div>",
400
400
  "hidden": true
401
401
  },
402
402
  {
@@ -411,7 +411,7 @@
411
411
  "data-attribute": "my data value"
412
412
  }
413
413
  },
414
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>",
414
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n\n</div>",
415
415
  "hidden": true
416
416
  },
417
417
  {
@@ -427,7 +427,7 @@
427
427
  "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
428
428
  }
429
429
  },
430
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint describedBy\n </label>\n\n \n \n <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n</div>",
430
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint describedBy\n </label>\n\n \n \n <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n\n</div>",
431
431
  "hidden": true
432
432
  },
433
433
  {
@@ -443,7 +443,7 @@
443
443
  "text": "Error message"
444
444
  }
445
445
  },
446
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-describedby\">\n With error describedBy\n </label>\n\n\n \n \n <span id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n</div>",
446
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-describedby\">\n With error describedBy\n </label>\n\n\n \n \n <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n\n</div>",
447
447
  "hidden": true
448
448
  },
449
449
  {
@@ -461,7 +461,7 @@
461
461
  "text": "Hint"
462
462
  }
463
463
  },
464
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n With error and hint\n </label>\n\n \n \n <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>",
464
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint\">\n With error and hint\n </label>\n\n \n \n <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n\n</div>",
465
465
  "hidden": true
466
466
  },
467
467
  {
@@ -480,7 +480,7 @@
480
480
  },
481
481
  "describedBy": "some-id"
482
482
  },
483
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n With error, hint and describedBy\n </label>\n\n \n \n <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>",
483
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n With error, hint and describedBy\n </label>\n\n \n \n <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n\n</div>",
484
484
  "hidden": true
485
485
  },
486
486
  {
@@ -493,7 +493,7 @@
493
493
  },
494
494
  "inputmode": "decimal"
495
495
  },
496
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-inputmode\">\n With inputmode\n </label>\n\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>",
496
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-inputmode\">\n With inputmode\n </label>\n\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n\n</div>",
497
497
  "hidden": true
498
498
  },
499
499
  {
@@ -508,7 +508,7 @@
508
508
  "text": "<span>£</span>"
509
509
  }
510
510
  },
511
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
511
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>",
512
512
  "hidden": true
513
513
  },
514
514
  {
@@ -523,7 +523,7 @@
523
523
  "html": "<span>£</span>"
524
524
  }
525
525
  },
526
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>",
526
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n <input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n\n</div>",
527
527
  "hidden": true
528
528
  },
529
529
  {
@@ -539,7 +539,7 @@
539
539
  "classes": "app-input__prefix--custom-modifier"
540
540
  }
541
541
  },
542
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>",
542
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n\n</div>",
543
543
  "hidden": true
544
544
  },
545
545
  {
@@ -557,7 +557,7 @@
557
557
  }
558
558
  }
559
559
  },
560
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\">\n <div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>",
560
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n Amount, in pounds\n </label>\n\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n <input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n\n</div>",
561
561
  "hidden": true
562
562
  },
563
563
  {
@@ -572,7 +572,7 @@
572
572
  "text": "<span>kg</span>"
573
573
  }
574
574
  },
575
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n </div>\n</div>",
575
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n </div>\n\n</div>",
576
576
  "hidden": true
577
577
  },
578
578
  {
@@ -587,7 +587,7 @@
587
587
  "html": "<span>kg</span>"
588
588
  }
589
589
  },
590
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>",
590
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n\n</div>",
591
591
  "hidden": true
592
592
  },
593
593
  {
@@ -603,7 +603,7 @@
603
603
  "classes": "app-input__suffix--custom-modifier"
604
604
  }
605
605
  },
606
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n</div>",
606
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n </div>\n\n</div>",
607
607
  "hidden": true
608
608
  },
609
609
  {
@@ -621,7 +621,7 @@
621
621
  }
622
622
  }
623
623
  },
624
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\">\n <div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n </div>\n</div>",
624
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-with-suffix\">\n Weight, in kilograms\n </label>\n\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n </div>\n\n</div>",
625
625
  "hidden": true
626
626
  }
627
627
  ]
@@ -38,9 +38,9 @@
38
38
  }) | indent(2) | trim }}
39
39
  {% endif %}
40
40
 
41
- {%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
41
+ {%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
42
42
 
43
- {%- if params.prefix.text or params.prefix.html %}
43
+ {%- if params.prefix.text or params.prefix.html -%}
44
44
  <div class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
45
45
  {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
46
46
  </div>
@@ -55,11 +55,12 @@
55
55
  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
56
56
  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
57
57
 
58
- {%- if params.suffix.text or params.suffix.html %}
58
+ {%- if params.suffix.text or params.suffix.html -%}
59
59
  <div class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
60
60
  {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
61
61
  </div>
62
62
  {% endif -%}
63
63
 
64
64
  {%- if params.prefix or params.suffix %}</div>{% endif %}
65
+
65
66
  </div>