defra_ruby_template 3.13.0

data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json

@@ -0,0 +1,132 @@
+[
+    {
+        "name": "ariaLabel",
+        "type": "string",
+        "required": false,
+        "description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to \"Cookie banner\"."
+    },
+    {
+        "name": "hidden",
+        "type": "boolean",
+        "required": false,
+        "description": "Defaults to `false`. If you set this option to `true`, the whole cookie banner is hidden, including all messages within the banner. You can use `hidden` for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "The additional classes that you want to add to the cookie banner."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "The additional attributes that you want to add to the cookie banner. For example, data attributes."
+    },
+    {
+        "name": "messages",
+        "type": "array",
+        "required": true,
+        "description": "The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.",
+        "params": [
+            {
+                "name": "headingText",
+                "type": "string",
+                "required": false,
+                "description": "The heading text that displays in the message. You can use any string with this option. If you set `headingHtml`, `headingText` is ignored."
+            },
+            {
+                "name": "headingHtml",
+                "type": "string",
+                "required": false,
+                "description": "The heading HTML to use within the message. You can use any string with this option. If you set `headingHtml`, `headingText` is ignored. If you are not passing HTML, use `headingText`."
+            },
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "The text for the main content within the message. You can use any string with this option. If you set `html`, `text` is not required and is ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": true,
+                "description": "The HTML for the main content within the message. You can use any string with this option. If you set `html`, `text` is not required and is ignored. If you are not passing HTML, use `text`."
+            },
+            {
+                "name": "actions",
+                "type": "array",
+                "required": false,
+                "description": "The buttons and links that you want to display in the message. `actions` defaults to `button` unless you set `href`, which renders the action as a link.",
+                "params": [
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "The button or link text."
+                    },
+                    {
+                        "name": "type",
+                        "type": "string",
+                        "required": false,
+                        "description": "The type of button. You can set `button` or `submit`. Set `button` and `href` to render a link styled as a button. If you set `href`, it overrides `submit`."
+                    },
+                    {
+                        "name": "href",
+                        "type": "string",
+                        "required": false,
+                        "description": "The `href` for a link. Set `button` and `href` to render a link styled as a button."
+                    },
+                    {
+                        "name": "name",
+                        "type": "string",
+                        "required": false,
+                        "description": "The name attribute for the button. Does not apply if you set `href`, which makes a link."
+                    },
+                    {
+                        "name": "value",
+                        "type": "string",
+                        "required": false,
+                        "description": "The value attribute for the button. Does not apply if you set `href`, which makes a link."
+                    },
+                    {
+                        "name": "classes",
+                        "type": "string",
+                        "required": false,
+                        "description": "The additional classes that you want to add to the button or link."
+                    },
+                    {
+                        "name": "attributes",
+                        "type": "object",
+                        "required": false,
+                        "description": "The additional attributes that you want to add to the button or link. For example, data attributes."
+                    }
+                ]
+            },
+            {
+                "name": "hidden",
+                "type": "boolean",
+                "required": false,
+                "description": "Defaults to `false`. If you set it to `true`, the message is hidden. You can use `hidden` for client-side implementations where the confirmation message HTML is present, but hidden on the page."
+            },
+            {
+                "name": "role",
+                "type": "string",
+                "required": false,
+                "description": "Set `role` to `alert` on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself."
+            },
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "The additional classes that you want to add to the message."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "The additional attributes that you want to add to the message. For example, data attributes."
+            }
+        ]
+    }
+]

data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukCookieBanner(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk

@@ -0,0 +1,73 @@
+{% from "../button/macro.njk" import govukButton -%}
+
+<div class="govuk-cookie-banner {{ params.classes if params.classes }}" data-nosnippet role="region" aria-label="{{ params.ariaLabel | default("Cookie banner") }}"
+  {%- if params.hidden %} hidden{% endif %}
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+
+  {%- for message in params.messages %}
+    {% set classNames = "govuk-cookie-banner__message govuk-width-container" %}
+    {% if message.classes %}
+      {% set classNames = classNames + " " + message.classes %}
+    {% endif %}
+
+    <div class="{{classNames}}" {%- if message.role %} role="{{message.role}}"{% endif %}
+    {%- for attribute, value in message.attributes %} {{attribute}}="{{value}}"{% endfor %}
+    {% if message.hidden %} hidden{% endif %}>
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        {% if message.headingHtml or message.headingText %}
+        <h2 class="govuk-cookie-banner__heading govuk-heading-m">
+          {%- if message.headingHtml -%}
+            {{ message.headingHtml | safe }}
+          {%- else -%}
+            {{ message.headingText }}
+          {%- endif -%}
+        </h2>
+        {% endif %}
+
+        <div class="govuk-cookie-banner__content">
+          {%- if message.html -%}
+            {{ message.html | safe }}
+          {%- elif message.text -%}
+            <p class="govuk-body">{{ message.text }}</p>
+          {%- endif -%}
+        </div>
+      </div>
+    </div>
+
+      {% if message.actions %}
+      <div class="govuk-button-group">
+        {% for action in message.actions %}
+          {% if action.href %}
+            {% if action.type == "button" %}
+              {{ govukButton({
+                "text": action.text,
+                "type": "button",
+                "classes": action.classes,
+                "href": action.href,
+                "attributes": action.attributes
+              }) | indent(12) | trim }}
+            {% else %}
+              {% set linkClasses = "govuk-link" %}
+              {% if action.classes %}
+                {% set linkClasses = linkClasses + " " + action.classes %}
+              {% endif %}
+              <a class="{{ linkClasses }}" href="{{ action.href }}" {%- for attribute, value in action.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ action.text }}</a>
+            {% endif %}
+          {% else %}
+            {{ govukButton({
+              "text": action.text,
+              "value": action.value,
+              "name": action.name,
+              "type": action.type,
+              "classes": action.classes,
+              "attributes": action.attributes
+            }) | indent(12) | trim }}
+          {% endif %}
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>

data/node_modules/govuk-frontend/govuk/components/date-input/README.md

@@ -0,0 +1,15 @@
+# Date input
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the date input component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/date-input).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/date-input/#options-date-input-example) for details.

data/node_modules/govuk-frontend/govuk/components/date-input/_date-input.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

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

@@ -0,0 +1,26 @@
+@import "../error-message/index";
+@import "../input/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/date-input") {
+  .govuk-date-input {
+    @include govuk-clearfix;
+    // font-size: 0 removes whitespace caused by inline-block
+    font-size: 0;
+  }
+
+  .govuk-date-input__item {
+    display: inline-block;
+    margin-right: govuk-spacing(4);
+    margin-bottom: 0;
+  }
+
+  .govuk-date-input__label {
+    display: block;
+  }
+
+  .govuk-date-input__input {
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,549 @@
+{
+    "component": "date-input",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "id": "dob"
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"dob\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "complete question",
+            "options": {
+                "id": "dob",
+                "namePrefix": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  <div class=\"govuk-date-input\" id=\"dob\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with errors only",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2 govuk-input--error"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2 govuk-input--error"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4 govuk-input--error"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </span>\n\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with errors and hint",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2 govuk-input--error"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2 govuk-input--error"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4 govuk-input--error"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  \n  \n  <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </span>\n\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with error on day input",
+            "options": {
+                "id": "dob-day-error",
+                "namePrefix": "dob-day-error",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2 govuk-input--error"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  \n  \n  <span id=\"dob-day-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </span>\n\n  <div class=\"govuk-date-input\" id=\"dob-day-error\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with error on month input",
+            "options": {
+                "id": "dob-month-error",
+                "namePrefix": "dob-month-error",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2 govuk-input--error"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  \n  \n  <span id=\"dob-month-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </span>\n\n  <div class=\"govuk-date-input\" id=\"dob-month-error\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with error on year input",
+            "options": {
+                "id": "dob-year-error",
+                "namePrefix": "dob-year-error",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4 govuk-input--error"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  \n  \n  <span id=\"dob-year-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </span>\n\n  <div class=\"govuk-date-input\" id=\"dob-year-error\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with default items",
+            "options": {
+                "id": "dob",
+                "namePrefix": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  <div class=\"govuk-date-input\" id=\"dob\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with optional form-group classes",
+            "options": {
+                "id": "dob",
+                "namePrefix": "dob",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "formGroup": {
+                    "classes": "extra-class"
+                }
+            },
+            "html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  <div class=\"govuk-date-input\" id=\"dob\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with autocomplete values",
+            "options": {
+                "id": "dob-with-autocomplete-attribute",
+                "namePrefix": "dob-with-autocomplete",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2",
+                        "autocomplete": "bday-day"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2",
+                        "autocomplete": "bday-month"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4",
+                        "autocomplete": "bday-year"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with input attributes",
+            "options": {
+                "id": "dob-with-input-attributes",
+                "namePrefix": "dob-with-input-attributes",
+                "fieldset": {
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                },
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "govuk-input--width-2",
+                        "attributes": {
+                            "data-example-day": "day"
+                        }
+                    },
+                    {
+                        "name": "month",
+                        "classes": "govuk-input--width-2",
+                        "attributes": {
+                            "data-example-month": "month"
+                        }
+                    },
+                    {
+                        "name": "year",
+                        "classes": "govuk-input--width-4",
+                        "attributes": {
+                            "data-example-year": "year"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-day=\"day\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-month=\"month\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\" data-example-year=\"year\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "classes",
+            "options": {
+                "id": "with-classes",
+                "classes": "app-date-input--custom-modifier"
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "id": "with-attributes",
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with empty items",
+            "options": {
+                "id": "with-empty-items",
+                "items": []
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"with-empty-items\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "custom pattern",
+            "options": {
+                "id": "with-custom-pattern",
+                "items": [
+                    {
+                        "name": "day",
+                        "pattern": "[0-8]*"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "custom inputmode",
+            "options": {
+                "id": "with-custom-inputmode",
+                "items": [
+                    {
+                        "name": "day",
+                        "pattern": "[0-9X]*",
+                        "inputmode": "text"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with nested name",
+            "options": {
+                "id": "with-nested-name",
+                "items": [
+                    {
+                        "name": "day[dd]"
+                    },
+                    {
+                        "name": "month[mm]"
+                    },
+                    {
+                        "name": "year[yyyy]"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"with-nested-name\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n          Day[dd]\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n          Month[mm]\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n          Year[yyyy]\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with id on items",
+            "options": {
+                "id": "with-item-id",
+                "items": [
+                    {
+                        "id": "day",
+                        "name": "day"
+                    },
+                    {
+                        "id": "month",
+                        "name": "month"
+                    },
+                    {
+                        "id": "year",
+                        "name": "year"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"with-item-id\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "suffixed id",
+            "options": {
+                "id": "my-date-input",
+                "items": [
+                    {
+                        "name": "day"
+                    },
+                    {
+                        "name": "month"
+                    },
+                    {
+                        "name": "year"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"my-date-input\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with values",
+            "options": {
+                "id": "with-values",
+                "items": [
+                    {
+                        "id": "day",
+                        "name": "day"
+                    },
+                    {
+                        "id": "month",
+                        "name": "month"
+                    },
+                    {
+                        "id": "year",
+                        "name": "year",
+                        "value": 2018
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"with-values\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with hint and describedBy",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "describedBy": "some-id",
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "hint": {
+                    "text": "For example, 31 3 1980"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-hint\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n\n\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with error and describedBy",
+            "options": {
+                "id": "dob-errors",
+                "fieldset": {
+                    "describedBy": "some-id",
+                    "legend": {
+                        "text": "What is your date of birth?"
+                    }
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"some-id dob-errors-error\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your date of birth?\n  \n  </legend>\n  \n\n  <span id=\"dob-errors-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </span>\n\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "fieldset html",
+            "options": {
+                "id": "with-fieldset-html",
+                "fieldset": {
+                    "legend": {
+                        "html": "What is your <b>date of birth</b>?"
+                    }
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your <b>date of birth</b>?\n  \n  </legend>\n  \n\n  <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n  \n\n</fieldset>\n\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "items with classes",
+            "options": {
+                "id": "with-item-classes",
+                "items": [
+                    {
+                        "name": "day",
+                        "classes": "app-date-input__day"
+                    },
+                    {
+                        "name": "month",
+                        "classes": "app-date-input__month"
+                    },
+                    {
+                        "name": "year",
+                        "classes": "app-date-input__year"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"with-item-classes\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "items without classes",
+            "options": {
+                "id": "without-item-classes",
+                "items": [
+                    {
+                        "name": "day"
+                    },
+                    {
+                        "name": "month"
+                    },
+                    {
+                        "name": "year"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" id=\"without-item-classes\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>",
+            "hidden": true
+        }
+    ]
+}