Merge branch 'main' of github.com:hlxsites/aldevron into feature/form…

…s-and-seperator

blocks/accordion/accordion.css

@@ -0,0 +1,127 @@
+main .accordion {
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 10px 0;
+}
+
+main .accordion.faq-accordion>div {
+    border: 1px solid #dbdbdb;
+    border-radius: 5px;
+}
+
+main .accordion.spacer.faq-accordion>div {
+    margin-top: 7px;
+}
+
+
+main .accordion.faq-accordion .faq-question {
+    cursor: pointer;
+    padding: 12px 20px;
+    font-size: 16px;
+    color: #0d233e;
+    font-weight: 700;
+    line-height: 1.1;
+    text-align: left;
+}
+
+main .accordion.faq-accordion .faq-question:hover {
+    color: #ec8f2d;
+}
+
+main .accordion.faq-accordion .faq-question.active {
+    color: #ec8f2d;
+}
+
+main .accordion.faq-accordion .faq-question::before {
+    content: "\e905";
+    float: right;
+    font-family: ald-icons !important;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 1;
+    text-transform: none;
+}
+
+main .accordion.faq-accordion .faq-question.active::before {
+    content: "\e904";
+    float: right;
+    font-family: ald-icons !important;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 1;
+    text-transform: none;
+}
+
+
+main .section.orange .accordion.faq-accordion .faq-question::before,
+main .section.orange .accordion.faq-accordion .faq-question.active::before,
+main .section.orange .accordion.faq-accordion a {
+    color: #f77f00;
+}
+
+
+main .section.green .accordion.faq-accordion .faq-question::before,
+main .section.green .accordion.faq-accordion .faq-question.active::before,
+main .section.green .accordion.faq-accordion a {
+    color: #78be20;
+}
+
+main .accordion.faq-accordion .faq-answer {
+    padding: 0 20px;
+    display: none;
+    overflow: hidden;
+    font-size: 16px;
+    max-height: 0;
+    transition: all 0.2s ease-in-out;
+    text-align: left;
+}
+
+main .accordion.faq-accordion .faq-answer p {
+    font-size: 16px;
+}
+
+main .accordion.faq-accordion .faq-answer ul {
+    list-style-type: none;
+}
+
+main .accordion.faq-accordion .faq-answer ul li::before {
+    color: #ec8f2d;
+    content: "\25A0";
+    font-family: Arial;
+    font-size: 1em;
+    left: 0;
+    line-height: 100%;
+    position: absolute;
+    top: 0.45em;
+}
+
+main .accordion.faq-accordion .faq-answer.active {
+    display: block;
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+    main .accordion {
+        padding: 20px 0;
+    }
+
+    main .accordion.faq-accordion .faq-question {
+        cursor: pointer;
+        padding: 12px 20px;
+        font-size: 16px;
+    }
+
+}
+
+/* Desktop */
+@media only screen and (min-width: 1030) {
+    main .accordion {
+        padding: 50px 0;
+    }
+
+    main .accordion.faq-accordion .faq-question {
+        font-size: 16px;
+    }
+}

blocks/accordion/accordion.js

@@ -0,0 +1,33 @@
+export default function decorate(block) {
+  const faqRows = [...block.children];
+  block.classList.add('faq-accordion');
+
+  faqRows.forEach((row) => {
+    const faqQuestion = [...row.children][0];
+    const faqAnswer = [...row.children][1];
+
+    faqQuestion.classList.add('faq-question');
+    faqAnswer.classList.add('faq-answer');
+
+    faqQuestion.addEventListener('click', () => {
+      const isActive = faqQuestion.classList.contains('active');
+
+      if (isActive) {
+        faqQuestion.classList.remove('active');
+        faqAnswer.classList.remove('active');
+        // Set max-height to 0 for smooth closing
+        faqAnswer.style.maxHeight = '0';
+      } else {
+        faqQuestion.classList.add('active');
+        faqAnswer.classList.add('active');
+        // Set max-height to scrollHeight for smooth opening
+        faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`;
+      }
+    });
+
+    // Close all accordions initially
+    faqQuestion.classList.remove('active');
+    faqAnswer.classList.remove('active');
+    faqAnswer.style.maxHeight = '0';
+  });
+}

blocks/footer/footer.css

@@ -1,14 +1,63 @@
-footer {
-  padding: 2rem;
-  background-color: var(--overlay-background-color);
-  font-size: var(--body-font-size-s);
+.footer {
+  background-color: #1a1919;
 }
 
-footer .footer {
-  max-width: 1200px;
-  margin: auto;
+#footer-orange{
+  line-height: normal;
 }
 
-footer .footer p {
-  margin: 0;
-}
+.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;
+  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);
   }
 }