govuk_publishing_components 23.3.0 → 23.7.0

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

@@ -51,7 +51,7 @@
                 "name": "href",
                 "type": "string",
                 "required": false,
-                "description": "Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item."
+                "description": "Url of the navigation item anchor."
             },
             {
                 "name": "active",
@@ -73,6 +73,18 @@
         "required": false,
         "description": "Classes for the navigation section of the header."
     },
+    {
+        "name": "navigationLabel",
+        "type": "string",
+        "required": false,
+        "description": "Text for the `aria-label` attribute of the navigation. Defaults to \"Navigation menu\"."
+    },
+    {
+        "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 navigation menu\"."
+    },
     {
         "name": "containerClasses",
         "type": "string",

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

@@ -60,15 +60,19 @@
     </a>
     {% endif %}
     {% if params.navigation %}
-    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide navigation menu') }}">Menu</button>
     <nav>
-      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
+      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Navigation menu') }}">
         {% for item in params.navigation %}
-          {% if item.href and (item.text or item.html) %}
+          {% if item.text or item.html %}
             <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
-              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+              {% if item.href %}
+                <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+              {% endif %}
                 {{ item.html | safe if item.html else item.text }}
-              </a>
+              {% if item.href %}
+                </a>
+              {% endif %}
             </li>
           {% endif %}
         {% endfor %}

data/node_modules/govuk-frontend/govuk/components/hint/_index.scss

@@ -38,8 +38,6 @@
   }
 
   // Reduces visual spacing of legend when there is a hint
-
-  .govuk-fieldset__legend + .govuk-hint,
   .govuk-fieldset__legend + .govuk-hint {
     margin-top: -(govuk-spacing(1));
   }

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

@@ -0,0 +1,50 @@
+{
+    "component": "hint",
+    "fixtures": [
+        {
+            "name": "default",
+            "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>"
+        },
+        {
+            "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>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "id": "example-hint",
+                "classes": "app-hint--custom-modifier"
+            },
+            "html": "<div id=\"example-hint\" class=\"govuk-hint app-hint--custom-modifier\">\n  \n</div>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "id": "my-hint"
+            },
+            "html": "<div id=\"my-hint\" class=\"govuk-hint\">\n  \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>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-hint\" data-attribute=\"my data value\">\n  \n</div>"
+        }
+    ]
+}

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

@@ -14,7 +14,7 @@
     {
         "name": "id",
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "Optional id attribute to add to the hint span tag."
     },
     {

data/node_modules/govuk-frontend/govuk/components/input/_index.scss

@@ -93,4 +93,95 @@
     max-width: 5.4ex;
   }
 
+  .govuk-input__wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    .govuk-input {
+      -webkit-box-flex: 0;
+          -ms-flex: 0 1 auto;
+              flex: 0 1 auto;
+    }
+
+    .govuk-input:focus {
+      // Hack to stop focus style being overlapped by the suffix
+      z-index: 1;
+    }
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+
+      .govuk-input {
+        // Set max-width to override potential width override class on the input
+        max-width: 100%;
+      }
+    }
+  }
+
+  .govuk-input__prefix,
+  .govuk-input__suffix {
+    @include govuk-font($size: 19);
+
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 40px;
+    @if $govuk-typography-use-rem {
+      min-width: govuk-px-to-rem(40px);
+    }
+    height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
+
+    padding: govuk-spacing(1);
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+
+    text-align: center;
+    @include govuk-media-query($until: tablet) {
+      line-height: 1.6;
+    }
+    white-space: nowrap;
+
+    // Emphasise non-editable status of prefixes and suffixes
+    cursor: default;
+
+    -webkit-box-flex: 0;
+
+        -ms-flex: 0 0 auto;
+
+            flex: 0 0 auto;
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @include govuk-media-query($until: mobile) {
+      display: block;
+      height: 100%;
+      white-space: normal;
+    }
+  }
+
+  .govuk-input__prefix {
+    @include govuk-media-query($until: mobile) {
+      border-bottom: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      @include govuk-not-ie8 {
+        border-right: 0;
+      }
+    }
+  }
+
+  // Split prefix/suffix onto separate lines on narrow screens
+  .govuk-input__suffix {
+    @include govuk-media-query($until: mobile) {
+      border-top: 0;
+    }
+    @include govuk-media-query($from: mobile) {
+      @include govuk-not-ie8 {
+        border-left: 0;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,538 @@
+{
+    "component": "input",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "label": {
+                    "text": "National Insurance number"
+                },
+                "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</div>"
+        },
+        {
+            "name": "with hint text",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "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</div>"
+        },
+        {
+            "name": "with error message",
+            "options": {
+                "label": {
+                    "text": "National Insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-with-error-message",
+                "name": "test-name-3",
+                "errorMessage": {
+                    "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  <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>"
+        },
+        {
+            "name": "with width-2 class",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-width-2",
+                "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</div>"
+        },
+        {
+            "name": "with width-3 class",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-width-3",
+                "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</div>"
+        },
+        {
+            "name": "with width-4 class",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-width-4",
+                "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</div>"
+        },
+        {
+            "name": "with width-5 class",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-width-5",
+                "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</div>"
+        },
+        {
+            "name": "with width-10 class",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-width-10",
+                "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</div>"
+        },
+        {
+            "name": "with width-20 class",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-width-20",
+                "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</div>"
+        },
+        {
+            "name": "with width-30 class",
+            "options": {
+                "label": {
+                    "text": "National insurance number"
+                },
+                "hint": {
+                    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
+                },
+                "id": "input-width-30",
+                "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</div>"
+        },
+        {
+            "name": "with label as page heading",
+            "options": {
+                "label": {
+                    "text": "National Insurance number",
+                    "isPageHeading": true
+                },
+                "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\" 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>"
+        },
+        {
+            "name": "with optional form-group classes",
+            "options": {
+                "label": {
+                    "text": "National Insurance number"
+                },
+                "id": "input-example",
+                "name": "test-name",
+                "formGroup": {
+                    "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</div>"
+        },
+        {
+            "name": "with autocomplete attribute",
+            "options": {
+                "label": {
+                    "text": "Postcode"
+                },
+                "id": "input-with-autocomplete-attribute",
+                "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</div>"
+        },
+        {
+            "name": "with pattern attribute",
+            "options": {
+                "label": {
+                    "text": "Numbers only"
+                },
+                "id": "input-with-pattern-attribute",
+                "name": "numbers-only",
+                "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</div>"
+        },
+        {
+            "name": "with spellcheck enabled",
+            "options": {
+                "label": {
+                    "text": "Spellcheck is enabled"
+                },
+                "id": "input-with-spellcheck-enabled",
+                "name": "spellcheck",
+                "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</div>"
+        },
+        {
+            "name": "with spellcheck disabled",
+            "options": {
+                "label": {
+                    "text": "Spellcheck is disabled"
+                },
+                "id": "input-with-spellcheck-disabled",
+                "name": "spellcheck",
+                "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</div>"
+        },
+        {
+            "name": "with prefix",
+            "options": {
+                "label": {
+                    "text": "Amount, in pounds"
+                },
+                "id": "input-with-prefix",
+                "name": "amount",
+                "prefix": {
+                    "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\">\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>"
+        },
+        {
+            "name": "with suffix",
+            "options": {
+                "label": {
+                    "text": "Weight, in kilograms"
+                },
+                "id": "input-with-suffix",
+                "name": "weight",
+                "suffix": {
+                    "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\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with prefix and suffix",
+            "options": {
+                "label": {
+                    "text": "Cost per item, in pounds"
+                },
+                "id": "input-with-prefix-suffix",
+                "name": "cost",
+                "prefix": {
+                    "text": "£"
+                },
+                "suffix": {
+                    "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\">\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>"
+        },
+        {
+            "name": "with prefix and long suffix",
+            "options": {
+                "label": {
+                    "text": "Cost per item, in pounds, per household member"
+                },
+                "id": "input-with-prefix-suffix",
+                "name": "cost",
+                "prefix": {
+                    "text": "£"
+                },
+                "suffix": {
+                    "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\">\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>"
+        },
+        {
+            "name": "with prefix and suffix and error",
+            "options": {
+                "label": {
+                    "text": "Cost per item, in pounds"
+                },
+                "id": "input-with-prefix-suffix",
+                "name": "cost",
+                "prefix": {
+                    "text": "£"
+                },
+                "suffix": {
+                    "text": "per item"
+                },
+                "errorMessage": {
+                    "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  <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>"
+        },
+        {
+            "name": "with prefix and suffix and width modifier",
+            "options": {
+                "label": {
+                    "text": "Cost per item, in pounds"
+                },
+                "id": "input-with-prefix-suffix",
+                "name": "cost",
+                "classes": "govuk-input--width-5",
+                "prefix": {
+                    "text": "£"
+                },
+                "suffix": {
+                    "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\">\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>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "app-input--custom-modifier"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"\" name=\"\" type=\"text\">\n</div>"
+        },
+        {
+            "name": "custom type",
+            "options": {
+                "type": "number"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"number\">\n</div>"
+        },
+        {
+            "name": "value",
+            "options": {
+                "value": "QQ 12 34 56 C"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
+        },
+        {
+            "name": "with describedBy",
+            "options": {
+                "describedBy": "some-id"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id\">\n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" data-attribute=\"my data value\">\n</div>"
+        },
+        {
+            "name": "hint with describedBy",
+            "options": {
+                "describedBy": "some-id",
+                "hint": {
+                    "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  \n\n  \n  \n  <div id=\"undefined-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=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-hint\">\n</div>"
+        },
+        {
+            "name": "error with describedBy",
+            "options": {
+                "describedBy": "some-id",
+                "errorMessage": {
+                    "text": "Error message"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"undefined-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=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-error\">\n</div>"
+        },
+        {
+            "name": "with error and hint",
+            "options": {
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "hint": {
+                    "text": "Hint"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-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=\"\" name=\"\" type=\"text\" aria-describedby=\"undefined-hint undefined-error\">\n</div>"
+        },
+        {
+            "name": "with error, hint and describedBy",
+            "options": {
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "hint": {
+                    "text": "Hint"
+                },
+                "describedBy": "some-id"
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-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=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-hint undefined-error\">\n</div>"
+        },
+        {
+            "name": "inputmode",
+            "options": {
+                "inputmode": "decimal"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" inputmode=\"decimal\">\n</div>"
+        },
+        {
+            "name": "with prefix with html as text",
+            "options": {
+                "label": {
+                    "text": "Amount, in pounds"
+                },
+                "id": "input-with-prefix",
+                "name": "amount",
+                "prefix": {
+                    "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\">\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>"
+        },
+        {
+            "name": "with prefix with html",
+            "options": {
+                "label": {
+                    "html": "Amount, in pounds"
+                },
+                "id": "input-with-prefix",
+                "name": "amount",
+                "prefix": {
+                    "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\">\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>"
+        },
+        {
+            "name": "with prefix with classes",
+            "options": {
+                "label": {
+                    "text": "Amount, in pounds"
+                },
+                "id": "input-with-prefix-element",
+                "name": "amount",
+                "prefix": {
+                    "text": "£",
+                    "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\">\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>"
+        },
+        {
+            "name": "with prefix with attributes",
+            "options": {
+                "label": {
+                    "text": "Amount, in pounds"
+                },
+                "id": "input-with-prefix-element",
+                "name": "amount",
+                "prefix": {
+                    "text": "£",
+                    "attributes": {
+                        "data-attribute": "value"
+                    }
+                }
+            },
+            "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>"
+        },
+        {
+            "name": "with suffix with html as text",
+            "options": {
+                "label": {
+                    "text": "Weight, in kilograms"
+                },
+                "id": "input-with-suffix",
+                "name": "weight",
+                "suffix": {
+                    "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\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with suffix with html",
+            "options": {
+                "label": {
+                    "text": "Weight, in kilograms"
+                },
+                "id": "input-with-suffix",
+                "name": "weight",
+                "suffix": {
+                    "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\">\n    <div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with suffix with classes",
+            "options": {
+                "label": {
+                    "text": "Weight, in kilograms"
+                },
+                "id": "input-with-suffix",
+                "name": "weight",
+                "suffix": {
+                    "html": "<span>kg</span>",
+                    "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\">\n    <div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n  </div>\n</div>"
+        },
+        {
+            "name": "with suffix with attributes",
+            "options": {
+                "label": {
+                    "text": "Weight, in kilograms"
+                },
+                "id": "input-with-suffix",
+                "name": "weight",
+                "suffix": {
+                    "html": "<span>kg</span>",
+                    "attributes": {
+                        "data-attribute": "value"
+                    }
+                }
+            },
+            "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>"
+        }
+    ]
+}