govuk_publishing_components 23.12.3 → 24.0.0

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

@@ -74,12 +74,12 @@
                 "name": "id",
                 "type": "string",
                 "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."
             },
             {
                 "name": "name",
                 "type": "string",
-                "required": true,
+                "required": false,
                 "description": "Specific name for the checkbox item. If omitted, then component global `name` string will be applied."
             },
             {

data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss

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

data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss

@@ -0,0 +1,51 @@
+@include govuk-exports("govuk/component/cookie-banner") {
+
+  // This needs to be kept in sync with the header component's styles
+  $border-bottom-width: govuk-spacing(2);
+
+  .govuk-cookie-banner {
+    @include govuk-font($size: 19);
+
+    padding-top: govuk-spacing(4);
+    // The component does not set bottom spacing.
+    // The bottom spacing should be created by the items inside the component.
+
+    // Visually separate the cookie banner from content underneath
+    // when user changes colours in their browser.
+    border-bottom: $border-bottom-width solid transparent;
+
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+  }
+
+  // Support older browsers which don't hide elements with the `hidden` attribute
+  // when user hides the whole cookie banner with a 'Hide' button.
+  .govuk-cookie-banner[hidden] {
+    display: none;
+  }
+
+  .govuk-cookie-banner__message {
+    // Remove the extra height added by the separator border.
+    margin-bottom: -$border-bottom-width;
+
+    &[hidden] {
+      // Support older browsers which don't hide elements with the `hidden` attribute
+      // when the visibility of cookie and replacement messages is toggled.
+      display: none;
+    }
+
+    &:focus {
+      // Remove the native visible focus indicator when the element is programmatically focused.
+      //
+      // The focused cookie banner is the first element on the page and the last thing the user
+      // interacted with prior to it gaining focus.
+      // We therefore assume that moving focus to it is not going to surprise users, and that giving
+      // it a visible focus indicator could be more confusing than helpful, especially as the
+      // element is not normally keyboard operable.
+      //
+      // We have flagged this in the research section of the guidance as something to monitor.
+      //
+      // A related discussion: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json

@@ -0,0 +1,425 @@
+{
+    "component": "cookie-banner",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "messages": [
+                    {
+                        "headingText": "Cookies on this government service",
+                        "text": "We use analytics cookies to help understand how users use our service.",
+                        "actions": [
+                            {
+                                "text": "Accept analytics cookies",
+                                "type": "submit",
+                                "name": "cookies",
+                                "value": "accept"
+                            },
+                            {
+                                "text": "Reject analytics cookies",
+                                "type": "submit",
+                                "name": "cookies",
+                                "value": "reject"
+                            },
+                            {
+                                "text": "View cookie preferences",
+                                "href": "/cookie-preferences"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this government service</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n          \n        \n          \n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n          \n        \n          \n            \n            \n            <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": false
+        },
+        {
+            "name": "accepted confirmation banner",
+            "options": {
+                "messages": [
+                    {
+                        "text": "Your cookie preferences have been saved. You have accepted cookies.",
+                        "role": "alert",
+                        "actions": [
+                            {
+                                "text": "Hide this message",
+                                "type": "button"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide this message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": false
+        },
+        {
+            "name": "rejected confirmation banner",
+            "options": {
+                "messages": [
+                    {
+                        "text": "Your cookie preferences have been saved. You have rejected cookies.",
+                        "role": "alert",
+                        "actions": [
+                            {
+                                "text": "Hide this message",
+                                "type": "button"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide this message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": false
+        },
+        {
+            "name": "client-side implementation",
+            "options": {
+                "messages": [
+                    {
+                        "headingText": "Cookies on this service",
+                        "text": "We use cookies to help understand how users use our service.",
+                        "actions": [
+                            {
+                                "text": "Accept analytics cookies",
+                                "type": "submit",
+                                "name": "cookies",
+                                "value": "accept"
+                            },
+                            {
+                                "text": "Reject analytics cookies",
+                                "type": "submit",
+                                "name": "cookies",
+                                "value": "reject"
+                            },
+                            {
+                                "text": "View cookie preferences",
+                                "href": "/cookie-preferences"
+                            }
+                        ]
+                    },
+                    {
+                        "text": "Your cookie preferences have been saved. You have accepted cookies.",
+                        "role": "alert",
+                        "hidden": true,
+                        "actions": [
+                            {
+                                "text": "Hide this message",
+                                "type": "button"
+                            }
+                        ]
+                    },
+                    {
+                        "text": "Your cookie preferences have been saved. You have rejected cookies.",
+                        "role": "alert",
+                        "hidden": true,
+                        "actions": [
+                            {
+                                "text": "Hide this message",
+                                "type": "button"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n          \n        \n          \n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n          \n        \n          \n            \n            \n            <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n     hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide this message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n     hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide this message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": false
+        },
+        {
+            "name": "heading html",
+            "options": {
+                "messages": [
+                    {
+                        "headingHtml": "Cookies on <span>my service</span>"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on <span>my service</span></h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "heading html as text",
+            "options": {
+                "messages": [
+                    {
+                        "headingText": "Cookies on <span>my service</span>"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on &lt;span&gt;my service&lt;/span&gt;</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "html",
+            "options": {
+                "messages": [
+                    {
+                        "html": "<p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies in <span>our service</span>.</p></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "classes",
+            "options": {
+                "messages": [
+                    {
+                        "classes": "app-my-class"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n      \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container app-my-class\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "messages": [
+                    {
+                        "attributes": {
+                            "data-attribute": "my-value"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" data-attribute=\"my-value\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "custom aria label",
+            "options": {
+                "ariaLabel": "Cookies on GOV.UK",
+                "messages": [
+                    {
+                        "text": "We use cookies on GOV.UK"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookies on GOV.UK\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies on GOV.UK</p></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "hidden",
+            "options": {
+                "messages": [
+                    {
+                        "hidden": true
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n     hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "hidden false",
+            "options": {
+                "messages": [
+                    {
+                        "hidden": false
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "default action",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "This is a button"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button class=\"govuk-button\" data-module=\"govuk-button\">\n              This is a button\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "link",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "This is a link",
+                                "href": "/link"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n            \n            <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "link with button options",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "This is a link",
+                                "href": "/link",
+                                "value": "cookies",
+                                "name": "link"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n            \n            <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "type",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "Button",
+                                "type": "button"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Button\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "button classes",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "Button with custom classes",
+                                "classes": "my-button-class app-button-class"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button class=\"govuk-button my-button-class app-button-class\" data-module=\"govuk-button\">\n              Button with custom classes\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "button attributes",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "Button with attributes",
+                                "attributes": {
+                                    "data-button-attribute": "my-value"
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button class=\"govuk-button\" data-module=\"govuk-button\" data-button-attribute=\"my-value\">\n              Button with attributes\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "link classes",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "Link with custom classes",
+                                "href": "/my-link",
+                                "classes": "my-link-class app-link-class"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n            \n              \n            \n            <a class=\"govuk-link my-link-class app-link-class\" href=\"/my-link\">Link with custom classes</a>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "link attributes",
+            "options": {
+                "messages": [
+                    {
+                        "actions": [
+                            {
+                                "text": "Link with attributes",
+                                "href": "/link",
+                                "attributes": {
+                                    "data-link-attribute": "my-value"
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner \" role=\"region\" aria-label=\"Cookie banner\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            \n            \n            <a class=\"govuk-link\" href=\"/link\" data-link-attribute=\"my-value\">Link with attributes</a>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        },
+        {
+            "name": "full banner hidden",
+            "options": {
+                "hidden": true,
+                "classes": "hide-cookie-banner",
+                "attributes": {
+                    "data-hide-cookie-banner": "true"
+                },
+                "messages": [
+                    {
+                        "headingText": "Cookies on this service",
+                        "text": "We use cookies to help understand how users use our service.",
+                        "actions": [
+                            {
+                                "text": "Accept analytics cookies",
+                                "type": "submit",
+                                "name": "cookies",
+                                "value": "accept"
+                            },
+                            {
+                                "text": "Reject analytics cookies",
+                                "type": "submit",
+                                "name": "cookies",
+                                "value": "reject"
+                            },
+                            {
+                                "text": "View cookie preferences",
+                                "href": "/cookie-preferences"
+                            }
+                        ]
+                    },
+                    {
+                        "text": "Your cookie preferences have been saved. You have accepted cookies.",
+                        "role": "alert",
+                        "actions": [
+                            {
+                                "text": "Hide this message",
+                                "type": "button"
+                            }
+                        ]
+                    },
+                    {
+                        "text": "Your cookie preferences have been saved. You have rejected cookies.",
+                        "role": "alert",
+                        "actions": [
+                            {
+                                "text": "Hide this message",
+                                "type": "button"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">\n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on this service</h2>\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">We use cookies to help understand how users use our service.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Accept analytics cookies\n            </button>\n          \n        \n          \n            <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Reject analytics cookies\n            </button>\n          \n        \n          \n            \n            \n            <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide this message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n    \n    \n\n    <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\"\n    >\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        \n\n        <div class=\"govuk-cookie-banner__content\"><p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p></div>\n      </div>\n    </div>\n\n      \n      <div class=\"govuk-button-group\">\n        \n          \n            <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n              Hide this message\n            </button>\n          \n        \n      </div>\n      \n    </div>\n  \n</div>",
+            "hidden": true
+        }
+    ]
+}