Footer redesign js and css

group/blocks/footer/footer.css

@@ -1,35 +1,185 @@
-footer {
-  font-size: var(--body-font-size-xxs);
-}
-
 footer .footer > div {
   margin: auto;
-  padding: 40px 24px 24px;
+  padding: 40px 16px 16px;
 }
 
 footer .footer p {
   margin: 0;
   color: var(--grey-color);
 }
 
-footer .footer .default-content-wrapper ul {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: var(--spacing-s) var(--spacing-l);
-  max-width: 400px;
-  padding: var(--spacing-s);
+footer > .section {
+  padding: 0 var(--spacing-l);
+}
+
+footer .section h5 {
+  font-size: var(--body-font-size-l);
+  font-weight: var(--font-weight-regular);
+  padding-bottom: var(--spacing-s);
+}
+
+footer .footer-links-sections {
+  list-style: none;
+  font-size: var(--body-font-size-xs);
+  padding-left: 0;
+  margin: 0;
+}
+
+footer .footer-links-sections ul{
   list-style: none;
-  margin: 0 auto;
+  padding-left: 0;
+  margin: 0;
 }
 
 footer .footer .default-content-wrapper li a {
   text-decoration: none;
   font-size: var(--body-font-size-xs);
 }
 
+/* Add arrows to top-level <li> elements */
+.footer-links-sections > li {
+  padding: 0.5rem 0 1rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.footer-links-sections > li::after {
+  content: '';
+  position: absolute;
+  right: 10px;
+  top: 0.5rem;
+  transform: translateY(-50%) rotate(45deg);
+  border: solid #000;
+  border-width: 0 1px 1px 0;
+  display: inline-block;
+  padding: 5px;
+  transition: transform 0.3s ease;
+}
+
+/* Rotate arrow when expanded */
+.footer-links-sections > li[aria-expanded="true"]::after {
+  transform: translateY(-50%) rotate(-135deg);
+  top: 1rem;
+}
+
+.footer-links-sections > li[aria-expanded="true"] > ul {
+  display: block;
+}
+
+.footer-links-sections > li[aria-expanded="false"] > ul {
+  display: none;
+}
+
+.footer-links-sections > li > ul > li {
+  padding-top: 0.75rem;
+}
+
+.footer .footer-top-section {
+  position: relative;
+  z-index: 1;
+  padding: var(--spacing-l) var(--spacing-xl);
+  background-color: var(--shade-color);
+  border-top-left-radius: 42px;
+  border-top-right-radius: 42px;
+  margin: 64px 0 0;
+}
+
+.footer .footer-bottom-section .footer-disclaimer-section {
+  padding: var(--spacing-l) var(--spacing-l) 0;
+}
+
+.footer .footer-bottom-section .footer-disclaimer-section p {
+  padding: var(--spacing-m) 0;
+  font-size: var(--body-font-size-xxs);
+}
+
+.footer .footer-bottom-section .footer-trust-image-section {
+ padding: 0 var(--spacing-l);
+}
+
+.footer .footer-bottom-section .footer-disclaimer-section .icon {
+  padding: 0 var(--spacing-xxl) 0 0;
+}
+
+.footer .footer-bottom-section .footer-disclaimer-section img {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+@media (width >= 600px) {
+  footer .footer .footer-top-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .footer-links-sections {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--spacing-s) var(--spacing-l);
+  }
+
+  .footer-top-section > h5 {
+    flex: 1;
+  }
+
+  .footer-top-section > .footer-links-sections {
+    flex: 3;
+    justify-content: space-between;
+  }
+
+  .footer-links-sections > li::after {
+    display: none;
+  }
+
+  .footer .footer-links-sections > li > ul {
+    display: block;
+  }
+
+  .footer .footer-bottom-section .footer-disclaimer-section {
+    display: flex;
+    justify-content: space-around;
+    padding: var(--spacing-xxl) var(--spacing-xxl) 0;
+  }
+
+  .footer .footer-bottom-section .footer-disclaimer-section > p:first-child {
+    flex: 1;
+  }
+
+  .footer .footer-bottom-section .footer-disclaimer-section > p:nth-child(2) {
+    flex: 3;
+  }
+
+  .footer .footer-bottom-section .footer-trust-image-section {
+    margin-top: -24px;
+    padding: 0 var(--spacing-xxl);
+  }
+
+  .footer .footer-bottom-section .footer-disclaimer-section .icon {
+    padding: 0 var(--spacing-l) 0 0;
+  }
+
+}
+
 @media (width >= 900px) {
   footer .footer > div {
-    padding: 24px 32px;
+    padding: 24px 16px;
+  }
+
+  footer .footer .footer-top-section {
+    flex-direction: row;
+    margin-top: 96px;
+  }
+
+  .footer-top-section > h5 {
+    text-align: center;
+  }
+
+  .footer-top-section > .footer-links-sections {
+    justify-content: space-around;
+  }
+
+  .footer .footer-bottom-section .footer-disclaimer-section .icon {
+    padding: 0 var(--spacing-xl) 0 0;
   }
 }

group/blocks/footer/footer.js

@@ -1,6 +1,61 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
+const structureFooter = (footer) => {
+  // get all footer sections
+  const sections = footer.querySelectorAll('.section');
+  const topSection = sections[0];
+  const defaultContainer = footer.querySelector('.default-content-wrapper');
+  while (defaultContainer.firstElementChild) {
+    topSection.append(defaultContainer.firstElementChild);
+    topSection.classList.add('footer-top-section');
+  }
+  // remove default content wrapper
+  defaultContainer.remove();
+
+  const footerLinksSections = topSection.querySelector('ul');
+  if (footerLinksSections) {
+    footerLinksSections.classList.add('footer-links-sections');
+    const footerLinksSection = footerLinksSections.querySelectorAll('li');
+    footerLinksSection.forEach((section) => {
+      if (section.parentElement === footerLinksSections) {
+        section.setAttribute('aria-expanded', 'false');
+        // Add click event listener for accordion functionality
+        section.addEventListener('click', () => {
+          const isExpanded = section.getAttribute('aria-expanded') === 'true';
+          section.setAttribute('aria-expanded', !isExpanded);
+        });
+      }
+    });
+  }
+
+  const footerDisclaimer = sections[1];
+  const footerTrustImage = sections[2];
+  const footerBottom = document.createElement('div');
+  footerBottom.classList.add('footer-bottom-section');
+  if (footerDisclaimer) {
+    const footerDisclaimerContainer = footerDisclaimer.querySelector('.default-content-wrapper');
+    while (footerDisclaimerContainer.firstElementChild) {
+      footerDisclaimer.append(footerDisclaimerContainer.firstElementChild);
+    }
+    footerDisclaimer.classList.add('footer-disclaimer-section');
+    footerDisclaimerContainer.remove();
+    footerBottom.append(footerDisclaimer);
+  }
+
+  if (footerTrustImage) {
+    const footerTrustImageContainer = footerTrustImage.querySelector('.default-content-wrapper');
+    while (footerTrustImageContainer.firstElementChild) {
+      footerTrustImage.append(footerTrustImageContainer.firstElementChild);
+    }
+    footerTrustImageContainer.remove();
+    footerTrustImage.classList.add('footer-trust-image-section');
+    footerBottom.append(footerTrustImage);
+  }
+
+  footer.append(footerBottom);
+};
+
 /**
  * loads and decorates the footer
  * @param {Element} block The footer block element
@@ -16,5 +71,7 @@ export default async function decorate(block) {
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 
+  structureFooter(footer);
+
   block.append(footer);
 }