feat(microsite): Add Solution Header and Solution Footer blocks used …

…within custom campaign/microsites (#344) * feat(solution-header): add block and scroll to behavior * feat(solution-header): adjust scroll to behavior * feat(solution-header): add nav list * feat(solution-header): add cleanup * feat(solution-header): add solution footer block * feat(solution-footer): add responsive styling * feat(solution-footer): add more styles and fixes * feat(solution-header): check for when the append is fired * feat(solution-header): add spacing fixes based on feedback * feat(solution-header): fix lint issue
hlxsites · Oct 5, 2023 · c1c2871 · c1c2871
1 parent 917489b
commit c1c2871
Show file tree

Hide file tree

Showing 9 changed files with 695 additions and 13 deletions.
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -63,6 +63,7 @@ main .columns-container h4 {
   font-weight: var(--font-weight-light);
   line-height: var(--line-height-160);
   letter-spacing: var(--letter-spacing-1);
+  padding-inline-start: var(--spacer-element-02);
 }
 
 .columns.terms div, .columns.terms div strong,

diff --git a/blocks/cta/cta.css b/blocks/cta/cta.css
@@ -18,14 +18,9 @@
 .section.cta-container .cta.block > div,
 .section.cta-container .cta.block .cta__inner {
   text-align: center;
-  max-width: var(--text-max-container);
   margin: 0 auto;
 }
 
-.cta.block .button-group p {
-  margin: 0;
-}
-
 .section.cta-container .cta.block h2 {
   margin: unset;
   font-size: 32px;
@@ -39,6 +34,13 @@
   line-height: 160%;
   text-align: center;
   letter-spacing: 0.01em;
+  max-width: var(--text-max-container);
+  margin: 0 auto;
+}
+
+.section.cta-container .cta.block p picture {
+  display: block;
+  line-height: 0;
 }
 
 .section.cta-container .cta.block p.only-picture:last-child {

diff --git a/blocks/solution-footer/solution-footer.css b/blocks/solution-footer/solution-footer.css
@@ -0,0 +1,134 @@
+/* Section - Solution Footer */
+main .section.solution-footer-container {
+  background-color: var(--neutral-carbon);
+  color: var(--neutral-white);
+}
+
+main .section.solution-footer-container > div:last-child {
+  padding: var(--spacer-element-08) 0;
+}
+
+/* Block - Solution Footer */
+.solution-footer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.solution-footer .icon {
+  display: block;
+  line-height: 0;
+}
+
+.solution-footer svg {
+  width: auto;
+  height: 38px;
+}
+
+.solution-footer svg #text * {
+  fill: var(--neutral-white);
+}
+
+.solution-footer .default-content-wrapper {
+  width: 100%;
+  margin-top: var(--spacer-element-08);
+  padding-top: var(--spacer-element-07);
+  border-top: 1px solid var(--neutral-grey-tint140);
+}
+
+.solution-footer ul {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-16);
+  list-style: none;
+  margin: 0;
+  padding-top: var(--spacer-element-03);
+  padding-inline-start: 0;
+}
+
+.solution-footer ul li {
+  font-size: var(--font-size-14);
+  color: var(--neutral-grey-tint100);
+  margin: 0;
+}
+
+.solution-footer ul li .cookie-consent {
+  color: var(--neutral-white);
+}
+
+/* stylelint-disable no-descending-specificity */
+.solution-footer ul li a,
+.solution-footer ul li a:not(.button):any-link {
+  color: var(--neutral-white);
+  border-color: transparent;
+}
+
+.solution-footer ul li a:hover,
+.solution-footer ul li a:not(.button):any-link:hover {
+  background: none;
+  color: var(--neutral-white);
+  border-bottom: 1px solid var(--neutral-white);
+  border-image-source: unset;
+  -webkit-text-fill-color: var(--neutral-white);
+}
+/* stylelint-enable no-descending-specificity */
+
+.solution-footer .default-content-wrapper ul + p {
+  margin: 0 0 0 var(--spacer-element-08);
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+  .solution-footer {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .solution-footer ul {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--gap-24);
+  }
+
+  .solution-footer .default-content-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 0;
+    width: auto;
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  .solution-footer .default-content-wrapper ul + p {
+    position: relative;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1200px) {  
+  main .section.solution-footer-container > div:last-child {
+    padding: var(--spacer-element-10) 0;
+  }
+
+  .solution-footer svg {
+    height: 48px;
+  }
+
+  .solution-footer ul li {
+    font-size: var(--font-size-16);
+  }
+
+  .solution-footer .default-content-wrapper ul + p {
+    margin: 0 0 0 var(--spacer-element-10);
+    line-height: 0;
+  }
+}
diff --git a/blocks/solution-footer/solution-footer.js b/blocks/solution-footer/solution-footer.js
@@ -0,0 +1,77 @@
+import { decorateMain } from '../../scripts/scripts.js';
+import { loadBlocks, decorateButtons } from '../../scripts/lib-franklin.js';
+
+/**
+ * Loads a fragment.
+ * @param {string} path - The path to the fragment
+ * @returns {HTMLElement} - The root element of the fragment
+ */
+async function loadFragment(path) {
+  try {
+    const url = new URL(path, window.location.origin); // Parse the URL
+
+    if (url.pathname.startsWith('/')) {
+      const resp = await fetch(`${url.pathname}.plain.html`);
+      if (resp.ok) {
+        const main = document.createElement('div');
+        main.innerHTML = await resp.text();
+        // Decorate main element and load additional blocks
+        decorateMain(main);
+        await loadBlocks(main);
+        return main;
+      }
+      throw new Error('Failed to fetch fragment');
+    } else {
+      throw new Error('Invalid path');
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(`Error loading fragment: ${error}`);
+  }
+  return null;
+}
+
+export default async function decorate(block) {
+  // Get the block name attribute from the block element
+  const blockName = block.getAttribute('data-block-name');
+  if (!blockName) {
+    return;
+  }
+
+  // Decorate buttons within the block, ignoring class decoration
+  decorateButtons(block, { decorateClasses: false });
+
+  // Get the last child element of the block
+  const lastRow = [...block.children][1];
+
+  if (lastRow) {
+    const link = lastRow.querySelector('a');
+    // Extract the href attribute from the link, if it exists
+    const { href } = link || {};
+    const fragment = await loadFragment(href);
+
+    if (fragment) {
+      // Extract the section element from the loaded fragment
+      const fragmentSection = fragment.querySelector(':scope .section');
+      const { classList } = fragmentSection || [];
+      if (classList) {
+        // Add classes from the fragment's section element to the last row
+        lastRow.classList.add(...classList);
+        // Replace the last row content with fragment section content
+        lastRow.replaceWith(...fragmentSection.childNodes);
+      }
+    }
+
+    // Handle click events on footer base links
+    block.addEventListener('click', (e) => {
+      const { target } = e;
+      // Check if the clicked element is a footer base link with an empty href attribute
+      if (target.tagName === 'A' && target.getAttribute('href') === '') {
+        e.preventDefault();
+        // Call the OneTrust function to toggle info display
+        // eslint-disable-next-line no-undef
+        OneTrust.ToggleInfoDisplay();
+      }
+    });
+  }
+}