diff --git a/blocks/headshot-list/headshot-list.css b/blocks/headshot-list/headshot-list.css new file mode 100644 index 00000000..f7c1bb39 --- /dev/null +++ b/blocks/headshot-list/headshot-list.css @@ -0,0 +1,124 @@ +/* Headshot List */ +.headshot-list-wrapper { + margin-bottom: var(--spacer-layout-05); +} + +.headshot-list-wrapper:last-of-type { + margin-bottom: 0; +} + +.headshot-list__item { + display: flex; + flex-direction: row; + align-items: flex-start; + max-width: var(--text-max-container); + gap: var(--spacer-element-08); + margin-bottom: var(--spacer-layout-02); +} + +.headshot-list__item:last-child { + margin-bottom: 0; +} + +.headshot-list__image { + width: var(--spacer-layout-05); +} + +.headshot-list__image img { + width: var(--spacer-layout-05); + height: var(--spacer-layout-05); + object-fit: cover; + border-radius: 50%; + border: 1px solid var(--neutral-sand); +} + +.headshot-list__content { + max-width: 552px; + width: 75%; +} + +.headshot-list__content .headshot-list__title { + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-18); + font-style: normal; + font-weight: 300; + margin: 0; +} + +.headshot-list__content h4 { + font-family: var(--sans-serif-font-regular); + font-size: var(--font-size-16); + font-style: normal; + font-weight: 300; + margin: var(--spacer-element-03) 0 0; +} + +.headshot-list__content p { + font-size: var(--font-size-16); + margin: var(--spacer-element-07) 0 0 0; +} + +.headshot-list__content hr { + display: block; + margin: var(--spacer-element-08) 0 0; + border: 0; + height: 1px; + width: 100%; + background-color: var(--neutral-sand); +} + +.headshot-list__content .headshot-list__socials { + margin-top: var(--spacer-element-05); +} + +.headshot-list__content .headshot-list__socials a { + display: inline-block; + margin-right: var(--spacer-element-05); +} + +.headshot-list__content .headshot-list__socials span.icon { + display: block; + position: relative; + width: 40px; + height: 40px; + border: solid 1px var(--neutral-sand); + border-radius: 50%; + background-color: var(--neutral-white); + background-image: var(--gradient-to-right-white); + background-position: 0 0; + background-size: 200% auto; + transition: all .3s ease-in-out; +} + +.headshot-list__content .headshot-list__socials a:hover span.icon, +.headshot-list__content .headshot-list__socials a:active span.icon { + background-image: var(--gradient-to-right); + background-position: 100% 0; +} + +.headshot-list__content .headshot-list__socials span.icon svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.headshot-list__content .headshot-list__socials a:hover span.icon svg *, +.headshot-list__content .headshot-list__socials a:active span.icon svg * { + fill: var(--neutral-white); +} + +/* Desktop */ +@media only screen and (min-width: 1200px) { + .headshot-list-wrapper { + margin-bottom: var(--spacer-layout-06); + } + + .headshot-list__item { + margin-bottom: var(--spacer-layout-04); + } + + .headshot-list__content .headshot-list__title { + font-size: var(--font-size-24); + } +} diff --git a/blocks/headshot-list/headshot-list.js b/blocks/headshot-list/headshot-list.js new file mode 100644 index 00000000..a6789cbd --- /dev/null +++ b/blocks/headshot-list/headshot-list.js @@ -0,0 +1,19 @@ +import { lookupPeople, createHeadshotList } from '../../scripts/scripts.js'; + +export default async function decorate(block) { + [...block.children].forEach(async (element) => { + const pathnames = [...element.querySelectorAll('a')].map((a) => { + const url = new URL(a.href); + if (url.hostname.endsWith('.page') || url.hostname.endsWith('.live') || url.hostname.endsWith('merative.com') || url.hostname.startsWith('localhost')) return url.pathname; + return a.href; + }); + + block.textContent = ''; + const pageList = await lookupPeople(pathnames); + if (pageList.length) { + pageList.forEach((row) => { + block.append(createHeadshotList(row, 'headshot-list__item')); + }); + } + }); +} diff --git a/blocks/leadspace/leadspace.css b/blocks/leadspace/leadspace.css index ad2574dc..2aca4acf 100644 --- a/blocks/leadspace/leadspace.css +++ b/blocks/leadspace/leadspace.css @@ -52,6 +52,7 @@ } .leadspace h4:first-of-type { + font-family: var(--sans-serif-font-medium); font-size: var(--font-size-11); letter-spacing: .2em; line-height: var(--line-height-120); @@ -439,6 +440,7 @@ main div.leadspace-wrapper { .leadspace:not(.document) > div:first-child > div:nth-child(1) { width: 334px; + padding: var(--spacer-layout-05) 0; } .leadspace.brand-logo > div:first-child > div:nth-child(1) { @@ -582,7 +584,7 @@ main div.leadspace-wrapper { .leadspace:not(.document) > div:first-child > div:nth-child(1) { width: 552px; - padding: 96px 0; + padding: var(--spacer-layout-06) 0; margin: auto auto auto 0; } diff --git a/blocks/marketo/marketo.css b/blocks/marketo/marketo.css index b925dd1f..39020c0d 100644 --- a/blocks/marketo/marketo.css +++ b/blocks/marketo/marketo.css @@ -2,14 +2,6 @@ /* stylelint-disable selector-class-pattern */ /* stylelint-disable no-descending-specificity */ -.section.marketo-container .default-content-wrapper h2 { - margin-bottom: 80px; -} - -.section.marketo-container .default-content-wrapper h3 { - margin-bottom: var(--spacer-layout-02) -} - .section.marketo-container.multiple .marketo-wrapper { display: flex; flex-direction: column; @@ -60,53 +52,6 @@ margin: 0 0 var(--spacer-element-10); } -/* Read more/less button */ -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more { - border-bottom: 1px solid var(--neutral-sand); -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - gap: var(--spacer-element-03); - font-weight: 700; - margin-bottom: var(--spacer-layout-02); - cursor: pointer; -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a:hover, -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a:active { - background: transparent; - color: var(--neutral-carbon); - /* stylelint-disable-line */ - -webkit-text-fill-color: unset;} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > a { - margin-top: var(--spacer-layout-06); -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > a::after { - content: ''; - width: 16px; - height: 16px; - background: url('../../icons/arrow-up-black.svg') no-repeat; - transform: rotate(180deg); -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > a::after { - transform: unset; -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more > p:first-of-type ~ *:not(a) { - display: none; -} - -.section.marketo-container .marketo-wrapper .default-content-wrapper.show-more.open > p:first-of-type ~ *:not(a) { - display: revert; -} - .marketo { width: 100%; } @@ -129,6 +74,7 @@ letter-spacing: .01em !important; line-height: 160% !important; width: 100% !important; + margin: 0 0 var(--spacer-element-07) 0; } .mktoForm .mktoFieldWrap .mktoHtmlText p { @@ -140,6 +86,10 @@ width: 100% !important; } +.mktoForm .mktoFieldWrap .mktoHtmlText a { + padding: 0 !important; +} + .mktoForm .mktoFormRow { clear: both !important; } @@ -162,7 +112,6 @@ .mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText small { float: right; font-size: var(--font-size-16); - margin-top: 37px; text-align: right !important; } @@ -170,7 +119,6 @@ -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; - background: var(--primary-purple) !important; border: 0 !important; border-radius: 40px !important; box-sizing: border-box !important; @@ -187,17 +135,17 @@ margin: 37px 0; max-height: 62px !important; padding: 11px 16px 11px 24px !important; - transition: all .4s ease-in-out !important; width: auto !important; + background-image: var(--gradient-to-right); + background-position: 0 0; + background-size: 200% auto; + transition: all .4s ease-in-out; } .mktoForm .mktoButtonWrap .mktoButton:active, .mktoForm .mktoButtonWrap .mktoButton:hover { - /* background-image: -webkit-gradient(linear, right top, left top, from(#fa1e32), to(var(--primary-purple))) !important; */ - background-image: linear-gradient(270deg, #fa1e32, var(--primary-purple)) !important; - - /* -webkit-transition: all .2s ease-in-out !important; */ - transition: all .2s ease-in-out !important; + border: 2px solid transparent; + background-position: 96% 0; } .mktoForm .mktoButtonWrap .mktoButton::after { @@ -230,7 +178,11 @@ } .mktoForm .mktoFormCol .mktoLabel { - padding-bottom: var(--spacer-layout-01) !important; + padding-bottom: var(--spacer-element-04) !important; +} + +.mktoForm .mktoGutter.mktoHasWidth { + height: auto; } .mktoForm .mktoRequiredField .mktoLabel::after { @@ -244,7 +196,8 @@ .mktoForm .mktoTextField, .mktoForm select.mktoField, .mktoForm textarea.mktoField { - appearance: none !important; + /* stylelint-disable property-no-vendor-prefix */ + -webkit-appearance: none; background: var(--neutral-bone) !important; border-color: var(--neutral-carbon) !important; border-width: 0 0 1px !important; @@ -396,6 +349,9 @@ input[type=radio] { opacity: 1 !important; height: 20px !important; width: 20px !important; + flex-basis: 20px; + flex-shrink: 0; + cursor: pointer; } .mktoForm select.mktoField[multiple] { @@ -416,8 +372,9 @@ input[type=radio] { display: flex; width: auto !important; align-items: center; - padding: 0.3em; - float: left; + padding: 0 !important; + margin: var(--spacer-element-07) 0; + float: left !important; } .mktoForm .mktoRadioList > label { @@ -426,7 +383,7 @@ input[type=radio] { font-size: var(--font-size-16) !important; letter-spacing: 0.16px; line-height: 160% !important; - margin: 0 32px 0 8px !important; + margin: 0 var(--spacer-element-07) 0 var(--spacer-element-04) !important; } /* Media queries */ diff --git a/blocks/marketo/marketo.js b/blocks/marketo/marketo.js index 47492c66..dac6772c 100644 --- a/blocks/marketo/marketo.js +++ b/blocks/marketo/marketo.js @@ -41,8 +41,6 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { return false; }); - // const conReasonField = document.querySelector('#contactmeHowcanwehelp'); - // const noButtonReasons = ['Customer Support']; let hasTrackedFormLoad = false; window.MktoForms2.whenReady((f) => { if (!hasTrackedFormLoad && window._satellite) { @@ -51,19 +49,6 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { }); hasTrackedFormLoad = true; } - // Keeping the below code that I got from the original site. - // function noMoreButton() { - // const reason = conReasonField.value; - // if (noButtonReasons.includes(reason)) { - // f.submittable(false); - // document.querySelector('.mktoForm .mktoButtonRow').style.display = 'none'; - // return false; - // } - // f.submittable(true); - // document.querySelector('.mktoForm .mktoButtonRow').style.display = 'block'; - // return false; - // } - // if (conReasonField) conReasonField.addEventListener('change', noMoreButton); f.addHiddenFields({ RBN_Referral_URL_Cargo__c: document.URL, @@ -90,64 +75,40 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { }; export default function decorate(block) { + // Read block configuration const blockConfig = readBlockConfig(block); const marketoId = placeholders.marketoid; + + // Extract form configuration details + const formTitle = blockConfig['form-title']; const formId = blockConfig['form-id']; const successUrl = blockConfig['success-url']; - const section = block.closest('.section.marketo-container'); - - // Handle headings in the section - if (section.children.length > 0) { - section.classList.add('multiple'); - } - - // Move heading to its own wrapper - const h2 = section.querySelector('h2:first-of-type, h3:first-of-type'); - if (h2 && h2.parentElement) { - const h2Wrapper = h2.parentElement; - const clonedWrapper = h2Wrapper.cloneNode(); - clonedWrapper.classList.add('heading'); - clonedWrapper.appendChild(h2); - section.prepend(clonedWrapper); - if (h2Wrapper.children.length === 0) { - h2Wrapper.parentElement.removeChild(h2Wrapper); - } - } - - // Move remaining content to marketo wrapper - section.querySelectorAll('.marketo-wrapper > div:not(.marketo)').forEach((div) => { - if (div.querySelector('h6')) { - div.classList.add('spacious'); - } - }); - - // Add read more/less link to default content - const defaultContent = section.querySelectorAll('.default-content-wrapper:not(.heading)'); - defaultContent.forEach((wrapper) => { - if (wrapper.querySelectorAll(':scope > p:first-of-type ~ *').length > 0) { - const showMore = createTag('a', { role: 'button' }); - showMore.textContent = 'Read more'; - showMore.addEventListener('click', () => { - wrapper.classList.toggle('open'); - showMore.textContent = wrapper.classList.contains('open') ? 'Read less' : 'Read more'; - }); - wrapper.classList.add('show-more'); - wrapper.appendChild(showMore); - } - }); if (formId && marketoId) { + // Create the form element const formElement = createTag('form', { id: `mktoForm_${formId}` }); block.textContent = ''; + + // Create and append form title (if available) + if (formTitle) { + const titleElement = createTag('h2', { id: `${formTitle.toLowerCase()}` }); + titleElement.textContent = formTitle; + block.append(titleElement); + } + + // Append the form element block.append(formElement); + // Set up an observer to embed the Marketo form when block is in view const observer = new IntersectionObserver((entries) => { if (entries.some((e) => e.isIntersecting)) { + // Embed the Marketo form embedMarketoForm(marketoId, formId, successUrl); observer.disconnect(); } }); + + // Start observing the block observer.observe(block); - // window.setTimeout(() => embedMarketoForm(marketoId, formId, successUrl), 3000); } } diff --git a/scripts/scripts.js b/scripts/scripts.js index 81d58789..cd9a2ae3 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -283,6 +283,33 @@ export async function lookupBlogs(pathnames) { return (result); } +/** + * Gets details about people that are indexed + * @param {Array} pathnames list of pathnames + */ + +export async function lookupPeople(pathnames) { + if (!window.peopleIndex) { + const resp = await fetch(`${window.hlx.codeBasePath}/people/query-index.json`); + const json = await resp.json(); + const lookup = {}; + json.data.forEach((row) => { + lookup[row.path] = row; + if (row.image.startsWith('/default-meta-image.png')) { + row.image = getRandomDefaultImage(); + } else { + row.image = `/${window.hlx.codeBasePath}${row.image}`; + } + }); + window.peopleIndex = { + data: json.data, + lookup, + }; + } + const result = pathnames.map((path) => window.peopleIndex.lookup[path]).filter((e) => e); + return (result); +} + /** * Fetches and transforms data from a JSON file * @param {string} path - The path to the JSON file @@ -498,6 +525,85 @@ export function createDocumentCard(row, styles) { return (card); } +/** + * Creates a Headshot List using a JSON object and style associated with the List + * @param {Object} row JSON Object typically coming from an index array item + * @param {Array} styles Class names that needs to be added to the List root div + */ +export function createHeadshotList(row, styles) { + const list = document.createElement('div'); + if (styles) list.classList.add(styles); + + // Add image + if (row.image !== '0' && row.title !== '0') { + const listImage = document.createElement('div'); + listImage.classList.add('headshot-list__image'); + listImage.appendChild(createOptimizedPicture(row.image, row.title)); + list.prepend(listImage); + } + + // Add content + const listContent = document.createElement('div'); + listContent.classList.add('headshot-list__content'); + + if (row.title) { + listContent.innerHTML += `
${row.description}
`; + } + + listContent.innerHTML += '