Merge branch 'main' into feature/login

hlxsites · May 7, 2024 · 88d951b · 88d951b
2 parents 9624ba1 + 2a5d3bd
commit 88d951b
Show file tree

Hide file tree

Showing 14 changed files with 612 additions and 96 deletions.
diff --git a/blocks/blog-menu/blog-menu.css b/blocks/blog-menu/blog-menu.css
@@ -1,28 +1,28 @@
 .section.blog-menu-container {
   padding: 0;
   margin: 0 auto;
-  max-width: var(--wide-page-width);
+  max-width: none;
   position: sticky;
   top: 0;
   z-index: 10;
 }
 
 .blog-nav {
+  color: var(--white);
+  background-color: var(--primary-color);
   display: flex;
   flex-flow: column;
-  background-color: var(--primary-color);
-  color: var(--white);
-  padding-top: 10px;
   font-family: var(--font-family-primary);
   font-size: var(--body-font-size-m);
-  width: 100vw;
-  max-width: 1600px;
+  max-width: var(--wide-page-width);
+  margin: 0 auto;
+  width: 100%;
 }
 
 .blog-nav ul {
   display: none;
   position: absolute;
-  top: 120px;
+  top: 115px;
   text-align: center;
   width: 100%;
   padding: 0 10px;
@@ -64,27 +64,32 @@
 }
 
 .blog-nav a {
-  text-decoration: none;
-  letter-spacing: var(--letter-spacing-m);
+  color: var(--white);
   font-family: var(--font-family-primary);
-  font-size: var(--body-font-size-m);
-  font-weight: var(--font-weight-normal);
+  font-size: var(--body-font-size-s);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--letter-spacing-m);
   line-height: var(--line-height-m);
-  text-decoration-style: solid;
-  color: var(--white);
+  padding: 5px 10px;
+  text-decoration: none;
 }
 
 .blog-nav h1 a {
-  display: block;
+  display: inline-block;
   font-size: var(--heading-font-size-xl);
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-secondary);
+  font-weight: var(--font-weight-normal);
   line-height: var(--line-height-m);
   text-align: center;
   text-transform: none;
   letter-spacing: initial;
 }
 
+.blog-nav a:hover {
+  background-color: var(--white);
+  color: var(--primary-color);
+}
+
 .blog-nav.seller-advice a {
   color: var(--primary-color);
 }
@@ -109,7 +114,8 @@
   color: var(--primary-color);
 }
 
-.blog-nav h1:hover {
+.blog-nav h1 a:hover {
+  background-color: transparent;
   color: var(--white);
   opacity: 0.6;
 }
@@ -131,13 +137,6 @@
   text-align: center;
 }
 
-.blog-nav li:hover {
-  border-bottom: 1px solid var(--white);
-  color: var(--white);
-  opacity: 0.6;
-}
-
-
 .blog-nav.seller-advice li:hover {
   border-bottom: 1px solid var(--primary-color);
 }
@@ -237,18 +236,19 @@
   }
 
   .blog-nav ul {
+    display: flex;
     padding: 0 66px 25px;
     position: unset;
-    display: flex;
-    justify-content: space-between;
+    justify-content: center;
   }
 
   .blog-nav li {
-    padding: 0;
     border-top: none;
+    padding: 0 0 0 16px;
   }
 
   .blog-nav h1 a {
+    font-size: var(--heading-font-size-xxl);
     text-align: left;
     margin: 0 66px
   }
@@ -257,7 +257,6 @@
 
 @media (min-width: 1200px) {
   .blog-nav h1 a {
-    font-size: var(--heading-font-size-xxxl);
-    line-height: var(--line-height-l);
+    font-size: var(--heading-font-size-xxl);
   }
 }
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -98,14 +98,54 @@
   margin: 8px 0 24px;
 }
 
+.cards.block .cards-list .cards-item .card-body a.name {
+  text-decoration: none;
+  font-family: var(--font-family-secondary);
+  font-size: var(--body-font-size-l);
+  line-height: var(--line-height-s);
+  color: var(--body-color);
+}
+
+.cards.block .cards-list .cards-item .card-body div.title,
+.cards.block .cards-list .cards-item .card-body div.teamname,
+.cards.block .cards-list .cards-item .card-body div.phone,
+.cards.block .cards-list .cards-item .card-body div.license {
+  font-size: var(--body-font-size-xxs);
+  font-weight: 600;
+  line-height: var(--line-height-m);
+  letter-spacing: var(--letter-spacing-m);
+  text-transform: uppercase;
+  color: var(--body-color);
+  padding: 1em 0;
+}
+
+.cards.block .cards-list .cards-item .card-body div.teamname {
+  font-weight: 700;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.cards.block .cards-list .cards-item .card-body div.phone,
+.cards.block .cards-list .cards-item .card-body div.license {
+  font-weight: var(--font-weight-normal);
+  text-transform: none;
+  letter-spacing: normal;
+  padding: 0;
+}
+
 .tertiary-background .cards.block .cards-list .cards-item .card-image p {
   background-color: var(--tertiary-color);
 }
 
+.cards.block .cards-list .cards-item .card-body {
+  flex-grow: 1;
+}
+
 .cards.block .cards-list .cards-item .card-body .button-container {
-  margin: 16px 0 0 ;
+  margin-top: auto;
   height: 40px;
   display: flex;
+  align-self: flex-end;
 }
 
 /* Icons variation */
@@ -252,6 +292,16 @@
     margin-bottom: 20px;
   }
 
+  .cards.block.agents .cards-list {
+    flex-flow: row wrap;
+  }
+
+  .cards.block.agents .cards-list .cards-item {
+    flex: 0 0 20%;
+    margin-bottom: 20px;
+    min-width: 220px;
+  }
+
   .cards.block.cards-1-cols .cards-list .cards-item .card-image {
     max-height: 500px;
   }

diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js
@@ -1,15 +1,10 @@
-export default function decorate(block) {
-  const cards = [...block.children];
-
-  // Check for a title row
-  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');
-    wrapper.remove();
-    block.prepend(title);
-  }
+import {
+  createOptimizedPicture,
+  toClassName,
+} from '../../scripts/aem.js';
+import { phoneFormat } from '../../scripts/util.js';
 
+function buildCards(block, cards) {
   const list = document.createElement('div');
   list.classList.add('cards-list');
   block.append(list);
@@ -55,3 +50,117 @@ export default function decorate(block) {
     });
   }
 }
+
+function buildOfficeCards(list, data) {
+  data.forEach((item) => {
+    const cardsItem = document.createElement('div');
+    cardsItem.className = 'cards-item';
+    const cardImage = document.createElement('div');
+    cardImage.className = 'card-image';
+    const image = createOptimizedPicture(item.image, item.location, true);
+    image.style = 'padding-bottom: 75%';
+    const type = document.createElement('p');
+    type.innerText = item.type;
+    cardImage.append(image, type);
+    cardsItem.append(cardImage);
+    const cardBody = document.createElement('div');
+    cardBody.className = 'card-body';
+    const location = document.createElement('h3');
+    location.innerText = item.location;
+    const address = document.createElement('p');
+    address.innerHTML = item.address;
+    address.innerHTML += `<br/>${item.cityStateZip}`;
+    address.innerHTML += `<br/>Office: ${phoneFormat(item.phone)}`;
+    if (item.fax) address.innerHTML += `<br/>Office Fax: ${phoneFormat(item.fax)}`;
+    const contact = document.createElement('p');
+    contact.innerHTML = `<b>${item.contactName}</b>`;
+    contact.innerHTML += `<br/>${item.contactTitle}`;
+    contact.innerHTML += `<br/>${item.contactPhone}`;
+    contact.innerHTML += `<br/>${item.contactEmail}`;
+    const contactBtn = document.createElement('p');
+    contactBtn.className = 'button-container';
+    contactBtn.innerHTML = `<a href="/offices/${toClassName(item.location)}" title="Visit Us" class="button">Visit Us</a>`;
+    cardBody.append(location, address, contact, contactBtn);
+    cardsItem.append(cardBody);
+    list.append(cardsItem);
+  });
+}
+
+function buildAgentCards(list, data) {
+  const { pathname } = window.location;
+  const parts = pathname.split('/');
+  const pageName = parts[parts.length - 1];
+  const filteredData = data.filter((item) => item.office.toLowerCase() === pageName);
+  filteredData.forEach((item) => {
+    const cardsItem = document.createElement('div');
+    cardsItem.className = 'cards-item';
+    const cardImage = document.createElement('div');
+    cardImage.className = 'card-image';
+    const tmpImage = 'https://main--hsf-commonmoves--hlxsites.hlx.page/media/images/no-profile-image.png';
+    const image = createOptimizedPicture(tmpImage, item.name, true);
+    image.style = 'padding-bottom: 75%';
+
+    cardImage.append(image);
+    cardsItem.append(cardImage);
+    const cardBody = document.createElement('div');
+    cardBody.className = 'card-body';
+    const nameLink = document.createElement('a');
+    nameLink.className = 'name';
+    nameLink.href = item.profile;
+    nameLink.innerText = item.name;
+    const title = document.createElement('div');
+    title.className = 'title';
+    title.innerText = item.title;
+    const team = document.createElement('div');
+    team.className = 'teamname';
+    team.innerText = item.team;
+    const phone = document.createElement('div');
+    phone.className = 'phone';
+    phone.innerText = phoneFormat(item.phone);
+    const license = document.createElement('div');
+    license.className = 'license';
+    license.innerText = item.license;
+    const contactBtn = document.createElement('p');
+    contactBtn.className = 'button-container';
+    contactBtn.innerHTML = `<a href="${item.profile}" title="Agent Detail" class="button">Agent Detail</a>`;
+    cardBody.append(nameLink, title, team, phone, license, contactBtn);
+    cardsItem.append(cardBody);
+    list.append(cardsItem);
+  });
+}
+
+async function fetchIndex(url) {
+  const response = await fetch(url);
+  const json = await response.json();
+  return json.data;
+}
+
+export default async function decorate(block) {
+  const cards = [...block.children];
+
+  // Check for a title row
+  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');
+    wrapper.remove();
+    block.prepend(title);
+  }
+  // Check for JSON data
+  if (cards.length === 1 && cards[0].children.length === 1) {
+    const link = cards.shift();
+    const url = new URL(link.querySelector('a[href]').href);
+    const jsonData = await fetchIndex(url.href);
+    link.remove();
+    const list = document.createElement('div');
+    list.classList.add('cards-list');
+    block.append(list);
+    if (url.searchParams.has('sheet')) {
+      buildAgentCards(list, jsonData);
+    } else {
+      buildOfficeCards(list, jsonData);
+    }
+  } else {
+    buildCards(block, cards);
+  }
+}
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -2,6 +2,7 @@
 
 main .section.hero-container {
   padding: 0;
+  max-width: none;
 }
 
 .hero.block {
@@ -60,6 +61,7 @@ main .section.full-width > .hero-wrapper {
 
 .hero.block > div {
   padding: 0 16px;
+  width: 100%;
 }
 
 .hero.block.keep-scale {
@@ -140,6 +142,7 @@ main .section.full-width > .hero-wrapper {
 @media screen and (min-width: 900px) {
   .hero.block > div {
     padding: 0 130px;
+    width: auto;
   }
 }