govuk_publishing_components 60.0.2 → 60.1.0

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-default.html

@@ -1,22 +1,27 @@
 <div class="govuk-form-group">
-  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british">
-      <label class="govuk-label govuk-checkboxes__label" for="nationality">
-        British
-      </label>
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend">
+      What is your nationality?
+    </legend>
+    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british">
+        <label class="govuk-label govuk-checkboxes__label" for="nationality">
+          British
+        </label>
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
+        <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
+          Irish
+        </label>
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
+        <label class="govuk-label govuk-checkboxes__label" for="nationality-3">
+          Citizen of another country
+        </label>
+      </div>
     </div>
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
-      <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
-        Irish
-      </label>
-    </div>
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
-      <label class="govuk-label govuk-checkboxes__label" for="nationality-3">
-        Citizen of another country
-      </label>
-    </div>
-  </div>
+  </fieldset>
 </div>

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-and-none.html

@@ -1,9 +1,7 @@
 <div class="govuk-form-group">
   <fieldset class="govuk-fieldset">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h1 class="govuk-fieldset__heading">
-        Which types of waste do you transport regularly?
-      </h1>
+    <legend class="govuk-fieldset__legend">
+      Which types of waste do you transport regularly?
     </legend>
     <div class="govuk-checkboxes" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-none-and-conditional-items.html

@@ -1,9 +1,7 @@
 <div class="govuk-form-group">
   <fieldset class="govuk-fieldset">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h1 class="govuk-fieldset__heading">
-        Do you have any access needs?
-      </h1>
+    <legend class="govuk-fieldset__legend">
+      Do you have any access needs?
     </legend>
     <div class="govuk-checkboxes" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-error-message.html

@@ -8,22 +8,31 @@
     </p>
     <div class="govuk-checkboxes" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="animal">
+        <input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="animal" aria-describedby="waste-item-hint">
         <label class="govuk-label govuk-checkboxes__label" for="waste">
           Waste from animal carcasses
         </label>
+        <div id="waste-item-hint" class="govuk-hint govuk-checkboxes__hint">
+          Nullam id dolor id nibh ultricies vehicula ut id elit.
+        </div>
       </div>
       <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
+        <input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines" aria-describedby="waste-2-item-hint">
         <label class="govuk-label govuk-checkboxes__label" for="waste-2">
           Waste from mines or quarries
         </label>
+        <div id="waste-2-item-hint" class="govuk-hint govuk-checkboxes__hint">
+          Nullam id dolor id nibh ultricies vehicula ut id elit.
+        </div>
       </div>
       <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
+        <input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm" aria-describedby="waste-3-item-hint">
         <label class="govuk-label govuk-checkboxes__label" for="waste-3">
           Farm or agricultural waste
         </label>
+        <div id="waste-3-item-hint" class="govuk-hint govuk-checkboxes__hint">
+          Nullam id dolor id nibh ultricies vehicula ut id elit.
+        </div>
       </div>
     </div>
   </fieldset>

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/{template-with-fieldset-and-error-message.html → template-with-hint.html}

@@ -1,11 +1,11 @@
-<div class="govuk-form-group govuk-form-group--error">
-  <fieldset class="govuk-fieldset" aria-describedby="nationality-error">
+<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="nationality-hint">
     <legend class="govuk-fieldset__legend">
       What is your nationality?
     </legend>
-    <p id="nationality-error" class="govuk-error-message">
-      <span class="govuk-visually-hidden">Error:</span> Please accept the terms and conditions
-    </p>
+    <div id="nationality-hint" class="govuk-hint">
+      Select all that apply
+    </div>
     <div class="govuk-checkboxes" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british">

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-hints-on-items.html

@@ -1,9 +1,7 @@
 <div class="govuk-form-group">
   <fieldset class="govuk-fieldset">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h1 class="govuk-fieldset__heading">
-        How do you want to sign in?
-      </h1>
+    <legend class="govuk-fieldset__legend">
+      How do you want to sign in?
     </legend>
     <div class="govuk-checkboxes" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-pre-checked-values.html

@@ -1,30 +1,39 @@
 <div class="govuk-form-group">
-  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british" checked>
-      <label class="govuk-label govuk-checkboxes__label" for="nationality">
-        British
-      </label>
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend">
+      How do you want to be contacted?
+    </legend>
+    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked" name="how-contacted-checked" type="checkbox" value="email" checked data-aria-controls="conditional-how-contacted-checked">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked">
+          Email
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked">
+        <label class="govuk-label" for="context-email">Email address</label>
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked-2" name="how-contacted-checked" type="checkbox" value="phone" data-aria-controls="conditional-how-contacted-checked-2">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-2">
+          Phone
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-2">
+        <label class="govuk-label" for="contact-phone">Phone number</label>
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+      </div>
+      <div class="govuk-checkboxes__item">
+        <input class="govuk-checkboxes__input" id="how-contacted-checked-3" name="how-contacted-checked" type="checkbox" value="text" checked data-aria-controls="conditional-how-contacted-checked-3">
+        <label class="govuk-label govuk-checkboxes__label" for="how-contacted-checked-3">
+          Text message
+        </label>
+      </div>
+      <div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked-3">
+        <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+      </div>
     </div>
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
-      <label class="govuk-label govuk-checkboxes__label" for="nationality-2">
-        Irish
-      </label>
-    </div>
-    <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other" checked data-aria-controls="conditional-nationality-3">
-      <label class="govuk-label govuk-checkboxes__label" for="nationality-3">
-        Citizen of another country
-      </label>
-    </div>
-    <div class="govuk-checkboxes__conditional" id="conditional-nationality-3">
-      <div class="govuk-form-group">
-  <label class="govuk-label" for="other-country">
-    Country
-  </label>
-  <input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">
-</div>
-    </div>
-  </div>
+  </fieldset>
 </div>

data/node_modules/govuk-frontend/dist/govuk/components/checkboxes/template-with-very-long-option-text.html

@@ -1,14 +1,11 @@
-<div class="govuk-form-group govuk-form-group--error">
-  <fieldset class="govuk-fieldset" aria-describedby="waste-hint waste-error">
+<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
     <legend class="govuk-fieldset__legend">
       Maecenas faucibus mollis interdum?
     </legend>
     <div id="waste-hint" class="govuk-hint">
       Nullam id dolor id nibh ultricies vehicula ut id elit.
     </div>
-    <p id="waste-error" class="govuk-error-message">
-      <span class="govuk-visually-hidden">Error:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </p>
     <div class="govuk-checkboxes" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="waste" name="waste" type="checkbox" value="nullam">

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

@@ -31,8 +31,8 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
+            "pageTemplateOptions": {},
+            "screenshot": true,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this government service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use analytics cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
         },
         {
@@ -53,7 +53,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -75,66 +75,10 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
-        {
-            "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 cookie message",
-                                "type": "button"
-                            }
-                        ]
-                    },
-                    {
-                        "text": "Your cookie preferences have been saved. You have rejected cookies.",
-                        "role": "alert",
-                        "hidden": true,
-                        "actions": [
-                            {
-                                "text": "Hide cookie message",
-                                "type": "button"
-                            }
-                        ]
-                    }
-                ]
-            },
-            "hidden": false,
-            "description": "",
-            "previewLayoutModifiers": [],
-            "screenshot": false,
-            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
-        },
         {
             "name": "with html",
             "options": {
@@ -165,7 +109,7 @@
             },
             "hidden": false,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on <span>my service</span>\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n          <p class=\"govuk-body\">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n</div>"
         },
@@ -180,7 +124,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on <span>my service</span>\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -195,7 +139,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on &lt;span&gt;my service&lt;/span&gt;\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -210,7 +154,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies in <span>our service</span>.</p>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -225,7 +169,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message app-my-class govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -242,7 +186,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" data-attribute=\"my-value\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -258,7 +202,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookies on GOV.UK\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies on GOV.UK</p>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -273,7 +217,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -288,7 +232,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>"
         },
@@ -307,7 +251,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        This is a button\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -327,7 +271,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n    </div>\n\n  </div>\n</div>"
         },
@@ -349,7 +293,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <a class=\"govuk-link\" href=\"/link\">This is a link</a>\n    </div>\n\n  </div>\n</div>"
         },
@@ -370,7 +314,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <a href=\"/link\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n        This is a link\n      </a>\n    </div>\n\n  </div>\n</div>"
         },
@@ -390,7 +334,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Button\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -410,7 +354,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button my-button-class app-button-class\" data-module=\"govuk-button\">\n        Button with custom classes\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -432,7 +376,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\" data-button-attribute=\"my-value\">\n        Button with attributes\n      </button>\n    </div>\n\n  </div>\n</div>"
         },
@@ -453,7 +397,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <a class=\"govuk-link my-link-class app-link-class\" href=\"/my-link\">Link with custom classes</a>\n    </div>\n\n  </div>\n</div>"
         },
@@ -476,10 +420,66 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <a class=\"govuk-link\" href=\"/link\" data-link-attribute=\"my-value\">Link with attributes</a>\n    </div>\n\n  </div>\n</div>"
         },
+        {
+            "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 cookie message",
+                                "type": "button"
+                            }
+                        ]
+                    },
+                    {
+                        "text": "Your cookie preferences have been saved. You have rejected cookies.",
+                        "role": "alert",
+                        "hidden": true,
+                        "actions": [
+                            {
+                                "text": "Hide cookie message",
+                                "type": "button"
+                            }
+                        ]
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "pageTemplateOptions": {},
+            "screenshot": false,
+            "html": "<div class=\"govuk-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\" hidden>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
+        },
         {
             "name": "full banner hidden",
             "options": {
@@ -535,7 +535,7 @@
             },
             "hidden": true,
             "description": "",
-            "previewLayoutModifiers": [],
+            "pageTemplateOptions": {},
             "screenshot": false,
             "html": "<div class=\"govuk-cookie-banner hide-cookie-banner\" data-nosnippet role=\"region\" aria-label=\"Cookie banner\" hidden data-hide-cookie-banner=\"true\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">\n          Cookies on this service\n        </h2>\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">We use cookies to help understand how users use our service.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"submit\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" href=\"/cookie-preferences\">View cookie preferences</a>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have accepted cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n  <div class=\"govuk-cookie-banner__message govuk-width-container\" role=\"alert\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"govuk-cookie-banner__content\">\n          <p class=\"govuk-body\">Your cookie preferences have been saved. You have rejected cookies.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n        Hide cookie message\n      </button>\n    </div>\n\n  </div>\n</div>"
         }