Merge remote-tracking branch 'origin/main' into feature/savedprops

hlxsites · Jun 17, 2024 · c650c7d · c650c7d
2 parents aff18eb + 35bcf88
commit c650c7d
Show file tree

Hide file tree

Showing 34 changed files with 2,516 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -76,7 +76,7 @@ In this setup, the proxy is configured to route non-API traffic on the Staging d
 
 This setup uses a locally resolved domain, which will Proxyman will use to route the traffic. All non-API traffic will route to localhost, all API traffic will go to the Stage domain.
 
-1. Add an entry to `/etc/maps`:
+1. Add an entry to `/etc/hosts`:
    Proxyman won't proxy localhost, so a custom domain is required. Add the following (if you already have a host entry for 127.0.0.1, simply add the new domain)
 > 127.0.0.1 proxyman.debug 
 

diff --git a/blocks/agent-about/agent-about.css b/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 {

diff --git a/blocks/agent-about/agent-about.js b/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);
         }

diff --git a/blocks/agent-address/agent-address.css b/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;
+  }
+}
diff --git a/blocks/agent-address/agent-address.js b/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);
+}
diff --git a/blocks/agent-profile/agent-profile.js b/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')),
   );
 

diff --git a/blocks/agent-transactions/agent-transactions.css b/blocks/agent-transactions/agent-transactions.css
@@ -0,0 +1,157 @@
+.agent-transactions.block table {
+  width: 100%;
+  font-size: var(--body-font-size-s);
+  line-height: var(--line-height-m);
+  margin-bottom: 0.25rem;
+}
+
+.agent-transactions.block h1 {
+  font-size: var(--heading-font-size-l);
+  line-height: var(--line-height-s);
+  color: var(--primary-color);
+  margin: 0 1.875rem 1.5rem 0;
+  font-weight: 600;
+}
+
+.agent-transactions.block .hide {
+  display: none;
+}
+
+.agent-transactions.block .show {
+  display: table-row;
+}
+
+.agent-transactions.block thead {
+  background: var(--platinum);
+  font-size: var(--body-font-size-xs);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-bold);
+  text-transform: capitalize;
+}
+
+.agent-transactions.block tbody td {
+  padding-bottom: 0.5rem;
+  padding-top: 0.25rem;
+  font-size: var(--body-font-size-xs);
+}
+
+.agent-transactions.block a {
+  line-height: var(--line-height-m);
+  letter-spacing: var(--letter-spacing-m);
+  text-transform: uppercase;
+  padding-left: 1rem;
+  cursor: pointer;
+}
+
+.agent-transactions.block a.show-more::after {
+  content: "View More";
+  display: inline-block;
+  background-image: url("../../icons/arrow-down.svg");
+  background-repeat: no-repeat;
+  background-position: right;
+  padding-right: 1rem;
+  font-size: var(--body-font-size-xs);
+  font-weight: var(--font-weight-bold);
+}
+
+.agent-transactions.block a.show-less::after {
+  content: "View Less";
+  display: inline-block;
+  background-image: url("../../icons/arrow-up.svg");
+  background-repeat: no-repeat;
+  background-position: right;
+  padding-right: 1rem;
+  font-size: var(--body-font-size-xs);
+  font-weight: var(--font-weight-bold);
+}
+
+.agent-transactions.block thead th {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.agent-transactions.block thead th:first-of-type {
+  padding-left: 1rem;
+}
+
+.agent-transactions.block tbody td:first-of-type {
+  padding-left: 1rem;
+}
+
+.agent-transactions.block .default {
+  display: table-cell;
+}
+
+.agent-transactions.block .medium,
+.agent-transactions.block .large,
+.agent-transactions.block .xl {
+  display: none;
+}
+
+.agent-transactions.block .sold-price {
+  width: 40%;
+}
+
+@media (min-width: 600px) {
+  .agent-transactions.block .medium {
+    display: table-cell;
+  }
+
+  .agent-transactions.block .address {
+    width: 48.7%;
+  }
+
+  .agent-transactions.block .city {
+    width: 24.5%;
+  }
+
+  .agent-transactions.block .state {
+    width: 7.4%;
+  }
+
+  .agent-transactions.block .sold-price {
+    width: 40%;
+  }
+}
+
+@media (min-width: 992px) {
+  .agent-transactions.block h1 {
+    font-size: 1.875rem;
+  }
+
+  .agent-transactions.block thead {
+    font-size: var(--body-font-size-s);
+  }
+
+  .agent-transactions.block tbody td {
+    font-size: var(--body-font-size-s);
+    padding-top: 0.5rem;
+  }
+
+  .agent-transactions.block .large {
+    display: table-cell;
+  }
+
+  .agent-transactions.block .address {
+    width: auto;
+  }
+
+  .agent-transactions.block .city {
+    width: 15%;
+  }
+
+  .agent-transactions.block .sold-price {
+    width: 13%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .agent-transactions.block .xl {
+    display: table-cell;
+  }
+
+  .agent-transactions.block .beds,
+  .agent-transactions.block .baths {
+    width: 5%;
+  }
+}