intial footer development completed

blocks/footer/footer.css

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

blocks/footer/footer.js

@@ -1,25 +1,50 @@
 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);
+      }
+    }
+  }
   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');
+    const socialIcons = createDivElement('social-icons clearfix', '');
 
-    // decorate footer DOM
-    const footer = document.createElement('div');
-    footer.innerHTML = html;
-
-    decorateIcons(footer);
-    block.append(footer);
+    footerUl.innerHTML = html;
+    footerWapper.append(footerUl.querySelector('ul'));
+    footerOrangeSection.append(footerParent);
+    topContainer.append(footerOrangeSection);
+    footerParent.append(footerWapper);
+    const childItems = footerWapper.children[0].children;
+    addClassesToListItems(childItems, 1);
+    socialIcons.append(footerUl.querySelector('p'));
+    footerParent.append(socialIcons);
+    topContainer.append(footerUl);
+    decorateIcons(footerWapper);
+    block.append(topContainer);
   }
 }