Cookie consent - adds dynamic preferences dialog, ability to add uned…

…itable options and prompt preferences modal from anywhere

src/components/cookie-consent/_cookie-consent.hbs

@@ -27,9 +27,9 @@
 {{/if-equals}}
 
 {{#if-equals type "dialog"}}
-<a href="#{{id}}" class="js-open-dialog-{{id}}" aria-haspopup="dialog">Cookie preferences</a>
+<a href="#cookie-consent" class="js-open-dialog-cookie-consent" aria-haspopup="dialog">Cookie preferences</a>
 
-<div class="js-cookie-consent nsw-cookie-dialog nsw-dialog{{#unless secondary}} nsw-dialog--single-action{{/unless}} js-dialog{{#if dismiss}} js-dialog-dismiss{{/if}}{{#if active}} active{{/if}}" id="{{id}}" role="dialog" aria-labelledby="{{id}}-title">
+{{!-- <div class="js-cookie-consent nsw-cookie-dialog nsw-dialog{{#unless secondary}} nsw-dialog--single-action{{/unless}} js-dialog{{#if dismiss}} js-dialog-dismiss{{/if}}{{#if active}} active{{/if}}" id="{{id}}" role="dialog" aria-labelledby="{{id}}-title">
   <div class="nsw-dialog__wrapper">
     <div class="nsw-dialog__container">
       <div class="nsw-dialog__top">
@@ -107,5 +107,5 @@
       </div>
     </div>
   </div>
-</div>
+</div> --}}
 {{/if-equals}}

src/components/cookie-consent/cookie-consent.js

@@ -1,72 +1,157 @@
 import * as CookieConsentAPI from 'vanilla-cookieconsent'
 
 class CookieConsent {
-  constructor(config = null, element = null) {
-    if (CookieConsent.instance) {
-      throw new Error('Use CookieConsent.getInstance() to get the Singleton instance')
-    }
-
-    // this.config = config
-    // this.bannerElement = element
+  constructor(config = null) {
     this.isInit = false
+    this.config = config ? { ...config, autoShow: false } : null
+    this.dialogElement = null
 
-    if (config || element) {
-      this.init(config, element)
+    if (this.config) {
+      this.createDialog()
+      this.init()
+    } else {
+      console.error('Cookie consent configuration not provided')
     }
-
-    CookieConsent.instance = this
   }
 
-  static getInstance() {
-    if (!CookieConsent.instance) {
-      CookieConsent.instance = new CookieConsent()
+  createDialog() {
+    const { language: { translations: { en } }, categories = {} } = this.config
+    const { consentModal, preferencesModal } = en
+    console.log('consentModal', consentModal)
+
+    const cookiesListHtml = `
+    <ul class="nsw-cookie-dialog__list">
+    ${preferencesModal.sections.map(
+    (section, index) => `
+          <li class="nsw-cookie-dialog__list-item">
+            <input 
+              class="nsw-form__checkbox-input" 
+              value="${section.linkedCategory}" 
+              type="checkbox" 
+              name="form-checkbox-multi-${index + 1}" 
+              id="cookie-settings-${index + 1}"
+              ${categories[section.linkedCategory].readOnly ? 'disabled' : ''}
+            >
+            <label 
+              class="nsw-form__checkbox-label" 
+              for="cookie-settings-${index + 1}"
+            >
+              ${section.title}
+            </label>
+            <div class="nsw-cookie-dialog__cookie-details">
+              <p>${section.description}</p>
+            </div>
+          </li>
+          `,
+  )
+    .join('')}
+  </ul>
+  `
+
+    // Create the dialog dynamically
+    const preferencesDialogHtml = `
+      <div class="js-cookie-consent nsw-cookie-dialog nsw-dialog nsw-dialog--single-action js-dialog js-dialog-dismiss" id="cookie-consent" role="dialog" aria-labelledby="cookie-consent-dialog">
+        <div class="nsw-dialog__wrapper">
+          <div class="nsw-dialog__container">
+            <div class="nsw-dialog__top">
+              <div class="nsw-dialog__title">
+                <h2 id="cookie-dialog-title">${preferencesModal.title ? preferencesModal.title : 'Cookie preferences'}</h2>
+              </div>
+              <div class="nsw-dialog__close">
+                <button class="nsw-icon-button js-close-dialog">
+                  <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
+                  <span class="sr-only">${preferencesModal.closeIconLabel ? preferencesModal.closeIconLabel : 'Close dialog'}</span>
+                </button>
+              </div>
+            </div>
+            <div class="nsw-dialog__content">
+              <div class="nsw-tabs js-cookie-consent-tabs">
+                <ul class="nsw-tabs__list">
+                  <li><a href="#cookie-settings" class="js-tabs-fixed">${preferencesModal.tabTitle1 ? preferencesModal.tabTitle1 : 'Cookie preferences'}</a></li>
+                  <li><a href="#cookie-information" class="js-tabs-fixed">${preferencesModal.tabTitle2 ? preferencesModal.tabTitle2 : 'What are cookies?'}</a></li>
+                </ul>
+                <section id="cookie-settings" class="nsw-tabs__content nsw-tabs__content--side-flush">
+                  ${cookiesListHtml}
+                </section>
+                <section id="cookie-information" class="nsw-tabs__content nsw-tabs__content--side-flush">
+                  ${preferencesModal.cookiesInformation}
+                </section>
+              </div>
+            </div>
+          </div>
+          <div class="nsw-cookie-dialog__bottom">
+            <div class="nsw-cookie-dialog__cta-group">
+              <button class="nsw-button nsw-button--dark js-close-dialog" data-role="accept-selection">${preferencesModal.savePreferencesBtn ? preferencesModal.savePreferencesBtn : 'Accept current selection'}</button>
+            </div>
+            <div class="nsw-cookie-dialog__cta-group">
+              ${preferencesModal.acceptAllBtn ? `<button class="nsw-button nsw-button--dark-outline-solid js-close-dialog" data-role="accept-all">${preferencesModal.acceptAllBtn ? preferencesModal.acceptAllBtn : 'Accept all cookies'}</button>` : ''}
+              ${preferencesModal.acceptNecessaryBtn ? `<button class="nsw-button nsw-button--dark-outline-solid js-close-dialog" data-role="reject-all">${preferencesModal.acceptNecessaryBtn ? preferencesModal.acceptNecessaryBtn : 'Reject all cookies'}</button>` : ''}
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+
+    // Append to the body
+    const dialogContainer = document.querySelector('.js-open-dialog-cookie-consent')
+
+    // Initialise dialog
+    if (dialogContainer) {
+      // Dynamically create the dialog HTML
+      const tempDiv = document.createElement('div')
+      tempDiv.innerHTML = preferencesDialogHtml
+      this.dialogElement = tempDiv.firstElementChild
+
+      // Append the dialog directly to the body
+      document.body.appendChild(this.dialogElement)
+
+      // Initialize the NSW Design System Dialog
+      this.dialogInstance = new window.NSW.Dialog(this.dialogElement)
+      this.dialogInstance.init()
+    } else {
+      console.warn('Dialog trigger element not found')
     }
-    return CookieConsent.instance
-  }
 
-  init(config, element) {
-    this.config = {
-      ...config,
-      autoShow: false,
+    // Initialise tabs
+    if (window.NSW && window.NSW.Tabs) {
+      const tabs = document.querySelector('.js-cookie-consent-tabs')
+      new window.NSW.Tabs(tabs).init()
+    } else {
+      console.warn('NSW Tabs library not found')
     }
-    this.bannerElement = element
+  }
 
-    if (element) {
+  init() {
+    if (this.dialogElement) {
       this.initElements()
-    }
-
-    if (this.config) {
       this.initAPI()
+      this.attachEventListeners()
+    } else {
+      console.error('Banner element not created')
     }
-
-    this.attachEventListeners()
   }
 
   initElements() {
-    if (!this.bannerElement) {
+    if (!this.dialogElement) {
       console.error('Banner element not provided')
       return
     }
-    this.cookieInputContainer = this.bannerElement.querySelector('.nsw-cookie-dialog__list')
+    this.cookieInputContainer = this.dialogElement.querySelector('.nsw-cookie-dialog__list')
     this.allCookieInputs = this.cookieInputContainer.querySelectorAll('input[type="checkbox"]')
-    this.acceptSelectionButton = this.bannerElement.querySelector('[data-role="accept-selection"]')
-    this.acceptAllButton = this.bannerElement.querySelector('[data-role="accept-all"]')
-    this.rejectAllButton = this.bannerElement.querySelector('[data-role="reject-all"]')
+    this.acceptSelectionButton = this.dialogElement.querySelector('[data-role="accept-selection"]')
+    this.acceptAllButton = this.dialogElement.querySelector('[data-role="accept-all"]')
+    this.rejectAllButton = this.dialogElement.querySelector('[data-role="reject-all"]')
   }
 
   initAPI() {
-    if (!this.config) {
-      console.error('Configuration not provided')
-      return
-    }
     CookieConsentAPI.run(this.config).then(() => {
       this.isInit = true
       this.loadUserPreferences()
     })
   }
 
   attachEventListeners() {
-    if (!this.bannerElement) return
+    if (!this.dialogElement) return
 
     if (this.acceptSelectionButton) {
       this.acceptSelectionButton.addEventListener('click', () => {
@@ -99,11 +184,6 @@ class CookieConsent {
   }
 
   sortSelection(criteria) {
-    if (!this.cookieInputContainer) {
-      console.error('Container with class "nsw-cookie-dialog__list" not found')
-      return
-    }
-
     const checked = []
     const unchecked = []
 

src/components/cookie-consent/json/cookie-consent-4.json

@@ -1,5 +1,5 @@
 {
-  "id": "cookie-banner",
+  "id": "cookie-consent",
   "title": "Cookies on Digital NSW website",
   "content": "You control your data. Learn more about the cookies we use, and choose which cookies to allow.",
   "cookie-information": "",

src/global/handlebars/layouts/layout.hbs

@@ -53,10 +53,14 @@
     waitForCookieConsent(() => {
       const config = {
         categories: {
+          necessary: {
+            enabled: true,
+            readOnly: true,
+          },
           analytics: {},
           foo: {},
         },
-        onConsent: (preferences) => console.log('Accepted:', preferences),
+        onConsent: (preferences) => console.log('Cookies preferences accepted'),
         language: {
           default: 'en',
           translations: {
@@ -73,21 +77,43 @@
                 acceptAllBtn: 'Accept all',
                 acceptNecessaryBtn: 'Reject all',
                 savePreferencesBtn: 'Accept current selection',
-                closeIconLabel: 'Close modal',
+                closeIconLabel: 'Close dialog',
                 sections: [
                   {
-                    title: 'Foo',
+                    title: 'Necessary',
                     description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.',
-                    linkedCategory: 'foo',
+                    linkedCategory: 'necessary',
                   },
                   {
                     title: 'Performance and Analytics',
                     description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.',
                     linkedCategory: 'analytics',
                   },
+                  {
+                    title: 'Foo',
+                    description: 'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.',
+                    linkedCategory: 'foo',
+                  },
                 ],
+                tabTitle1: 'Cookie preferences',
+                tabTitle2: 'What are cookies?',
+                cookiesInformation: `
+                  <p>Cookies are files saved on your phone, tablet or computer when you visit a website.</p>
+                  <p>They store information about how you use the website, such as the pages you visit.</p>
+                  <p>Cookies are not viruses or computer programs. They are very small so do not take up much space.</p>
+                  <h2>How we use cookies</h2>
+                  <p>We use cookies to:</p>
+                  <ul>
+                    <li>make our website work, for example by keeping it secure</li>
+                    <li>remember which pop-ups you've seen</li>
+                    <li>understand how you interact with our website, including tracking the links you click (analytics cookies).</li>
+                    <li>allow you to share pages with social networks like LinkedIn</li>
+                    <li>continuously improve our website for you</li>
+                  </ul>
+                  <p>Also mention if your NSW Government website does or does not collect personal information.</p>
+                  <p>For more information on what cookies are, how they work and how to delete them from your computer, you can visit <a href="https://www.allaboutcookies.org">www.allaboutcookies.org</a>.</p>`
+                },
               },
-            },
           },
         },
       }