From 8f8834bd246889c97862109e7eebde9f6df918c1 Mon Sep 17 00:00:00 2001 From: Mira Fedas <30750556+mirafedas@users.noreply.github.com> Date: Wed, 21 Aug 2024 20:20:29 +0200 Subject: [PATCH] MWPW-152792: Adjust CSS in Catalog card for promo treatment (#2668) * added payment-details slot and changed badge width * fixed duplicated callout content * fixed eslint * added libs/deps/mas to paths-ignore in codeql * replaced payment-details slot --- libs/blocks/merch-card/merch-card.js | 87 +++++++++++-------- libs/deps/mas/merch-card.js | 9 ++ libs/deps/mas/plans-modal.js | 7 ++ .../mas/web-components/src/global.css.js | 7 ++ .../mas/web-components/src/merch-card.css.js | 2 + .../web-components/test/merch-card.test.html | 1 + 6 files changed, 76 insertions(+), 37 deletions(-) diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js index 43a5f2d2aa..e7bf71ca32 100644 --- a/libs/blocks/merch-card/merch-card.js +++ b/libs/blocks/merch-card/merch-card.js @@ -153,6 +153,53 @@ const parseTwpContent = async (el, merchCard) => { } }; +const appendPaymentDetails = (element, merchCard) => { + if (element.firstChild.nodeType !== Node.TEXT_NODE) return; + const paymentDetails = createTag('div', { class: 'payment-details' }, element.innerHTML); + const headingM = merchCard.querySelector('h4[slot="heading-m"]'); + headingM?.append(paymentDetails); +}; + +const appendCalloutContent = (element, merchCard) => { + if (element.firstElementChild?.tagName !== 'EM') return; + let calloutSlot = merchCard.querySelector('div[slot="callout-content"]'); + let calloutContainer = calloutSlot?.querySelector('div'); + if (!calloutContainer) { + calloutSlot = createTag('div', { slot: 'callout-content' }); + calloutContainer = createTag('div'); + calloutSlot.appendChild(calloutContainer); + merchCard.appendChild(calloutSlot); + } + + const calloutContentWrapper = createTag('div'); + const calloutContent = createTag('div'); + const emElement = element.firstElementChild; + const fragment = document.createDocumentFragment(); + let imgElement = null; + + emElement.childNodes.forEach((child) => { + if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'A' && child.innerText.trim().toLowerCase() === '#icon') { + const [imgSrc, tooltipText] = child.getAttribute('href')?.split('#') || []; + imgElement = createTag('img', { + src: imgSrc, + title: decodeURIComponent(tooltipText), + class: 'callout-icon', + }); + } else { + const clone = child.cloneNode(true); + fragment.appendChild(clone); + } + }); + + calloutContent.appendChild(fragment); + calloutContentWrapper.appendChild(calloutContent); + + if (imgElement) { + calloutContentWrapper.appendChild(imgElement); + } + calloutContainer.appendChild(calloutContentWrapper); +}; + const parseContent = async (el, merchCard) => { let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`; let headingMCount = 0; @@ -174,7 +221,6 @@ const parseContent = async (el, merchCard) => { const innerElements = [ ...el.querySelectorAll(INNER_ELEMENTS_SELECTOR), ]; - const calloutContainer = createTag('div'); innerElements.forEach((element) => { let { tagName } = element; @@ -209,36 +255,9 @@ const parseContent = async (el, merchCard) => { } return; } - if (tagName === 'H6' && element.firstElementChild?.tagName === 'EM') { - const calloutContentWrapper = createTag('div'); - const calloutContent = createTag('div'); - const emElement = element.firstElementChild; - let imgElement = null; - const fragment = document.createDocumentFragment(); - - emElement.childNodes.forEach((child) => { - if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'A' && child.innerText.trim().toLowerCase() === '#icon') { - const [imgSrc, tooltipText] = child.getAttribute('href')?.split('#') || []; - imgElement = createTag('img', { - src: imgSrc, - title: decodeURIComponent(tooltipText), - class: 'callout-icon', - }); - } else { - const clone = child.cloneNode(true); - fragment.appendChild(clone); - } - }); - - calloutContent.appendChild(fragment); - calloutContentWrapper.appendChild(calloutContent); - - if (imgElement) { - calloutContentWrapper.appendChild(imgElement); - } - - calloutContainer.appendChild(calloutContentWrapper); - return; + if (tagName === 'H6') { + appendPaymentDetails(element, merchCard); + appendCalloutContent(element, merchCard); } if (isParagraphTag(tagName)) { bodySlot.append(element); @@ -247,12 +266,6 @@ const parseContent = async (el, merchCard) => { if (mnemonicList) bodySlot.append(mnemonicList); }); - if (calloutContainer.children.length > 0) { - const calloutSlot = createTag('div', { slot: 'callout-content' }); - calloutSlot.appendChild(calloutContainer); - merchCard.appendChild(calloutSlot); - } - if (merchCard.variant === MINI_COMPARE_CHART && merchCard.childNodes[1]) { merchCard.insertBefore(bodySlot, merchCard.childNodes[1]); } diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js index 207973a952..310c6beec6 100644 --- a/libs/deps/mas/merch-card.js +++ b/libs/deps/mas/merch-card.js @@ -156,10 +156,12 @@ import{html as o,LitElement as K,nothing as Q}from"/libs/deps/lit-all.min.js";im height: fit-content; flex-direction: column; width: fit-content; + max-width: 140px; border-radius: 5px; position: relative; top: 0; margin-left: var(--consonant-merch-spacing-xxs); + box-sizing: border-box; } .detail-bg-container { @@ -783,6 +785,13 @@ merch-card[variant="catalog"] [slot="action-menu-content"] a { text-decoration: underline; } +merch-card[variant="catalog"] .payment-details { + font-size: var(--consonant-merch-card-body-font-size); + font-style: italic; + font-weight: 400; + line-height: var(--consonant-merch-card-body-line-height); +} + merch-card[variant="ccd-action"] .price-strikethrough { font-size: 18px; } diff --git a/libs/deps/mas/plans-modal.js b/libs/deps/mas/plans-modal.js index f11476a023..986dd50015 100644 --- a/libs/deps/mas/plans-modal.js +++ b/libs/deps/mas/plans-modal.js @@ -5380,6 +5380,13 @@ merch-card[variant="catalog"] [slot="action-menu-content"] a { text-decoration: underline; } +merch-card[variant="catalog"] [slot="payment-details"] { + font-size: var(--consonant-merch-card-body-font-size); + font-style: italic; + font-weight: 400; + line-height: var(--consonant-merch-card-body-line-height); +} + merch-card[variant="ccd-action"] .price-strikethrough { font-size: 18px; } diff --git a/libs/features/mas/web-components/src/global.css.js b/libs/features/mas/web-components/src/global.css.js index fa073f83bc..b0198162b3 100644 --- a/libs/features/mas/web-components/src/global.css.js +++ b/libs/features/mas/web-components/src/global.css.js @@ -380,6 +380,13 @@ merch-card[variant="catalog"] [slot="action-menu-content"] a { text-decoration: underline; } +merch-card[variant="catalog"] .payment-details { + font-size: var(--consonant-merch-card-body-font-size); + font-style: italic; + font-weight: 400; + line-height: var(--consonant-merch-card-body-line-height); +} + merch-card[variant="ccd-action"] .price-strikethrough { font-size: 18px; } diff --git a/libs/features/mas/web-components/src/merch-card.css.js b/libs/features/mas/web-components/src/merch-card.css.js index c4811e0da7..a40e6116d9 100644 --- a/libs/features/mas/web-components/src/merch-card.css.js +++ b/libs/features/mas/web-components/src/merch-card.css.js @@ -140,10 +140,12 @@ export const styles = css` height: fit-content; flex-direction: column; width: fit-content; + max-width: 140px; border-radius: 5px; position: relative; top: 0; margin-left: var(--consonant-merch-spacing-xxs); + box-sizing: border-box; } .detail-bg-container { diff --git a/libs/features/mas/web-components/test/merch-card.test.html b/libs/features/mas/web-components/test/merch-card.test.html index 840aecddce..1413667300 100644 --- a/libs/features/mas/web-components/test/merch-card.test.html +++ b/libs/features/mas/web-components/test/merch-card.test.html @@ -390,6 +390,7 @@

Photography

+
Inclusive of VAT

Lightroom, Lightroom Classic, Photoshop on desktop and iPad, and 1TB of cloud storage.