From e058a3dd5bc078351b8e7297e027f0d24271e103 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sat, 29 Mar 2025 13:26:39 +0100
Subject: [PATCH] Improve cookiebanner.

---
 README.md                                          |  2 +-
 assets/js/cookieconsent.js                         | 14 +++++++-------
 .../components/cookieconsent/_cookieconsent.scss   |  9 +++++++--
 layouts/partials/cookieconsent.html                |  2 +-
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 36e3cf8..f5b56a8 100644
--- a/README.md
+++ b/README.md
@@ -556,7 +556,7 @@ It it recommended to add a link or button to allow users to change their choice.
 
 ```html
 <button class="clearcookieconsent">Cookie settings</button>
-<a src="" class="clearcookieconsent">Cookie settings</a>
+<a href="#" class="clearcookieconsent">Cookie settings</a>
 ```
 
 When a user clickes the button/link the localStorage item "cookieconsent" is cleared and the cookieconsent dialog is shown again.
diff --git a/assets/js/cookieconsent.js b/assets/js/cookieconsent.js
index 08013fb..3b2f30b 100644
--- a/assets/js/cookieconsent.js
+++ b/assets/js/cookieconsent.js
@@ -8,20 +8,20 @@
   const cookieconsent = localStorage.getItem('cookieconsent');
 
   if (cookiebanner && !cookieconsent) {
-    cookiebanner.classList.remove('hidden');
-    cookiebanner.classList.add('js-cookieconsent-open');
+    cookiebanner.hidden = false;
+    cookiebanner.dataset.cookieconsentopen = true;
   }
 
   const cookie_buttons = document.querySelectorAll('button[data-consent]');
   cookie_buttons.forEach(function (button) {
     button.addEventListener('click', function () {
-      if (button.getAttribute('data-consent') === 'true') {
+      if (button.dataset.consent === 'true') {
         localStorage.setItem('cookieconsent', 'accept');
       } else {
         localStorage.setItem('cookieconsent', 'decline');
       }
-      cookiebanner.classList.remove('js-cookieconsent-open');
-      cookiebanner.classList.add('hidden');
+      delete cookiebanner.dataset.cookieconsentopen;
+      cookiebanner.hidden = true;
     });
   });
 
@@ -31,8 +31,8 @@
       e.preventDefault();
       if (cookiebanner && cookieconsent) {
         localStorage.removeItem('cookieconsent');
-        cookiebanner.classList.remove('hidden');
-        cookiebanner.classList.add('js-cookieconsent-open');
+        cookiebanner.hidden = false;
+        cookiebanner.dataset.cookieconsentopen = true;
       }
     });
   });
diff --git a/assets/sass/components/cookieconsent/_cookieconsent.scss b/assets/sass/components/cookieconsent/_cookieconsent.scss
index 327b44f..bcbc6a6 100644
--- a/assets/sass/components/cookieconsent/_cookieconsent.scss
+++ b/assets/sass/components/cookieconsent/_cookieconsent.scss
@@ -8,7 +8,7 @@
   position: sticky;
   bottom: 0;
   width: 100%;
-  padding-block-start: .5rem;
+  padding: var(--spacing-xs);
   color: var(--color-warning);
   background-color: var(--color-warning-bg);
   border-block-start: 4px solid var(--color-warning-border);
@@ -16,6 +16,11 @@
   transform: translateY(100vh);
   transition: all 130ms ease-out;
   z-index: 99;
+
+  &__actions {
+    display: flex;
+    gap: .5rem;
+  }
 }
 
 .button {
@@ -28,6 +33,6 @@
   }
 }
 
-.js-cookieconsent-open {
+[data-cookieconsentopen] {
   transform: translateY(0);
 }
diff --git a/layouts/partials/cookieconsent.html b/layouts/partials/cookieconsent.html
index 84bf18d..26dc8b7 100644
--- a/layouts/partials/cookieconsent.html
+++ b/layouts/partials/cookieconsent.html
@@ -1,4 +1,4 @@
-<div class="cookieconsent layout__cookieconsent hidden">
+<div class="cookieconsent layout__cookieconsent" hidden>
   <div class="cookieconsent__message">
     {{ i18n "cookieconsent_message" }}
   </div>