Lps quote

blocks/fragment/fragment.js

@@ -15,13 +15,14 @@ import {
 /**
  * Loads a fragment.
  * @param {string} path The path to the fragment
+ * @param {boolean} createMainTag If true - creates a main tag, otherwise a div
  * @returns {HTMLElement} The root element of the fragment
  */
-export async function loadFragment(path) {
+export async function loadFragment(path, createMainTag = true) {
   if (path && path.startsWith('/')) {
     const resp = await fetch(`${path}.plain.html`);
     if (resp.ok) {
-      const main = document.createElement('main');
+      const main = document.createElement(createMainTag ? 'main' : 'div');
       main.innerHTML = await resp.text();
 
       // reset base path for media to fragment base

blocks/header-only-logo/header-only-logo.css

@@ -0,0 +1,55 @@
+header.header-only-logo-wrapper {
+  padding: 11px 0;
+  height: initial;
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: 0;
+  z-index: 50;
+  background-color: #fff;
+  transition: transform 0.2s linear;
+  opacity: 1;
+}
+
+header.header-only-logo-wrapper p {
+  margin: 0;
+}
+
+header.header-only-logo-wrapper .icon svg {
+  width: 220px;
+}
+
+@keyframes slide-down {
+  0% {
+    transform: translateY(-100%)
+  }
+
+  100% {
+    transform: translateY(0)
+  }
+}
+
+.animated.slide-down {
+  animation-name: slide-down
+}
+
+@keyframes slide-up {
+  0% {
+    transform: translateY(0)
+  }
+
+  100% {
+    transform: translateY(-100%)
+  }
+}
+
+.animated.slide-up {
+  animation-name: slide-up
+}
+
+.animated {
+  animation-duration: 500ms;
+  animation-fill-mode: both;
+  animation-delay: 300ms;
+  will-change: transform,opacity
+}

blocks/header-only-logo/header-only-logo.js

@@ -0,0 +1,44 @@
+import { loadFragment } from '../fragment/fragment.js';
+import { isCanada, decorateIcons } from '../../scripts/lib-franklin.js';
+
+// Adding animation for header
+function onDomContentLoaded() {
+  const header = document.querySelector('header');
+  let lastScrollTop = 0;
+
+  window.addEventListener('scroll', () => {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+    if (scrollTop > lastScrollTop) {
+      // Scrolling down
+      header.classList.remove('slide-down');
+      header.classList.add('animated', 'slide-up');
+    } else {
+      // Scrolling up
+      header.classList.remove('slide-up');
+      header.classList.add('animated', 'slide-down');
+    }
+
+    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
+  });
+}
+
+export default async function decorate(block) {
+  let baseHeaderUrl = '/fragments/us/header-only-logo';
+  if (isCanada) {
+    baseHeaderUrl = '/fragments/ca/header-only-logo';
+  }
+
+  const headerPaidContent = await loadFragment(baseHeaderUrl);
+
+  block.innerHTML = headerPaidContent.innerHTML;
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', onDomContentLoaded);
+  } else {
+    // DOM is already loaded
+    onDomContentLoaded();
+  }
+
+  await decorateIcons(block);
+}

blocks/pet-tag-quote/summary-quote.css

@@ -8,8 +8,6 @@
 :root {
     --summary-quote-outline-color: #dfe6ed;
     --sec2-disabled-color: #cdcdcd;
-    --dialog-yes-color: #48bb78;
-    --dialog-yes-hover-color: #7bc99c;
 }
 
 .summary {

blocks/plans-quote-perks-decorator/plans-quote-perks-decorator.css

@@ -0,0 +1,33 @@
+.plans-quote-perks-decorator > div > div {
+  display: flex;
+  justify-content: center;
+  flex-flow: row wrap;
+}
+
+.plans-quote-perks-decorator > div > div > h2 {
+  width: 100%;
+  font-size: 1.625rem;
+  line-height: 2.25rem;
+}
+
+.plans-quote-perks-decorator > div > div > div {
+  width: calc(33.333% - 10px);
+  margin: 5px;
+  box-sizing: border-box;
+}
+
+.plans-quote-perks-decorator > div > div > div.special-wrapper {
+  width: auto;
+  margin: 0 auto;
+}
+
+.plans-quote-perks-decorator > div > div > div > p > span.icon {
+  height: 65px;
+  width: 65px;
+}
+
+.plans-quote-perks-decorator > div > div > div > p {
+  font-size: .813rem;
+  line-height: .938rem;
+  text-align: center;
+}

blocks/plans-quote-perks-decorator/plans-quote-perks-decorator.js

@@ -0,0 +1,24 @@
+export function doDecoration(block) {
+  block.querySelectorAll('H2').forEach((h2) => {
+    let nextSibling = h2.nextElementSibling;
+    let pCount = 0;
+    let wrapperDiv = null;
+
+    while (nextSibling && nextSibling.tagName === 'P') {
+      if (pCount % 3 === 0) {
+        wrapperDiv = document.createElement('div');
+        nextSibling.parentNode.insertBefore(wrapperDiv, nextSibling);
+      }
+      if (wrapperDiv) {
+        wrapperDiv.appendChild(nextSibling);
+      }
+      nextSibling = wrapperDiv.nextElementSibling;
+      pCount += 1;
+    }
+  });
+}
+
+export default async function decorate(block) {
+  const content = block.children[0].children[0];
+  doDecoration(content);
+}

blocks/plans-quote/first-page.js

@@ -0,0 +1,10 @@
+import { doDecoration } from '../plans-quote-perks-decorator/plans-quote-perks-decorator.js';
+import formDecoration from './form.js';
+
+export function decorateLeftBlock(block, apiBaseUrl) {
+  formDecoration(block.children[0].children[0], apiBaseUrl);
+}
+
+export function decorateRightBlock(block) {
+  doDecoration(block.children[0].children[1]);
+}