govuk_publishing_components 23.12.3 → 24.0.0

data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json

@@ -32,7 +32,7 @@
             {
                 "name": "label",
                 "type": "string",
-                "required": true,
+                "required": false,
                 "description": "Item-specific label text. If provided, this will be used instead of `name` for item label text."
             },
             {

data/node_modules/govuk-frontend/govuk/components/date-input/template.njk

@@ -66,7 +66,7 @@
         name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
         value: item.value,
         type: "text",
-        inputmode: "numeric",
+        inputmode: item.inputmode if item.inputmode else "numeric",
         autocomplete: item.autocomplete,
         pattern: item.pattern if item.pattern else "[0-9]*",
         attributes: item.attributes

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

@@ -7,7 +7,8 @@
                 "summaryText": "Help with nationality",
                 "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
             },
-            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\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      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>",
+            "hidden": false
         },
         {
             "name": "expanded",
@@ -17,7 +18,8 @@
                 "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
                 "open": true
             },
-            "html": "<details id=\"help-with-nationality\" class=\"govuk-details\" data-module=\"govuk-details\" open>\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>"
+            "html": "<details id=\"help-with-nationality\" class=\"govuk-details\" data-module=\"govuk-details\" open>\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>",
+            "hidden": false
         },
         {
             "name": "with html",
@@ -25,59 +27,77 @@
                 "summaryText": "Where to find your National Insurance Number",
                 "html": "Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n"
             },
-            "html": "<details class=\"govuk-details\" data-module=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Where to find your National Insurance Number\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\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      Where to find your National Insurance Number\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n\n  </div>\n</details>",
+            "hidden": false
         },
         {
             "name": "id",
             "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>",
+            "hidden": true
         },
         {
             "name": "html as text",
             "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>",
+            "hidden": true
         },
         {
             "name": "html",
             "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>",
+            "hidden": true
         },
         {
             "name": "summary html as text",
             "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>",
+            "hidden": true
         },
         {
             "name": "summary html",
             "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>",
+            "hidden": true
         },
         {
             "name": "classes",
             "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>",
+            "hidden": true
         },
         {
             "name": "attributes",
             "options": {
+                "text": "Here are some more details",
+                "summaryText": "Expand me",
                 "attributes": {
                     "data-some-data-attribute": "i-love-data",
-                    "another-attribute": true
+                    "another-attribute": "foo"
                 }
             },
-            "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=\"foo\">\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>",
+            "hidden": true
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json

@@ -6,45 +6,54 @@
             "options": {
                 "text": "Error message about full name goes here"
             },
-            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</span>"
+            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</span>",
+            "hidden": false
         },
         {
             "name": "id",
             "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>",
+            "hidden": true
         },
         {
             "name": "classes",
             "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>",
+            "hidden": true
         },
         {
             "name": "html as text",
             "options": {
                 "text": "Unexpected > in body"
             },
-            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</span>"
+            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</span>",
+            "hidden": true
         },
         {
             "name": "html",
             "options": {
                 "html": "Unexpected <b>bold text</b> in body copy"
             },
-            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</span>"
+            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</span>",
+            "hidden": true
         },
         {
             "name": "attributes",
             "options": {
+                "text": "This is an error message",
                 "attributes": {
                     "data-test": "attribute",
                     "id": "my-error-message"
                 }
             },
-            "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>",
+            "hidden": true
         },
         {
             "name": "with visually hidden text",
@@ -52,7 +61,8 @@
                 "text": "Rhowch eich enw llawn",
                 "visuallyHiddenText": "Gwall"
             },
-            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</span>"
+            "html": "<span class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</span>",
+            "hidden": true
         },
         {
             "name": "visually hidden text removed",
@@ -60,7 +70,8 @@
                 "text": "There is an error on line 42",
                 "visuallyHiddenText": false
             },
-            "html": "<span class=\"govuk-error-message\">\n  There is an error on line 42\n</span>"
+            "html": "<span class=\"govuk-error-message\">\n  There is an error on line 42\n</span>",
+            "hidden": true
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json

@@ -32,6 +32,7 @@
     {
         "name": "visuallyHiddenText",
         "type": "string",
+        "required": false,
         "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
     }
 ]

data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss

@@ -37,17 +37,7 @@
 
   .govuk-error-summary__list a {
     @include govuk-typography-weight-bold;
-
-    // Override default link styling to use error colour
-    &:link,
-    &:visited,
-    &:hover,
-    &:active {
-      color: $govuk-error-colour;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
+    @include govuk-link-common;
+    @include govuk-link-style-error;
   }
 }

data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json

@@ -16,7 +16,8 @@
                     }
                 ]
             },
-            "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=\"#example-error-1\">The date your passport was issued must be in the past</a>\n      \n      </li>\n    \n      <li>\n      \n        <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</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=\"#example-error-1\">The date your passport was issued must be in the past</a>\n      \n      </li>\n    \n      <li>\n      \n        <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
+            "hidden": false
         },
         {
             "name": "without links",
@@ -28,7 +29,8 @@
                     }
                 ]
             },
-            "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        Invalid username or password\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        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
+            "hidden": false
         },
         {
             "name": "mixed with and without links",
@@ -44,7 +46,8 @@
                     }
                 ]
             },
-            "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        Invalid username or password\n      \n      </li>\n    \n      <li>\n      \n        <a href=\"#example-error-1\">Agree to the terms of service to log in</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        Invalid username or password\n      \n      </li>\n    \n      <li>\n      \n        <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
+            "hidden": false
         },
         {
             "name": "with everything",
@@ -61,63 +64,112 @@
                     }
                 ]
             },
-            "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      Please fix the 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      <li>\n      \n        <a href=\"#example-error-1\">Agree to the terms of service to log in</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    <p>\n      Please fix the 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      <li>\n      \n        <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
+            "hidden": false
         },
         {
             "name": "html as titleText",
             "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>",
+            "hidden": true
         },
         {
             "name": "title html",
             "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>",
+            "hidden": true
         },
         {
             "name": "description",
             "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>",
+            "hidden": true
         },
         {
             "name": "html as descriptionText",
             "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>",
+            "hidden": true
         },
         {
             "name": "description html",
             "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>",
+            "hidden": true
         },
         {
             "name": "classes",
             "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>",
+            "hidden": true
         },
         {
             "name": "attributes",
             "options": {
+                "titleText": "There is a problem",
                 "attributes": {
-                    "first-attribute": "true",
-                    "second-attribute": "false"
-                }
+                    "first-attribute": "foo",
+                    "second-attribute": "bar"
+                },
+                "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=\"foo\" second-attribute=\"bar\" 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>",
+            "hidden": true
         },
         {
             "name": "error list with attributes",
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
                     {
                         "text": "Error-1",
@@ -129,33 +181,39 @@
                     }
                 ]
             },
-            "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>",
+            "hidden": true
         },
         {
             "name": "error list with html as text",
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
                     {
                         "text": "Descriptive link to the <b>question</b> with an error"
                     }
                 ]
             },
-            "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>",
+            "hidden": true
         },
         {
             "name": "error list with html",
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
                     {
                         "html": "The date your passport was issued <b>must</b> be in the past"
                     }
                 ]
             },
-            "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>",
+            "hidden": true
         },
         {
             "name": "error list with html link",
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
                     {
                         "html": "Descriptive link to the <b>question</b> with an error",
@@ -163,11 +221,13 @@
                     }
                 ]
             },
-            "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>",
+            "hidden": true
         },
         {
             "name": "error list with html as text link",
             "options": {
+                "titleText": "There is a problem",
                 "errorList": [
                     {
                         "text": "Descriptive link to the <b>question</b> with an error",
@@ -175,7 +235,8 @@
                     }
                 ]
             },
-            "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>",
+            "hidden": true
         }
     ]
 }