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 @@
+