From 38e2fef322fd1b5d10cf553a73e17768573deeee Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Mon, 22 Apr 2024 19:11:55 +0530 Subject: [PATCH 1/5] updated Email Icons for Email Hyperlinks in Headshot Block --- blocks/headshots/headshots.js | 26 +++++++++++++++++++++++++- icons/email-solid.svg | 3 +++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 icons/email-solid.svg diff --git a/blocks/headshots/headshots.js b/blocks/headshots/headshots.js index 5f93fdac..760a0f4e 100644 --- a/blocks/headshots/headshots.js +++ b/blocks/headshots/headshots.js @@ -9,6 +9,7 @@ const socialLinks = Object.freeze({ export default function decorate(block) { const headshotElements = block.querySelectorAll(':scope > div > div'); headshotElements.forEach((headshot) => { + // console.log(headshot); headshot.classList.add('headshot-item'); const picture = createTag('div', { class: 'headshot-avatar' }); picture.appendChild(headshot.querySelector('p:first-child')); @@ -18,11 +19,34 @@ export default function decorate(block) { headshot.appendChild(details); // headshot links const linkContainer = createTag('div', { class: 'headshot-links' }); + + // Check if there's an email ID inside an h5 element inside details + const emailHeaders = details.querySelectorAll('h5'); + emailHeaders.forEach((emailHeader) => { + // Check if the h5 element contains only text (no child elements) + const emailContent = ( + emailHeader.childNodes.length === 1 + && emailHeader.childNodes[0].nodeType === Node.TEXT_NODE + ) ? emailHeader.textContent.trim() : null; + if (emailContent) { + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Regular expression pattern to match an email address + if (emailPattern.test(emailContent)) { + // console.log(emailContent); + const emailLink = document.createElement('a'); + emailLink.href = `mailto:${emailContent}`; + emailLink.innerHTML = ''; + emailLink.setAttribute('aria-label', 'Check-in via email'); + linkContainer.appendChild(emailLink); + emailHeader.remove(); + } + } + }); + const links = [...details.querySelectorAll('a')].map((anchor) => { const socialEntry = Object.entries(socialLinks).find( ([, { url }]) => anchor.href.indexOf(url) >= 0, ); - anchor.innerHTML = ``; + anchor.innerHTML = ``; const label = socialEntry ? socialEntry[1].label : 'Open profile'; anchor.setAttribute('aria-label', label); return anchor.parentElement; diff --git a/icons/email-solid.svg b/icons/email-solid.svg new file mode 100644 index 00000000..02f1cd08 --- /dev/null +++ b/icons/email-solid.svg @@ -0,0 +1,3 @@ + + + From 043194552fcea040b9c0565ae9269f2e80111038 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Tue, 23 Apr 2024 12:04:50 +0530 Subject: [PATCH 2/5] Removed underline from mail icon --- blocks/headshots/headshots.js | 8 ++++++-- styles/styles.css | 4 ++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/blocks/headshots/headshots.js b/blocks/headshots/headshots.js index 760a0f4e..1f88f014 100644 --- a/blocks/headshots/headshots.js +++ b/blocks/headshots/headshots.js @@ -9,7 +9,6 @@ const socialLinks = Object.freeze({ export default function decorate(block) { const headshotElements = block.querySelectorAll(':scope > div > div'); headshotElements.forEach((headshot) => { - // console.log(headshot); headshot.classList.add('headshot-item'); const picture = createTag('div', { class: 'headshot-avatar' }); picture.appendChild(headshot.querySelector('p:first-child')); @@ -31,7 +30,6 @@ export default function decorate(block) { if (emailContent) { const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Regular expression pattern to match an email address if (emailPattern.test(emailContent)) { - // console.log(emailContent); const emailLink = document.createElement('a'); emailLink.href = `mailto:${emailContent}`; emailLink.innerHTML = ''; @@ -46,11 +44,17 @@ export default function decorate(block) { const socialEntry = Object.entries(socialLinks).find( ([, { url }]) => anchor.href.indexOf(url) >= 0, ); + anchor.innerHTML = ``; const label = socialEntry ? socialEntry[1].label : 'Open profile'; anchor.setAttribute('aria-label', label); + + // Remove all classes from the anchor element + anchor.classList.remove('tertiary', 'button'); + return anchor.parentElement; }); + linkContainer.append(...links); details.appendChild(linkContainer); decorateIcons(linkContainer); diff --git a/styles/styles.css b/styles/styles.css index d8e2b7f9..d532fc76 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -920,6 +920,10 @@ button { padding: 11px var(--spacer-element-07); } +.button-container a.has-icon { + border-bottom: 0 !important; +} + .button-container a.has-icon.primary, .button-container a.has-icon.secondary { padding: 11px var(--spacer-element-05) 11px var(--spacer-element-07); From 1b325589a5f1a7989d002516c64e94137317504b Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Tue, 30 Apr 2024 12:30:42 +0530 Subject: [PATCH 3/5] Updated Email Icon width --- icons/email-solid.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/icons/email-solid.svg b/icons/email-solid.svg index 02f1cd08..62aa6f1d 100644 --- a/icons/email-solid.svg +++ b/icons/email-solid.svg @@ -1,3 +1,3 @@ - - + + From 37925f51d73a6d007c0528430c11eeb1241d5856 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Fri, 3 May 2024 18:26:00 +0530 Subject: [PATCH 4/5] Line filled entire div --- blocks/headshots/headshots.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/headshots/headshots.css b/blocks/headshots/headshots.css index 5cc8cd63..10d2946b 100644 --- a/blocks/headshots/headshots.css +++ b/blocks/headshots/headshots.css @@ -40,6 +40,10 @@ main .headshots .headshot-item .headshot-avatar img { aspect-ratio: 1 / 1; } +main .headshots .headshot-item .headshot-details { + flex:1 0 auto; +} + main .headshots .headshot-item .headshot-links { display: flex; flex-flow: row nowrap; From cdafba9ede31ff1582c7d79de8c7716d30d65eef Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Tue, 7 May 2024 13:13:18 +0530 Subject: [PATCH 5/5] Fixed issue with element not wrapping properly. --- blocks/headshots/headshots.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/headshots/headshots.css b/blocks/headshots/headshots.css index 10d2946b..6ad109c3 100644 --- a/blocks/headshots/headshots.css +++ b/blocks/headshots/headshots.css @@ -41,7 +41,7 @@ main .headshots .headshot-item .headshot-avatar img { } main .headshots .headshot-item .headshot-details { - flex:1 0 auto; + flex: 1 1 auto; } main .headshots .headshot-item .headshot-links {