diff --git a/group/blocks/footer/footer.css b/group/blocks/footer/footer.css index c274e683..da8c1f6f 100644 --- a/group/blocks/footer/footer.css +++ b/group/blocks/footer/footer.css @@ -1,10 +1,6 @@ -footer { - font-size: var(--body-font-size-xxs); -} - footer .footer > div { margin: auto; - padding: 40px 24px 24px; + padding: 40px 16px 16px; } footer .footer p { @@ -12,15 +8,27 @@ footer .footer p { 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 { @@ -28,8 +36,150 @@ footer .footer .default-content-wrapper li a { font-size: var(--body-font-size-xs); } +/* Add arrows to top-level
  • 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; } } diff --git a/group/blocks/footer/footer.js b/group/blocks/footer/footer.js index 7c69607e..31cc4492 100644 --- a/group/blocks/footer/footer.js +++ b/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); } diff --git a/group/icons/facebook.svg b/group/icons/facebook.svg new file mode 100644 index 00000000..c6ef9983 --- /dev/null +++ b/group/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/group/icons/instagram.svg b/group/icons/instagram.svg new file mode 100644 index 00000000..67d68202 --- /dev/null +++ b/group/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/group/icons/linkedin.svg b/group/icons/linkedin.svg new file mode 100644 index 00000000..565b0b65 --- /dev/null +++ b/group/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/group/icons/x.svg b/group/icons/x.svg new file mode 100644 index 00000000..eaf7e45d --- /dev/null +++ b/group/icons/x.svg @@ -0,0 +1,3 @@ + + +