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"
}
}
}