Update Design System cookie banner to match example changes

alphagov · Sep 20, 2023 · f72a9a8 · f72a9a8
1 parent 1346506
commit f72a9a8
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/__tests__/cookies-page.test.js b/__tests__/cookies-page.test.js
@@ -10,8 +10,8 @@ describe('Cookies page', () => {
 
   async function setup(page) {
     $module = await page.$('[data-module="app-cookies-page"]')
-    $radioYes = await $module.$('input[name="analytics"][value="yes"]')
-    $radioNo = await $module.$('input[name="analytics"][value="no"]')
+    $radioYes = await $module.$('input[name="cookies[analytics]"][value="yes"]')
+    $radioNo = await $module.$('input[name="cookies[analytics]"][value="no"]')
     $buttonSave = await $module.$('button')
   }
 

diff --git a/src/cookies.njk b/src/cookies.njk
@@ -104,16 +104,16 @@ layout: layout-single-page.njk
         }) }}
 
         {{ govukRadios({
-          name: "analytics",
-          idPrefix: "radio-analytics",
+          name: "cookies[analytics]",
+          idPrefix: "cookies-analytics",
           fieldset: {
             legend: {
               text: "Do you want to accept analytics cookies?",
               classes: "govuk-fieldset__legend--s"
             },
             classes: "js-cookies-page-form-fieldset",
             attributes: {
-              id: "analytics",
+              "data-cookie-type": "analytics",
               hidden: ""
             }
           },

diff --git a/src/javascripts/components/cookies-page.mjs b/src/javascripts/components/cookies-page.mjs
@@ -47,7 +47,7 @@ CookiesPage.prototype.savePreferences = function (event) {
     function ($cookieFormFieldset) {
       var cookieType = this.getCookieType($cookieFormFieldset)
       var selectedItem = $cookieFormFieldset.querySelector(
-        'input[name=' + cookieType + ']:checked'
+        'input[name="cookies[' + cookieType + ']"]:checked'
       ).value
 
       preferences[cookieType] = selectedItem === 'yes'
@@ -72,7 +72,7 @@ CookiesPage.prototype.showUserPreference = function (
 
   var radioValue = preference ? 'yes' : 'no'
   var radio = $cookieFormFieldset.querySelector(
-    'input[name=' + cookieType + '][value=' + radioValue + ']'
+    'input[name="cookies[' + cookieType + ']"][value=' + radioValue + ']'
   )
   radio.checked = true
 }
@@ -94,7 +94,7 @@ CookiesPage.prototype.showSuccessNotification = function () {
 }
 
 CookiesPage.prototype.getCookieType = function ($cookieFormFieldset) {
-  return $cookieFormFieldset.id
+  return $cookieFormFieldset.getAttribute('data-cookie-type')
 }
 
 export default CookiesPage