govuk_publishing_components 32.1.0 → 33.0.0

data/node_modules/govuk-frontend/govuk/components/header/header.js

@@ -1014,6 +1014,12 @@ if (detect) return
 })
 .call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
 
+/**
+ * Header component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for header
+ */
 function Header ($module) {
   this.$module = $module;
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');

data/node_modules/govuk-frontend/govuk/components/header/macro-options.json

@@ -77,13 +77,19 @@
         "name": "navigationLabel",
         "type": "string",
         "required": false,
-        "description": "Text for the `aria-label` attribute of the navigation. Defaults to 'Menu'."
+        "description": "Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`."
     },
     {
         "name": "menuButtonLabel",
         "type": "string",
         "required": false,
-        "description": "Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to 'Show or hide menu'."
+        "description": "Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu. Defaults to 'Show or hide menu'."
+    },
+    {
+        "name": "menuButtonText",
+        "type": "string",
+        "required": false,
+        "description": "Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to 'Menu'."
     },
     {
         "name": "containerClasses",

data/node_modules/govuk-frontend/govuk/components/header/template.njk

@@ -1,3 +1,5 @@
+{% set menuButtonText = params.menuButtonText if params.menuButtonText else 'Menu' %}
+
 <header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="govuk-header"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
@@ -60,8 +62,8 @@
     {% endif %}
     {% endif %}
     {% if params.navigation %}
-    <nav aria-label="{{ params.navigationLabel | default('Menu') }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
-      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}" hidden>Menu</button>
+    <nav aria-label="{{ params.navigationLabel | default(menuButtonText) }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
+      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}" hidden>{{ menuButtonText }}</button>
 
       <ul id="navigation" class="govuk-header__navigation-list">
         {% for item in params.navigation %}

data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json

@@ -6,16 +6,16 @@
             "options": {
                 "text": "It's on your National Insurance card, benefit letter, payslip or P60.\nFor example, 'QQ 12 34 56 C'.\n"
             },
-            "html": "<div class=\"govuk-hint\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\nFor example, &#39;QQ 12 34 56 C&#39;.\n\n</div>",
-            "hidden": false
+            "hidden": false,
+            "html": "<div class=\"govuk-hint\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\nFor example, &#39;QQ 12 34 56 C&#39;.\n\n</div>"
         },
         {
             "name": "with html",
             "options": {
                 "html": "It's on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, 'QQ 12 34 56 C'.\n"
             },
-            "html": "<div class=\"govuk-hint\">\n  It's on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, 'QQ 12 34 56 C'.\n\n</div>",
-            "hidden": false
+            "hidden": false,
+            "html": "<div class=\"govuk-hint\">\n  It's on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, 'QQ 12 34 56 C'.\n\n</div>"
         },
         {
             "name": "classes",
@@ -24,8 +24,8 @@
                 "classes": "app-hint--custom-modifier",
                 "text": "It's on your National Insurance card, benefit letter, payslip or P60."
             },
-            "html": "<div id=\"example-hint\" class=\"govuk-hint app-hint--custom-modifier\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div id=\"example-hint\" class=\"govuk-hint app-hint--custom-modifier\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>"
         },
         {
             "name": "id",
@@ -33,16 +33,16 @@
                 "id": "my-hint",
                 "text": "It's on your National Insurance card, benefit letter, payslip or P60."
             },
-            "html": "<div id=\"my-hint\" class=\"govuk-hint\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div id=\"my-hint\" class=\"govuk-hint\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>"
         },
         {
             "name": "html as text",
             "options": {
                 "text": "Unexpected <strong>bold text</strong> in body"
             },
-            "html": "<div class=\"govuk-hint\">\n  Unexpected &lt;strong&gt;bold text&lt;/strong&gt; in body\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-hint\">\n  Unexpected &lt;strong&gt;bold text&lt;/strong&gt; in body\n</div>"
         },
         {
             "name": "attributes",
@@ -52,8 +52,8 @@
                     "data-attribute": "my data value"
                 }
             },
-            "html": "<div class=\"govuk-hint\" data-attribute=\"my data value\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-hint\" data-attribute=\"my data value\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>"
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/input/fixtures.json

@@ -10,8 +10,8 @@
                 "id": "input-example",
                 "name": "test-name"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with hint text",
@@ -25,8 +25,8 @@
                 "id": "input-with-hint-text",
                 "name": "test-name-2"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with error message",
@@ -43,8 +43,8 @@
                     "text": "Error message goes here"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with width-2 class",
@@ -59,8 +59,8 @@
                 "name": "test-width-2",
                 "classes": "govuk-input--width-2"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with width-3 class",
@@ -75,8 +75,8 @@
                 "name": "test-width-3",
                 "classes": "govuk-input--width-3"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with width-4 class",
@@ -91,8 +91,8 @@
                 "name": "test-width-4",
                 "classes": "govuk-input--width-4"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with width-5 class",
@@ -107,8 +107,8 @@
                 "name": "test-width-5",
                 "classes": "govuk-input--width-5"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with width-10 class",
@@ -123,8 +123,8 @@
                 "name": "test-width-10",
                 "classes": "govuk-input--width-10"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with width-20 class",
@@ -139,8 +139,8 @@
                 "name": "test-width-20",
                 "classes": "govuk-input--width-20"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with width-30 class",
@@ -155,8 +155,8 @@
                 "name": "test-width-30",
                 "classes": "govuk-input--width-30"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with label as page heading",
@@ -169,8 +169,8 @@
                 "id": "input-with-page-heading",
                 "name": "test-name"
             },
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" 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>",
-            "hidden": false
+            "hidden": false,
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label govuk-label--l\" 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>"
         },
         {
             "name": "with optional form-group classes",
@@ -184,8 +184,8 @@
                     "classes": "extra-class"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with autocomplete attribute",
@@ -197,8 +197,8 @@
                 "name": "postcode",
                 "autocomplete": "postal-code"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with pattern attribute",
@@ -211,8 +211,8 @@
                 "type": "number",
                 "pattern": "[0-9]*"
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with spellcheck enabled",
@@ -225,8 +225,8 @@
                 "type": "text",
                 "spellcheck": true
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with spellcheck disabled",
@@ -239,8 +239,8 @@
                 "type": "text",
                 "spellcheck": false
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with prefix",
@@ -254,8 +254,8 @@
                     "text": "£"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with suffix",
@@ -269,8 +269,8 @@
                     "text": "kg"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with prefix and suffix",
@@ -287,8 +287,8 @@
                     "text": "per item"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with prefix and long suffix",
@@ -305,8 +305,8 @@
                     "text": "per household member"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with prefix and suffix and error",
@@ -326,8 +326,8 @@
                     "text": "Error message goes here"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "with prefix and suffix and width modifier",
@@ -345,8 +345,8 @@
                     "text": "per item"
                 }
             },
-            "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>",
-            "hidden": false
+            "hidden": false,
+            "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>"
         },
         {
             "name": "classes",
@@ -358,8 +358,8 @@
                 },
                 "classes": "app-input--custom-modifier"
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "custom type",
@@ -371,8 +371,8 @@
                 },
                 "type": "number"
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "value",
@@ -384,8 +384,8 @@
                 },
                 "value": "QQ 12 34 56 C"
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with describedBy",
@@ -397,8 +397,8 @@
                 },
                 "describedBy": "some-id"
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "attributes",
@@ -412,8 +412,8 @@
                     "data-attribute": "my data value"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "hint with describedBy",
@@ -428,8 +428,8 @@
                     "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "error with describedBy",
@@ -444,8 +444,8 @@
                     "text": "Error message"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with error and hint",
@@ -462,8 +462,8 @@
                     "text": "Hint"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with error, hint and describedBy",
@@ -481,8 +481,8 @@
                 },
                 "describedBy": "some-id"
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "inputmode",
@@ -494,8 +494,8 @@
                 },
                 "inputmode": "decimal"
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with prefix with html as text",
@@ -509,8 +509,8 @@
                     "text": "<span>£</span>"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with prefix with html",
@@ -524,8 +524,8 @@
                     "html": "<span>£</span>"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with prefix with classes",
@@ -540,8 +540,8 @@
                     "classes": "app-input__prefix--custom-modifier"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with prefix with attributes",
@@ -558,8 +558,8 @@
                     }
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with suffix with html as text",
@@ -573,8 +573,8 @@
                     "text": "<span>kg</span>"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with suffix with html",
@@ -588,8 +588,8 @@
                     "html": "<span>kg</span>"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with suffix with classes",
@@ -604,8 +604,8 @@
                     "classes": "app-input__suffix--custom-modifier"
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         },
         {
             "name": "with suffix with attributes",
@@ -622,8 +622,8 @@
                     }
                 }
             },
-            "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>",
-            "hidden": true
+            "hidden": true,
+            "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>"
         }
     ]
 }