Navattic page footer issues.

hlxsites · Nov 17, 2023 · 3d98ee1 · 3d98ee1
1 parent 4943022
commit 3d98ee1
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 2 deletions.
diff --git a/blocks/solution-footer/solution-footer.css b/blocks/solution-footer/solution-footer.css
@@ -12,14 +12,39 @@ main .section.solution-footer-container {
   gap: var(--gap-16);
 }
 
-.solution-footer.navattic > div div {
+.solution-footer.navattic > div .button-container a {
   color: var(--neutral-white);
   font-family: var(--sans-serif-font-light);
   font-size: var(--font-size-14);
   font-style: normal;
   font-weight: var(--font-weight-light);
   line-height: var(--line-height-160);
   letter-spacing: 0.16px;
+  display: inline;
+}
+
+.solution-footer.navattic > div div {
+  color: var(--neutral-white);
+  font-family: var(--sans-serif-font-light);
+  font-size: var(--font-size-14);
+  font-style: normal;
+  font-weight: var(--font-weight-light);
+  line-height: var(--line-height-120);
+  letter-spacing: 0.16px;
+}
+
+.solution-footer.navattic > div .button-container > a.tertiary:not(.has-icon), .solution-footer.navattic > div .button-container > a.tertiary.has-icon::before {
+  border-bottom: 0;
+}
+
+.solution-footer.navattic > div .button-container > a.tertiary:active, .solution-footer.navattic > div .button-container > a.tertiary:hover {
+  -webkit-text-fill-color: unset;
+  color: unset;
+  border-image-source: unset;
+}
+
+.solution-footer.navattic > div .button-container > a.tertiary:not(.has-icon):hover {
+  border-bottom: 1px solid #FFF;
 }
 
 .solution-footer.navattic > div > div:first-child {
@@ -63,6 +88,11 @@ main .section.solution-footer-container > div:last-child {
   height: 38px;
 }
 
+.solution-footer.navattic > div .button-container > a.button.tertiary span.icon > svg {
+  height: 38px;
+  width: 43px;
+}
+
 .solution-footer svg #text * {
   fill: var(--neutral-white);
 }
@@ -95,6 +125,15 @@ main .section.solution-footer-container > div:last-child {
   color: var(--neutral-white);
 }
 
+.solution-footer.navattic > div .cookie-consent {
+  cursor: pointer;
+  height: 17px;
+}
+
+.solution-footer.navattic > div .cookie-consent:hover {
+  border-bottom: 1px solid #FFF;
+}
+
 /* stylelint-disable no-descending-specificity */
 .solution-footer ul li a,
 .solution-footer ul li a:not(.button):any-link {
@@ -133,6 +172,10 @@ main .section.solution-footer-container > div:last-child {
     align-items: center;
   }
 
+  .solution-footer.navattic > div .button-container a {
+    font-size: var(--font-size-16);
+  }
+
   .solution-footer.navattic > div div {
     font-size: var(--font-size-16);
   }
@@ -169,6 +212,15 @@ main .section.solution-footer-container > div:last-child {
   .solution-footer .default-content-wrapper ul + p {
     position: relative;
   }
+
+  .solution-footer.navattic > div .button-container > a.button.tertiary span.icon > svg {
+    height: 48px;
+    width: 54px;
+  }
+
+  .solution-footer.navattic > div .cookie-consent {
+    height: unset;
+  }
 }
 
 /* Desktop */

diff --git a/blocks/solution-footer/solution-footer.js b/blocks/solution-footer/solution-footer.js
@@ -1,4 +1,4 @@
-import { decorateMain } from '../../scripts/scripts.js';
+import { decorateMain, createTag } from '../../scripts/scripts.js';
 import { loadBlocks, decorateButtons } from '../../scripts/lib-franklin.js';
 
 /**
@@ -74,4 +74,16 @@ export default async function decorate(block) {
       }
     });
   }
+
+  // Find the navattic footer list
+  const footerList = block.querySelector('.solution-footer.navattic > div');
+  if (footerList) {
+    const cookieConsent = createTag('div', { class: 'cookie-consent' });
+    cookieConsent.innerText = 'Cookie preferences';
+
+    // eslint-disable-next-line no-undef
+    cookieConsent.addEventListener('click', () => { OneTrust.ToggleInfoDisplay(); });
+
+    footerList.insertBefore(cookieConsent, footerList.children[3]);
+  }
 }