Merge branch 'main' into 237-modal-link

blocks/agent-about/agent-about.css

@@ -7,10 +7,6 @@
   letter-spacing: normal;
 }
 
-.agent-about.block a {
-  cursor: pointer;
-}
-
 .agent-about.block .hide {
   display: none;
 }
@@ -20,6 +16,8 @@
   display: inline-block;
   margin-top: 1rem;
   text-decoration: underline;
+  font-size: var(--body-font-size-xs);
+  color: var(--black);
 }
 
 .agent-about.block a.view-more::after {
@@ -33,7 +31,7 @@
 .agent-about.block>div.cols-1,
 .agent-about.block>div.cols-2,
 .agent-about.block>div.cols-3 {
-  padding-bottom: 1rem;
+  padding-bottom: 2rem;
 }
 
 .agent-about.block>div>div:first-of-type {

blocks/agent-about/agent-about.js

@@ -1,3 +1,4 @@
+import { getMetadata } from '../../scripts/aem.js';
 import {
   a, div, ul, li,
 } from '../../scripts/dom-helpers.js';
@@ -18,7 +19,23 @@ const viewMoreOnClick = (name, anchor, block) => {
   });
 };
 
+const getCol = (list, colText) => {
+  const colsUl = ul();
+  list.split(',').forEach((x) => {
+    colsUl.append(li(x.trim()));
+  });
+  return div(div(colText), div(colsUl));
+};
+
 export default function decorate(block) {
+  const aboutText = getMetadata('about');
+  const accreditations = getMetadata('professional-accreditations');
+  const languages = getMetadata('languages');
+
+  block.replaceChildren(div(div('About'), div(aboutText)),
+    getCol(accreditations, 'Professional Accreditations'),
+    getCol(languages, 'Languages'));
+
   const children = [...block.children];
   if (children?.length) {
     children.forEach((child, index) => {
@@ -31,7 +48,7 @@ export default function decorate(block) {
           child.children[1].classList.add('hide');
           child.append(div({ class: `${name}-truncate` },
             `${child.children[1].textContent.substring(0, threshold)}...`));
-          const anchor = a({ class: 'view-more' });
+          const anchor = a({ class: 'view-more', href: '#' });
           child.append(anchor);
           viewMoreOnClick(name, anchor, block);
         }
@@ -43,15 +60,15 @@ export default function decorate(block) {
 
         if (liItems.length > threshold) {
           child.children[1].classList.add('hide');
-          const tempUl = ul({ });
+          const tempUl = ul();
           Array.from(child.children[1].querySelectorAll('li'))
             .slice(0, threshold).forEach((liItem) => {
-              const tempLi = li({}, liItem.textContent);
+              const tempLi = li(liItem.textContent);
               tempUl.append(tempLi);
             });
 
           child.append(div({ class: `${name}-truncate` }, tempUl));
-          const anchor = a({ class: 'view-more' });
+          const anchor = a({ class: 'view-more', href: '#' });
           child.append(anchor);
           viewMoreOnClick(name, anchor, block);
         }

blocks/agent-address/agent-address.css

@@ -0,0 +1,35 @@
+.agent-address.block {
+  padding: 2rem;
+  background-color: var(--tertiary-color);
+}
+
+.agent-address.block .address {
+  margin-bottom: 2rem;
+}
+
+.agent-address.block .address>p {
+  margin-bottom: 0;
+  font-size: var(--body-font-size-xs);
+}
+
+.agent-address.block a {
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-m);
+  text-transform: uppercase;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  font-size: var(--body-font-size-s);
+}
+
+.agent-address.block a:hover {
+  color: var(--primary-light);
+  background-color: var(--primary-color);
+}
+
+@media (min-width: 600px) {
+  .agent-address.block {
+    display: none;
+  }
+}

blocks/agent-address/agent-address.js

@@ -0,0 +1,22 @@
+import { getMetadata } from '../../scripts/aem.js';
+import {
+  a, div, p,
+} from '../../scripts/dom-helpers.js';
+
+export default function decorate(block) {
+  const streetAddress = getMetadata('streetaddress');
+  const addressLocality = getMetadata('addresslocality');
+  const addressRegion = getMetadata('addressregion');
+  const postalCode = getMetadata('postalcode');
+
+  const textDiv = div({ class: 'address' },
+    p('Berkshire Hathaway HomeServices'),
+    p('Commonwealth Real Estate'),
+    p(streetAddress),
+    p(`${addressLocality}, ${addressRegion} ${postalCode}`),
+  );
+  const text = `${streetAddress}, ${addressLocality}, ${addressRegion} ${postalCode}`;
+
+  const anchor = a({ href: `https://maps.google.com/maps?q=${text}`, target: '_blank' }, 'Directions');
+  block.replaceChildren(textDiv, anchor);
+}

blocks/agent-profile/agent-profile.js

@@ -8,13 +8,13 @@ const getPhoneDiv = () => {
   let phoneUl;
 
   if (getMetadata('direct-phone')) {
-    phoneUl = ul({});
-    phoneUl.append(li({}, 'Direct: ', getMetadata('direct-phone')));
+    phoneUl = ul();
+    phoneUl.append(li('Direct: ', getMetadata('direct-phone')));
   }
 
   if (getMetadata('office-phone')) {
-    phoneUl = phoneUl || ul({});
-    phoneUl.append(li({}, 'Office: ', getMetadata('office-phone')));
+    phoneUl = phoneUl || ul();
+    phoneUl.append(li('Office: ', getMetadata('office-phone')));
   }
 
   if (phoneUl) {
@@ -62,9 +62,9 @@ const getSocialDiv = () => {
 
   ['facebook', 'instagram', 'linkedin'].forEach((x) => {
     const url = getMetadata(x);
-    socialUl = socialUl || ul({});
+    socialUl = socialUl || ul();
     if (url) {
-      const socialLi = li({}, a({
+      const socialLi = li(a({
         href: url, class: x, title: x, 'aria-label': x,
       }, span({ class: `icon icon-${x}` })));
       socialUl.append(socialLi);
@@ -82,7 +82,7 @@ const getSocialDiv = () => {
 export default async function decorate(block) {
   const profileImage = getImageDiv();
   const profileContent = div({ class: 'profile-content' },
-    div({ class: 'name' }, h1({}, getMetadata('name'))),
+    div({ class: 'name' }, h1(getMetadata('name'))),
     div({ class: 'designation' }, getMetadata('designation')),
   );
 

blocks/agent-transactions/agent-transactions.js

@@ -78,8 +78,8 @@ export default async function decorate(block) {
     trBody.appendChild(trElement);
   });
 
-  const tableElement = table({}, thead({}, theadTr), trBody);
-  const heading1 = h1({}, 'Closed Transactions');
+  const tableElement = table(thead(theadTr), trBody);
+  const heading1 = h1('Closed Transactions');
   const anchor = a({ class: 'show-more' });
   anchor.addEventListener('click', () => {
     if (anchor.classList.contains('show-more')) {

blocks/floatingagent/floatingagent.css

@@ -0,0 +1,88 @@
+.floatingagent.block {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    background-color: var(--white);
+    padding: 10px;
+    border-top: 1px solid #ccc;
+    z-index: 999;
+}
+
+.floatingagent.block > .floating-agent-col {
+    display: none;
+}
+
+.floatingagent.block > .agentinfo {
+    display: none;
+}
+
+.floatingagent.block > .contactagent {
+    display: block;
+    align-self: center;
+    background: var(--primary-color);
+    color: var(--tertiary-color);
+    border: 0;
+    padding: 10px;
+    margin-left: 35%;
+}
+
+@media (min-width: 600px) {
+    .floatingagent.block {
+        justify-content: space-between;
+    }
+
+    .floatingagent.block > .floating-agent-col {
+        margin-left: 100px;
+        display: flex;
+        margin-right: 10px;
+        flex: none;
+        margin-bottom: 20px;
+    }
+
+    .floatingagent.block > .agentinfo {
+        display: block;
+        flex-grow: 1;
+        margin-top: 10px;
+        margin-bottom: 15px;
+    }
+
+    .floatingagent.block > .agentinfo > p {
+        margin-block-end: 0;
+        font-family: var(--font-family-primary);
+        font-size: var(--body-font-size-xxs);
+        font-style: normal;
+        font-weight: var(--font-weight-normal);
+        letter-spacing: normal;
+        color: #2a2223;
+    }
+
+    .floatingagent.block > .agentinfo > h2 {
+        font-size: var(--heading-font-size-m);
+        line-height: 130%;
+        letter-spacing: var(--letter-spacing-xxxs);
+        vertical-align: top;
+        color: #2a2223;
+        width: max-content;
+    }
+
+    .floatingagent.block > .floating-agent-col > picture {
+        height: 40px;
+        width: 30px;
+        margin-right: 40px;
+    }
+
+    .floatingagent.block > .floating-agent-col > picture > img {
+        display: inline;
+    }
+
+    .floatingagent.block > .contactagent {
+        flex: none;
+        margin-right: 5%;
+        margin-left: 10px;
+    }
+}

blocks/floatingagent/floatingagent.js

@@ -0,0 +1,59 @@
+import {
+  getMetadata,
+} from '../../scripts/aem.js';
+import {
+  button,
+  div,
+  h2,
+  img,
+  p,
+  strong,
+} from '../../scripts/dom-helpers.js';
+
+export default function decorate(block) {
+  const agentName = getMetadata('name');
+  const agentDesc = getMetadata('desc');
+  const pic = getMetadata('pic');
+  const lic = getMetadata('lic');
+
+  const agentPicture = document.createElement('picture');
+  agentPicture.appendChild(img({
+    loading: 'lazy',
+    alt: 'Agent Image',
+    src: pic,
+    width: '48',
+    height: '64',
+    style: 'width: 48px; height: 64px;',
+  }));
+
+  const agentInfo = div({ class: 'agentinfo' },
+    h2(strong(agentName)),
+    p(agentDesc),
+    p(lic),
+  );
+
+  const contactButton = button({ class: 'contactagent' }, 'CONTACT AGENT');
+
+  block.append(
+    div({ class: 'floating-agent-col' }, agentPicture),
+    agentInfo,
+    contactButton,
+  );
+  const displayedElement = document.querySelector('.floatingagent');
+
+  const heroElement = document.querySelector('.hero-wrapper');
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        displayedElement.style.display = 'none';
+      } else {
+        displayedElement.style.display = 'flex';
+      }
+    });
+  }, {
+    threshold: [0],
+  });
+
+  observer.observe(heroElement);
+}