Add data provided Offices and Agents pages

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

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

blocks/offices/offices.css

@@ -0,0 +1,128 @@
+.offices.block {
+  padding-bottom: 32px;
+}
+
+.offices.block .title {
+  padding: 2em 0;
+}
+
+.offices.block .cards-list .cards-item {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  color: #2a2223;
+}
+
+.offices.block.agents .cards-list .cards-item {
+  display: inline-block;
+  width: 100%;
+  border-bottom: 1px solid var(--grey);
+  padding: 16px 0;
+}
+
+.offices.block.agents .cards-list .cards-item:first-of-type {
+  border-top: 1px solid var(--grey);
+}
+
+.offices.block .cards-list .cards-item .card-image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.offices.block.agents .cards-list .cards-item .card-image {
+  display: inline-block;
+  width: 33%;
+}
+
+.offices.block .cards-list .cards-item .card-image picture {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.offices.block .cards-list .cards-item .card-image img {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  object-fit: cover;
+  object-position: center;
+  width: 100%;
+  height: 100%;
+}
+
+.offices.block.agents .cards-list .cards-item .card-body {
+  display: inline-block;
+  width: 66%;
+  padding-left: 15px;
+}
+
+.offices.block.agents .cards-list .cards-item .card-body .name {
+  font-family: var(--font-family-secondary);
+  text-decoration: none;
+  color: #2a2223;
+}
+
+.offices.block.agents .cards-list .cards-item .card-body .title {
+  padding: 1em 0;
+  font-size: var(--body-font-size-xxs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-m);
+  letter-spacing: var(--letter-spacing-reg);
+  text-transform: uppercase;
+}
+
+.offices.block.agents .cards-list .cards-item .card-body .teamname {
+  font-family: var(--font-family-primary);
+  font-size: var(--body-font-size-xxs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 130%;
+}
+
+.offices.block.agents .cards-list .cards-item .card-body div {
+  font-family: var(--font-family-primary);
+  font-size: var(--body-font-size-xxs);
+  line-height: var(--line-height-s);
+  margin: 8px 0;
+}
+
+.offices.block .cards-list .cards-item .card-body p {
+  font-size: var(--body-font-size-xs);
+  letter-spacing: var(--letter-spacing-xs);
+  margin: 8px 0 24px;
+}
+
+.offices.block .cards-list .cards-item .card-body .button-container {
+  margin-top: auto;
+  height: 40px;
+}
+
+@media (min-width: 900px) {
+  .offices.block.agents .cards-list .cards-item,
+  .offices.block.agents .cards-list .cards-item:first-of-type {
+    border: none;
+  }
+}
+
+@media (min-width: 900px) {
+  .offices.block .cards-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+
+  .offices.block .cards-list .cards-item {
+    margin-bottom: 0;
+  }
+
+  .offices.block .cards-list .cards-item .card-body {
+    flex-grow: 1;
+  }
+
+  .offices.block .cards-list .cards-item .card-body p {
+    font-size: var(--body-font-size-s);
+  }
+}