Cookie consent - updates documentation config, cleans up js

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

@@ -1,31 +1,7 @@
 {{#if-equals type "banner"}}
-{{!-- <div class="nsw-cookie-banner js-cookie-banner" role="alert">
-  <div class="nsw-cookie-banner__wrapper {{#if-equals type "auto opt in"}}js-cookie-banner-auto-opt-in{{else}}js-cookie-banner-opt-in{{/if-equals}}">
-    <span class="nsw-cookie-banner__main-message">
-      <div class="nsw-cookie-banner__content">
-        <div class="nsw-cookie-banner__title">{{title}}</div>
-        <p>{{{content}}}</p>
-      </div>
-      <div class="nsw-cookie-banner__buttons-container">
-        <button class="nsw-button nsw-button--dark js-cookie-banner-accept">{{#if ctaAccept}}{{ctaAccept}}{{else}}Accept all cookies{{/if}}</button>
-        {{#if ctaReject}}<button href="{{ctaHref}}" class="nsw-button nsw-button--dark js-cookie-banner-reject">{{#if ctaReject}}{{ctaReject}}{{else}}Reject cookies{{/if}}</button>{{/if}}
-        <a href="{{urlManageCookies}}" class="nsw-button nsw-button--dark-outline">Manage your cookies</a>
-      </div>
-    </span>
-    {{#if confirmationMessage}}
-    <span class="nsw-cookie-banner__confirmation-message" hidden="true">
-      <div class="nsw-cookie-banner__content">
-        <p>{{{confirmationMessage}}}</p>
-      </div>
-      <div class="nsw-cookie-banner__buttons-container">
-        <button class="nsw-button nsw-button--dark js-cookie-banner-dismiss">Hide this message</button>
-      </div>
-    </span>
-    {{/if}}
-  </div>
-</div> --}}
+<a href="#" class="js-open-banner-cookie-consent" aria-haspopup="dialog">Trigger consent banner</a>
 {{/if-equals}}
 
 {{#if-equals type "dialog"}}
-<a href="#" class="js-open-dialog-cookie-consent" aria-haspopup="dialog">Cookie preferences</a>
+<a href="#" class="js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">Trigger cookie preferences</a>
 {{/if-equals}}

src/components/cookie-consent/blank.hbs

@@ -6,5 +6,9 @@ model:
   cookie-consent-4: json/cookie-consent-4.json
 ---
 
+<p>
 {{>_cookie-consent model.cookie-consent-1 type="banner"}}
+</p>
+<p>
 {{>_cookie-consent model.cookie-consent-4 type="dialog"}}
+</p>

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

@@ -27,7 +27,7 @@ waitForCookieConsent(() => {
             acceptAllBtn: 'Accept all',
             acceptNecessaryBtn: 'Reject all',
             showPreferencesBtn: 'Manage your preferences',
-            confirmationMessage: 'Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent" aria-haspopup="dialog">here</a>.',
+            confirmationMessage: 'Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">here</a>.',
           },
           preferencesModal: {
             title: 'Manage cookie preferences',

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

@@ -54,7 +54,7 @@ class CookieConsent {
 
     // 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="js-cookie-consent nsw-cookie-dialog nsw-dialog nsw-dialog--single-action js-dialog js-dialog-dismiss" id="cookie-consent-preferences" role="dialog" aria-labelledby="cookie-consent-dialog">
         <div class="nsw-dialog__wrapper">
           <div class="nsw-dialog__container">
             <div class="nsw-dialog__top">
@@ -97,7 +97,7 @@ class CookieConsent {
     `
 
     // Append to the body
-    const dialogContainer = document.querySelector('.js-open-dialog-cookie-consent')
+    const dialogContainer = document.querySelector('.js-open-dialog-cookie-consent-preferences')
 
     // Initialise dialog
     if (dialogContainer) {
@@ -141,7 +141,7 @@ class CookieConsent {
             <div class="nsw-cookie-banner__buttons-container">
               ${consentModal.acceptAllBtn ? `<button class="nsw-button nsw-button--dark js-close-dialog ${!consentModal.confirmationMessage ? 'js-dismiss-cookie-banner' : ''}" data-role="accept-all">${consentModal.acceptAllBtn}</button>` : ''}
               ${consentModal.acceptNecessaryBtn ? `<button class="nsw-button nsw-button--dark js-cookie-banner-reject  ${!consentModal.confirmationMessage ? 'js-dismiss-cookie-banner' : ''}" data-role="reject-all">${consentModal.acceptNecessaryBtn}</button>` : ''}
-              <a href="#cookie-consent" class="nsw-button nsw-button--dark-outline js-open-dialog-cookie-consent" aria-haspopup="dialog">${consentModal.showPreferencesBtn || 'Manage your cookies'}</a>
+              <a href="#cookie-consent" class="nsw-button nsw-button--dark-outline js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">${consentModal.showPreferencesBtn || 'Manage your cookies'}</a>
             </div>
           </span>
           <span class="nsw-cookie-banner__confirmation-message" hidden="true">
@@ -171,11 +171,10 @@ class CookieConsent {
       this.attachEventListeners()
 
       // Immediately hide the banner if user has preferences set
-      // const preferences = CookieConsentAPI.getUserPreferences()
-      // if (preferences && preferences.acceptedCategories.length > 0) {
-      //   console.log('User has already made a selection')
-      //   this.consentBannerElement.setAttribute('hidden', 'true')
-      // }
+      const preferences = CookieConsentAPI.getUserPreferences()
+      if (preferences && preferences.acceptedCategories.length > 0) {
+        this.consentBannerElement.setAttribute('hidden', 'true')
+      }
     } else {
       console.error('Banner element not created')
     }
@@ -218,6 +217,17 @@ class CookieConsent {
       if (target.matches('.js-dismiss-cookie-banner')) {
         this.hideConsentBanner()
       }
+
+      // Manual trigger of cookie consent banner
+      if (target.matches('.js-open-banner-cookie-consent')) {
+        event.preventDefault()
+        this.showConsentBanner()
+      }
+
+      // Manual trigger of cookie consent preferences dialog
+      if (target.matches('.js-open-dialog-cookie-consent-preferences')) {
+        event.preventDefault()
+      }
     })
   }
 
@@ -291,6 +301,27 @@ class CookieConsent {
     }
   }
 
+  showConsentBanner() {
+    if (this.consentBannerElement) {
+      const description = this.consentBannerElement.querySelector('.nsw-cookie-banner__description')
+      const confirmationMessage = this.consentBannerElement.querySelector('.nsw-cookie-banner__confirmation-message')
+
+      if (this.consentBannerConfirmationMessage && confirmationMessage) {
+        // Hide the confirmation message if it's present
+        confirmationMessage.setAttribute('hidden', 'true')
+      }
+
+      if (description) {
+        // Show the main description
+        description.removeAttribute('hidden')
+      }
+
+      this.consentBannerElement.removeAttribute('hidden')
+    } else {
+      console.warn('Consent banner element not found.')
+    }
+  }
+
   hideConsentBanner() {
     if (this.consentBannerElement) {
       // Add a hidden attribute for transition

src/components/cookie-consent/theme.hbs

@@ -7,6 +7,10 @@ model:
 ---
 
 {{#>_theme}}
+<p>
 {{>_cookie-consent model.cookie-consent-1 type="banner"}}
+</p>
+<p>
 {{>_cookie-consent model.cookie-consent-4 type="dialog"}}
+</p>
 {{/_theme}}

src/global/handlebars/layouts/layout.hbs

@@ -71,7 +71,7 @@
                 acceptAllBtn: 'Accept all',
                 acceptNecessaryBtn: 'Reject all',
                 showPreferencesBtn: 'Manage your preferences',
-                confirmationMessage: `Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent" aria-haspopup="dialog">here</a>.`
+                confirmationMessage: `Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">here</a>.`
               },
               preferencesModal: {
                 title: 'Manage cookie preferences',