Agent profile block added

blocks/agent-profile/agent-profile.css

@@ -0,0 +1,140 @@
+.agent-profile.block {
+  display: flex;
+  padding: 0 1rem;
+}
+
+main .section.agent-profile-container .agent-profile-wrapper {
+  word-break: break-word;
+}
+
+.agent-profile.block .profile-image img {
+  width: 9.375rem;
+  height: 11.875rem;
+}
+
+.agent-profile.block .profile-content .contact-me {
+  margin-top: 1.5rem;
+  display: none;
+}
+
+.agent-profile.block .profile-content {
+  padding-left: 1.5rem;
+  font-size: var(--body-font-size-s);
+}
+
+.agent-profile.block .profile-content .name {
+  font-size: var(--body-font-size-xl);
+  line-height: var(--line-height-m);
+  margin-bottom: 0.5rem;
+}
+
+.agent-profile.block .profile-content .designation,
+.agent-profile.block .profile-content .license-number {
+  font-size: var(--body-font-size-xs);
+  text-transform: uppercase;
+  margin-bottom: 0.25rem;
+}
+
+.agent-profile.block .profile-content .social ul {
+  display: flex;
+  margin-top: 1rem;
+  opacity: .5;
+}
+
+.agent-profile.block .profile-content .social li {
+  margin-right: 0.5rem;
+}
+
+.agent-profile.block .profile-content .email a,
+.agent-profile.block .profile-content .website a {
+  font-size: var(--body-font-size-xs);
+  color: var(--black);
+  text-transform: lowercase;
+  word-wrap: break-word;
+}
+
+.agent-profile.block .profile-content .contact-me 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;
+}
+
+.agent-profile.block .profile-content .contact-me a:hover {
+  color: var(--primary-light);
+  background-color: var(--primary-color);
+}
+
+.agent-profile.block .profile-content .website,
+.agent-profile.block .profile-content .email {
+  margin-bottom: 0.25rem;
+}
+
+.agent-profile.block .profile-content .phone {
+  font-size: var(--body-font-size-xs);
+}
+
+.agent-profile.block .profile-content .phone li {
+  margin-bottom: 0.25rem;
+}
+
+@media (min-width: 600px) {
+  .agent-profile.block .profile-content .contact-me {
+    display: block;
+  }
+}
+
+@media (min-width: 1200px) {
+  main .section.agent-profile-container {
+    position: relative;
+  }
+
+  main .section.agent-profile-container .agent-profile-wrapper {
+    position: absolute;
+    display: flex;
+    left: auto;
+    width: 34rem;
+    right: 0;
+    bottom: 4.625rem;
+    padding: 1.875rem 1.875rem 0;
+    z-index: 1;
+    background-color: var(--white);
+  }
+
+  .agent-profile.block {
+    position: relative;
+    line-height: var(--line-height-s);
+  }
+
+  .agent-profile.block .profile-image img {
+    width: 13.125rem;
+    height: 15.625rem;
+  }
+
+  .agent-profile.block .profile-content .phone {
+    font-size: var(--body-font-size-s);
+    margin-top: 2px;
+    line-height: var(--line-height-m);
+  }
+
+  .agent-profile.block .profile-content .email a,
+  .agent-profile.block .profile-content .website a {
+    font-size: var(--body-font-size-xs);
+  }
+
+  .agent-profile.block .profile-content {
+    padding-left: 1.875rem;
+  }
+
+  .agent-profile.block .profile-content .designation,
+  .agent-profile.block .profile-content .license-number {
+    margin-bottom: unset;
+  }
+
+  .agent-profile.block .profile-content .phone li {
+    margin-bottom: unset;
+  }
+}

blocks/agent-profile/agent-profile.js

@@ -0,0 +1,119 @@
+import { decorateIcons, getMetadata } from '../../scripts/aem.js';
+import {
+  a, div, h1, ul, li, img, span,
+} from '../../scripts/dom-helpers.js';
+
+const getPhoneDiv = () => {
+  let phoneDiv;
+  let phoneUl;
+
+  if (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')));
+  }
+
+  if (phoneUl) {
+    phoneDiv = div({ class: 'phone' });
+    phoneDiv.append(phoneUl);
+    return phoneDiv;
+  }
+
+  return phoneDiv;
+};
+
+const getWebsiteDiv = () => {
+  let websiteDiv;
+  const websiteUrl = getMetadata('website');
+
+  if (websiteUrl) {
+    const text = 'my website';
+    const anchor = a({ href: websiteUrl, title: text, 'aria-label': text }, text);
+    websiteDiv = div({ class: 'website' }, anchor);
+  }
+
+  return websiteDiv;
+};
+
+const getEmailDiv = () => {
+  let emailDiv;
+  const agentEmail = getMetadata('email');
+
+  if (agentEmail) {
+    const anchor = a({ href: `mailto:${agentEmail}`, title: agentEmail, 'aria-label': agentEmail }, agentEmail);
+    emailDiv = div({ class: 'email' }, anchor);
+  }
+
+  return emailDiv;
+};
+
+const getImageDiv = () => {
+  const agentPhoto = getMetadata('photo');
+  return div({ class: 'profile-image' }, img({ src: agentPhoto, alt: getMetadata('name'), loading: 'lazy' }));
+};
+
+const getSocialDiv = () => {
+  const socialDiv = div({ class: 'social' });
+  let socialUl;
+
+  ['facebook', 'instagram', 'linkedin'].forEach((x) => {
+    const url = getMetadata(x);
+    socialUl = socialUl || ul({});
+    if (url) {
+      const socialLi = li({}, a({
+        href: url, class: x, title: x, 'aria-label': x,
+      }, span({ class: `icon icon-${x}` })));
+      socialUl.append(socialLi);
+    }
+  });
+
+  if (socialUl) {
+    socialDiv.append(socialUl);
+    return socialDiv;
+  }
+
+  return null;
+};
+
+export default async function decorate(block) {
+  const profileImage = getImageDiv();
+  const profileContent = div({ class: 'profile-content' },
+    div({ class: 'name' }, h1({}, getMetadata('name'))),
+    div({ class: 'designation' }, getMetadata('designation')),
+  );
+
+  const licenseNumber = getMetadata('license-number');
+  if (licenseNumber) {
+    profileContent.append(div({ class: 'license-number' }, `LIC# ${licenseNumber}`));
+  }
+
+  const emailDiv = getEmailDiv();
+  if (emailDiv) {
+    profileContent.append(emailDiv);
+  }
+
+  const websiteDiv = getWebsiteDiv();
+  if (websiteDiv) {
+    profileContent.append(websiteDiv);
+  }
+
+  const phoneDiv = getPhoneDiv();
+  if (phoneDiv) {
+    profileContent.append(phoneDiv);
+  }
+
+  const contactMeText = 'Contact Me';
+  profileContent.append(div({ class: 'contact-me' },
+    a({ href: '#', title: contactMeText, 'aria-label': contactMeText }, contactMeText)));
+
+  const socialDiv = getSocialDiv();
+  if (socialDiv) {
+    profileContent.append(socialDiv);
+  }
+  decorateIcons(profileContent);
+  block.replaceChildren(profileImage, profileContent);
+}