From c7aa0da03edc033ccafb4c5bd4fc24ccefd2d830 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Thu, 28 Mar 2024 11:10:00 -0700 Subject: [PATCH 1/2] MWPW-136871: TwP Merch Card --- libs/blocks/merch-card/merch-card.js | 117 ++++++++----- libs/deps/merch-card.js | 247 +++++++++++++++++++++------ 2 files changed, 277 insertions(+), 87 deletions(-) diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js index 2ebc69b233..241c45c182 100644 --- a/libs/blocks/merch-card/merch-card.js +++ b/libs/blocks/merch-card/merch-card.js @@ -7,7 +7,17 @@ import '../../deps/merch-card.js'; const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/; -const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product', 'inline-heading', 'image', 'mini-compare-chart']; +const CARD_TYPES = [ + 'segment', + 'special-offers', + 'plans', + 'catalog', + 'product', + 'inline-heading', + 'image', + 'mini-compare-chart', + 'twp', +]; const MINI_COMPARE_CHART = 'mini-compare-chart'; @@ -34,21 +44,46 @@ const getPodType = (styles) => styles?.find((style) => CARD_TYPES.includes(style const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName); const isParagraphTag = (tagName) => tagName === 'P'; -const appendSlot = (slotEls, slotName, merchCard) => { +const appendSlot = (slotEls, slotName, merchCard, nodeName = 'p') => { if (slotEls.length === 0) return; const newEl = createTag( - 'p', + nodeName, { slot: slotName, class: slotName }, ); - slotEls.forEach((e, index) => { + slotEls.forEach((e) => { newEl.innerHTML += e.innerHTML; - if (index < slotEls.length - 1) { - newEl.innerHTML += '
'; - } }); merchCard.append(newEl); }; +const parseTwpContent = (el, merchCard) => { + const allElements = Array.from(el.children[0].children[0].children); + const contentGroups = allElements.reduce((acc, curr) => { + if (curr.tagName.toLowerCase() === 'p' && curr.textContent.trim() === '--') { + acc.push([]); + } else { + acc[acc.length - 1].push(curr); + } + return acc; + }, [[]]); + + contentGroups.forEach((group, index) => { + if (index === 0) { // Top section + const headings = group.filter((e) => e.tagName.toLowerCase() === 'h3'); + const topBody = group.filter((e) => e.tagName.toLowerCase() === 'p'); + appendSlot(headings, 'heading-xs', merchCard); + appendSlot(topBody, 'body-xs-top', merchCard); + } else if (index === 1) { // Body section + const content = group.filter((e) => e.tagName.toLowerCase() === 'p' || e.tagName.toLowerCase() === 'ul'); + const bodySlot = createTag('div', { slot: 'body-xs' }, content); + merchCard.append(bodySlot); + } else if (index === 2) { // Footer section + const footerContent = group.filter((e) => ['ul', 'h5', 'p'].includes(e.tagName.toLowerCase())); + const footer = createTag('div', { slot: 'footer' }, footerContent); + merchCard.append(footer); + } + }); +}; const parseContent = (el, merchCard) => { const innerElements = [ ...el.querySelectorAll('h2, h3, h4, h5, p, ul, em'), @@ -373,42 +408,48 @@ const init = async (el) => { } merchCard.setAttribute('filters', categories.join(',')); merchCard.setAttribute('types', types.join(',')); - parseContent(el, merchCard); - const footer = createTag('div', { slot: 'footer' }); - if (ctas) { - if (merchCard.variant === 'mini-compare-chart') { - decorateButtons(ctas, 'button-l'); - } else { - decorateButtons(ctas); - } - footer.append(ctas); - } - merchCard.appendChild(footer); - - if (MULTI_OFFER_CARDS.includes(cardType)) { - const quantitySelect = extractQuantitySelect(el); - const offerSelection = el.querySelector('ul'); - if (offerSelection) { - const { initOfferSelection } = await import('./merch-offer-select.js'); - setMiniCompareOfferSlot(merchCard, undefined); - initOfferSelection(merchCard, offerSelection, quantitySelect); - } - if (quantitySelect) { - if (merchCard.variant === MINI_COMPARE_CHART) { - setMiniCompareOfferSlot(merchCard, quantitySelect); + + if (merchCard.variant !== 'twp') { + parseContent(el, merchCard); + + const footer = createTag('div', { slot: 'footer' }); + if (ctas) { + if (merchCard.variant === 'mini-compare-chart') { + decorateButtons(ctas, 'button-l'); } else { - const bodySlot = merchCard.querySelector('div[slot="body-xs"]'); - bodySlot.append(quantitySelect); + decorateButtons(ctas); } + footer.append(ctas); } - } + merchCard.appendChild(footer); - decorateBlockHrs(merchCard); - simplifyHrs(merchCard); - if (merchCard.classList.contains('has-divider')) { - merchCard.setAttribute('custom-hr', true); + if (MULTI_OFFER_CARDS.includes(cardType)) { + const quantitySelect = extractQuantitySelect(el); + const offerSelection = el.querySelector('ul'); + if (offerSelection) { + const { initOfferSelection } = await import('./merch-offer-select.js'); + setMiniCompareOfferSlot(merchCard, undefined); + initOfferSelection(merchCard, offerSelection, quantitySelect); + } + if (quantitySelect) { + if (merchCard.variant === MINI_COMPARE_CHART) { + setMiniCompareOfferSlot(merchCard, quantitySelect); + } else { + const bodySlot = merchCard.querySelector('div[slot="body-xs"]'); + bodySlot.append(quantitySelect); + } + } + } + + decorateBlockHrs(merchCard); + simplifyHrs(merchCard); + if (merchCard.classList.contains('has-divider')) { + merchCard.setAttribute('custom-hr', true); + } + decorateFooterRows(merchCard, footerRows); + } else { + parseTwpContent(el, merchCard); } - decorateFooterRows(merchCard, footerRows); el.replaceWith(merchCard); decorateMerchCardLinkAnalytics(merchCard); return merchCard; diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js index 7f96a79c9a..ed2ab380b9 100644 --- a/libs/deps/merch-card.js +++ b/libs/deps/merch-card.js @@ -1,5 +1,5 @@ -// Sat, 09 Mar 2024 00:46:22 GMT -import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x,unsafeCSS as p}from"/libs/deps/lit-all.min.js";var d="(max-width: 767px)";var i="(min-width: 768px)",c="(min-width: 1200px)",s="(min-width: 1600px)";var w=x` +// branch: MWPW-136871 commit: 3682b0a6a4275226dcd69bc03c04848a1203c228 Thu, 28 Mar 2024 18:03:38 GMT +import{html as n,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x,unsafeCSS as p}from"/libs/deps/lit-all.min.js";var d="(max-width: 767px)";var i="(min-width: 768px)",c="(min-width: 1200px)",s="(min-width: 1600px)";var w=x` :host { position: relative; display: flex; @@ -36,6 +36,10 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x min-height: 214px; } + :host([variant='twp']) { + min-height: 400px; + } + .invisible { visibility: hidden; } @@ -233,6 +237,37 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x margin-top: 2px; } + :host([variant='twp']) .twp-badge { + padding: 4px 10px 5px 10px; + } + + :host([variant='twp']) .top-section { + flex: 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + height: 100%; + gap: var(--consonant-merch-spacing-xxs); + padding: var(--consonant-merch-spacing-xs) + var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-xs) + var(--consonant-merch-spacing-xs); + align-items: flex-start; + } + + :host([variant='twp']) .body { + padding: 0 var(--consonant-merch-spacing-xs); + } + + :host([variant='twp']) footer { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 100%; + gap: var(--consonant-merch-spacing-xxs); + padding: var(--consonant-merch-spacing-xs); + } + :host([variant='mini-compare-chart']) .icons .img { width: var(--consonant-merch-card-mini-compare-chart-icon-size); height: var(--consonant-merch-card-mini-compare-chart-icon-size); @@ -263,7 +298,7 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x padding: 0 var(--consonant-merch-spacing-s) 0px; display: block; gap: var(--consonant-merch-spacing-xs); - height: auto; + min-height: var(--consonant-merch-card-mini-compare-body-height); } :host([variant='mini-compare-chart']) .price { @@ -286,6 +321,7 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x :host([variant='mini-compare-chart']) footer { padding-bottom: var(--consonant-merch-spacing-xxs); justify-content: space-around; + min-height: var(--consonant-merch-card-mini-compare-footer-height); } } @@ -319,7 +355,7 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x grid-column: span 4; } } - `),m};var[u,v,z,$,E,C]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var S=document.createElement("style");S.innerHTML=` + `),m};var[u,v,z,$,C,S]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var E=document.createElement("style");E.innerHTML=` :root { --consonant-merch-card-detail-font-size: 12px; @@ -386,9 +422,15 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x /* colors */ --consonant-merch-card-border-color: #eaeaea; --color-accent: #1473E6; + --merch-color-focus-ring: #1473E6; --merch-color-grey-80: #2c2c2c; --merch-color-green-promo: #12805C; + /* focus */ + --merch-focused-outline: var(--merch-color-focus-ring) auto 1px; + --merch-hovered-shadow: 0 0 0 1px #aaa; + --merch-selected-shadow: 0 0 0 2px var(--color-accent); + /* merch card generic */ --consonant-merch-card-max-width: 300px; --transition: cmax-height 0.3s linear, opacity 0.3s linear; @@ -416,38 +458,37 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x --consonant-merch-card-catalog-width: 276px; --consonant-merch-card-catalog-icon-size: 40px; + /* twp */ + --consonant-merch-card-twp-width: 268px; + --consonant-merch-card-twp-mobile-width: 300px; + --consonant-merch-card-twp-mobile-height: 358px; + /*mini compare chart */ --consonant-merch-card-mini-compare-chart-icon-size: 32px; - --consonant-merch-card-mini-compare-body-height: 50px; --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; --consonant-merch-card-mini-compare-mobile-cta-width: 75px; - --consonant-merch-card-mini-compare-offers-height: 0; - --consonant-merch-card-mini-compare-price-height: 0; - --consonant-merch-card-mini-compare-price-commitment-height: 0; - --consonant-merch-card-mini-compare-promo-text-height: 0; - --consonant-merch-card-mini-compare-footer-height: 0; /* inline SVGs */ - --checkmark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M3.788 9A.999.999 0 0 1 3 8.615l-2.288-3a1 1 0 1 1 1.576-1.23l1.5 1.991 3.924-4.991a1 1 0 1 1 1.576 1.23l-4.712 6A.999.999 0 0 1 3.788 9z' class='spectrum-UIIcon--medium'/%3E%3C/svg%3E%0A"); + --checkmark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M3.788 9A.999.999 0 0 1 3 8.615l-2.288-3a1 1 0 1 1 1.576-1.23l1.5 1.991 3.924-4.991a1 1 0 1 1 1.576 1.23l-4.712 6A.999.999 0 0 1 3.788 9z' class='spectrum-UIIcon--medium'/%3E%3C/svg%3E%0A"); --secure-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23757575' viewBox='0 0 12 15'%3E%3Cpath d='M11.5 6H11V5A5 5 0 1 0 1 5v1H.5a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5ZM3 5a3 3 0 1 1 6 0v1H3Zm4 6.111V12.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1.389a1.5 1.5 0 1 1 2 0Z'/%3E%3C/svg%3E"); --info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'>'); + --ellipsis-icon: url('data:image/svg+xml,'); } -merch-cards { +merch-card-collection { display: contents; } -merch-cards > merch-card:not([style]) { +merch-card-collection > merch-card:not([style]) { display: none; } -merch-cards > p[slot], -merch-cards > div[slot] p { +merch-card-collection > p[slot], +merch-card-collection > div[slot] p { margin: 0; } @@ -470,6 +511,10 @@ merch-cards > div[slot] p { } } +merch-card a { + text-decoration: underline; +} + merch-card.background-opacity-70 { background-color: rgba(255 255 255 / 70%); } @@ -635,9 +680,48 @@ merch-card[variant="plans"] [slot="quantity-select"] { padding: var(--consonant-merch-spacing-xs); } +merch-card[variant="twp"] div[class$='twp-badge'] { + padding: 4px 10px 5px 10px; +} + +merch-card[variant="twp"] [slot="body-xs-top"] { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xs-line-height); + color: var(--merch-color-grey-80); +} + +merch-card[variant="twp"] [slot="body-xs"] ul { + padding: 0; + margin: 0; +} + +merch-card[variant="twp"] [slot="body-xs"] ul li { + list-style-type: none; + padding-left: 0; +} + +merch-card[variant="twp"] [slot="body-xs"] ul li::before { + content: '\xB7'; + font-size: 20px; + padding-right: 5px; + font-weight: bold; +} + +merch-card[variant="twp"] [slot="footer"] { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xs-line-height); + color: var(--merch-color-grey-80); +} + + /* mini compare chart card styles */ +.mini-compare-chart merch-card .body { + min-height: var(--consonant-merch-card-mini-compare-body-height); +} + merch-card[variant="mini-compare-chart"] [slot="body-m"] { padding: var(--consonant-merch-spacing-xs) 0; + min-height: var(--consonant-merch-card-mini-compare-body-height); } merch-card[variant="mini-compare-chart"] span.placeholder-resolved[data-template="strikethrough"] { @@ -646,17 +730,25 @@ merch-card[variant="mini-compare-chart"] span.placeholder-resolved[data-template merch-card[variant="mini-compare-chart"] [slot="price-commitment"] { font-size: var(--consonant-merch-card-body-xs-font-size); + min-height: var( + --consonant-merch-card-mini-compare-price-commitment-height + ); } +merch-card[variant="mini-compare-chart"] [slot="heading-m-price"] { + min-height: var(--consonant-merch-card-mini-compare-price-height); +} merch-card[variant="mini-compare-chart"] [slot="offers"] { font-size: var(--consonant-merch-card-body-xs-font-size); + min-height: var(--consonant-merch-card-mini-compare-offers-height); } merch-card[variant="mini-compare-chart"] [slot="promo-text"] { color: var(--merch-color-green-promo); font-weight: 700; padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; + min-height: var(--consonant-merch-card-mini-compare-promo-text-height); } merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { @@ -1021,6 +1113,54 @@ div[slot='bg-image'] img { } } +/* grid style for twp */ +.one-merch-card.twp, +.two-merch-cards.twp, +.three-merch-cards.twp { + grid-template-columns: var(--consonant-merch-card-image-width); +} + +/* Tablet */ +@media screen and ${i} { + .one-merch-card.twp, + .two-merch-cards.twp { + grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); + } + .three-merch-cards.twp { + grid-template-columns: repeat(3, var(--consonant-merch-card-twp-width)); + } +} + +/* desktop */ +@media screen and ${c} { + .one-merch-card.twp + .two-merch-cards.twp { + grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); + } + .three-merch-cards.twp { + grid-template-columns: repeat(3, var(--consonant-merch-card-twp-width)); + } +} + +/* Large desktop */ + @media screen and ${s} { + .one-merch-card.twp + .two-merch-cards.twp { + grid-template-columns: repeat(2, var(--consonant-merch-card-twp-width)); + } + .three-merch-cards.twp { + grid-template-columns: repeat(3, var(--consonant-merch-card-twp-width)); + } +} + +/* Mobile */ +@media screen and ${d} { + .one-merch-card.twp, + .two-merch-cards.twp, + .three-merch-cards.twp { + grid-template-columns: repeat(1, var(--consonant-merch-card-twp-mobile-width)); + } +} /* grid style for inline-heading */ .one-merch-card.inline-heading, @@ -1144,32 +1284,32 @@ merch-card .footer-row-cell:nth-child(8) { min-height: var(--consonant-merch-card-footer-row-8-min-height); } -`;document.head.appendChild(S);var A="MERCH-CARD",M="merch-card",P=32,b="mini-compare-chart",L=m=>`--consonant-merch-card-footer-row-${m}-min-height`,y=class extends O{static properties={name:{type:String},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},icons:{type:Array},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},title:{type:String},description:{type:String},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[r,t,n]=e.split(",");return{PUF:r,ABM:t,M2M:n}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(r=>{let[t,n,o]=r.split(":"),h=Number(n);return[t,{order:isNaN(h)?void 0:h,size:o}]})),toAttribute:e=>Object.entries(e).map(([r,{order:t,size:n}])=>[r,t,n].filter(o=>o!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0}};static styles=[w,...k()];constructor(){super(),this.filters={},this.types=""}#e;get body(){return this.shadowRoot.querySelector(".body")}get priceSlot(){return this.querySelector('[slot="heading-m-price"]')}get priceCommitmentSlot(){return this.querySelector('[slot="price-commitment"]')}get offers(){return this.querySelector('[slot="offers"]')}get promoText(){return this.querySelector('[slot="promo-text"]')}get footer(){return this.shadowRoot.querySelector("footer")}updated(e){e.has("badgeBackgroundColor")&&(this.style.border=`1px solid ${this.badgeBackgroundColor}`),this.updateComplete.then(async()=>{this.adjustInnerContent(),this.adjustFooterRows()})}renderIcons(){return this.icons&&this.icons.length>0?a` -
- ${this.icons.map(e=>{let r=this.querySelector('div[slot="body-xs"]')?.querySelector('a[href$="#mnemonic-link"]');return r&&(r.href=r.href.replace("#mnemonic-link","")),r?a` - - ${e.alt} - - `:a`${e.alt}`})} -
- `:""}get evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?a`