diff --git a/blocks/header/header.css b/blocks/header/header.css index a2c79a6..f01d22a 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -340,27 +340,36 @@ header nav { content: var(--icon-x); } +.mobile-header-flex-container { + display: flex; + justify-content: space-between; + width: 100%; +} + .mobile-nav-wrapper { background: var(--c-extra-dark); + height: 427px; left: 0; opacity: 0; - min-height: 420px; position: absolute; - top: -400px; - transition: all 0.3s ease-in-out; + top: -500px; visibility: hidden; width: 100%; - z-index: 2; + z-index: -1; } .mobile-nav-list--expanded { - height: 100%; - min-height: 640px; + height: calc(100vh + 400px); overflow-y: scroll; } -.mobile-nav { - height: auto; +.mobile-nav-list--expanded-last { + height: calc(100vh - 116px); + overflow-y: scroll; +} + +.mobile-nav-list--expanded-last .expert-cta { + margin-bottom: 116px; } .mobile-nav-open { diff --git a/blocks/header/header.js b/blocks/header/header.js index c29525a..b90e69e 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -70,6 +70,7 @@ const toggleHamburgerNav = (hamburger, mobileNav) => { mobileNav.blur(); hamburger.setAttribute('aria-label', 'Open Mobile Navigation'); mobileNav.classList.remove('mobile-nav-list--expanded'); + mobileNav.classList.remove('mobile-nav-list--expanded-last'); const mobileNavAccordions = document.querySelectorAll('.nav-mobile-list-level-1-item-toggle'); mobileNavAccordions.forEach((accordion) => { resetAllMobileNavAccordion(accordion); @@ -383,11 +384,15 @@ export default async function decorate(block) { const brandLogo = ``; brandWrapperMobile.innerHTML = brandLogo; decorateIcons(brandWrapperMobile, '', 'Pricefx'); - mobileHeader.append(brandWrapperMobile); const mobileNavControlWrapper = document.createElement('div'); mobileNavControlWrapper.classList.add('mobile-nav-control-wrapper'); - mobileHeader.append(mobileNavControlWrapper); + + const headerFlexContainer = document.createElement('div'); + headerFlexContainer.classList.add('mobile-header-flex-container'); + headerFlexContainer.append(brandWrapperMobile); + headerFlexContainer.append(mobileNavControlWrapper); + mobileHeader.append(headerFlexContainer); // Render Mobile Header Search const searchWrapperMobile = document.createElement('div'); @@ -534,12 +539,17 @@ export default async function decorate(block) { mobileNavAccordions.forEach((accordion) => { accordion.addEventListener('click', () => { toggleMobileNavAccordion(accordion); - navMobileWrapper.classList.add('mobile-nav-list--expanded'); const hasExpanded = [...mobileNavAccordions].some( (mobileAccordion) => mobileAccordion.getAttribute('aria-expanded') === 'true', ); + if ([...mobileNavAccordions].indexOf(accordion) === mobileNavAccordions.length - 1) { + navMobileWrapper.classList.add('mobile-nav-list--expanded-last'); + } else { + navMobileWrapper.classList.add('mobile-nav-list--expanded'); + } if (!hasExpanded) { navMobileWrapper.classList.remove('mobile-nav-list--expanded'); + navMobileWrapper.classList.remove('mobile-nav-list--expanded-last'); } }); }); diff --git a/blocks/iframe/iframe.css b/blocks/iframe/iframe.css index 1fdd201..acdd612 100644 --- a/blocks/iframe/iframe.css +++ b/blocks/iframe/iframe.css @@ -1,26 +1,117 @@ +/* GENERAL STYLES */ .iframe.block { - margin: 20px auto; - text-align: center; + margin: 20px auto; + text-align: center; } -.iframe.container { - height: 100%; - width: 100%; - overflow: hidden; - position: relative; - display: inline-block; +.badge__wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0 auto -14px; + max-width: 880px; + position: relative; + width: 100%; + z-index: 1; } -.iframe.noheight { - height: 0; - padding-bottom: 56.25%; +.badge__container { + margin: 0 3px; + max-width: 93px; + width: 100%; } -.iframe iframe { - border: none; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; +.iframe__wrapper { + display: flex; + justify-content: center; + margin: 0 auto; + max-width: 1262px; + padding: 36px 0 0 36px; + position: relative; + width: 100%; +} + +.iframe__wrapper::after { + background: var(--c-dark); + content: ''; + height: 100%; + left: 0; + opacity: 0.1511; + position: absolute; + top: 0; + width: 100%; + z-index: 0; +} + +.frame__wrapper--with-badge.iframe__wrapper::after { + height: calc(100% + 58px); + top: -58px; +} + +.iframe__container { + padding: 0 36px 36px 0; + position: relative; + max-width: 636px; + width: 100%; + z-index: 1; +} + +.iframe__container iframe { + border: none; + display: block; + min-height: 600px; + height: auto; + overflow: hidden; + width: 100%; +} + +.iframe__left-column, +.iframe__wrapper--three-iframes .iframe__left-column .iframe__container { + max-width: 716px; + width: 100%; +} + +.iframe__wrapper--three-iframes .iframe__left-column .iframe__container iframe { + min-height: 334px; +} + +.iframe__right-column, +.iframe__wrapper--three-iframes .iframe__right-column .iframe__container { + max-width: 510px; + width: 100%; +} + +.iframe__wrapper--three-iframes .iframe__right-column .iframe__container iframe { + min-height: 704px; +} + +/* RESPONSIVE STYLES */ +@media (width <= 850px) { + .iframe__wrapper { + align-items: center; + flex-direction: column; + padding: 36px 36px 0; + } + + .iframe__container { + max-width: none !important; + padding: 0 0 36px; + } + + .iframe__left-column, + .iframe__wrapper--three-iframes .iframe__left-column .iframe__container, + .iframe__right-column, + .iframe__wrapper--three-iframes .iframe__right-column .iframe__container { + max-width: none !important; + } +} + +@media (width <= 560px) { + .iframe__wrapper { + padding: var(--spacing-xsmall) var(--spacing-xsmall) 0; + } + + .iframe__container { + padding: 0 0 var(--spacing-xsmall); + } } diff --git a/blocks/iframe/iframe.js b/blocks/iframe/iframe.js index 654679d..e146bb3 100644 --- a/blocks/iframe/iframe.js +++ b/blocks/iframe/iframe.js @@ -1,26 +1,137 @@ +// Render badges based on authored field +const renderBadges = (badges) => { + const fragment = document.createDocumentFragment(); + badges.forEach((badge) => { + const badgeContainer = document.createElement('div'); + badgeContainer.classList.add('badge__container'); + const badgeLink = document.createElement('a'); + badgeLink.title = badge.textContent; + badgeLink.href = 'https://www.g2.com/products/pricefx/reviews?utm_source=rewards-badge'; + const badgeImg = document.createElement('img'); + badgeImg.decoding = 'async'; + badgeImg.alt = badge.textContent; + badgeImg.dataset.src = badge.href; + badgeImg.src = badge.href; + badgeImg.loading = 'lazy'; // Add lazy loading for images + badgeImg.classList.add('badge__icon'); + badgeLink.appendChild(badgeImg); + badgeContainer.appendChild(badgeLink); + fragment.appendChild(badgeContainer); + }); + return fragment; +}; + +// Render iframes based on authored field +const renderIframes = (iframes, height, width) => { + const fragment = document.createDocumentFragment(); + if (iframes.length === 3) { + // Creating left column and children elements + const leftColumn = document.createElement('div'); + leftColumn.classList.add('iframe__left-column'); + if (width) { + leftColumn.setAttribute('style', `max-width:${width + 36}px;`); + } + const iframeContainerOne = document.createElement('div'); + iframeContainerOne.classList.add('iframe__container'); + if (width) { + iframeContainerOne.setAttribute('style', `max-width:${width + 36}px;`); + } + const iframeElOne = document.createElement('iframe'); + iframeElOne.src = iframes[0].textContent.trim(); + iframeElOne.setAttribute('frameborder', '0'); + if (height) { + iframeElOne.setAttribute('style', `min-height:${height}px;`); + } + iframeContainerOne.appendChild(iframeElOne); + leftColumn.appendChild(iframeContainerOne); + const iframeContainerTwo = document.createElement('div'); + iframeContainerTwo.classList.add('iframe__container'); + if (width) { + iframeContainerTwo.setAttribute('style', `max-width:${width + 36}px;`); + } + const iframeElTwo = document.createElement('iframe'); + iframeElTwo.src = iframes[1].textContent.trim(); + iframeElTwo.setAttribute('frameborder', '0'); + if (height) { + iframeElTwo.setAttribute('style', `min-height:${height}px;`); + } + iframeContainerTwo.appendChild(iframeElTwo); + leftColumn.appendChild(iframeContainerTwo); + fragment.appendChild(leftColumn); + + // Creating right column and children elements + const rightColumn = document.createElement('div'); + rightColumn.classList.add('iframe__right-column'); + if (width) { + rightColumn.setAttribute('style', `max-width:${width + 36}px;`); + } + const iframeContainerThree = document.createElement('div'); + iframeContainerThree.classList.add('iframe__container'); + if (width) { + iframeContainerThree.setAttribute('style', `max-width:${width + 36}px;`); + } + const iframeElThree = document.createElement('iframe'); + iframeElThree.src = iframes[2].textContent.trim(); + iframeElThree.setAttribute('frameborder', '0'); + if (height) { + iframeElThree.setAttribute('style', `min-height:${height * 2 + 36}px;`); + } + iframeContainerThree.appendChild(iframeElThree); + rightColumn.appendChild(iframeContainerThree); + fragment.appendChild(rightColumn); + } else { + iframes.forEach((iframe) => { + const iframeSource = iframe.textContent.trim(); + const iframeContainer = document.createElement('div'); + iframeContainer.classList.add('iframe__container'); + if (width) { + iframeContainer.setAttribute('style', `max-width:${width + 36}px;`); + } + const iframeEl = document.createElement('iframe'); + iframeEl.src = iframeSource; + iframeEl.setAttribute('frameborder', '0'); + if (height) { + iframeEl.setAttribute('style', `min-height:${height}px;`); + } + iframeContainer.appendChild(iframeEl); + fragment.appendChild(iframeContainer); + }); + } + return fragment; +}; + export default function decorate(block) { - const [urlElement, widthElement, heightElement] = block.children; + const [badgeLinks, iframeLinks, widthElement, heightElement] = block.children; + const badgeItems = badgeLinks.querySelectorAll('a'); + const iframeItems = iframeLinks.querySelectorAll('p'); const height = Number(heightElement.textContent); const width = Number(widthElement.textContent); - const url = new URL(urlElement.textContent); - const container = document.createElement('div'); - const iframe = document.createElement('iframe'); - block.textContent = ''; - container.classList.add('iframe', 'container'); - container.appendChild(iframe); - iframe.src = url.href; - if (height) { - container.classList.remove('noheight'); - container.style.height = `${height}px`; - } else { - container.classList.add('noheight'); + // Create badge wrapper element and render individual badges + if (badgeLinks.textContent.trim() !== '') { + const badgeWrapper = document.createElement('div'); + badgeWrapper.classList.add('badge__wrapper'); + badgeWrapper.append(renderBadges(badgeItems)); + block.append(badgeWrapper); } - if (width) { - container.style.width = `${width}px`; - } + // Create iFrame wrapper element and render individual iFrames + if (iframeLinks.textContent.trim() !== '') { + const iframeWrapper = document.createElement('div'); + iframeWrapper.classList.add('iframe__wrapper'); + + // Add custom class for 3 iframes + if (iframeItems.length === 3) { + iframeWrapper.classList.add('iframe__wrapper--three-iframes'); + } - block.appendChild(container); + // Add custom class if badges are present + if (badgeLinks.textContent.trim() !== '') { + iframeWrapper.classList.add('frame__wrapper--with-badge'); + } + + iframeWrapper.append(renderIframes(iframeItems, height, width)); + block.append(iframeWrapper); + } } diff --git a/blocks/marketo-form/marketo-form.css b/blocks/marketo-form/marketo-form.css index 171fe8b..7e644a4 100644 --- a/blocks/marketo-form/marketo-form.css +++ b/blocks/marketo-form/marketo-form.css @@ -54,8 +54,16 @@ height: 22px; } +.marketo-form-wrapper .mktoAsterix { + display: none !important; +} + +.marketo-form-wrapper .mktoForm .form-asterix { + padding-left: 5px; +} + .marketo-form-wrapper .mktoForm .mktoLabel, -.marketo-form-wrapper .mktoForm .mktoAsterix, +.marketo-form-wrapper .mktoForm .form-asterix, .marketo-form-wrapper .mktoForm input[type='text'], .marketo-form-wrapper .mktoForm input[type='email'], .marketo-form-wrapper .mktoForm input[type='tel'], @@ -287,10 +295,6 @@ } @media (width <= 480px) { - .marketo-form-wrapper .mktoForm .mktoAsterix { - float: right !important; - } - .marketo-form-wrapper .mktoForm .mktoLabel { margin-bottom: var(--spacing-micro); } diff --git a/blocks/marketo-form/marketo-form.js b/blocks/marketo-form/marketo-form.js index edd1c30..04f4da3 100644 --- a/blocks/marketo-form/marketo-form.js +++ b/blocks/marketo-form/marketo-form.js @@ -18,9 +18,9 @@ const embedMarketoForm = (marketoId, formId, successUrl, isHideLabels, block, fo if (successUrl) { window.MktoForms2.loadForm('//lp.pricefx.com', marketoId, formId, (form) => { // Add hide form labels class if boolean is true + const allFormLabels = formElement.querySelectorAll('label'); if (isHideLabels === 'true') { block.classList.add('form-hide-labels'); - const allFormLabels = formElement.querySelectorAll('label'); allFormLabels.forEach((label) => { const parentEl = label.parentElement; const inputTextEl = parentEl.querySelector('input[type="text"]'); @@ -51,6 +51,13 @@ const embedMarketoForm = (marketoId, formId, successUrl, isHideLabels, block, fo }); } else { block.classList.remove('form-hide-labels'); + allFormLabels.forEach((label) => { + const parentEl = label.parentElement; + if (parentEl.classList.contains('mktoRequiredField')) { + const asterix = '*'; + label.insertAdjacentHTML('beforeend', asterix); + } + }); } // Add an onSuccess handler diff --git a/component-definition.json b/component-definition.json index eac5e5e..a0dbe74 100644 --- a/component-definition.json +++ b/component-definition.json @@ -566,7 +566,8 @@ "resourceType": "core/franklin/components/block/v1/block", "template": { "name": "Partner Showcase", - "model": "partner-showcase" + "model": "partner-showcase", + "numberOfPartners": "6" } } }