defra_ruby_template 3.13.0

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

@@ -0,0 +1,32 @@
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. We need this for error messages and hints as well -#}
+{% set idPrefix = params.idPrefix if params.idPrefix -%}
+
+<div {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="govuk-tabs">
+  <h2 class="govuk-tabs__title">
+    {{ params.title | default ("Contents") }}
+  </h2>
+  {% if(params.items | length) %}
+  <ul class="govuk-tabs__list">
+    {% for item in params.items %}
+      {% if item %}
+        {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+        <li class="govuk-tabs__list-item{% if loop.index == 1 %} govuk-tabs__list-item--selected{% endif %}">
+          <a class="govuk-tabs__tab" href="#{{ id }}"
+            {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+            {{ item.label }}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+  {% endif %}
+  {% for item in params.items %}
+    {% if item %}
+      {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+      <div class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ item.panel.html | safe if item.panel.html else item.panel.text }}
+      </div>
+    {% endif %}
+  {% endfor %}
+</div>

data/node_modules/govuk-frontend/govuk/components/tag/README.md

@@ -0,0 +1,15 @@
+# Tag
+
+## 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 tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).
+
+## 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/tag/#options-tag-example) for details.

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

@@ -0,0 +1,86 @@
+@include govuk-exports("govuk/component/tag") {
+  .govuk-tag {
+
+    display: inline-block;
+
+    // When a user customises their colours often the background is removed,
+    // by adding a outline we ensure that the tag component still keeps it's meaning.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+    letter-spacing: 1px;
+
+    text-decoration: none;
+    text-transform: uppercase;
+
+    @if $govuk-use-legacy-font {
+      // Since New Transport sits slightly higher than other common fonts.
+      // We use intentionally uneven padding to make it balanced, this can be
+      // removed using the version of the font that has a more common vertical spacing.
+      @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
+      padding-top: 4px;
+      padding-right: 8px;
+      padding-bottom: 1px;
+      padding-left: 8px;
+    } @else {
+      @include govuk-font($size: 16, $weight: bold, $line-height: 1);
+      padding-top: 5px;
+      padding-right: 8px;
+      padding-bottom: 4px;
+      padding-left: 8px;
+    }
+  }
+
+  // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
+  .govuk-tag--inactive {
+    background-color: govuk-colour("dark-grey", $legacy: "grey-1");
+  }
+
+  .govuk-tag--grey {
+    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
+    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("purple"), 20);
+    background: govuk-tint(govuk-colour("purple"), 80);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60);
+    background: govuk-tint(govuk-colour("turquoise"), 70);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 30);
+    background: govuk-tint(govuk-colour("blue"), 80);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65);
+    background: govuk-tint(govuk-colour("yellow"), 75);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55);
+    background: govuk-tint(govuk-colour("orange"), 70);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 30);
+    background: govuk-tint(govuk-colour("red"), 80);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 40);
+    background: govuk-tint(govuk-colour("pink"), 80);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20);
+    background: govuk-tint(govuk-colour("green"), 80);
+  }
+}

data/node_modules/govuk-frontend/govuk/components/tag/_tag.scss

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

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

@@ -0,0 +1,131 @@
+{
+    "component": "tag",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "text": "alpha"
+            },
+            "html": "<strong class=\"govuk-tag\">\n  alpha\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "inactive",
+            "options": {
+                "text": "alpha",
+                "classes": "govuk-tag--inactive"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--inactive\">\n  alpha\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "grey",
+            "options": {
+                "text": "Grey",
+                "classes": "govuk-tag--grey"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--grey\">\n  Grey\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "blue",
+            "options": {
+                "text": "Blue",
+                "classes": "govuk-tag--blue"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--blue\">\n  Blue\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "turquoise",
+            "options": {
+                "text": "Turquoise",
+                "classes": "govuk-tag--turquoise"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n  Turquoise\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "green",
+            "options": {
+                "text": "Green",
+                "classes": "govuk-tag--green"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--green\">\n  Green\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "purple",
+            "options": {
+                "text": "Purple",
+                "classes": "govuk-tag--purple"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--purple\">\n  Purple\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "pink",
+            "options": {
+                "text": "Pink",
+                "classes": "govuk-tag--pink"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--pink\">\n  Pink\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "red",
+            "options": {
+                "text": "Red",
+                "classes": "govuk-tag--red"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--red\">\n  Red\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "orange",
+            "options": {
+                "text": "Orange",
+                "classes": "govuk-tag--orange"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--orange\">\n  Orange\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "yellow",
+            "options": {
+                "text": "Yellow",
+                "classes": "govuk-tag--yellow"
+            },
+            "html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n  Yellow\n</strong>",
+            "hidden": false
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "text": "Tag with attributes",
+                "attributes": {
+                    "data-test": "attribute",
+                    "id": "my-tag"
+                }
+            },
+            "html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n  Tag with attributes\n</strong>",
+            "hidden": true
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "<span>alpha</span>"
+            },
+            "html": "<strong class=\"govuk-tag\">\n  &lt;span&gt;alpha&lt;/span&gt;\n</strong>",
+            "hidden": true
+        },
+        {
+            "name": "html",
+            "options": {
+                "html": "<span>alpha</span>"
+            },
+            "html": "<strong class=\"govuk-tag\">\n  <span>alpha</span>\n</strong>",
+            "hidden": true
+        }
+    ]
+}

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

@@ -0,0 +1,26 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the tag component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the tag component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the tag."
+    }
+]

data/node_modules/govuk-frontend/govuk/components/tag/macro.njk

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

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

@@ -0,0 +1,3 @@
+<strong class="govuk-tag{% if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ params.html | safe if params.html else params.text }}
+</strong>

data/node_modules/govuk-frontend/govuk/components/textarea/README.md

@@ -0,0 +1,15 @@
+# Textarea
+
+## 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 textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).
+
+## 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/textarea/#options-textarea-example) for details.

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

@@ -0,0 +1,47 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/textarea") {
+  .govuk-textarea {
+    @include govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box; // should this be global?
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: govuk-spacing(1);
+
+    resize: vertical;
+
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      // Double the border by adding its width again. Use `box-shadow` to do
+      // this instead of changing `border-width` (which changes element size) and
+      // since `outline` is already used for the yellow focus state.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+      @include govuk-if-ie8 {
+        // IE8 doesn't support `box-shadow` so double the border with
+        // `border-width`.
+        border-width: $govuk-border-width-form-element * 2;
+      }
+    }
+  }
+
+  .govuk-textarea--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/textarea/_textarea.scss

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

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

@@ -0,0 +1,250 @@
+{
+    "component": "textarea",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "name": "more-detail",
+                "id": "more-detail",
+                "label": {
+                    "text": "Can you provide more detail?"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with hint",
+            "options": {
+                "name": "more-detail",
+                "id": "more-detail",
+                "label": {
+                    "text": "Can you provide more detail?"
+                },
+                "hint": {
+                    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n  \n  \n  <div id=\"more-detail-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n\n\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with error message",
+            "options": {
+                "name": "no-ni-reason",
+                "id": "no-ni-reason",
+                "label": {
+                    "text": "Why can’t you provide a National Insurance number?"
+                },
+                "errorMessage": {
+                    "text": "You must provide an explanation"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"no-ni-reason\">\n    Why can’t you provide a National Insurance number?\n  </label>\n\n\n  \n  \n  <span id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with default value",
+            "options": {
+                "id": "full-address",
+                "name": "address",
+                "value": "221B Baker Street\nLondon\nNW1 6XE\n",
+                "label": {
+                    "text": "Full address"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with custom rows",
+            "options": {
+                "id": "full-address",
+                "name": "address",
+                "label": {
+                    "text": "Full address"
+                },
+                "rows": 8
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with label as page heading",
+            "options": {
+                "id": "textarea-with-page-heading",
+                "name": "address",
+                "label": {
+                    "text": "Full address",
+                    "isPageHeading": true
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with optional form-group classes",
+            "options": {
+                "id": "textarea-with-page-heading",
+                "name": "address",
+                "label": {
+                    "text": "Full address"
+                },
+                "formGroup": {
+                    "classes": "extra-class"
+                }
+            },
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with autocomplete attribute",
+            "options": {
+                "id": "textarea-with-autocomplete-attribute",
+                "name": "address",
+                "label": {
+                    "text": "Full address"
+                },
+                "autocomplete": "street-address"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n    Full address\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with spellcheck enabled",
+            "options": {
+                "label": {
+                    "text": "Spellcheck is enabled"
+                },
+                "id": "textarea-with-spellcheck-enabled",
+                "name": "spellcheck",
+                "spellcheck": true
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with spellcheck disabled",
+            "options": {
+                "label": {
+                    "text": "Spellcheck is disabled"
+                },
+                "id": "textarea-with-spellcheck-disabled",
+                "name": "spellcheck",
+                "spellcheck": false
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "classes",
+            "options": {
+                "id": "with-classes",
+                "name": "with-classes",
+                "label": {
+                    "text": "With classes"
+                },
+                "classes": "app-textarea--custom-modifier"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n\n\n  <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\"></textarea>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "label": {
+                    "text": "With attributes"
+                },
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with describedBy",
+            "options": {
+                "id": "with-describedby",
+                "name": "with-describedby",
+                "label": {
+                    "text": "With describedBy"
+                },
+                "describedBy": "some-id"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n\n\n  <textarea class=\"govuk-textarea\" id=\"with-describedby\" name=\"with-describedby\" rows=\"5\" aria-describedby=\"some-id\"></textarea>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with hint and described by",
+            "options": {
+                "id": "with-hint-describedby",
+                "name": "with-hint-describedby",
+                "label": {
+                    "text": "With hint and describedBy"
+                },
+                "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  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint and describedBy\n  </label>\n\n  \n  \n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n\n  <textarea class=\"govuk-textarea\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-describedby-hint\"></textarea>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with error message and described by",
+            "options": {
+                "name": "textarea-with-error",
+                "label": {
+                    "text": "Textarea with error"
+                },
+                "describedBy": "some-id",
+                "id": "textarea-with-error",
+                "errorMessage": {
+                    "text": "Error message"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"textarea-with-error\">\n    Textarea with error\n  </label>\n\n\n  \n  \n  <span id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with hint and error message",
+            "options": {
+                "id": "with-hint-error",
+                "name": "with-hint-error",
+                "label": {
+                    "text": "With hint and error"
+                },
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "hint": {
+                    "text": "Hint"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error\">\n    With hint and error\n  </label>\n\n  \n  \n  <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"with-hint-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with hint, error message and described by",
+            "options": {
+                "id": "with-hint-error-describedby",
+                "name": "with-hint-error-describedby",
+                "label": {
+                    "text": "With hint, error and describedBy"
+                },
+                "describedBy": "some-id",
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "hint": {
+                    "text": "Hint"
+                }
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n    With hint, error and describedBy\n  </label>\n\n  \n  \n  <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>",
+            "hidden": true
+        }
+    ]
+}