Navattic page blocks. (#355)

* Navattic page blocks. * Navattic hamburger icons. * Navattic review comments. * CSS fixes for navattic page. * Removal of white line below iframe. * Navattic page footer issues.
hlxsites · Nov 17, 2023 · 5ab1853 · 5ab1853
1 parent e538dc1
commit 5ab1853
Show file tree

Hide file tree

Showing 10 changed files with 396 additions and 8 deletions.
diff --git a/blocks/iframe/iframe.css b/blocks/iframe/iframe.css
@@ -0,0 +1,24 @@
+.section.iframe-container .iframe-wrapper {
+  padding-bottom: 0;
+  width: auto;
+  margin: 0;
+  max-width: unset;
+  padding-top: 90px;
+}
+
+.section.iframe-container .iframe-wrapper .iframe iframe {
+  display: block;
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+  .section.iframe-container .iframe-wrapper {
+    padding-top: var(--spacer-layout-06);
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .section.iframe-container .iframe-wrapper {
+    padding-top: var(--spacer-layout-06);
+  }
+}
diff --git a/blocks/iframe/iframe.js b/blocks/iframe/iframe.js
@@ -0,0 +1,21 @@
+import { createTag } from '../../scripts/scripts.js';
+
+export default function decorate(block) {
+  // Fetch the iframe link
+  const link = block.querySelector('a');
+  const path = link ? link.getAttribute('href') : '';
+
+  // Create the iframe tag
+  const iframe = createTag('iframe', { class: 'iframe-window', id: 'navattic-iframe' });
+  iframe.src = path;
+
+  // Set the height and width
+  iframe.width = '100%';
+  iframe.height = 1200;
+
+  // Remove the elements inside iframe block
+  block.innerHTML = '';
+
+  // Append iframe to block
+  block.appendChild(iframe);
+}
diff --git a/blocks/solution-footer/solution-footer.css b/blocks/solution-footer/solution-footer.css
@@ -4,10 +4,64 @@ main .section.solution-footer-container {
   color: var(--neutral-white);
 }
 
+.solution-footer.navattic > div {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gap-16);
+}
+
+.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 {
+  width: 100%;
+  padding-bottom: var(--spacer-element-08);
+  border-bottom: 1px solid var(--neutral-grey-tint140);
+}
+
 main .section.solution-footer-container > div:last-child {
   padding: var(--spacer-element-08) 0;
 }
 
+.solution-footer-container:has(.navattic)  {
+  position: relative;
+  bottom: 0;
+}
+
 /* Block - Solution Footer */
 .solution-footer {
   position: relative;
@@ -20,11 +74,25 @@ main .section.solution-footer-container > div:last-child {
   line-height: 0;
 }
 
+.solution-footer.navattic .icon {
+  margin-left: unset;
+}
+
+.solution-footer.navattic > div div:last-child {
+  color: var(--neutral-grey-tint100);
+  margin-top: var(--spacer-element-10);
+}
+
 .solution-footer svg {
   width: auto;
   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);
 }
@@ -57,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 {
@@ -90,6 +167,19 @@ main .section.solution-footer-container > div:last-child {
     align-items: center;
   }
 
+  .solution-footer.navattic > div {
+    flex-direction: row;
+    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);
+  }
+
   .solution-footer ul {
     display: flex;
     justify-content: flex-end;
@@ -98,6 +188,17 @@ main .section.solution-footer-container > div:last-child {
     gap: var(--gap-24);
   }
 
+  .solution-footer.navattic > div > div:first-child {
+    flex-grow: 1;
+    padding-bottom: unset;
+    border-bottom: unset;
+    width: unset;
+  }
+
+  .solution-footer.navattic div div:not(.button-container):last-child {
+    margin-top: unset;
+  }
+
   .solution-footer .default-content-wrapper {
     display: flex;
     align-items: center;
@@ -111,10 +212,23 @@ 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 */
-@media (min-width: 1200px) {  
+@media (min-width: 1200px) {
+  .solution-footer.navattic > div {
+    gap: var(--gap-24);
+  }
+
   main .section.solution-footer-container > div:last-child {
     padding: var(--spacer-element-10) 0;
   }

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]);
+  }
 }