Merge pull request #55 from hlxsites/cleanup-and-fixes

Cleanup and fixes

blocks/accordion/accordion.js

@@ -1,9 +1,6 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { componentList } from '../../scripts/component-list/component-list.js';
 
 export default class Accordion extends ComponentBase {
-  dependencies = componentList.accordion.module.dependencies;
-
   init() {
     super.init();
     this.setAttribute('role', 'navigation');

blocks/button/button.js

@@ -1,40 +1,3 @@
 import ComponentBase from '../../scripts/component-base.js';
 
-export default class Button extends ComponentBase {
-  extendConfig() {
-    return [
-      ...super.extendConfig(),
-      {
-        selectors: {
-          anchor: ':scope > a',
-          ariaText: ':scope > a:has(> raqn-icon, > .icon) > strong',
-        },
-      },
-    ];
-  }
-
-  init() {
-    super.init();
-    this.queryElements();
-    this.wrapText();
-    this.addAriaText();
-  }
-
-  wrapText() {
-    const { anchor, ariaText } = this.elements;
-    const wrap = document.createElement('span');
-    if (ariaText) return;
-    if (!anchor.childNodes) return;
-    const label = [...anchor.childNodes].find(({ nodeName }) => nodeName === '#text');
-    if (!label) return;
-    wrap.textContent = label.textContent;
-    label.replaceWith(wrap);
-  }
-
-  addAriaText() {
-    const { anchor, ariaText } = this.elements;
-    if (!ariaText) return;
-    anchor.setAttribute('aria-label', ariaText.textContent);
-    ariaText.remove();
-  }
-}
+export default class Button extends ComponentBase {}

blocks/grid-item/grid-item.css

@@ -9,6 +9,14 @@ raqn-grid-item {
   justify-self: var(--grid-item-justify);
   align-self: var(--grid-item-align);
   order: var(--grid-item-order);
+  margin-block-start: var(--grid-item-margin-block-start);
+  margin-block-end: var(--grid-item-margin-block-end);
+  margin-inline-start: var(--grid-item-margin-inline-start);
+  margin-inline-end: var(--grid-item-margin-inline-end);
+  padding-block-start: var(--grid-item-padding-block-start);
+  padding-block-end: var(--grid-item-padding-block-end);
+  padding-inline-start: var(--grid-item-padding-inline-start);
+  padding-inline-end: var(--grid-item-padding-inline-end);
 }
 
 /* Make grid item sticky */

blocks/grid/grid.css

@@ -12,6 +12,17 @@ raqn-grid {
   --grid-background: var(--background, black);
   --grid-color: var(--text, white);
 
+  /* Option to add margins/paddings for grid to grid-items 
+     Values are set to initial prevent unwanted inheritance. */
+  --grid-item-margin-block-start: initial;
+  --grid-item-margin-block-end: initial;
+  --grid-item-margin-inline-start: initial;
+  --grid-item-margin-inline-end: initial;
+  --grid-item-padding-block-start: initial;
+  --grid-item-padding-block-end: initial;
+  --grid-item-padding-inline-start: initial;
+  --grid-item-padding-inline-end: initial;
+
   display: grid;
 
   /* defaults to 2 columns */

blocks/grid/grid.js

@@ -1,13 +1,10 @@
 import ComponentBase from '../../scripts/component-base.js';
-import { componentList } from '../../scripts/component-list/component-list.js';
 import { stringToJsVal } from '../../scripts/libs.js';
 
 export default class Grid extends ComponentBase {
   // only one attribute is observed rest is set as css variables directly
   static observedAttributes = ['data-reverse'];
 
-  dependencies = componentList.grid.module.dependencies;
-
   async onAttributeReverseChanged({ oldValue, newValue }) {
     await this.initialization;
 

blocks/header/header.js

@@ -1,12 +1,9 @@
 import ComponentBase from '../../scripts/component-base.js';
 import { eagerImage, getMeta, metaTags } from '../../scripts/libs.js';
-import { componentList } from '../../scripts/component-list/component-list.js';
 
 const metaHeader = getMeta(metaTags.header.metaName);
 
 export default class Header extends ComponentBase {
-  dependencies = componentList.header.module.dependencies;
-
   attributesValues = {
     all: {
       class: ['color-primary'],
@@ -15,15 +12,6 @@ export default class Header extends ComponentBase {
 
   fragmentPath = `${metaHeader}.plain.html`;
 
-  extendConfig() {
-    return [
-      ...super.extendConfig(),
-      {
-        addToTargetMethod: 'append',
-      },
-    ];
-  }
-
   async init() {
     super.init();
     eagerImage(this, 1);

blocks/icon/icon.js

@@ -48,17 +48,11 @@ export default class Icon extends ComponentBase {
   async onAttributeIconChanged({ oldValue, newValue }) {
     if (oldValue === newValue) return;
 
-    // ! The initial and active icon names are separated with a double underline
-    // ! The active icon is optional;
     if (!newValue) return;
-    const [initial, active] = newValue.split('__');
+    const { initial, active, loadActiveIcon, loadInitialIcon } = this.getIcons(newValue);
     this.#initialIcon = initial;
     this.#activeIcon = active || null;
 
-    // Start loading both icons;
-    const loadInitialIcon = this.loadIcon(this.#initialIcon);
-    const loadActiveIcon = this.#activeIcon ? this.loadIcon(this.#activeIcon) : null;
-
     const isActiveWithIcon = this.isActive && this.#activeIcon;
     // Wait only for the current icon
     if (isActiveWithIcon) {
@@ -81,6 +75,19 @@ export default class Icon extends ComponentBase {
     this.innerHTML = this.template(iconName);
   }
 
+  getIcons(icon) {
+    // ! The initial and active icon names are separated with a double underline
+    // ! The active icon is optional;
+    const [initial, active] = icon.split('__');
+
+    return {
+      initial,
+      active,
+      loadInitialIcon: this.loadIcon(initial),
+      loadActiveIcon: active ? this.loadIcon(active) : null,
+    };
+  }
+
   // Load icon can be used externally to load additional icons in the cache
   async loadIcon(iconName) {
     // this.iconName = icon;

blocks/navigation/navigation.js

@@ -9,7 +9,7 @@ export default class Navigation extends ComponentBase {
 
   isActive = false;
 
-  #navContentInit = false;
+  navContentInit = false;
 
   navCompactedContentInit = false;
 
@@ -39,9 +39,9 @@ export default class Navigation extends ComponentBase {
 
   async init() {
     super.init();
-    this.navContent = this.querySelector('ul');
+    this.elements.navContent = this.querySelector('ul');
     this.innerHTML = '';
-    this.navCompactedContent = this.navContent.cloneNode(true); // the clone need to be done before `this.navContent` is modified
+    this.elements.navCompactedContent = this.elements.navContent.cloneNode(true); // the clone need to be done before `this.navContent` is modified
     this.nav = document.createElement('nav');
     this.isCompact = this.dataset.compact === 'true';
     this.append(this.nav);
@@ -56,24 +56,24 @@ export default class Navigation extends ComponentBase {
   }
 
   setupNav() {
-    if (!this.#navContentInit) {
-      this.#navContentInit = true;
-      this.setupClasses(this.navContent);
+    if (!this.navContentInit) {
+      this.navContentInit = true;
+      this.setupClasses(this.elements.navContent);
     }
-    this.navButton?.remove();
-    this.nav.append(this.navContent);
+    this.nav.append(this.elements.navContent);
   }
 
   async setupCompactedNav() {
+    const { navCompactedContent } = this.elements;
+
     if (!this.navCompactedContentInit) {
       loadAndDefine(componentList.accordion);
       this.navCompactedContentInit = true;
-      this.setupClasses(this.navCompactedContent, true);
-      this.navCompactedContent.addEventListener('click', (e) => this.activate(e));
+      this.setupClasses(navCompactedContent, true);
     }
-
     this.prepend(this.createButton());
-    this.nav.append(this.navCompactedContent);
+    this.nav.append(navCompactedContent);
+    this.addCompactedListeners();
   }
 
   onAttributeCompactChanged({ oldValue, newValue }) {
@@ -85,13 +85,7 @@ export default class Navigation extends ComponentBase {
     if (this.isCompact) {
       this.setupCompactedNav();
     } else {
-      if (this.navButton) {
-        this.isActive = false;
-        this.classList.remove('active');
-        this.navButton.removeAttribute('aria-expanded');
-        this.navIcon.dataset.active = this.isActive;
-        this.closeAllLevels();
-      }
+      this.cleanCompactedNav();
       this.setupNav();
     }
   }
@@ -103,25 +97,16 @@ export default class Navigation extends ComponentBase {
   }
 
   createButton() {
-    this.navButton = document.createElement('button');
-    this.navButton.setAttribute('aria-label', 'Menu');
-    this.navButton.setAttribute('aria-expanded', 'false');
-    this.navButton.setAttribute('aria-controls', 'navigation');
-    this.navButton.setAttribute('aria-haspopup', 'true');
-    this.navButton.setAttribute('type', 'button');
-    this.navButton.innerHTML = `<raqn-icon data-icon=${this.dataset.menuIcon}></raqn-icon>`;
-    this.navIcon = this.navButton.querySelector('raqn-icon');
-
-    this.navButton.addEventListener('click', () => {
-      this.isActive = !this.isActive;
-      this.classList.toggle('active');
-      this.navButton.setAttribute('aria-expanded', this.isActive);
-      this.navIcon.dataset.active = this.isActive;
-      blockBodyScroll(this.isActive);
-      this.closeAllLevels();
-    });
-
-    return this.navButton;
+    this.elements.navButton = document.createElement('button');
+    const { navButton } = this.elements;
+    navButton.setAttribute('aria-label', 'Menu');
+    navButton.setAttribute('aria-expanded', 'false');
+    navButton.setAttribute('aria-controls', 'navigation');
+    navButton.setAttribute('aria-haspopup', 'true');
+    navButton.setAttribute('type', 'button');
+    navButton.innerHTML = `<raqn-icon data-icon=${this.dataset.menuIcon}></raqn-icon>`;
+    this.elements.navIcon = navButton.querySelector('raqn-icon');
+    return navButton;
   }
 
   addIcon(elem) {
@@ -158,6 +143,34 @@ export default class Navigation extends ComponentBase {
     });
   }
 
+  addCompactedListeners() {
+    const { navCompactedContent, navButton } = this.elements;
+    navCompactedContent.addEventListener('click', (e) => this.activate(e));
+    navButton.addEventListener('click', (e) => this.toggleNav(e));
+  }
+
+  toggleNav() {
+    const { navIcon, navButton } = this.elements;
+    this.isActive = !this.isActive;
+    this.classList.toggle('active');
+    navButton.setAttribute('aria-expanded', this.isActive);
+    navIcon.dataset.active = this.isActive;
+    blockBodyScroll(this.isActive);
+    this.closeAllLevels();
+  }
+
+  cleanCompactedNav() {
+    if (!this.navCompactedContentInit) return;
+    const { navIcon, navButton } = this.elements;
+
+    this.isActive = false;
+    this.classList.remove('active');
+    navButton.removeAttribute('aria-expanded');
+    navIcon.dataset.active = this.isActive;
+    this.closeAllLevels();
+    navButton.remove();
+  }
+
   activate(e) {
     if (e.target.tagName.toLowerCase() === 'raqn-icon' || e.target.closest('raqn-icon')) {
       e.preventDefault();