diff --git a/blocks/agent-about/agent-about.css b/blocks/agent-about/agent-about.css index 49b456d0..29fbbb77 100644 --- 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 index 80949538..fabeecae 100644 --- 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-profile/agent-profile.js b/blocks/agent-profile/agent-profile.js index 61f963b7..191b685f 100644 --- 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.js b/blocks/agent-transactions/agent-transactions.js index e2e354a8..d7e13c00 100644 --- a/blocks/agent-transactions/agent-transactions.js +++ b/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')) {