diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
index 6ab0bcba..07888440 100644
--- a/blocks/cards/cards.css
+++ b/blocks/cards/cards.css
@@ -98,54 +98,14 @@
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-top: auto;
+ margin: 16px 0 0 ;
height: 40px;
display: flex;
- align-self: flex-end;
}
/* Icons variation */
@@ -292,16 +252,6 @@
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
index db840d3c..06f322db 100644
--- a/blocks/cards/cards.js
+++ b/blocks/cards/cards.js
@@ -1,10 +1,15 @@
-import {
- createOptimizedPicture,
- toClassName,
-} from '../../scripts/aem.js';
-import { phoneFormat } from '../../scripts/util.js';
+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);
+ }
-function buildCards(block, cards) {
const list = document.createElement('div');
list.classList.add('cards-list');
block.append(list);
@@ -50,117 +55,3 @@ function buildCards(block, cards) {
});
}
}
-
-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 += `
${item.cityStateZip}`;
- address.innerHTML += `
Office: ${phoneFormat(item.phone)}`;
- if (item.fax) address.innerHTML += `
Office Fax: ${phoneFormat(item.fax)}`;
- const contact = document.createElement('p');
- contact.innerHTML = `${item.contactName}`;
- contact.innerHTML += `
${item.contactTitle}`;
- contact.innerHTML += `
${item.contactPhone}`;
- contact.innerHTML += `
${item.contactEmail}`;
- const contactBtn = document.createElement('p');
- contactBtn.className = 'button-container';
- contactBtn.innerHTML = `Visit Us`;
- 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 = `Agent Detail`;
- 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);
- }
-}