Merge pull request #54 from adobe/cookieconsent-css

feat: new banner design
adobe · Mar 4, 2024 · b5bb05c · b5bb05c
2 parents 3199f3e + 90bfaa3
commit b5bb05c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 45 deletions.
diff --git a/blocks/cookie-consent/consent-banner.js b/blocks/cookie-consent/consent-banner.js
@@ -1,22 +1,11 @@
 import {
   fetchPlaceholders,
-  decorateIcons,
 } from '../../scripts/aem.js';
 
 import { loadFragment } from '../fragment/fragment.js';
 import { buildAndShowDialog } from './consent-dialog.js';
 
 const BASE_CONSENT_PATH = '/block-collection/cookie-consent';
-function addCloseButton(banner) {
-  const closeButton = document.createElement('button');
-  closeButton.classList.add('close-button');
-  closeButton.setAttribute('aria-label', 'Close');
-  closeButton.type = 'button';
-  closeButton.innerHTML = '<span class="icon icon-close"></span>';
-  closeButton.addEventListener('click', () => (banner.close ? banner.close() : banner.remove()));
-  banner.append(closeButton);
-  decorateIcons(closeButton);
-}
 
 function addListeners(bannerDiv, consentUpdateCallback, arrayCategories, categoriesSections) {
   const acceptAll = bannerDiv.querySelector('.consent.banner .accept');
@@ -94,7 +83,7 @@ function createBanner(bannerSection) {
   div.append(...content);
   const acceptAllButton = `<button class="consent-button accept primary">${placeholders.consentAcceptAll || 'Accept All'}</button>`;
   const rejectAllButton = `<button class="consent-button decline secondary">${placeholders.consentDeclineAll || 'Decline All'}</button>`;
-  const moreInfoLink = `<a class="more-info">${placeholders.moreInformation || 'More Information'}</a>`;
+  const moreInfoLink = `&nbsp;<a class="more-info">${placeholders.moreInformation || 'More Information'}</a>`;
   if (buttonsArray.includes('more_info')) {
     div.querySelector('p').append(document.createRange().createContextualFragment(moreInfoLink));
   }
@@ -106,7 +95,6 @@ function createBanner(bannerSection) {
     div.append(buttonsDiv);
   }
 
-  addCloseButton(div);
   return div;
 }
 

diff --git a/blocks/cookie-consent/cookie-consent.css b/blocks/cookie-consent/cookie-consent.css
@@ -1,40 +1,36 @@
-.consent {
-  font-size: var(--body-font-size-s);
-}
-
-.consent .consent-button {
-  font-size: var(--body-font-size-s);
-  margin: 0;
-}
-
-.consent .close-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 20px;
-  height: 100%;
-  max-height: 54px;
-  border-radius: 0 var(--dialog-border-radius) 0 0;
-  background-color: unset;
-  text-overflow: clip;
-  margin: 0;
-  border: none;
-  padding-right: 30px;
-  padding-left: 0;
+:root {
+  --consent-banner-background-color: #202124;
+  --consent-banner-font-size-s: 12px;
+  --consent-banner-font-size-l: 14px;
+  --consent-banner-text-color: #eee;
+  --consent-banner-link-color: var(--link-color);
 }
 
 .consent.banner {
+  font-size: var(--consent-banner-font-size-s);
+  color: var(--consent-banner-text-color);
+  background-color: var(--consent-banner-background-color);
   position: fixed;
   bottom: 0;
-  width: 100%;
-  text-align: center;
-  background-color: rgb(180 176 176 / 95%);
-  z-index: 10;
-  padding: 10px 0;
+  left: 0;
+  padding: 8px 16px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  text-align: left;
+  justify-content: left;
   flex-flow: row wrap;
+  margin: 16px;
+  border-radius: 4px;
+  box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
+  flex-wrap: wrap;
+}
+
+@media (width >= 600px) {
+  .consent.banner {
+    font-size: var(--consent-banner-font-size-l);
+    text-align: center;
+  justify-content: center;
+  }
 }
 
 .consent.banner .default-content-wrapper {
@@ -48,6 +44,7 @@
 }
 
 .consent.banner .consent-button {
+  font-size: var(--consent-banner-font-size);
   padding: 5px;
   margin: 5px;
   border: none;
@@ -56,18 +53,19 @@
 }
 
 .consent.banner .consent-button.primary {
-  color: var(--link-color);
+  color: var(--consent-banner-link-color);
 }
 
 .consent.banner .consent-button.secondary {
-  color: var(--light-color);
+  color: var(--consent-banner-link-color);
 }
 
 .consent.banner .more-info {
-  color: var(--link-color);
+  color: var(--consent-banner-link-color);
 }
 
 .consent dialog {
+  font-size: var(--body-font-size-s);
   overscroll-behavior: none;
   padding: 30px;
   border: 1px solid #ccc;
@@ -77,6 +75,29 @@
   width: clamp(300px, 80%, 700px);
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
+.consent dialog .consent-button {
+  font-size: var(--body-font-size-s);
+  margin: 0;
+}
+
+.consent dialog .close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  max-height: 54px;
+  border-radius: 0 var(--dialog-border-radius) 0 0;
+  background-color: unset;
+  text-overflow: clip;
+  margin: 0;
+  border: none;
+  padding-right: 30px;
+  padding-left: 0;
+}
+
+
 .consent dialog::backdrop {
   background-color: rgb(0 0 0 / 50%);
 }