Merge branch 'main' into KAW-7682-heading-marker

blocks/footer/footer.css

@@ -1,14 +1,173 @@
 footer {
-  padding: 2rem;
-  background-color: var(--light-color);
-  font-size: var(--body-font-size-s);
+  background-color: #222;
+  color: var(--c-primary-white);
 }
 
-footer .footer {
-  max-width: 1200px;
-  margin: auto;
+.footer .section {
+  padding: 40px 15px 0;
+}
+
+.footer .section:last-child {
+  padding-bottom: 40px;
 }
 
-footer .footer p {
+.footer .footer-logo img {
+  width: 250px;
+  height: auto;
+}
+
+.footer .footer-column > * {
   margin: 0;
 }
+
+.footer .footer-column {
+  padding-bottom: 60px;
+  position: relative;
+}
+
+.footer .footer-column:last-child {
+  padding-bottom: 0;
+}
+
+.footer .footer-column::after {
+  border-top: 1px solid rgb(255 255 255 / 20%);
+  content: "";
+  display: block;
+  width: 100%;
+  position: absolute;
+  bottom: 30px;
+}
+
+.footer .footer-column:last-child::after {
+  display: none;
+}
+
+.footer .footer-column ul {
+  margin-top: 20px;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+}
+
+.footer .footer-list-item {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  color: rgb(255 255 255 / 70%);
+}
+
+.footer .footer-list-item a {
+  color: var(--c-primary-white);
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.footer .footer-list-item a:hover,
+.footer .footer-list-item a:active {
+  color: var(--c-primary-white);
+  text-decoration: none;
+}
+
+.footer .back-to-top {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  align-items: center;
+  margin: auto;
+  padding: 0;
+  background: inherit;
+  border: unset;
+  color: rgb(255 255 255 / 50%);
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.footer .back-to-top:hover,
+.footer .back-to-top:focus {
+  color: rgb(255 255 255 / 70%);
+}
+
+.footer .back-to-top svg {
+  padding: 5px;
+}
+
+.footer .section .default-content-wrapper {
+  padding-top: 10px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 19.6px;
+}
+
+.footer .section .default-content-wrapper p {
+  margin-bottom: 10px;
+}
+
+.footer .section .default-content-wrapper p:last-child {
+  margin-bottom: 0;
+}
+
+.footer .footer-list-item .icon {
+  min-width: 20px;
+  width: 20px;
+  height: auto;
+}
+
+@media (width >= 768px) {
+  .footer .section {
+    padding: 10px 30px 40px;
+  }
+
+  .footer .columns > div {
+    flex-flow: row wrap;
+    justify-content: space-between;
+  }
+
+  .footer .footer-column {
+    width: calc(50% - 30px);
+    padding-bottom: 0;
+    margin-top: 30px;
+  }
+
+  .footer .footer-column::after {
+    width: 1px;
+    height: 100%;
+    border-top: unset;
+    border-right: 1px solid rgb(255 255 255 / 20%);
+    top: 0;
+    right: -30px;
+  }
+}
+
+@media (width >= 960px) {
+  .footer {
+    padding-top: 30px;
+  }
+
+  .footer .section {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+
+  .footer .columns > div {
+    gap: 60px;
+    align-items: stretch;
+  }
+
+  .footer .footer-column {
+    width: 25%;
+    gap: 60px;
+  }
+
+  .footer .footer-logo .icon {
+    width: 100%;
+    height: auto;
+  }
+
+  .footer .footer-logo img {
+    width: auto;
+  }
+}

blocks/footer/footer.js

@@ -1,4 +1,5 @@
 import { getMetadata } from '../../scripts/aem.js';
+import { getTextLabel } from '../../scripts/scripts.js';
 import { loadFragment } from '../fragment/fragment.js';
 
 /**
@@ -16,5 +17,61 @@ export default async function decorate(block) {
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 
+  const columns = [...footer.querySelectorAll('.columns > div > div')];
+  columns.forEach((column) => {
+    // if the element contains only image => logo
+    if (column.childElementCount === 1 && column.querySelector('p > span > img')) {
+      column.classList.add('footer-logo');
+    }
+
+    column.classList.add('footer-column');
+
+    // each heading should be rendered as h3
+    [...column.querySelectorAll('h1, h2, h3, h4, h5, h6')].forEach((heading) => heading.classList.add('h3'));
+  });
+
+  const lists = [...footer.querySelectorAll('ul')];
+  lists.forEach((list) => {
+    [...list.querySelectorAll(':scope > li')].forEach((listItem) => {
+      const textEl = document.createElement('span');
+      textEl.classList.add('footer-list-item-text');
+      listItem.classList.add('footer-list-item');
+      textEl.append(...listItem.childNodes);
+
+      // if the first child is an icon, move it back to the listItem
+      const { nodeName, classList } = textEl.firstChild;
+      if (nodeName.toLowerCase() === 'span' && classList.contains('icon')) {
+        listItem.append(textEl.firstChild);
+      }
+
+      listItem.append(textEl);
+    });
+  });
+
+  // add back to top button
+  const backToTopIcon = `
+    <svg width="18" height="10" viewBox="0 0 18 10">
+      <polyline fill="none" stroke="currentColor" stroke-width="1.2" points="1 9 9 1 17 9"></polyline>
+    </svg>
+  `;
+
+  const backToTopText = getTextLabel('top');
+
+  const backToTopNode = document.createRange().createContextualFragment(`
+    <button class="back-to-top">
+      ${backToTopIcon}
+      <span>${backToTopText}</span>
+    </button>
+  `);
+
+  footer.querySelector('.section:last-child').prepend(backToTopNode);
+
+  footer.querySelector('.back-to-top').addEventListener('click', () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  });
+
   block.append(footer);
 }

scripts/scripts.js

@@ -12,6 +12,7 @@ import {
   loadSections,
   loadCSS,
   sampleRUM,
+  fetchPlaceholders,
 } from './aem.js';
 
 /**
@@ -140,4 +141,15 @@ async function loadPage() {
   loadDelayed();
 }
 
+let placeholders;
+
+export function getTextLabel(key) {
+  if (!placeholders) {
+    return key;
+  }
+
+  return placeholders[key] || key;
+}
+
+placeholders = await fetchPlaceholders();
 loadPage();

styles/styles.css

@@ -195,8 +195,8 @@ main img {
 
 .icon {
   display: inline-block;
-  height: 24px;
-  width: 24px;
+  height: 20px;
+  width: 20px;
 }
 
 .icon img {