Merge branch 'main' into cards-shade-icon

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 {

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();
 }

blocks/footer/footer.css

@@ -87,15 +87,15 @@ footer {
   margin-right: 10px;
 }
 
-.icon-facebook svg, .icon-linkedin svg, .icon-instagram svg, .icon-youtube svg {
+.icon-facebook img, .icon-linkedin img, .icon-instagram img, .icon-youtube img {
   height: 20px;
   width: 20px;
   margin-right: 5px;
   opacity: .4;
 }
 
 
-.footer-container-flex > div:nth-child(1) svg {
+.footer-container-flex > div:nth-child(1) img {
   position: relative;
   height: 68px;
   width: 68px;

blocks/header/header.css

@@ -97,7 +97,7 @@ body.light-nav {
   font-family: var(--font-family-proxima);
   font-weight: var(--font-weight-normal);
   font-size: var(--body-font-size-s);
-  letter-spacing:var(--letter-spacing-reg);
+  letter-spacing: var(--letter-spacing-reg);
   line-height: var(--body-font-size-s);
   text-decoration: none;
   cursor: pointer;
@@ -197,6 +197,7 @@ body.light-nav {
 }
 
 .header.block nav .nav-hamburger .nav-hamburger-icon {
+  position: relative;
   height: 24px;
   width: 24px;
 }
@@ -208,9 +209,19 @@ body.light-nav {
 
 .header.block nav .nav-hamburger .close {
   display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .header.block nav .nav-hamburger .open {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
   filter: var(--hamburger-filter);
 }
 
@@ -239,7 +250,7 @@ body.light-nav {
     height: var(--nav-height);
     background: transparent;
   }
-  
+
   body.light-nav .header.block nav[aria-expanded="true"] {
     --logo-filter: invert(1);
   }

blocks/header/header.js

@@ -2,7 +2,7 @@ import { BREAKPOINTS } from '../../scripts/scripts.js';
 import { getMetadata, decorateIcons, decorateSections } from '../../scripts/aem.js';
 
 // media query match that indicates mobile/tablet width
-const isDesktop = BREAKPOINTS.medium;
+const isDesktop = BREAKPOINTS.large;
 
 function closeOnEscape(e) {
   if (e.code === 'Escape') {
@@ -230,7 +230,9 @@ export default async function decorate(block) {
     nav.setAttribute('aria-expanded', 'false');
     // prevent mobile nav behavior on window resize
     toggleMenu(nav, navSections, isDesktop.matches);
-    isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+    isDesktop.addEventListener('change', () => {
+      toggleMenu(nav, navSections, isDesktop.matches);
+    });
 
     decorateIcons(nav);
     const navWrapper = document.createElement('div');

blocks/hero/search/home.css

@@ -18,6 +18,11 @@
   display: none;
 }
 
+.hero.block .content .homes .search-bar .search-country-select-parent {
+  position: relative;
+  width: 80px;
+}
+
 .hero.block .content .homes .search-bar .suggester-input {
   flex: 1;
 }
@@ -45,7 +50,7 @@
   justify-content: center;
 }
 
-.hero.block .content .homes .search-bar .filter span.icon svg {
+.hero.block .content .homes .search-bar .filter span.icon img {
   height: 22px;
   width: 22px;
   color: var(--black);

blocks/hero/search/home.js

@@ -1,11 +1,10 @@
-import { decorateIcons } from '../../../scripts/aem.js';
 import {
   build as buildCountrySelect,
 } from '../../shared/search-countries/search-countries.js';
 
 function observeForm() {
   const script = document.createElement('script');
-  script.type = 'text/partytown';
+  script.type = 'module';
   script.innerHTML = `
     const script = document.createElement('script');
     script.type = 'module';
@@ -76,6 +75,7 @@ async function buildForm() {
     </div>
     <div class="search-bar" role="search">
       <div class="search-suggester">
+        <div class="search-country-select-parent"></div>
         <div class="suggester-input">
           <input type="text" placeholder="${getPlaceholder()}" aria-label="${getPlaceholder()}" name="keyword">
           <input type="hidden" name="query">
@@ -113,12 +113,12 @@ async function buildForm() {
     input.setAttribute('aria-label', placeholder);
   };
 
-  const countrySelect = await buildCountrySelect(changeCountry);
-  if (countrySelect) {
-    form.querySelector('.search-suggester').prepend(countrySelect);
-  }
-  decorateIcons(form);
-  observeForm();
+  buildCountrySelect(changeCountry).then((select) => {
+    if (select) {
+      form.querySelector('.search-country-select-parent').append(select);
+    }
+  });
+  window.setTimeout(observeForm, 3000);
   return form;
 }
 

blocks/shared/search-countries/search-countries.js

@@ -108,7 +108,7 @@ export async function build(...callbacks) {
   selected.classList.add('selected');
   selected.setAttribute('aria-haspopup', 'listbox');
   selected.setAttribute('aria-expanded', 'false');
-  selected.setAttribute('aria-label', 'Select Country');
+  selected.setAttribute('aria-label', `${first.value} - Select Country`);
   selected.setAttribute('role', 'button');
   selected.setAttribute('tabIndex', '0');
   selected.innerHTML = imgHTML(first.value);

scripts/google-maps/index.js

@@ -0,0 +1,21 @@
+import { getMetadata } from '../aem.js';
+
+let loaded = false;
+
+/* eslint-disable */
+const scriptFunc = (key) => {
+  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+    key,
+    v: "weekly",
+    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
+    // Add other bootstrap parameters as needed, using camel case.
+  });
+};
+/* eslint-enable */
+
+export default function loadMaps() {
+  if (!loaded) {
+    loaded = true;
+    scriptFunc(getMetadata('google-maps-api-key'));
+  }
+}

scripts/scripts.js

@@ -279,7 +279,7 @@ async function loadLazy(doc) {
 
   loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`);
   loadFonts();
-  addFavIcon(`${window.hlx.codeBasePath}/styles/favicon.svg`);
+  addFavIcon(`${window.hlx.codeBasePath}/styles/bhhs_seal_favicon.ico`);
   sampleRUM('lazy');
   sampleRUM.observe(main.querySelectorAll('div[data-block-name]'));
   sampleRUM.observe(main.querySelectorAll('picture > img'));