chore: integrate feedback (#58)

* chore: centralize vars

* fix: change link cursor

* chore: reduce code footprint

* chore: some doc

* chore: typo

Author: kptdobe

blocks/consent/README.md

@@ -11,7 +11,7 @@ Consent block provides a minimalistic, performant and non-intrusive cookie conse
 * When consent preferences are updated or read from the browser, a custom event is triggered. Martech loaders can listen to this events to decide what to load or not load, based on user preferences.
 
 ## Cookie Consent Flow
-![Cookie Consent flow (1)](https://github.com/adobe/aem-block-collection/assets/43381734/53583ee0-da46-4f1a-91f4-39411305bf47)
+![Cookie Consent flow](https://github.com/adobe/aem-block-collection/assets/43381734/53583ee0-da46-4f1a-91f4-39411305bf47)
 
 
 ## Content of the banner
@@ -31,11 +31,11 @@ Metadata properties:
 *Samples*:
 * configuration:
 
-![Screenshot 2024-02-16 at 16 31 43](https://github.com/adobe/aem-block-collection/assets/43381734/e8e52be7-1cf5-4820-8384-76ff228be061)
+![Consent configuration](https://github.com/adobe/aem-block-collection/assets/43381734/e8e52be7-1cf5-4820-8384-76ff228be061)
 
 * banner displayed:
 
-![Screenshot 2024-03-13 at 09 08 27](https://github.com/adobe/aem-block-collection/assets/43381734/7b70dfe8-1d79-432e-8e74-f09af016bab7)
+![Consent banner preview](https://github.com/adobe/aem-block-collection/assets/43381734/7b70dfe8-1d79-432e-8e74-f09af016bab7)
 
 
 
@@ -57,16 +57,23 @@ The second and subsequent sections are considered to be cookie categories. And e
 *Samples*
 * configuration
 
-![Screenshot 2024-02-16 at 17 00 58](https://github.com/adobe/aem-block-collection/assets/43381734/1fba9fcf-19a8-4f0d-9e3d-741e77befefb)
+![Multiple consent configuration samples](https://github.com/adobe/aem-block-collection/assets/43381734/1fba9fcf-19a8-4f0d-9e3d-741e77befefb)
 
 
 * dialog displayed
 
-![Screenshot 2024-02-16 at 17 02 26](https://github.com/adobe/aem-block-collection/assets/43381734/72929596-0b25-450a-9332-72dea6d94204)
+![Consent dialog preview](https://github.com/adobe/aem-block-collection/assets/43381734/72929596-0b25-450a-9332-72dea6d94204)
 
 ## Update consent
 Sometimes users want to change their cookie preferences. For this purpose there is a function in the block `blocks/consent/consent.js` called `showConsentForUpdate(name)`.
 Where `name` is the name of the consent configuration document. This function is expected to be called when a user clicks on the "cookie preferences" or similar link.
 
 * In case of *#1. Simple consent banner* this function will show the minimalistic non-intrusive banner
 * In case of *#2. Simple consent banner and categories details* this function would show the consent categories detail dialog.
+
+## Block setup
+
+Block needs to be loaded as quickly as possible and the logic to load the block or not highly depends on project needs. Here are the two elements you may want to patch in your project:
+
+- in [scripts.js](../../scripts.js), you need to load the consent block in the lazy phase to load the consent banner
+- in [footer](../header/footer.js), you can "patch" the Cookie Preferences link to open the consent dialog using the `setupConsentPreferenceLink` function from the block.

blocks/consent/consent.css

@@ -1,10 +1,17 @@
-.consent.banner {
+.consent {
   --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(--background-color);
+  --consent-dialog-background-color: var(--background-color);
+  --consent-dialog-light-color: var(--light-color);
+  --consent-dialog-dark-color: var(--dark-color);
+  --consent-dialog-body-font-size: var(--body-font-size-s);
+  --consent-dialog-heading-font-size: var(--heading-font-size-m);
+}
 
+.consent.banner {
   font-size: var(--consent-banner-font-size-s);
   color: var(--consent-banner-text-color);
   background-color: var(--consent-banner-background-color);
@@ -60,22 +67,23 @@
 
 .consent.banner .more-info {
   color: var(--consent-banner-link-color);
+  cursor: pointer;
 }
 
 .consent dialog {
-  font-size: var(--body-font-size-s);
+  font-size: var(--consent-dialog-body-font-size);
   overscroll-behavior: none;
   padding: 30px;
   border: 1px solid #ccc;
-  border-radius: var(--dialog-border-radius);
+  border-radius: 16px;
   left: 20px;
   right: 20px;
   width: clamp(300px, 80%, 700px);
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
 .consent dialog .consent-button {
-  font-size: var(--body-font-size-s);
+  font-size: var(--consent-dialog-body-font-size);
   margin: 0;
 }
 
@@ -86,7 +94,7 @@
   width: 20px;
   height: 100%;
   max-height: 54px;
-  border-radius: 0 var(--dialog-border-radius) 0 0;
+  border-radius: 0 16px 0 0;
   background-color: unset;
   text-overflow: clip;
   margin: 0;
@@ -100,7 +108,7 @@
 }
 
 .consent dialog h2 {
-  font-size: var(--heading-font-size-m);
+  font-size: var(--consent-dialog-heading-font-size);
 }
 
 .consent dialog .section {
@@ -199,7 +207,7 @@
 
 /*** COPIED FROM ACCORDION ***/
 .consent .accordion details {
-  border: 1px solid var(--dark-color);
+  border: 1px solid var(--consent-dialog-dark-color);
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
@@ -218,12 +226,12 @@
 }
 
 .consent .accordion details[open] summary {
-  background-color: var(--light-color);
+  background-color: var(--consent-dialog-light-color);
 }
 
 .consent .accordion details summary:focus,
 .consent .accordion details summary:hover {
-  background-color: var(--dark-color);
+  background-color: var(--consent-dialog-dark-color);
 }
 
 .consent .accordion details summary::-webkit-details-marker {
@@ -252,6 +260,6 @@
 }
 
 .consent .accordion details[open] .accordion-item-body {
-  border-top: 1px solid var(--dark-color);
-  background-color: var(--background-color);
+  border-top: 1px solid var(--consent-dialog-dark-color);
+  background-color: var(--consent-dialog-background-color);
 }

blocks/consent/consent.js

@@ -1,6 +1,8 @@
 import {
   sampleRUM,
   loadCSS,
+  getMetadata,
+  fetchPlaceholders,
 } from '../../scripts/aem.js';
 
 const LOCAL_STORAGE_AEM_CONSENT = 'aem-consent';
@@ -72,7 +74,7 @@ export function init(consentName) {
 }
 
 /**
- * shows the consent banner to update the preferences.
+ * Shows the consent banner to update the preferences.
  * If config has category details, it will directly show the categoty details dialog.
  * Otherwise it will show the minimal banner.
  * @param {String} consentName name of the consent banner configuration file.
@@ -82,3 +84,19 @@ export function showConsentForUpdate(consentName) {
   loadCSS(`${window.hlx.codeBasePath}/blocks/consent/consent.css`);
   import('./consent-banner.js').then((ccdialog) => ccdialog.showConsentBannerForUpdate(consentName, manageConsentUpdate));
 }
+
+/**
+ * Updates the Cookie Preference link inside the provided element:
+ * on click, the link will open the consent dialog
+ * if the 'cookie-consent' metadata is set on the page.
+ * @param {Element} el the DOM element in which the consent preference link is to be set up
+ */
+export function setupConsentPreferenceLink(el = document) {
+  if (getMetadata('cookie-consent')) {
+    const consentLinkText = fetchPlaceholders()['cookie-preferences-link'] || 'Cookie preferences';
+    el.querySelector(`a[title="${consentLinkText}"]`).addEventListener('click', (e) => {
+      showConsentForUpdate(getMetadata('cookie-consent'));
+      e.preventDefault();
+    });
+  }
+}

blocks/footer/footer.js

@@ -1,6 +1,7 @@
-import { getMetadata, fetchPlaceholders } from '../../scripts/aem.js';
+import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
-import { showConsentForUpdate } from '../consent/consent.js';
+import { setupConsentPreferenceLink } from '../consent/consent.js';
+
 /**
  * loads and decorates the footer
  * @param {Element} block The footer block element
@@ -12,13 +13,8 @@ export default async function decorate(block) {
   // load footer fragment
   const footerPath = footerMeta.footer || '/footer';
   const fragment = await loadFragment(footerPath);
-  if (getMetadata('cookie-consent')) {
-    const consentLinkText = fetchPlaceholders()['cookie-preferences-link'] || 'Cookie preferences';
-    fragment.querySelector(`a[title="${consentLinkText}"]`).addEventListener('click', (e) => {
-      showConsentForUpdate(getMetadata('cookie-consent'));
-      e.preventDefault();
-    });
-  }
+
+  setupConsentPreferenceLink(fragment);
 
   // decorate footer DOM
   const footer = document.createElement('div');