Merge branch 'main' into hero-headline

hlxsites · Jan 3, 2024 · f389372 · f389372
2 parents d0441d4 + fd9a8ba
commit f389372
Show file tree

Hide file tree

Showing 33 changed files with 509 additions and 139 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1 @@
 helix-importer-ui
-scripts/partytown
diff --git a/blocks/avm-report/avm-report-delayed.js b/blocks/avm-report/avm-report-delayed.js
diff --git a/blocks/avm-report/avm-report.css b/blocks/avm-report/avm-report.css
@@ -43,6 +43,9 @@
   width: 67px;
 }
 
+.avm-report.block form button[type="submit"] {
+  transition: all .3s ease-in;
+}
 
 @media screen and (min-width: 600px) {
   .avm-report.block {

diff --git a/blocks/avm-report/avm-report.js b/blocks/avm-report/avm-report.js
@@ -1,23 +1,8 @@
-import {
-  showModal,
-} from '../../scripts/util.js';
-
-let alreadyDeferred = false;
-function initGooglePlacesAPI() {
-  if (alreadyDeferred) {
-    return;
-  }
-  alreadyDeferred = true;
-  const script = document.createElement('script');
-  script.type = 'text/partytown';
-  script.innerHTML = `
-    const script = document.createElement('script');
-    script.type = 'module';
-    script.src = '${window.hlx.codeBasePath}/blocks/avm-report/avm-report-delayed.js';
-    document.head.append(script);
-  `;
-  document.head.append(script);
-}
+import { showModal } from '../../scripts/util.js';
+
+import loadMaps from '../../scripts/google-maps/index.js';
+
+let autocompleteAttached = false;
 
 export default async function decorate(block) {
   const form = document.createElement('form');
@@ -32,6 +17,19 @@ export default async function decorate(block) {
 
   const addressField = form.querySelector('input[name="avmaddress"]');
 
+  addressField.addEventListener('focus', async () => {
+    if (!autocompleteAttached) {
+      loadMaps();
+      await window.google.maps.importLibrary('places');
+      // eslint-disable-next-line no-unused-vars
+      const autocomplete = new window.google.maps.places.Autocomplete(addressField, {
+        fields: ['formatted_address'],
+        types: ['address'],
+      });
+      autocompleteAttached = true;
+    }
+  });
+
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     const address = addressField.value;
@@ -49,5 +47,4 @@ export default async function decorate(block) {
     window.location = redirect;
   });
   block.append(form);
-  initGooglePlacesAPI();
 }
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -29,6 +29,11 @@
   padding: 0;
 }
 
+.cards.block.cards-1-cols .cards-list .card-image {
+  margin-bottom: 25px;
+}
+
+
 .cards.block .cards-list .cards-item .card-image {
   position: relative;
   display: flex;
@@ -43,12 +48,11 @@
   position: relative;
   height: 100%;
   width: 100%;
-  padding-bottom: 66%;
 }
 
 .cards.block .cards-list .cards-item .card-image img {
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: 0;
   object-fit: cover;
   object-position: center;
@@ -127,19 +131,71 @@
   letter-spacing: var(--letter-spacing-xs);
 }
 
+.cards.block.shade-icon .cards-list .cards-item .card-body p {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
 .section.grey-background .cards.block .cards-list .cards-item .card-image p {
   background-color: var(--light-grey);
 }
 
+.cards.block.shade-icon .cards-list .cards-item {
+  background-color: var(--light-grey);
+  padding: 0;
+  border-top: 1px solid #000;
+  min-height: 274px;
+  align-items: center;
+  justify-content: center;
+}
+
+.cards.block.shade-icon .cards-list .cards-item .card-body h4 {
+  padding: 8px 30px;
+  text-align: center;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-l);
+  letter-spacing: var(--letter-spacing-m);
+}
+
+.cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) {
+  margin-bottom: 20px;
+  padding: 0 31px 34px;
+  font-size: var(--body-font-size-s);
+}
+
+.cards.block.shade-icon .cards-list .cards-item .card-body .icon {
+  display: block;
+  margin-top: 61px;
+}
+
+.cards.block.shade-icon .cards-list .cards-item .card-body .icon img {
+  margin: 0 auto;
+  display: block;
+  height: 45px;
+  width: 62px;
+}
+
 @media screen and (min-width: 600px) {
   .cards.block.icons {
     margin: 0 auto;
     max-width: 83.333%;
   }
 
+  .cards.block.shade-icon .cards-list {
+    flex-direction: row;
+    column-gap: 20px;
+    align-items: stretch;
+    margin-bottom: 50px;
+  }
+
   .cards.block .cards-list .cards-item .card-body h3 {
     font-size: var(--heading-font-size-m);
   }
+
+  .cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) {
+    padding: 0 20px;
+  }
+
 }
 
 @media (min-width: 900px) {
@@ -179,5 +235,20 @@
     align-items: stretch;
     column-gap: 20px;
   }
+
+  .cards.block.shade-icon .cards-list .cards-item .card-body p:not(:first-of-type) {
+    padding: 0 25px 54px;
+  }
+
 }
 
+@media (min-width: 1200px) {
+  .cards.block.shade-icon .cards-list {
+    justify-content: space-around;
+    column-gap: unset;
+  }
+
+  .cards.block.shade-icon .cards-list .cards-item {
+    flex: 0 1 28%;
+  }
+}
diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -2,7 +2,7 @@ export default function decorate(block) {
   const cards = [...block.children];
 
   // Check for a title row
-  if (block.children[0].children.length === 1) {
+  if (!block.classList.contains('shade-icon') && block.children[0].children.length === 1) {
     const wrapper = cards.shift();
     const title = wrapper.children[0];
     title.classList.add('title');
@@ -14,7 +14,7 @@ export default function decorate(block) {
   list.classList.add('cards-list');
   block.append(list);
 
-  // add logic for check-list case
+  // add logic for checklist case
   if (block.classList.contains('icons')) {
     block.classList.add('cards-2-cols');
     cards.forEach((row) => {
@@ -24,6 +24,7 @@ export default function decorate(block) {
       list.append(row);
     });
   } else {
+    let ratio = 9999;
     block.classList.add(`cards-${cards.length}-cols`);
     cards.forEach((row) => {
       row.className = 'cards-item';
@@ -32,13 +33,24 @@ export default function decorate(block) {
           // update container for picture with label
           div.classList.add('card-image');
           const picture = div.querySelector('picture');
+          const img = picture.querySelector('img');
+          const tmp = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+          if (tmp < ratio) {
+            ratio = tmp;
+          }
           const paragraphElement = document.createElement(('p'));
           paragraphElement.textContent = div.textContent.trim();
           div.replaceChildren(picture, paragraphElement);
         } else {
           div.classList.add('card-body');
         }
       });
+      // Pad the picture with the smallest ratio image.
+      [...row.children].forEach((div) => {
+        if (div.querySelector('picture')) {
+          div.querySelector('picture').style.paddingBottom = `${ratio}%`;
+        }
+      });
       list.append(row);
     });
   }

diff --git a/blocks/embed/lite-yt-embed.css b/blocks/embed/lite-yt-embed.css
@@ -0,0 +1,90 @@
+/* copied from https://github.com/paulirish/lite-youtube-embed/releases/tag/v0.2.0 */
+/* stylelint-disable */
+
+lite-youtube {
+  background-color: #000;
+  position: relative;
+  display: block;
+  contain: content;
+  background-position: center center;
+  background-size: cover;
+  cursor: pointer;
+  max-width: 720px;
+}
+
+/* gradient */
+lite-youtube::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
+  background-position: top;
+  background-repeat: repeat-x;
+  height: 60px;
+  padding-bottom: 50px;
+  width: 100%;
+  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* responsive iframe with a 16:9 aspect ratio
+    thanks https://css-tricks.com/responsive-iframes/
+*/
+lite-youtube::after {
+  content: "";
+  display: block;
+  padding-bottom: calc(100% / (16 / 9));
+}
+
+lite-youtube > iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+}
+
+/* play button */
+lite-youtube > .lty-playbtn {
+  width: 68px;
+  height: 48px;
+  position: absolute;
+  cursor: pointer;
+  transform: translate3d(-50%, -50%, 0);
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  background-color: transparent;
+  /* YT's actual play button svg */
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
+  filter: grayscale(100%);
+  transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
+  border: none;
+}
+
+lite-youtube:hover > .lty-playbtn,
+lite-youtube .lty-playbtn:focus {
+  filter: none;
+}
+
+/* Post-click styles */
+lite-youtube.lyt-activated {
+  cursor: unset;
+}
+
+lite-youtube.lyt-activated::before,
+lite-youtube.lyt-activated > .lty-playbtn {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.lyt-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}