govuk-frontend - npm Package Compare versions

Comparing version 3.9.1 to 3.10.0

govuk/components/accordion/fixtures.json

@@ -141,2 +141,3 @@ {
             "options": {
+                "id": "accordion-classes",
                 "classes": "myClass",
@@ -154,3 +155,3 @@ "items": [
             },
-            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
@@ -160,2 +161,3 @@ {
             "options": {
+                "id": "accordion-attributes",
                 "attributes": {
@@ -175,3 +177,3 @@ "data-attribute": "value"
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
@@ -181,2 +183,3 @@ {
             "options": {
+                "id": "accordion-heading",
                 "headingLevel": 3,
@@ -194,3 +197,3 @@ "items": [
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
@@ -200,2 +203,3 @@ {
             "options": {
+                "id": "accordion-heading-html",
                 "items": [
@@ -212,3 +216,3 @@ {
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         },
@@ -218,2 +222,3 @@ {
             "options": {
+                "id": "accordion-falsey",
                 "items": [
@@ -241,5 +246,5 @@ {
             },
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
         }
     ]
 }

govuk/components/back-link/macro-options.json

@@ -5,4 +5,4 @@ [
         "type": "string",
-        "required": true,
-        "description": "If `html` is set, this is not required. Text to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+        "required": false,
+        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
     },
@@ -12,4 +12,4 @@ {
         "type": "string",
-        "required": true,
-        "description": "If `text` is set, this is not required. HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored."
+        "required": false,
+        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to \"Back\"."
     },
@@ -16,0 +16,0 @@ {

govuk/components/breadcrumbs/fixtures.json

@@ -115,5 +115,10 @@ {
             "options": {
-                "classes": "app-breadcrumbs--custom-modifier"
+                "classes": "app-breadcrumbs--custom-modifier",
+                "items": [
+                    {
+                        "text": "Home"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs app-breadcrumbs--custom-modifier\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>"
         },
@@ -126,5 +131,10 @@ {
                     "role": "navigation"
-                }
+                },
+                "items": [
+                    {
+                        "text": "Home"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n  </ol>\n</div>"
+            "html": "<div class=\"govuk-breadcrumbs \" id=\"my-navigation\" role=\"navigation\">\n  <ol class=\"govuk-breadcrumbs__list\">\n  \n    \n    <li class=\"govuk-breadcrumbs__list-item\" aria-current=\"page\">Home</li>\n    \n  \n  </ol>\n</div>"
         },
@@ -131,0 +141,0 @@ {

govuk/components/breadcrumbs/macro-options.json

@@ -29,2 +29,3 @@ [
                 "type": "object",
+                "required": false,
                 "description": "HTML attributes (for example data attributes) to add to the individual crumb."
@@ -31,0 +32,0 @@ }

govuk/components/button/fixtures.json

@@ -160,2 +160,3 @@ {
                 "element": "button",
+                "text": "Submit",
                 "attributes": {
@@ -166,3 +167,3 @@ "aria-controls": "example-id",
             },
-            "html": "<button class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n  \n</button>"
+            "html": "<button class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n  Submit\n</button>"
         },
@@ -173,2 +174,3 @@ {
                 "element": "a",
+                "text": "Submit",
                 "attributes": {
@@ -179,3 +181,3 @@ "aria-controls": "example-id",
             },
-            "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n  \n</a>"
+            "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n  Submit\n</a>"
         },
@@ -186,2 +188,3 @@ {
                 "element": "input",
+                "text": "Submit",
                 "attributes": {
@@ -192,3 +195,3 @@ "aria-controls": "example-id",
             },
-            "html": "<input value=\"\" type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">"
+            "html": "<input value=\"Submit\" type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">"
         },
@@ -198,6 +201,7 @@ {
             "options": {
+                "text": "Submit",
                 "element": "button",
                 "classes": "app-button--custom-modifier"
             },
-            "html": "<button class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n  \n</button>"
+            "html": "<button class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n  Submit\n</button>"
         },
@@ -207,6 +211,7 @@ {
             "options": {
+                "text": "Submit",
                 "element": "a",
                 "classes": "app-button--custom-modifier"
             },
-            "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n  \n</a>"
+            "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n  Submit\n</a>"
         },
@@ -216,6 +221,7 @@ {
             "options": {
+                "text": "Submit",
                 "element": "input",
                 "classes": "app-button--custom-modifier"
             },
-            "html": "<input value=\"\" type=\"submit\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">"
+            "html": "<input value=\"Submit\" type=\"submit\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">"
         },
@@ -225,6 +231,7 @@ {
             "options": {
+                "text": "Submit",
                 "element": "button",
                 "name": "start-now"
             },
-            "html": "<button name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">\n  \n</button>"
+            "html": "<button name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
         },
@@ -234,6 +241,7 @@ {
             "options": {
+                "text": "Submit",
                 "element": "button",
                 "type": "button"
             },
-            "html": "<button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n  \n</button>"
+            "html": "<button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
         },
@@ -243,6 +251,7 @@ {
             "options": {
+                "text": "Submit",
                 "element": "input",
                 "type": "button"
             },
-            "html": "<input value=\"\" type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">"
+            "html": "<input value=\"Submit\" type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">"
         },
@@ -261,5 +270,6 @@ {
             "options": {
+                "text": "Submit",
                 "element": "a"
             },
-            "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n  \n</a>"
+            "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</a>"
         },
@@ -269,6 +279,7 @@ {
             "options": {
+                "text": "Submit",
                 "element": "button",
                 "value": "start"
             },
-            "html": "<button value=\"start\" class=\"govuk-button\" data-module=\"govuk-button\">\n  \n</button>"
+            "html": "<button value=\"start\" class=\"govuk-button\" data-module=\"govuk-button\">\n  Submit\n</button>"
         },
@@ -278,2 +289,3 @@ {
             "options": {
+                "text": "Submit",
                 "element": "button",
@@ -280,0 +292,0 @@ "html": "Start <em>now</em>"

govuk/components/character-count/fixtures.json

@@ -114,5 +114,11 @@ {
             "options": {
+                "id": "with-classes",
+                "name": "with-classes",
+                "maxlength": 10,
+                "label": {
+                    "text": "With classes"
+                },
                 "classes": "app-character-count--custom-modifier"
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  \n\n<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n  <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to undefined characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<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 govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n</div>\n\n  <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -122,2 +128,8 @@ {
             "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "maxlength": 10,
+                "label": {
+                    "text": "With attributes"
+                },
                 "attributes": {
@@ -127,3 +139,3 @@ "data-attribute": "my data value"
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  \n\n<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n  <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to undefined characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<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 govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n  <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -133,2 +145,8 @@ {
             "options": {
+                "id": "with-formgroup",
+                "name": "with-formgroup",
+                "maxlength": 10,
+                "label": {
+                    "text": "With formgroup"
+                },
                 "formGroup": {
@@ -138,3 +156,3 @@ "classes": "app-character-count--custom-modifier"
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  \n\n<div class=\"govuk-form-group app-character-count--custom-modifier\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n  <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to undefined characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group app-character-count--custom-modifier\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n</div>\n\n  <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -144,2 +162,8 @@ {
             "options": {
+                "id": "with-custom-countmessage-class",
+                "name": "with-custom-countmessage-class",
+                "maxlength": 10,
+                "label": {
+                    "text": "With custom countMessage class"
+                },
                 "countMessage": {
@@ -149,3 +173,3 @@ "classes": "app-custom-count-message"
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  \n\n<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n  <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\" aria-live=\"polite\">\n  You can enter up to undefined characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n</div>\n\n  <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -155,5 +179,11 @@ {
             "options": {
+                "id": "with-spellcheck",
+                "name": "with-spellcheck",
+                "maxlength": 10,
+                "label": {
+                    "text": "With spellcheck"
+                },
                 "spellcheck": true
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  \n\n<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n  <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to undefined characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n</div>\n\n  <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -163,5 +193,11 @@ {
             "options": {
+                "id": "without-spellcheck",
+                "name": "without-spellcheck",
+                "maxlength": 10,
+                "label": {
+                    "text": "Without spellcheck"
+                },
                 "spellcheck": false
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  \n\n<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n  <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to undefined characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n\n\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n</div>\n\n  <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         },
@@ -171,2 +207,8 @@ {
             "options": {
+                "id": "with-custom-error-class",
+                "name": "with-custom-error-class",
+                "maxlength": 10,
+                "label": {
+                    "text": "With custom error class"
+                },
                 "classes": "app-character-count--custom-modifier",
@@ -177,5 +219,5 @@ "errorMessage": {
             },
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info undefined-error\"></textarea>\n</div>\n\n  <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to undefined characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n\n\n  \n  \n  <span id=\"with-custom-error-class-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 govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
         }
     ]
 }

govuk/components/character-count/macro-options.json

@@ -41,3 +41,3 @@ [
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default."
@@ -44,0 +44,0 @@ },

govuk/components/checkboxes/macro-options.json

@@ -77,3 +77,3 @@ [
                 "required": false,
-                "description": "Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied."
+                "description": "Specific id attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
             },
@@ -83,3 +83,3 @@ {
                 "type": "string",
-                "required": true,
+                "required": false,
                 "description": "Specific name for the checkbox item. If omitted, then component global `name` string will be applied."
@@ -86,0 +86,0 @@ },

govuk/components/date-input/fixtures.json

@@ -309,12 +309,8 @@ {
         {
-            "name": "no data",
-            "options": {},
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-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=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"undefined-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
-        },
-        {
             "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\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"undefined-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
@@ -324,2 +320,3 @@ {
             "options": {
+                "id": "with-attributes",
                 "attributes": {
@@ -329,3 +326,3 @@ "data-attribute": "my data value"
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\" data-attribute=\"my data value\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"undefined-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
@@ -335,5 +332,6 @@ {
             "options": {
+                "id": "with-empty-items",
                 "items": []
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-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=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"undefined-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
@@ -343,2 +341,3 @@ {
             "options": {
+                "id": "with-custom-pattern",
                 "items": [
@@ -351,7 +350,22 @@ {
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-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=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
         {
+            "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>"
+        },
+        {
             "name": "with nested name",
             "options": {
+                "id": "with-nested-name",
                 "items": [
@@ -369,3 +383,3 @@ {
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-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=\"undefined-day[dd]\">\n          Day[dd]\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-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=\"undefined-month[mm]\">\n          Month[mm]\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-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=\"undefined-year[yyyy]\">\n          Year[yyyy]\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
@@ -375,15 +389,19 @@ {
             "options": {
+                "id": "with-item-id",
                 "items": [
                     {
-                        "id": "day"
+                        "id": "day",
+                        "name": "day"
                     },
                     {
-                        "id": "month"
+                        "id": "month",
+                        "name": "month"
                     },
                     {
-                        "year": "year"
+                        "id": "year",
+                        "name": "year"
                     }
                 ]
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        \n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"\" 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        \n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"\" 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        \n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-undefined\" name=\"\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
@@ -411,11 +429,15 @@ {
             "options": {
+                "id": "with-values",
                 "items": [
                     {
-                        "id": "day"
+                        "id": "day",
+                        "name": "day"
                     },
                     {
-                        "id": "month"
+                        "id": "month",
+                        "name": "month"
                     },
                     {
                         "id": "year",
+                        "name": "year",
                         "value": 2018
@@ -425,3 +447,3 @@ }
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-date-input\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        \n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"\" 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        \n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"\" 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        \n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"\" type=\"text\" value=\"2018\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
@@ -463,2 +485,3 @@ {
             "options": {
+                "id": "with-fieldset-html",
                 "fieldset": {
@@ -470,3 +493,3 @@ "legend": {
             },
-            "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\">\n    \n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"undefined-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=\"undefined-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"undefined-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>"
+            "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>"
         },
@@ -476,2 +499,3 @@ {
             "options": {
+                "id": "with-item-classes",
                 "items": [
@@ -492,3 +516,3 @@ {
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-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=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"undefined-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=\"undefined-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"undefined-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=\"undefined-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"undefined-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         },
@@ -498,2 +522,3 @@ {
             "options": {
+                "id": "without-item-classes",
                 "items": [
@@ -511,5 +536,5 @@ {
             },
-            "html": "<div class=\"govuk-form-group\">\n\n  <div class=\"govuk-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=\"undefined-day\">\n          Day\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-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=\"undefined-month\">\n          Month\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-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=\"undefined-year\">\n          Year\n        </label>\n      \n      <input class=\"govuk-input govuk-date-input__input \" id=\"undefined-year\" name=\"year\" type=\"text\" pattern=\"[0-9]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  \n  </div>\n\n</div>"
+            "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>"
         }
     ]
 }

govuk/components/date-input/macro-options.json

@@ -35,3 +35,3 @@ [
                 "type": "string",
-                "required": true,
+                "required": false,
                 "description": "Item-specific label text. If provided, this will be used instead of `name` for item label text."
@@ -38,0 +38,0 @@ },

govuk/components/details/fixtures.json

@@ -33,5 +33,7 @@ {
             "options": {
-                "id": "my-details-element"
+                "id": "my-details-element",
+                "summaryText": "Expand this section",
+                "text": "Here are some more details"
             },
-            "html": "<details id=\"my-details-element\" class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      \n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    \n  </div>\n</details>"
+            "html": "<details id=\"my-details-element\" class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
@@ -41,5 +43,6 @@ {
             "options": {
+                "summaryText": "Expand this section",
                 "text": "More about the greater than symbol (>)"
             },
-            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      \n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about the greater than symbol (&gt;)\n  </div>\n</details>"
+            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about the greater than symbol (&gt;)\n  </div>\n</details>"
         },
@@ -49,5 +52,6 @@ {
             "options": {
+                "summaryText": "Expand this section",
                 "html": "More about <b>bold text</b>"
             },
-            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      \n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about <b>bold text</b>\n  </div>\n</details>"
+            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about <b>bold text</b>\n  </div>\n</details>"
         },
@@ -57,5 +61,6 @@ {
             "options": {
-                "summaryText": "The greater than symbol (>) is the best"
+                "summaryText": "The greater than symbol (>) is the best",
+                "text": "Here are some more details"
             },
-            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      The greater than symbol (&gt;) is the best\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    \n  </div>\n</details>"
+            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      The greater than symbol (&gt;) is the best\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
@@ -65,5 +70,6 @@ {
             "options": {
-                "summaryHtml": "Use <b>bold text</b> sparingly"
+                "summaryHtml": "Use <b>bold text</b> sparingly",
+                "text": "Here are some more details"
             },
-            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Use <b>bold text</b> sparingly\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    \n  </div>\n</details>"
+            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Use <b>bold text</b> sparingly\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
@@ -73,5 +79,7 @@ {
             "options": {
-                "classes": "some-additional-class"
+                "classes": "some-additional-class",
+                "text": "Here are some more details",
+                "summaryText": "Expand me"
             },
-            "html": "<details class=\"govuk-details some-additional-class\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      \n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    \n  </div>\n</details>"
+            "html": "<details class=\"govuk-details some-additional-class\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand me\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         },
@@ -81,2 +89,4 @@ {
             "options": {
+                "text": "Here are some more details",
+                "summaryText": "Expand me",
                 "attributes": {
@@ -87,5 +97,5 @@ "data-some-data-attribute": "i-love-data",
             },
-            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"true\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      \n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    \n  </div>\n</details>"
+            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"true\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand me\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
         }
     ]
 }

govuk/components/error-message/fixtures.json

@@ -14,5 +14,6 @@ {
             "options": {
-                "id": "my-error-message-id"
+                "id": "my-error-message-id",
+                "text": "This is an error message"
             },
-            "html": "<span id=\"my-error-message-id\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> \n</span>"
+            "html": "<span id=\"my-error-message-id\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>"
         },
@@ -22,5 +23,6 @@ {
             "options": {
-                "classes": "custom-class"
+                "classes": "custom-class",
+                "text": "This is an error message"
             },
-            "html": "<span class=\"govuk-error-message custom-class\">\n  <span class=\"govuk-visually-hidden\">Error:</span> \n</span>"
+            "html": "<span class=\"govuk-error-message custom-class\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>"
         },
@@ -44,2 +46,3 @@ {
             "options": {
+                "text": "This is an error message",
                 "attributes": {
@@ -50,3 +53,3 @@ "data-test": "attribute",
             },
-            "html": "<span class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> \n</span>"
+            "html": "<span class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</span>"
         },
@@ -53,0 +56,0 @@ {

govuk/components/error-message/macro-options.json

@@ -35,4 +35,5 @@ [
         "type": "string",
+        "required": false,
         "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
     }
 ]

govuk/components/error-summary/fixtures.json

@@ -69,5 +69,10 @@ {
             "options": {
-                "titleText": "Alert, <em>alert</em>"
+                "titleText": "Alert, <em>alert</em>",
+                "errorList": [
+                    {
+                        "text": "Invalid username or password"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    Alert, &lt;em&gt;alert&lt;/em&gt;\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    Alert, &lt;em&gt;alert&lt;/em&gt;\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -77,5 +82,10 @@ {
             "options": {
-                "titleHtml": "Alert, <em>alert</em>"
+                "titleHtml": "Alert, <em>alert</em>",
+                "errorList": [
+                    {
+                        "text": "Invalid username or password"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    Alert, <em>alert</em>\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    Alert, <em>alert</em>\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -85,5 +95,11 @@ {
             "options": {
-                "descriptionText": "Lorem ipsum"
+                "titleText": "There is a problem",
+                "descriptionText": "Lorem ipsum",
+                "errorList": [
+                    {
+                        "text": "Invalid username or password"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      Lorem ipsum\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      Lorem ipsum\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -93,5 +109,11 @@ {
             "options": {
-                "descriptionText": "See errors below (▼)"
+                "titleText": "There is a problem",
+                "descriptionText": "See errors below (▼)",
+                "errorList": [
+                    {
+                        "text": "Invalid username or password"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      See errors below (▼)\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      See errors below (▼)\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -101,5 +123,11 @@ {
             "options": {
-                "descriptionHtml": "See <span>errors</span> below"
+                "titleText": "There is a problem",
+                "descriptionHtml": "See <span>errors</span> below",
+                "errorList": [
+                    {
+                        "text": "Invalid username or password"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      See <span>errors</span> below\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      See <span>errors</span> below\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -109,5 +137,11 @@ {
             "options": {
-                "classes": "extra-class one-more-class"
+                "titleText": "There is a problem",
+                "classes": "extra-class one-more-class",
+                "errorList": [
+                    {
+                        "text": "Invalid username or password"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-error-summary extra-class one-more-class\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary extra-class one-more-class\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -117,8 +151,14 @@ {
             "options": {
+                "titleText": "There is a problem",
                 "attributes": {
                     "first-attribute": "true",
                     "second-attribute": "false"
-                }
+                },
+                "errorList": [
+                    {
+                        "text": "Invalid username or password"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" first-attribute=\"true\" second-attribute=\"false\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" first-attribute=\"true\" second-attribute=\"false\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -128,2 +168,3 @@ {
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
@@ -140,3 +181,3 @@ {
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -146,2 +187,3 @@ {
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
@@ -153,3 +195,3 @@ {
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -159,2 +201,3 @@ {
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
@@ -166,3 +209,3 @@ {
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        The date your passport was issued <b>must</b> be in the past\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        The date your passport was issued <b>must</b> be in the past\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -172,2 +215,3 @@ {
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
@@ -180,3 +224,3 @@ {
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         },
@@ -186,2 +230,3 @@ {
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
@@ -194,5 +239,5 @@ {
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    \n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>"
         }
     ]
 }

govuk/components/file-upload/fixtures.json

@@ -87,2 +87,7 @@ {
             "options": {
+                "id": "file-upload-attributes",
+                "name": "file-upload-attributes",
+                "label": {
+                    "text": "Upload a file"
+                },
                 "attributes": {
@@ -92,3 +97,3 @@ "accept": ".jpg, .jpeg, .png"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <input class=\"govuk-file-upload\" id=\"\" name=\"\" type=\"file\" accept=\".jpg, .jpeg, .png\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-attributes\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-attributes\" name=\"file-upload-attributes\" type=\"file\" accept=\".jpg, .jpeg, .png\">\n</div>"
         },
@@ -98,5 +103,10 @@ {
             "options": {
+                "id": "file-upload-classes",
+                "name": "file-upload-classes",
+                "label": {
+                    "text": "Upload a file"
+                },
                 "classes": "app-file-upload--custom-modifier"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"\" name=\"\" type=\"file\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-classes\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"file-upload-classes\" name=\"file-upload-classes\" type=\"file\">\n</div>"
         },
@@ -106,5 +116,10 @@ {
             "options": {
+                "id": "file-upload-describedby",
+                "name": "file-upload-describedby",
+                "label": {
+                    "text": "Upload a file"
+                },
                 "describedBy": "some-id"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <input class=\"govuk-file-upload\" id=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-describedby\">\n    Upload a file\n  </label>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-describedby\" name=\"file-upload-describedby\" type=\"file\" aria-describedby=\"some-id\">\n</div>"
         },
@@ -114,2 +129,7 @@ {
             "options": {
+                "id": "file-upload-hint-describedby",
+                "name": "file-upload-hint-describedby",
+                "label": {
+                    "text": "Upload a file"
+                },
                 "describedBy": "some-id",
@@ -120,3 +140,3 @@ "hint": {
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n\n\n  <input class=\"govuk-file-upload\" id=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id undefined-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"file-upload-hint-describedby\">\n    Upload a file\n  </label>\n\n  \n  \n  <div id=\"file-upload-hint-describedby-hint\" class=\"govuk-hint\">\n    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.\n  </div>\n\n\n  <input class=\"govuk-file-upload\" id=\"file-upload-hint-describedby\" name=\"file-upload-hint-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-hint-describedby-hint\">\n</div>"
         },
@@ -127,2 +147,6 @@ {
                 "id": "file-upload-with-error",
+                "name": "file-upload-with-error",
+                "label": {
+                    "text": "Upload a file"
+                },
                 "errorMessage": {
@@ -132,3 +156,3 @@ "text": "Error message"
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-with-error\">\n    Upload a file\n  </label>\n\n\n  \n  \n  <span id=\"file-upload-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-with-error\" name=\"file-upload-with-error\" type=\"file\" aria-describedby=\"file-upload-with-error-error\">\n</div>"
         },
@@ -138,2 +162,7 @@ {
             "options": {
+                "id": "file-upload-error-describedby",
+                "name": "file-upload-error-describedby",
+                "label": {
+                    "text": "Upload a file"
+                },
                 "describedBy": "some-id",
@@ -144,3 +173,3 @@ "errorMessage": {
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id undefined-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-error-describedby\">\n    Upload a file\n  </label>\n\n\n  \n  \n  <span id=\"file-upload-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby\" name=\"file-upload-error-describedby\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-error\">\n</div>"
         },
@@ -150,2 +179,7 @@ {
             "options": {
+                "id": "file-upload-error-describedby-hint",
+                "name": "file-upload-error-describedby-hint",
+                "label": {
+                    "text": "Upload a file"
+                },
                 "describedBy": "some-id",
@@ -159,5 +193,5 @@ "errorMessage": {
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"\" name=\"\" type=\"file\" aria-describedby=\"some-id undefined-hint undefined-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"file-upload-error-describedby-hint\">\n    Upload a file\n  </label>\n\n  \n  \n  <div id=\"file-upload-error-describedby-hint-hint\" class=\"govuk-hint\">\n    hint\n  </div>\n\n\n  \n  \n  <span id=\"file-upload-error-describedby-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <input class=\"govuk-file-upload govuk-file-upload--error\" id=\"file-upload-error-describedby-hint\" name=\"file-upload-error-describedby-hint\" type=\"file\" aria-describedby=\"some-id file-upload-error-describedby-hint-hint file-upload-error-describedby-hint-error\">\n</div>"
         }
     ]
 }

govuk/components/footer/macro-options.json

@@ -11,2 +11,3 @@ [
                 "type": "string",
+                "required": false,
                 "description": "Title for a meta item section, which defaults to Support links"
@@ -17,2 +18,3 @@ },
                 "type": "string",
+                "required": false,
                 "description": "HTML to add to the meta section of the footer, which will appear below any links specified using meta.items."
@@ -23,2 +25,3 @@ },
                 "type": "string",
+                "required": false,
                 "description": "Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored."
@@ -35,3 +38,3 @@ },
                         "type": "string",
-                        "required": false,
+                        "required": true,
                         "description": "List item text in the meta section of the footer."
@@ -42,3 +45,3 @@ },
                         "type": "string",
-                        "required": false,
+                        "required": true,
                         "description": "List item href attribute in the meta section of the footer."
@@ -65,3 +68,3 @@ },
                 "type": "string",
-                "required": false,
+                "required": true,
                 "description": "Title for a section"
@@ -84,3 +87,3 @@ },
                         "type": "string",
-                        "required": false,
+                        "required": true,
                         "description": "List item text in the navigation section of the footer."
@@ -91,3 +94,3 @@ },
                         "type": "string",
-                        "required": false,
+                        "required": true,
                         "description": "List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link."
@@ -94,0 +97,0 @@ },

govuk/components/header/macro-options.json

@@ -41,3 +41,3 @@ [
                 "type": "string",
-                "required": false,
+                "required": true,
                 "description": "Text for the navigation item. If `html` is provided, the `text` argument will be ignored."
@@ -48,3 +48,3 @@ },
                 "type": "string",
-                "required": false,
+                "required": true,
                 "description": "HTML for the navigation item. If `html` is provided, the `text` argument will be ignored."
@@ -51,0 +51,0 @@ },

govuk/components/hint/fixtures.json

@@ -22,5 +22,6 @@ {
                 "id": "example-hint",
-                "classes": "app-hint--custom-modifier"
+                "classes": "app-hint--custom-modifier",
+                "text": "It's on your National Insurance card, benefit letter, payslip or P60."
             },
-            "html": "<div id=\"example-hint\" class=\"govuk-hint app-hint--custom-modifier\">\n  \n</div>"
+            "html": "<div id=\"example-hint\" class=\"govuk-hint app-hint--custom-modifier\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>"
         },
@@ -30,5 +31,6 @@ {
             "options": {
-                "id": "my-hint"
+                "id": "my-hint",
+                "text": "It's on your National Insurance card, benefit letter, payslip or P60."
             },
-            "html": "<div id=\"my-hint\" class=\"govuk-hint\">\n  \n</div>"
+            "html": "<div id=\"my-hint\" class=\"govuk-hint\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>"
         },
@@ -45,2 +47,3 @@ {
             "options": {
+                "text": "It's on your National Insurance card, benefit letter, payslip or P60.",
                 "attributes": {
@@ -50,5 +53,5 @@ "data-attribute": "my data value"
             },
-            "html": "<div class=\"govuk-hint\" data-attribute=\"my data value\">\n  \n</div>"
+            "html": "<div class=\"govuk-hint\" data-attribute=\"my data value\">\n  It&#39;s on your National Insurance card, benefit letter, payslip or P60.\n</div>"
         }
     ]
 }

govuk/components/input/fixtures.json

@@ -331,5 +331,10 @@ {
             "options": {
+                "id": "with-classes",
+                "name": "with-classes",
+                "label": {
+                    "text": "With classes"
+                },
                 "classes": "app-input--custom-modifier"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"\" name=\"\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>"
         },
@@ -339,5 +344,10 @@ {
             "options": {
+                "id": "with-custom-type",
+                "name": "with-custom-type",
+                "label": {
+                    "text": "With custom type"
+                },
                 "type": "number"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"number\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-type\">\n    With custom type\n  </label>\n\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>"
         },
@@ -347,5 +357,10 @@ {
             "options": {
+                "id": "with-value",
+                "name": "with-value",
+                "label": {
+                    "text": "With value"
+                },
                 "value": "QQ 12 34 56 C"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
         },
@@ -355,5 +370,10 @@ {
             "options": {
+                "id": "with-describedby",
+                "name": "with-describedby",
+                "label": {
+                    "text": "With describedBy"
+                },
                 "describedBy": "some-id"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"some-id\">\n</div>"
         },
@@ -363,2 +383,7 @@ {
             "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "label": {
+                    "text": "With attributes"
+                },
                 "attributes": {
@@ -368,3 +393,3 @@ "data-attribute": "my data value"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" data-attribute=\"my data value\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>"
         },
@@ -374,2 +399,7 @@ {
             "options": {
+                "id": "with-hint-describedby",
+                "name": "with-hint-describedby",
+                "label": {
+                    "text": "With hint describedBy"
+                },
                 "describedBy": "some-id",
@@ -380,3 +410,3 @@ "hint": {
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint describedBy\n  </label>\n\n  \n  \n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-hint-describedby-hint\">\n</div>"
         },
@@ -386,2 +416,7 @@ {
             "options": {
+                "id": "with-error-describedby",
+                "name": "with-error-describedby",
+                "label": {
+                    "text": "With error describedBy"
+                },
                 "describedBy": "some-id",
@@ -392,3 +427,3 @@ "errorMessage": {
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n<input class=\"govuk-input govuk-input--error\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n\n\n  \n  \n  <span id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"some-id with-error-describedby-error\">\n</div>"
         },
@@ -398,2 +433,7 @@ {
             "options": {
+                "id": "with-error-hint",
+                "name": "with-error-hint",
+                "label": {
+                    "text": "With error and hint"
+                },
                 "errorMessage": {
@@ -406,3 +446,3 @@ "text": "Error message"
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n<input class=\"govuk-input govuk-input--error\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"undefined-hint undefined-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n\n  \n  \n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"with-error-hint-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>"
         },
@@ -412,2 +452,7 @@ {
             "options": {
+                "id": "with-error-hint-describedby",
+                "name": "with-error-hint-describedby",
+                "label": {
+                    "text": "With error, hint and describedBy"
+                },
                 "errorMessage": {
@@ -421,3 +466,3 @@ "text": "Error message"
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n<input class=\"govuk-input govuk-input--error\" id=\"\" name=\"\" type=\"text\" aria-describedby=\"some-id undefined-hint undefined-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n    With error, hint and describedBy\n  </label>\n\n  \n  \n  <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"some-id with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>"
         },
@@ -427,5 +472,10 @@ {
             "options": {
+                "id": "with-inputmode",
+                "name": "with-inputmode",
+                "label": {
+                    "text": "With inputmode"
+                },
                 "inputmode": "decimal"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n<input class=\"govuk-input\" id=\"\" name=\"\" type=\"text\" inputmode=\"decimal\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-inputmode\">\n    With inputmode\n  </label>\n\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>"
         },
@@ -432,0 +482,0 @@ {

govuk/components/input/macro-options.json

@@ -23,3 +23,3 @@ [
         "type": "string",
-        "require": false,
+        "required": false,
         "description": "Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)."
@@ -26,0 +26,0 @@ },

govuk/components/inset-text/fixtures.json

@@ -21,5 +21,6 @@ {
             "options": {
-                "classes": "app-inset-text--custom-modifier"
+                "classes": "app-inset-text--custom-modifier",
+                "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
             },
-            "html": "<div class=\"govuk-inset-text app-inset-text--custom-modifier\">\n  \n</div>"
+            "html": "<div class=\"govuk-inset-text app-inset-text--custom-modifier\">\n  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
         },
@@ -29,5 +30,6 @@ {
             "options": {
-                "id": "my-inset-text"
+                "id": "my-inset-text",
+                "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
             },
-            "html": "<div id=\"my-inset-text\" class=\"govuk-inset-text\">\n  \n</div>"
+            "html": "<div id=\"my-inset-text\" class=\"govuk-inset-text\">\n  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
         },
@@ -44,2 +46,3 @@ {
             "options": {
+                "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.",
                 "attributes": {
@@ -49,5 +52,5 @@ "data-attribute": "my data value"
             },
-            "html": "<div class=\"govuk-inset-text\" data-attribute=\"my data value\">\n  \n</div>"
+            "html": "<div class=\"govuk-inset-text\" data-attribute=\"my data value\">\n  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
         }
     ]
 }

govuk/components/label/macro-options.json

@@ -17,3 +17,3 @@ [
         "type": "string",
-        "required": true,
+        "required": false,
         "description": "The value of the for attribute, the id of the input the label is associated with."
@@ -20,0 +20,0 @@ },

govuk/components/panel/fixtures.json

@@ -24,5 +24,6 @@ {
             "options": {
-                "titleText": "Application <strong>not</strong> complete"
+                "titleText": "Application <strong>not</strong> complete",
+                "text": "Please complete form 1"
             },
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Please complete form 1\n  </div>\n  \n</div>"
         },
@@ -32,5 +33,6 @@ {
             "options": {
-                "titleHtml": "Application <strong>not</strong> complete"
+                "titleHtml": "Application <strong>not</strong> complete",
+                "html": "Please complete <strong>form 1</strong>"
             },
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Please complete <strong>form 1</strong>\n  </div>\n  \n</div>"
         },
@@ -40,5 +42,6 @@ {
             "options": {
+                "titleText": "Application complete",
                 "text": "Your reference number<br><strong>HDJ2123F</strong>"
             },
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n  \n</div>"
         },
@@ -48,5 +51,6 @@ {
             "options": {
+                "titleText": "Application complete",
                 "html": "Your reference number<br><strong>HDJ2123F</strong>"
             },
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number<br><strong>HDJ2123F</strong>\n  </div>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number<br><strong>HDJ2123F</strong>\n  </div>\n  \n</div>"
         },
@@ -56,5 +60,7 @@ {
             "options": {
+                "titleText": "Application complete",
+                "text": "Your reference number is HDJ2123F",
                 "classes": "extra-class one-more-class"
             },
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n  \n</div>"
         },
@@ -64,2 +70,4 @@ {
             "options": {
+                "titleText": "Application complete",
+                "text": "Your reference number is HDJ2123F",
                 "attributes": {
@@ -70,3 +78,3 @@ "first-attribute": true,
             },
-            "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"true\" second-attribute=\"false\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n</div>"
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"true\" second-attribute=\"false\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number is HDJ2123F\n  </div>\n  \n</div>"
         },
@@ -73,0 +81,0 @@ {

govuk/components/phase-banner/fixtures.json

@@ -17,5 +17,6 @@ {
             "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
                 "classes": "extra-class one-more-class"
             },
-            "html": "<div class=\"govuk-phase-banner extra-class one-more-class\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+            "html": "<div class=\"govuk-phase-banner extra-class one-more-class\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
         },
@@ -39,2 +40,3 @@ {
             "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
                 "attributes": {
@@ -45,3 +47,3 @@ "first-attribute": true,
             },
-            "html": "<div class=\"govuk-phase-banner\" first-attribute=\"true\" second-attribute=\"false\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+            "html": "<div class=\"govuk-phase-banner\" first-attribute=\"true\" second-attribute=\"false\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
         },
@@ -51,2 +53,3 @@ {
             "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
                 "tag": {
@@ -56,3 +59,3 @@ "html": "<em>alpha</em>"
             },
-            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      <em>alpha</em>\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      <em>alpha</em>\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
         },
@@ -62,2 +65,3 @@ {
             "options": {
+                "text": "This is a new service – your feedback will help us to improve it",
                 "tag": {
@@ -68,5 +72,5 @@ "classes": "govuk-tag--inactive",
             },
-            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--inactive\">\n      alpha\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--inactive\">\n      alpha\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
         }
     ]
 }

govuk/components/select/fixtures.json

@@ -152,5 +152,17 @@ {
             "options": {
+                "id": "with-describedby",
+                "name": "with-describedby",
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ],
                 "describedBy": "some-id"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"\" name=\"\" aria-describedby=\"some-id\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
         },
@@ -160,2 +172,14 @@ {
             "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ],
                 "attributes": {
@@ -165,3 +189,3 @@ "data-attribute": "my data value"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"\" name=\"\" data-attribute=\"my data value\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
         },
@@ -171,2 +195,4 @@ {
             "options": {
+                "id": "with-item-attributes",
+                "name": "with-item-attributes",
                 "value": 2,
@@ -190,3 +216,3 @@ "items": [
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"\" name=\"\">\n  \n    \n      <option value=\"\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n    \n  \n    \n      <option value=\"\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n  \n    \n      <option value=\"\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n    \n  \n    \n      <option value=\"\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n    \n  \n  </select>\n</div>"
         },
@@ -196,2 +222,4 @@ {
             "options": {
+                "id": "with-falsey-values",
+                "name": "with-falsey-values",
                 "items": [
@@ -209,3 +237,3 @@ {
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"\" name=\"\">\n  \n    \n      <option value=\"\">Option 1</option>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <option value=\"\">Options 2</option>\n    \n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n  \n    \n      <option value=\"\">Option 1</option>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <option value=\"\">Options 2</option>\n    \n  \n  </select>\n</div>"
         },
@@ -216,2 +244,3 @@ {
                 "id": "select-with-hint",
+                "name": "select-with-hint",
                 "hint": {
@@ -221,3 +250,3 @@ "text": "Hint text goes here"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"\" aria-describedby=\"select-with-hint-hint\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n  \n  </select>\n</div>"
         },
@@ -228,8 +257,19 @@ {
                 "id": "select-with-hint",
+                "name": "select-with-hint",
                 "describedBy": "some-id",
                 "hint": {
                     "text": "Hint text goes here"
-                }
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"\" aria-describedby=\"some-id select-with-hint-hint\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
         },
@@ -240,7 +280,18 @@ {
                 "id": "select-with-error",
+                "name": "select-with-error",
                 "errorMessage": {
                     "text": "Error message"
-                }
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"\" aria-describedby=\"select-with-error-error\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
         },
@@ -251,10 +302,21 @@ {
                 "id": "select-with-error",
+                "name": "select-with-error",
                 "describedBy": "some-id",
                 "errorMessage": {
                     "text": "Error message"
-                }
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"\" aria-describedby=\"some-id select-with-error-error\">\n  \n  </select>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>"
         }
     ]
 }

govuk/components/skip-link/fixtures.json

@@ -29,5 +29,6 @@ {
             "options": {
+                "text": "Skip to custom content",
                 "href": "#custom"
             },
-            "html": "<a href=\"#custom\" class=\"govuk-skip-link\"></a>"
+            "html": "<a href=\"#custom\" class=\"govuk-skip-link\">Skip to custom content</a>"
         },
@@ -58,5 +59,6 @@ {
             "options": {
+                "text": "Skip link",
                 "classes": "app-skip-link--custom-class"
             },
-            "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\"></a>"
+            "html": "<a href=\"#content\" class=\"govuk-skip-link app-skip-link--custom-class\">Skip link</a>"
         },
@@ -66,2 +68,3 @@ {
             "options": {
+                "text": "Skip link",
                 "attributes": {
@@ -72,5 +75,5 @@ "data-test": "attribute",
             },
-            "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\"></a>"
+            "html": "<a href=\"#content\" class=\"govuk-skip-link\" data-test=\"attribute\" aria-label=\"Skip to content\">Skip link</a>"
         }
     ]
 }

govuk/components/table/fixtures.json

@@ -177,5 +177,15 @@ {
             "options": {
-                "classes": "custom-class-goes-here"
+                "classes": "custom-class-goes-here",
+                "rows": [
+                    [
+                        {
+                            "text": "Jan"
+                        },
+                        {
+                            "text": "Feb"
+                        }
+                    ]
+                ]
             },
-            "html": "<table class=\"govuk-table custom-class-goes-here\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table custom-class-goes-here\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
         },
@@ -187,5 +197,15 @@ {
                     "data-foo": "bar"
-                }
+                },
+                "rows": [
+                    [
+                        {
+                            "text": "Jan"
+                        },
+                        {
+                            "text": "Feb"
+                        }
+                    ]
+                ]
             },
-            "html": "<table class=\"govuk-table\" data-foo=\"bar\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\" data-foo=\"bar\">\n  \n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
         },
@@ -236,5 +256,15 @@ {
                     }
+                ],
+                "rows": [
+                    [
+                        {
+                            "text": "Jan"
+                        },
+                        {
+                            "text": "Feb"
+                        }
+                    ]
                 ]
             },
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header my-custom-class\">Foo</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header my-custom-class\">Foo</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
         },
@@ -250,5 +280,15 @@ {
                     }
+                ],
+                "rows": [
+                    [
+                        {
+                            "text": "Jan"
+                        },
+                        {
+                            "text": "Feb"
+                        }
+                    ]
                 ]
             },
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\" colspan=\"2\" rowspan=\"2\">Foo</th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
         },
@@ -264,5 +304,15 @@ {
                     }
+                ],
+                "rows": [
+                    [
+                        {
+                            "text": "Jan"
+                        },
+                        {
+                            "text": "Feb"
+                        }
+                    ]
                 ]
             },
-            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\"></th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n  </tbody>\n</table>"
+            "html": "<table class=\"govuk-table\">\n  \n  \n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n    \n      <th scope=\"col\" class=\"govuk-table__header\" data-fizz=\"buzz\"></th>\n    \n    </tr>\n  </thead>\n  \n  <tbody class=\"govuk-table__body\">\n    \n      \n        <tr class=\"govuk-table__row\">\n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Jan</td>\n          \n        \n          \n          \n          <td class=\"govuk-table__cell\"\n          >Feb</td>\n          \n        \n        </tr>\n      \n    \n  </tbody>\n</table>"
         },
@@ -269,0 +319,0 @@ {

govuk/components/tabs/fixtures.json

@@ -65,5 +65,14 @@ {
             "options": {
-                "classes": "app-tabs--custom-modifier"
+                "classes": "app-tabs--custom-modifier",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \n</div>"
+            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        Information about tabs\n      </div>\n    \n  \n</div>"
         },
@@ -73,5 +82,14 @@ {
             "options": {
-                "id": "my-tabs"
+                "id": "my-tabs",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
             },
-            "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \n</div>"
+            "html": "<div id=\"my-tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        Information about tabs\n      </div>\n    \n  \n</div>"
         },
@@ -81,5 +99,14 @@ {
             "options": {
-                "title": "Custom title for Contents"
+                "title": "Custom title for Contents",
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        Information about tabs\n      </div>\n    \n  \n</div>"
         },
@@ -91,5 +118,14 @@ {
                     "data-attribute": "my data value"
-                }
+                },
+                "items": [
+                    {
+                        "label": "Tab 1",
+                        "id": "tab-1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        }
+                    }
+                ]
             },
-            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        Information about tabs\n      </div>\n    \n  \n</div>"
         },
@@ -103,2 +139,5 @@ {
                         "label": "Tab 1",
+                        "panel": {
+                            "text": "Information about tabs"
+                        },
                         "attributes": {
@@ -111,3 +150,3 @@ "data-attribute": "my-attribute",
             },
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        \n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        Information about tabs\n      </div>\n    \n  \n</div>"
         },
@@ -200,2 +239,3 @@ {
                         "label": "Tab 1",
+                        "id": "tab-1",
                         "panel": {
@@ -207,2 +247,3 @@ "text": "<p>Panel 1 content</p>"
                         "label": "Tab 2",
+                        "id": "tab-2",
                         "panel": {
@@ -214,3 +255,3 @@ "text": "<p>Panel 2 content</p>"
             },
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"-1\">\n        &lt;p&gt;Panel 1 content&lt;/p&gt;\n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"-2\">\n        &lt;p&gt;Panel 2 content&lt;/p&gt;\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        &lt;p&gt;Panel 1 content&lt;/p&gt;\n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n        &lt;p&gt;Panel 2 content&lt;/p&gt;\n      </div>\n    \n  \n</div>"
         },
@@ -223,2 +264,3 @@ {
                         "label": "Tab 1",
+                        "id": "tab-1",
                         "panel": {
@@ -230,2 +272,3 @@ "html": "<p>Panel 1 content</p>"
                         "label": "Tab 2",
+                        "id": "tab-2",
                         "panel": {
@@ -237,5 +280,5 @@ "html": "<p>Panel 2 content</p>"
             },
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"-1\">\n        <p>Panel 1 content</p>\n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"-2\">\n        <p>Panel 2 content</p>\n      </div>\n    \n  \n</div>"
+            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  \n  <ul class=\"govuk-tabs__list\">\n    \n      \n        \n        <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n            Tab 1\n          </a>\n        </li>\n      \n    \n      \n        \n        <li class=\"govuk-tabs__list-item\">\n          <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n            Tab 2\n          </a>\n        </li>\n      \n    \n  </ul>\n  \n  \n    \n      \n      <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n        <p>Panel 1 content</p>\n      </div>\n    \n  \n    \n      \n      <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n        <p>Panel 2 content</p>\n      </div>\n    \n  \n</div>"
         }
     ]
 }

govuk/components/tabs/macro-options.json

@@ -30,3 +30,3 @@ [
                 "required": true,
-                "description": "Specific id attribute for the tab item. If omitted, then `idPrefix` string will be applied."
+                "description": "Specific id attribute for the tab item. If omitted, then `idPrefix` string is required instead."
             },
@@ -33,0 +33,0 @@ {

govuk/components/textarea/fixtures.json

@@ -132,5 +132,10 @@ {
             "options": {
+                "id": "with-classes",
+                "name": "with-classes",
+                "label": {
+                    "text": "With classes"
+                },
                 "classes": "app-textarea--custom-modifier"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"\" name=\"\" rows=\"5\"></textarea>\n</div>"
+            "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>"
         },
@@ -140,2 +145,7 @@ {
             "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "label": {
+                    "text": "With attributes"
+                },
                 "attributes": {
@@ -145,3 +155,3 @@ "data-attribute": "my data value"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>"
+            "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>"
         },
@@ -151,5 +161,10 @@ {
             "options": {
+                "id": "with-describedby",
+                "name": "with-describedby",
+                "label": {
+                    "text": "With describedBy"
+                },
                 "describedBy": "some-id"
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id\"></textarea>\n</div>"
+            "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>"
         },
@@ -159,2 +174,7 @@ {
             "options": {
+                "id": "with-hint-describedby",
+                "name": "with-hint-describedby",
+                "label": {
+                    "text": "With hint and describedBy"
+                },
                 "describedBy": "some-id",
@@ -165,3 +185,3 @@ "hint": {
             },
-            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n\n\n  <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id undefined-hint\"></textarea>\n</div>"
+            "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>"
         },
@@ -171,2 +191,6 @@ {
             "options": {
+                "name": "textarea-with-error",
+                "label": {
+                    "text": "Textarea with error"
+                },
                 "describedBy": "some-id",
@@ -178,3 +202,3 @@ "id": "textarea-with-error",
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \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=\"\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>"
+            "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>"
         },
@@ -184,2 +208,7 @@ {
             "options": {
+                "id": "with-hint-error",
+                "name": "with-hint-error",
+                "label": {
+                    "text": "With hint and error"
+                },
                 "errorMessage": {
@@ -192,3 +221,3 @@ "text": "Error message"
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-hint undefined-error\"></textarea>\n</div>"
+            "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>"
         },
@@ -198,2 +227,7 @@ {
             "options": {
+                "id": "with-hint-error-describedby",
+                "name": "with-hint-error-describedby",
+                "label": {
+                    "text": "With hint, error and describedBy"
+                },
                 "describedBy": "some-id",
@@ -207,5 +241,5 @@ "errorMessage": {
             },
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n  \n  \n  <div id=\"undefined-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n\n\n  \n  \n  <span id=\"undefined-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id undefined-hint undefined-error\"></textarea>\n</div>"
+            "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>"
         }
     ]
 }

govuk/components/warning-text/fixtures.json

@@ -23,2 +23,4 @@ {
             "options": {
+                "text": "You can be fined up to £5,000 if you don’t register.",
+                "iconFallbackText": "Warning",
                 "attributes": {
@@ -29,3 +31,3 @@ "id": "my-warning-text",
             },
-            "html": "<div class=\"govuk-warning-text\" id=\"my-warning-text\" data-test=\"attribute\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\"></span>\n    \n  </strong>\n</div>"
+            "html": "<div class=\"govuk-warning-text\" id=\"my-warning-text\" data-test=\"attribute\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    You can be fined up to £5,000 if you don’t register.\n  </strong>\n</div>"
         },
@@ -44,5 +46,7 @@ {
             "options": {
+                "text": "You can be fined up to £5,000 if you don’t register.",
+                "iconFallbackText": "Warning",
                 "html": "<span>Some custom warning text</span>"
             },
-            "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\"></span>\n    <span>Some custom warning text</span>\n  </strong>\n</div>"
+            "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    <span>Some custom warning text</span>\n  </strong>\n</div>"
         },
@@ -52,5 +56,6 @@ {
             "options": {
+                "iconFallbackText": "Warning",
                 "text": "<span>Some custom warning text</span>"
             },
-            "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\"></span>\n    &lt;span&gt;Some custom warning text&lt;/span&gt;\n  </strong>\n</div>"
+            "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    &lt;span&gt;Some custom warning text&lt;/span&gt;\n  </strong>\n</div>"
         },
@@ -63,11 +68,4 @@ {
             "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Some custom fallback text</span>\n    \n  </strong>\n</div>"
-        },
-        {
-            "name": "text only",
-            "options": {
-                "text": "Some custom warning text"
-            },
-            "html": "<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\"></span>\n    Some custom warning text\n  </strong>\n</div>"
         }
     ]
 }

package.json

 {
   "name": "govuk-frontend",
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "main": "govuk/all.js",
@@ -6,0 +6,0 @@ "sass": "govuk/all.scss",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1833377

increased by4.42%

Number of package files

314

increased by2.61%

Lines of code

24334

increased by4.67%

No dependency changes