[POC] Add template and grid by section

blocks/accordion/accordion.js

@@ -3,6 +3,16 @@ import ComponentBase from '../../scripts/component-base.js';
 export default class Accordion extends ComponentBase {
   dependencies = ['icon'];
 
+  extendConfig() {
+    return [
+      ...super.extendConfig(),
+      {
+        innerComponents: null,
+        nestedComponentsPrefix: ':scope > ',
+      },
+    ];
+  }
+
   extendNestedConfig() {
     return [
       ...super.extendNestedConfig(),

blocks/breadcrumbs/breadcrumbs.js

@@ -8,6 +8,12 @@ export default class Breadcrumbs extends ComponentBase {
     targetsSelectorsLimit: 1,
   };
 
+  attributesValues = {
+    all: {
+      class: 'full-width',
+    },
+  };
+
   nestedComponentsConfig = {};
 
   extendConfig() {
@@ -24,9 +30,7 @@ export default class Breadcrumbs extends ComponentBase {
     ];
   }
 
-  connected() {
-    this.classList.add('full-width');
-    this.classList.add('breadcrumbs');
+  addHtml() {
     const { origin, pathname } = window.location;
     let breadcrumbRoot = getMeta(metaTags.breadcrumbRoot.metaName);
     breadcrumbRoot = breadcrumbRoot?.startsWith('/') ? breadcrumbRoot : `/${breadcrumbRoot}`;

blocks/button/button.js

@@ -28,7 +28,7 @@ export default class Button extends ComponentBase {
     ];
   }
 
-  connected() {
+  addEDSHtml() {
     this.initAsBlock();
     this.queryElements();
     this.wrapText();

blocks/footer/footer.css

@@ -1,12 +1,8 @@
-footer {
-  background: var(--background-color);
-  width: var(--max-width);
-  margin: 0 auto;
-}
-
 raqn-footer {
   background: var(--background-color);
   border-top: 1px solid var(--text);
+  padding: 20px 0;
+
 }
 
 raqn-footer ul {
@@ -22,8 +18,8 @@ raqn-footer ul li a {
 
 @media screen and (min-width: 1024px) {
   raqn-footer {
-    display: grid;
-    grid-template-columns: auto 20vw;
+    /* display: grid;
+    grid-template-columns: auto 20vw; */
   }
 
   raqn-footer ul li a {
@@ -40,10 +36,10 @@ raqn-footer ul li a {
     margin: 2em 0;
   }
 
-  raqn-footer > *:last-child {
+  /* raqn-footer > *:last-child {
     justify-self: end;
     align-self: center;
-  }
+  } */
 }
 
 raqn-footer ul li:last-child a {

blocks/footer/footer.js

@@ -6,6 +6,8 @@ const metaFooter = getMeta(metaTags.footer.metaName);
 export default class Footer extends ComponentBase {
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
+    targetsSelectors: ':scope > footer',
+    targetsSelectorsLimit: 1,
     loaderStopInit() {
       return metaFooter === false;
     },
@@ -17,18 +19,18 @@ export default class Footer extends ComponentBase {
     return [
       ...super.extendConfig(),
       {
+        contentFromTargets: false,
         addToTargetMethod: 'append',
+        targetsAsContainers: {
+          addToTargetMethod: 'append',
+          contentFromTargets: false,
+        },
       },
     ];
   }
 
   ready() {
-    const child = this.children[0];
-    if (!child) return;
-    child.replaceWith(...child.children);
     this.nav = this.querySelector('ul');
     this.nav?.setAttribute('role', 'navigation');
-    this.classList.add('full-width');
-    this.classList.add('horizontal');
   }
 }

blocks/grid-item/grid-item.js

@@ -1,4 +1,5 @@
 import ComponentBase from '../../scripts/component-base.js';
+import { globalConfig } from '../../scripts/libs.js';
 
 export default class Grid extends ComponentBase {
   static observedAttributes = [
@@ -12,7 +13,7 @@ export default class Grid extends ComponentBase {
     'data-align',
   ];
 
-  nestedComponentsConfig = {};
+  // nestedComponentsConfig = {};
 
   attributesValues = {
     all: {
@@ -22,8 +23,18 @@ export default class Grid extends ComponentBase {
     },
   };
 
+  extendConfig() {
+    return [
+      ...super.extendConfig(),
+      {
+        innerComponents: globalConfig.blockSelector,
+      },
+    ];
+  }
+
   setDefaults() {
     super.setDefaults();
+
     this.gridParent = null;
   }
 
@@ -48,7 +59,7 @@ export default class Grid extends ComponentBase {
     }
   }
 
-  connected() {
+  ready() {
     this.gridParent ??= this.parentElement;
   }
 
@@ -87,4 +98,28 @@ export default class Grid extends ComponentBase {
       this.style.removeProperty(prop);
     }
   }
+
+  addEDSHtml() {
+    if (!this.isInitAsBlock) return;
+
+    this.recursiveItems(this.previousElementSibling);
+  }
+
+  recursiveItems(elem) {
+    if (!elem) return;
+    if (this.isGridItem(elem)) return;
+    if (this.isRaqnGrid(elem)) return;
+
+    this.prepend(elem);
+
+    this.recursiveItems(this.previousElementSibling);
+  }
+
+  isGridItem(elem) {
+    return elem.tagName === 'DIV' && elem.classList.contains('grid-item');
+  }
+
+  isRaqnGrid(elem) {
+    return elem.tagName === 'RAQN-GRID-ITEM';
+  }
 }

blocks/grid/grid.css

@@ -1,7 +1,7 @@
 raqn-grid {
   /* Set to initial to prevent inheritance for nested grids */
   --grid-height: initial;
-  --grid-width: 100%;
+  --grid-width: initial;
   --grid-justify-items: initial;
   --grid-align-items: initial;
   --grid-justify-content: initial;

blocks/grid/grid.js

@@ -1,6 +1,5 @@
 import ComponentBase from '../../scripts/component-base.js';
 import { stringToJsVal } from '../../scripts/libs.js';
-import component from '../../scripts/init.js';
 
 export default class Grid extends ComponentBase {
   static observedAttributes = [
@@ -29,12 +28,17 @@ export default class Grid extends ComponentBase {
     },
   };
 
-  setDefaults() {
-    super.setDefaults();
+  extendConfig() {
+    return [
+      ...super.extendConfig(),
+      {
+        innerComponents: ':scope > .grid-item',
+      },
+    ];
   }
 
   get gridItems() {
-    return [...this.children];
+    return [...this.children].filter((el) => el.tagName.toLowerCase() === 'raqn-grid-item');
   }
 
   onAttributeHeightChanged({ oldValue, newValue }) {
@@ -190,87 +194,20 @@ export default class Grid extends ComponentBase {
     }
   }
 
-  async connected() {
-    await this.collectGridItemsFromBlocks();
-  }
-
-  ready() {
-    this.cleanGridItems();
-  }
-
-  cleanGridItems() {
-    // Get all the grid items and remove any non grid item element.
-    return [...this.children].filter((child) => child.matches('raqn-grid-item') || child.remove());
-  }
-
-  async collectGridItemsFromBlocks() {
+  async addEDSHtml() {
     if (!this.isInitAsBlock) return;
 
-    await this.recursiveItems(this.nextElementSibling);
-  }
+    const elems = [...this.parentElement.children];
 
-  async recursiveItems(elem, children = []) {
-    if (!elem) return;
-    if (this.isForbiddenGridItem(elem)) return;
-    if (this.isForbiddenBlockGrid(elem)) return;
-    if (this.isForbiddenRaqnGrid(elem)) return;
+    const gridIndex = elems.indexOf(this);
 
-    if (this.isThisGridItem(elem)) {
-      await this.createGridItem([...children], [...elem.classList]);
-      await this.recursiveItems(elem.nextElementSibling, []);
-      elem.remove();
-      return;
-    }
+    let children = elems.slice(gridIndex + 1);
 
-    children.push(elem);
-
-    await this.recursiveItems(elem.nextElementSibling, children);
-  }
+    const lastItem = [...children].reverse().find((el) => el.matches('.grid-item'));
+    const lastItemIndex = children.indexOf(lastItem);
 
-  getLevel(elem = this) {
-    return Number(elem.dataset.level);
-  }
-
-  getLevelFromClass(elem) {
-    const levelClass = [...elem.classList].find((cls) => cls.startsWith('data-level-')) || 'data-level-1';
-    return Number(levelClass.slice('data-level-'.length));
-  }
-
-  isGridItem(elem) {
-    return elem.tagName === 'DIV' && elem.classList.contains('grid-item');
-  }
-
-  isThisGridItem(elem) {
-    return this.isGridItem(elem) && this.getLevelFromClass(elem) === this.getLevel();
-  }
-
-  isForbiddenGridItem(elem) {
-    return this.isGridItem(elem) && this.getLevelFromClass(elem) > this.getLevel();
-  }
-
-  isBlockGrid(elem) {
-    return elem.tagName === 'DIV' && elem.classList.contains('grid');
-  }
-
-  isRaqnGrid(elem) {
-    return elem.tagName === 'RAQN-GRID';
-  }
-
-  isForbiddenRaqnGrid(elem) {
-    return this.isRaqnGrid(elem) && this.getLevel() >= this.getLevel(elem);
-  }
-
-  isForbiddenBlockGrid(elem) {
-    return this.isBlockGrid(elem) && this.getLevelFromClass(elem) <= this.getLevel();
-  }
+    children = children.slice(0, lastItemIndex + 1);
 
-  async createGridItem(children, configByClasses) {
-    await component.loadAndDefine('grid-item');
-    const tempGridItem = document.createElement('raqn-grid-item');
-    tempGridItem.init({ configByClasses });
-    tempGridItem.gridParent = this;
-    tempGridItem.append(...children);
-    this.gridItems.push(tempGridItem);
-    this.append(tempGridItem);
+    this.append(...children);
   }
 }

blocks/header/header.js

@@ -6,16 +6,16 @@ const metaHeader = getMeta(metaTags.header.metaName);
 export default class Header extends ComponentBase {
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
+    targetsSelectors: ':scope > header',
+    targetsSelectorsLimit: 1,
     loaderStopInit() {
       return metaHeader === false;
     },
   };
 
   attributesValues = {
     all: {
-      class: {
-        color: 'primary',
-      },
+      class: 'color-primary',
     },
   };
 
@@ -27,12 +27,17 @@ export default class Header extends ComponentBase {
     return [
       ...super.extendConfig(),
       {
+        contentFromTargets: false,
         addToTargetMethod: 'append',
+        targetsAsContainers: {
+          addToTargetMethod: 'append',
+          contentFromTargets: false,
+        },
       },
     ];
   }
 
-  connected() {
+  ready() {
     eagerImage(this, 1);
   }
 }

blocks/icon/icon.js

@@ -6,6 +6,14 @@ const metaIcons = getMeta(metaTags.icons.metaName);
 export default class Icon extends ComponentBase {
   static observedAttributes = ['data-active', 'data-icon'];
 
+  attributesValues = {
+    all: {
+      attribute: {
+        'aria-hidden': 'true',
+      },
+    },
+  };
+
   #initialIcon = null;
 
   #activeIcon = null;
@@ -52,10 +60,6 @@ export default class Icon extends ComponentBase {
     return `${path}/${iconName}.svg`;
   }
 
-  async connected() {
-    this.setAttribute('aria-hidden', 'true');
-  }
-
   // ${viewport}-icon-${value} or icon-${value}
   applyIcon(icon) {
     this.dataset.icon = isObject(icon) ? flatAsValue(icon) : icon;