Merge pull request #13 from hlxsites/feature/footer

footer development is completed with eslint issues

blocks/footer/footer.css

@@ -1,14 +1,59 @@
-footer {
-  padding: 2rem;
-  background-color: var(--overlay-background-color);
-  font-size: var(--body-font-size-s);
+#footer-orange{
+  line-height: normal;
 }
 
-footer .footer {
-  max-width: 1200px;
-  margin: auto;
+.footer-wrapper div#footer-orange .outer {
+  display: grid;
+  grid-template-columns: 3fr 20%;
 }
 
-footer .footer p {
-  margin: 0;
-}
+.footer-wrapper div#footer-orange .hs-menu-wrapper {
+  width: 100%;
+}
+
+.footer-wrapper div#footer-black div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.social-icons.clearfix {
+  text-align: right;
+}
+
+@media (max-width: 767px){
+  .footer-wrapper div#footer-black div {
+    display: block;
+  }
+}
+
+@media (max-width: 1024px){
+  .footer-wrapper div#footer-black div {
+    padding: 0 20px;
+  }
+
+  .footer-wrapper div#footer-orange .outer{
+    grid-template-columns: 1fr;
+  }
+
+  .footer-wrapper div#footer-orange .outer .social-icons{
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.social-icons.clearfix img {
+  max-width: 44px;
+}
+
+#footer-black.outer * {
+  color: #fff;
+}
+
+#footer-black img {
+  width: 55px;
+}
+
+.footer-wrapper div#footer-black div.footericon.social-media-footer {
+  display: none;
+}

blocks/footer/footer.js

@@ -1,25 +1,71 @@
 import { readBlockConfig, decorateIcons } from '../../scripts/aem.js';
-
 /**
  * loads and decorates the footer
  * @param {Element} block The footer block element
  */
 export default async function decorate(block) {
   const cfg = readBlockConfig(block);
   block.textContent = '';
-
   // fetch footer content
   const footerPath = cfg.footer || '/footer';
   const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {});
-
+  function createDivElement(className, IDName) {
+    const divEl = document.createElement('div');
+    divEl.setAttribute('class', className);
+    divEl.setAttribute('id', IDName);
+    return divEl;
+  }
+  function addClassesToListItems(element, depth) {
+    for (let i = 0; i < element.length; i += 1) {
+      const item = element[i];
+      item.classList.add('hs-menu-item', `hs-menu-depth-${depth}`, 'hs-item-has-children', `menu-num-${i + 1}`);
+      const childItems = item.querySelector('ul');
+      if (childItems?.children?.length > 0) {
+        addClassesToListItems(childItems.children, depth + 1);
+      }
+    }
+  }
+  function callSocialIcons(socialIcons) {
+    const allAnchorTags = createDivElement('social-icons', '');
+    for (let i = 0; i < socialIcons.children.length; i += 1) {
+      const createAtag = document.createElement('a');
+      createAtag.appendChild(socialIcons.children[i]?.children[0]?.querySelector('picture'));
+      createAtag.setAttribute('href', socialIcons.children[i]?.children[1]?.children[0].href);
+      createAtag.setAttribute('target', '_blank');
+      allAnchorTags.appendChild(createAtag);
+    }
+    return allAnchorTags;
+  }
   if (resp.ok) {
     const html = await resp.text();
+    const topContainer = createDivElement('top-container', '');
+    const footerOrangeSection = createDivElement('', 'footer-orange');
+    const footerParent = createDivElement('outer', '');
+    const footerWapper = createDivElement('hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal', 'hs_menu_wrapper_footer_nav');
+    const footerUl = createDivElement('outer', 'footer-black');
+    footerUl.innerHTML = html;
+    footerWapper.append(footerUl.querySelector('ul'));
+    footerOrangeSection.append(footerParent);
+    topContainer.append(footerOrangeSection);
+    footerParent.append(footerWapper);
+    const childItems = footerWapper.children[0].children;
+    // const childImage = childItems[5]
+    // footerWapper.append(footerUl)
+    addClassesToListItems(childItems, 1);
+    footerParent.append(callSocialIcons(footerUl.children[0].children[0]));
+    footerParent.append(footerUl);
+    const footLogo = document.createElement('a');
+    footLogo.id = 'footLogo';
+    footLogo.target = '_blank';
+    // footLogo.href = '';
+    // footLogo.innerHTML = footerUl.children[0].children[2].innerHTML;
 
-    // decorate footer DOM
-    const footer = document.createElement('div');
-    footer.innerHTML = html;
+    footLogo.append(footerUl.children[0]?.children[1]?.children[0]?.children[0]?.querySelector('picture'));
+    footLogo.href = footerUl.children[0]?.children[1]?.children[0]?.children[1]?.children[0]?.href;
 
-    decorateIcons(footer);
-    block.append(footer);
+    footerUl.children[0].children[1].replaceWith(footLogo);
+    topContainer.append(footerUl);
+    decorateIcons(footerWapper);
+    block.append(topContainer);
   }
 }

styles/Typo.css

@@ -341,7 +341,11 @@ strong {
 }
 
 body {
-    font: normal 16px/1.45 "Proxima Nova A", Helvetica, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: #1a1919;
+    color: #1a1919;
+    font: normal 16px/1.45 "Proxima Nova A",Helvetica,sans-serif;
     margin: 0;
     text-align: center;
 }