#464411 - Add external components config excel sheet

blocks/breadcrumbs/breadcrumbs.js

@@ -4,7 +4,7 @@ import { getBaseUrl } from '../../scripts/libs.js';
 export default class Breadcrumbs extends ComponentBase {
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
-    targetsSelectors: 'main > div',
+    targetsSelectors: 'main > div:first-child',
     targetsSelectorsLimit: 1,
   };
 

blocks/footer/footer.js

@@ -4,7 +4,14 @@ import { getMeta } from '../../scripts/libs.js';
 const metaFooter = getMeta('footer');
 const metaFragment = !!metaFooter && `${metaFooter}.plain.html`;
 export default class Footer extends ComponentBase {
-  fragment = metaFragment || 'footer.plain.html';
+  static loaderConfig = {
+    ...ComponentBase.loaderConfig,
+    loaderStopInit() {
+      return metaFragment === false;
+    },
+  };
+
+  fragmentPath = metaFragment || 'footer.plain.html';
 
   extendConfig() {
     return [
@@ -15,10 +22,6 @@ export default class Footer extends ComponentBase {
     ];
   }
 
-  static earlyStopRender() {
-    return metaFooter === false;
-  }
-
   ready() {
     const child = this.children[0];
     child.replaceWith(...child.children);

blocks/header/header.js

@@ -4,7 +4,14 @@ import { eagerImage, getMeta } from '../../scripts/libs.js';
 const metaHeader = getMeta('header');
 const metaFragment = !!metaHeader && `${metaHeader}.plain.html`;
 export default class Header extends ComponentBase {
-  fragment = metaFragment || 'header.plain.html';
+  static loaderConfig = {
+    ...ComponentBase.loaderConfig,
+    loaderStopInit() {
+      return metaHeader === false;
+    },
+  };
+
+  fragmentPath = metaFragment || 'header.plain.html';
 
   dependencies = ['navigation', 'image'];
 
@@ -17,10 +24,6 @@ export default class Header extends ComponentBase {
     ];
   }
 
-  static earlyStopRender() {
-    return metaHeader === false;
-  }
-
   connected() {
     eagerImage(this, 1);
   }

blocks/icon/icon.js

@@ -39,8 +39,15 @@ export default class Icon extends ComponentBase {
 
   async connected() {
     this.setAttribute('aria-hidden', 'true');
+  }
+
+  onAttributeIconChanged({ oldValue, newValue }) {
+    if (oldValue === newValue) return;
+    this.loadIcon(newValue);
+  }
 
-    this.iconName = this.dataset.icon;
+  async loadIcon(icon) {
+    this.iconName = icon;
     if (!this.cache[this.iconName]) {
       this.cache[this.iconName] = {
         loading: new Promise((resolve) => {

blocks/image/image.js

@@ -5,7 +5,7 @@ export default class Image extends ComponentBase {
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
     targetsSelectors: 'p:has(>picture:only-child) + p:has(> em:only-child > a:only-child)',
-    selectorTest: (el) => [el.childNodes.length, el.childNodes[0].childNodes.length].every(len => len === 1),
+    selectorTest: (el) => [el.childNodes.length, el.childNodes[0].childNodes.length].every((len) => len === 1),
     targetsAsContainers: true,
   };
 

blocks/navigation/navigation.js

@@ -9,30 +9,6 @@ export default class Navigation extends ComponentBase {
     targetsSelectors: ':scope > :is(:first-child)',
   };
 
-  attributesValues = {
-    compact: {
-      xs: 'true',
-      s: 'true',
-      m: 'true',
-      all: 'false',
-    },
-  };
-
-  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=menu></raqn-icon>';
-    this.navButton.addEventListener('click', () => {
-      this.classList.toggle('active');
-      this.navButton.setAttribute('aria-expanded', this.classList.contains('active'));
-    });
-    return this.navButton;
-  }
-
   async ready() {
     this.active = {};
     this.navContent = this.querySelector('ul');
@@ -90,18 +66,34 @@ export default class Navigation extends ComponentBase {
     }
   }
 
-  createIcon(name = this.icon) {
-    const icon = document.createElement('raqn-icon');
-    icon.setAttribute('icon', name);
-    return icon;
+  onAttributeIconChanged({ newValue }) {
+    if (!this.initialized) return;
+    if (!this.isCompact) return;
+    this.navIcon.dataset.icon = newValue;
+  }
+
+  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.icon}></raqn-icon>`;
+    this.navIcon = this.navButton.querySelector('raqn-icon');
+    this.navButton.addEventListener('click', () => {
+      this.classList.toggle('active');
+      this.navButton.setAttribute('aria-expanded', this.classList.contains('active'));
+    });
+    return this.navButton;
   }
 
   addIcon(elem) {
     component.init({
       componentName: 'icon',
       targets: [elem],
-      rawClasses: 'icon-chevron-right',
-      config: {
+      configByClasses: 'icon-chevron-right',
+      componentConfig: {
         addToTargetMethod: 'append',
       },
     });
@@ -111,7 +103,7 @@ export default class Navigation extends ComponentBase {
     component.init({
       componentName: 'accordion',
       targets: [elem],
-      config: {
+      componentConfig: {
         addToTargetMethod: 'append',
       },
       nestedComponentsConfig: {

blocks/section-metadata/section-metadata.js

@@ -1,27 +1,31 @@
-import { collectAttributes } from '../../scripts/libs.js';
+// import { collectAttributes } from '../../scripts/libs.js';
 import ComponentBase from '../../scripts/component-base.js';
+import { stringToArray } from '../../scripts/libs.js';
 
-// TODO the block for this component should not have content, the values should come only form class attribute as for any other component
-// as for any other block. should replace the this.parentElement
 export default class SectionMetadata extends ComponentBase {
-  async ready() {
-    const classes = [...this.querySelectorAll(':scope > div > div:first-child')].map(
-      (keyCell) => `${keyCell.textContent.trim()}-${keyCell.nextElementSibling.textContent.trim()}`,
-    );
+  static observedAttributes = ['class'];
 
-    const { currentAttributes } = collectAttributes(
-      'section-metadata',
-      classes,
-      SectionMetadata.observedAttributes,
-      this,
-    );
-    const section = this.parentElement;
-    Object.keys(currentAttributes).forEach((key) => {
-      if (key === 'class') {
-        section.setAttribute(key, currentAttributes[key]);
-      } else {
-        section.setAttribute(`data-${key}`, currentAttributes[key]);
-      }
-    });
+  extendConfig() {
+    return [
+      ...super.extendConfig(),
+      {
+        classes: {
+          section: 'section',
+        },
+      },
+    ];
+  }
+
+  ready() {
+    this.parentElement.classList.add(this.config.classes.section, ...this.classList.values());
+  }
+
+  onAttributeClassChanged({ oldValue, newValue }) {
+    if (!this.initialized) return;
+    if (oldValue === newValue) return;
+
+    const opts = { divider: ' ' };
+    this.parentElement.classList.remove(...stringToArray(oldValue, opts));
+    this.parentElement.classList.add(...stringToArray(newValue, opts));
   }
 }

blocks/theming/theming.js

@@ -9,11 +9,11 @@ export default class Theming extends ComponentBase {
 
   nestedComponentsConfig = {};
 
-  constructor() {
-    super();
+  setDefaults() {
+    super.setDefaults();
     this.scapeDiv = document.createElement('div');
     // keep as it is
-    this.fragment = metaFragment || 'theming.json';
+    this.fragmentPath = metaFragment || 'theming.json';
     this.skip = ['tags'];
     this.toTags = [
       'font-size',