From 610d499a43ccf866dd3572dfe74450d9c87d6e99 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Thu, 14 Mar 2024 11:41:05 -0700 Subject: [PATCH] MWPW-142003: Mini Compare Chart Mobile styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: ilyas Stéphane Türkben --- libs/blocks/merch-card/merch-card.js | 30 +-- libs/blocks/merch-card/merch-offer-select.js | 1 + libs/deps/merch-card.js | 82 +++++--- test/blocks/merch-card/merch-card.test.js | 20 ++ .../merch-card/mocks/mini-compare-chart.html | 178 +++++++++++++++++- 5 files changed, 272 insertions(+), 39 deletions(-) diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js index 2ebc69b233..fc98a582f8 100644 --- a/libs/blocks/merch-card/merch-card.js +++ b/libs/blocks/merch-card/merch-card.js @@ -15,10 +15,9 @@ const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART]; // Force cards to refresh once they become visible so that the footer rows are properly aligned. const intersectionObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { - const container = entry.target.closest('main > div'); - if (!container) return; - [...container.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate()); + if (entry.target.clientHeight === 0) return; intersectionObserver.unobserve(entry.target); + entry.target.requestUpdate(); }); }); @@ -35,7 +34,7 @@ const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName); const isParagraphTag = (tagName) => tagName === 'P'; const appendSlot = (slotEls, slotName, merchCard) => { - if (slotEls.length === 0) return; + if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return; const newEl = createTag( 'p', { slot: slotName, class: slotName }, @@ -190,7 +189,7 @@ const simplifyHrs = (el) => { }); }; -function extractQuantitySelect(el) { +async function extractQuantitySelect(el) { const quantitySelectConfig = el.querySelector('ul'); if (!quantitySelectConfig) return null; const configMarkup = quantitySelectConfig.querySelector('li'); @@ -202,7 +201,7 @@ function extractQuantitySelect(el) { const quantityValues = config[1].textContent.split(',').map((value) => value.trim()) .filter((value) => /^\d+$/.test(value)); if (quantityValues.length !== 3) return null; - import('../../deps/merch-quantity-select.js'); + await import('../../deps/merch-quantity-select.js'); [attributes.min, attributes.max, attributes.step] = quantityValues.map(Number); const quantitySelect = createTag('merch-quantity-select', attributes); quantitySelectConfig.remove(); @@ -240,8 +239,12 @@ const decorateFooterRows = (merchCard, footerRows) => { const setMiniCompareOfferSlot = (merchCard, offers) => { if (merchCard.variant !== MINI_COMPARE_CHART) return; - const miniCompareOffers = createTag('div', { slot: 'offers' }, offers); - if (offers === undefined) { miniCompareOffers.appendChild(createTag('p')); } + const miniCompareOffers = merchCard.querySelector('div[slot="offers"]'); + if (offers) { + miniCompareOffers.append(offers); + } else { + miniCompareOffers.appendChild(createTag('p')); + } merchCard.appendChild(miniCompareOffers); }; @@ -306,10 +309,7 @@ const init = async (el) => { } let footerRows; if (cardType === MINI_COMPARE_CHART) { - const container = el.closest('[data-status="decorated"]'); - if (container) { - intersectionObserver.observe(container); - } + intersectionObserver.observe(merchCard); footerRows = getMiniCompareChartFooterRows(el); } const images = el.querySelectorAll('picture'); @@ -386,7 +386,11 @@ const init = async (el) => { merchCard.appendChild(footer); if (MULTI_OFFER_CARDS.includes(cardType)) { - const quantitySelect = extractQuantitySelect(el); + if (merchCard.variant === MINI_COMPARE_CHART) { + const miniCompareOffers = createTag('div', { slot: 'offers' }); + merchCard.append(miniCompareOffers); + } + const quantitySelect = await extractQuantitySelect(el, cardType); const offerSelection = el.querySelector('ul'); if (offerSelection) { const { initOfferSelection } = await import('./merch-offer-select.js'); diff --git a/libs/blocks/merch-card/merch-offer-select.js b/libs/blocks/merch-card/merch-offer-select.js index f3071c05b8..3c40e931bb 100644 --- a/libs/blocks/merch-card/merch-offer-select.js +++ b/libs/blocks/merch-card/merch-offer-select.js @@ -25,6 +25,7 @@ function createDynamicSlots(el, bodySlot) { const descriptionSlot = el.querySelector('p[slot="description"]'); if (descriptionSlot) { descriptionSlot.innerHTML += description.innerHTML; + description.parentNode.removeChild(description); } } } diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js index 7f96a79c9a..18dc3049b6 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` +// Thu, 14 Mar 2024 18:38:01 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 m="(max-width: 767px)";var i="(min-width: 768px)",c="(min-width: 1200px)",s="(min-width: 1600px)";var w=x` :host { position: relative; display: flex; @@ -263,7 +263,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 { @@ -272,9 +272,13 @@ 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: 0 var(--consonant-merch-spacing-s); + min-height: var(--consonant-merch-card-mini-compare-footer-height); } - @media screen and ${p(d)} { + @media screen and ${p(m)} { + :host([variant='mini-compare-chart']) .top-section { + padding-top: var(--consonant-merch-spacing-xs); + } :host([variant='mini-compare-chart']) .mini-compare-chart-badge { font-size: var(--consonant-merch-card-detail-font-size); } @@ -283,9 +287,16 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x padding: 0 var(--consonant-merch-spacing-xs); } + :host([variant='mini-compare-chart']) + .price-unit-type:not(.disabled)::before, + .price-tax-inclusivity:not(.disabled)::before { + content: '\A'; + } + :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); } } @@ -297,7 +308,7 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x :host([variant='plans']) { min-height: 348px; } -`,k=()=>{let m=[x` +`,k=()=>{let d=[x` /* Tablet */ @media screen and ${p(i)} { :host([size='wide']), @@ -312,14 +323,14 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x :host([size='super-wide']) { grid-column: span 3; } - `];return m.push(x` + `];return d.push(x` /* Large desktop */ @media screen and ${p(s)} { :host([size='super-wide']) { grid-column: span 4; } } - `),m};var[u,v,z,$,E,C]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var S=document.createElement("style");S.innerHTML=` + `),d};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; @@ -418,14 +429,8 @@ import{html as a,LitElement as O}from"/libs/deps/lit-all.min.js";import{css as x /*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"); @@ -636,8 +641,14 @@ merch-card[variant="plans"] [slot="quantity-select"] { } /* mini compare chart card styles */ +merch-card[variant="mini-compare-chart"] [slot="heading-m"] { + min-height: var(--consonant-merch-card-mini-compare-heading-height); + padding: 0 var(--consonant-merch-spacing-s); +} + merch-card[variant="mini-compare-chart"] [slot="body-m"] { - padding: var(--consonant-merch-spacing-xs) 0; + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); + min-height: var(--consonant-merch-card-mini-compare-body-slot-height); } merch-card[variant="mini-compare-chart"] span.placeholder-resolved[data-template="strikethrough"] { @@ -646,17 +657,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; + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); + min-height: var(--consonant-merch-card-mini-compare-promo-text-height); } merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { @@ -678,7 +697,6 @@ merch-card[variant="mini-compare-chart"] [slot="footer"] .action-area { merch-card[variant="mini-compare-chart"] [slot="footer"] a.con-button { margin-bottom: var(--consonant-merch-spacing-xs); - display: inline-flex; } merch-card[variant="mini-compare-chart"] .footer-row-icon { @@ -716,7 +734,7 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { text-decoration: solid; } -@media screen and ${d} { +@media screen and ${m} { merch-card[variant="mini-compare-chart"] .mini-compare-chart-badge + [slot='heading-m'] { margin-top: var(--consonant-merch-spacing-m); @@ -725,11 +743,13 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { merch-card[variant="mini-compare-chart"] [slot='heading-m'] { font-size: var(--consonant-merch-card-body-s-font-size); line-height: var(--consonant-merch-card-body-s-line-height); + padding: var(--consonant-merch-spacing-xs); } merch-card[variant="mini-compare-chart"] [slot='body-m'] { font-size: var(--consonant-merch-card-body-xs-font-size); line-height: var(--consonant-merch-card-body-xs-line-height); + padding: var(--consonant-merch-spacing-xs); } merch-card[variant="mini-compare-chart"] [slot="offers"] { @@ -738,6 +758,19 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] { font-size: var(--consonant-merch-card-body-s-font-size); + width: 100%; + word-break: normal; + overflow-wrap: break-word; + } + + merch-card[variant="mini-compare-chart"] [slot="promo-text"] { + padding: var(--consonant-merch-spacing-xs); + } + + merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] span[is=inline-price] { + max-width: 93%; + word-break: normal; + overflow-wrap: break-word; } merch-card[variant="mini-compare-chart"] .footer-row-cell { @@ -761,6 +794,7 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { merch-card[variant="mini-compare-chart"] [slot="footer"] .action-area { display: block; + padding: 0 var(--consonant-merch-spacing-xs); } merch-card[variant="mini-compare-chart"] [slot="footer"] a.con-button { @@ -797,7 +831,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${d} { +@media screen and ${m} { :root { --consonant-merch-card-mini-compare-chart-width: 142px; --consonant-merch-card-special-offers-width: 302px; @@ -1065,7 +1099,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${d} { +@media screen and ${m} { .one-merch-card.mini-compare-chart { grid-template-columns: repeat(1, minmax(300px, var(--consonant-merch-card-mini-compare-chart-width))); gap: var(--consonant-merch-spacing-xs); @@ -1144,7 +1178,7 @@ 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` +`;document.head.appendChild(E);var A="MERCH-CARD",M="merch-card",P=32,b="mini-compare-chart",L=d=>`--consonant-merch-card-footer-row-${d}-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 miniCompareHeading(){return this.querySelector('[slot="heading-m"]')}get miniCompareBodySlot(){return this.querySelector('[slot="body-m"]')}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` @@ -1265,10 +1299,8 @@ merch-card .footer-row-cell:nth-child(8) { ${this.secureLabelFooter}`}renderMiniCompareChart(){return a`
${this.renderIcons()} ${this.badge}
-
- - -
+ +
@@ -1276,5 +1308,5 @@ merch-card .footer-row-cell:nth-child(8) { ${this.secureLabelFooter} - `}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex","0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener("change",this.handleQuantitySelection)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler),this.removeEventListener("change",this.handleQuantitySelection)}keydownHandler(e){let r=document.activeElement?.closest(A);if(!r)return;function t(R,T){let f=document.elementFromPoint(R,T)?.closest(A);f&&(e.preventDefault(),e.stopImmediatePropagation(),f.focus(),f.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:n,y:o,width:h,height:g}=r.getBoundingClientRect(),l=64;switch(e.code===C?e.shiftKey?u:v:e.code){case u:t(n-l,o);break;case v:t(n+h+l,o);break;case z:t(n,o-l);break;case $:t(n,o+g+l);break;case E:this.footerSlot?.querySelector("a")?.click();break}}async adjustInnerContent(){if(this.variant!==b||this.getBoundingClientRect().width===0)return;let e=[{name:"body",cssProperty:"--consonant-merch-card-mini-compare-body-height"},{name:"priceSlot",cssProperty:"--consonant-merch-card-mini-compare-price-height"},{name:"priceCommitmentSlot",cssProperty:"--consonant-merch-card-mini-compare-price-commitment-height"},{name:"offers",cssProperty:"--consonant-merch-card-mini-compare-offers-height"},{name:"promoText",cssProperty:"--consonant-merch-card-mini-compare-promo-text-height"},{name:"footer",cssProperty:"--consonant-merch-card-mini-compare-footer-height"}];for(let r of e){let t=parseInt(getComputedStyle(document.documentElement).getPropertyValue(r.cssProperty));if(this[r.name]){let n=parseInt(window.getComputedStyle(this[r.name]).height)||0;n>0&&n>t&&document.documentElement.style.setProperty(r.cssProperty,`${n}px`),this[r.name].style.height=`var(${r.cssProperty})`}}}adjustFooterRows(){if(this.variant!==b||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((r,t)=>{let n=Math.max(P,parseInt(window.getComputedStyle(r).height)||0),o=parseInt(this.#e.style.getPropertyValue(L(t+1)))||0;n>o&&this.#e.style.setProperty(L(t+1),`${n}px`)})}};customElements.define(M,y);export{M as MERCH_CARD,A as MERCH_CARD_NODE_NAME,y as MerchCard,L as getRowMinHeightPropertyName}; + `}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex","0"),this.addEventListener("keydown",this.keydownHandler),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener("change",this.handleQuantitySelection)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.keydownHandler),this.removeEventListener("change",this.handleQuantitySelection)}keydownHandler(e){let r=document.activeElement?.closest(A);if(!r)return;function t(R,T){let f=document.elementFromPoint(R,T)?.closest(A);f&&(e.preventDefault(),e.stopImmediatePropagation(),f.focus(),f.scrollIntoView({behavior:"smooth",block:"center"}))}let{x:n,y:o,width:h,height:g}=r.getBoundingClientRect(),l=64;switch(e.code===S?e.shiftKey?u:v:e.code){case u:t(n-l,o);break;case v:t(n+h+l,o);break;case z:t(n,o-l);break;case $:t(n,o+g+l);break;case C:this.footerSlot?.querySelector("a")?.click();break}}async adjustInnerContent(){if(this.variant!==b||this.getBoundingClientRect().width===0)return;let e=[{name:"miniCompareHeading",cssProperty:"--consonant-merch-card-mini-compare-heading-height"},{name:"miniCompareBodySlot",cssProperty:"--consonant-merch-card-mini-compare-body-slot-height"},{name:"priceSlot",cssProperty:"--consonant-merch-card-mini-compare-price-height"},{name:"priceCommitmentSlot",cssProperty:"--consonant-merch-card-mini-compare-price-commitment-height"},{name:"offers",cssProperty:"--consonant-merch-card-mini-compare-offers-height"},{name:"promoText",cssProperty:"--consonant-merch-card-mini-compare-promo-text-height"},{name:"footer",cssProperty:"--consonant-merch-card-mini-compare-footer-height"}];for(let r of e){let t=parseInt(getComputedStyle(this.#e).getPropertyValue(r.cssProperty))||0;if(this[r.name]){let n=parseInt(window.getComputedStyle(this[r.name]).height)||0;this.#e.style.setProperty(r.cssProperty,`${Math.max(n,t)}px`)}}}adjustFooterRows(){if(this.variant!==b||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((r,t)=>{let n=Math.max(P,parseInt(window.getComputedStyle(r).height)||0),o=parseInt(this.#e.style.getPropertyValue(L(t+1)))||0;n>o&&this.#e.style.setProperty(L(t+1),`${n}px`)})}};customElements.define(M,y);export{M as MERCH_CARD,A as MERCH_CARD_NODE_NAME,y as MerchCard,L as getRowMinHeightPropertyName}; //# sourceMappingURL=merch-card.js.map diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js index 8778c8e16a..628c806386 100644 --- a/test/blocks/merch-card/merch-card.test.js +++ b/test/blocks/merch-card/merch-card.test.js @@ -336,6 +336,7 @@ describe('Mini Compare Chart Merch Card', () => { expect(buttons[0].textContent).to.be.equal('Buy now'); expect(buttons[1].textContent).to.be.equal('free trial'); }); + it('Supports Mini Compare Chart with quantity select', async () => { document.body.innerHTML = await readFile({ path: './mocks/mini-compare-chart.html' }); const merchCard = await init(document.querySelector('.merch-card.mini-compare-chart')); @@ -346,6 +347,25 @@ describe('Mini Compare Chart Merch Card', () => { expect(quantitySelect.getAttribute('max')).to.equal('10'); expect(quantitySelect.getAttribute('step')).to.equal('1'); }); + + it('Supports Mini Compare Chart with offer select', async () => { + document.body.innerHTML = await readFile({ path: './mocks/mini-compare-chart.html' }); + const merchCard = await init(document.querySelector('#mini-compare-offer-select')); + const offerSelect = merchCard.querySelector('merch-offer-select'); + const merchOffer = offerSelect.querySelector('merch-offer'); + expect(offerSelect).to.exist; + expect(merchOffer).to.exist; + expect(merchOffer.getAttribute('text')).to.equal('20GB'); + }); + + it('Supports Mini Compare Chart intersection observer', async () => { + document.body.innerHTML = await readFile({ path: './mocks/mini-compare-chart.html' }); + const merchCard = await init(document.querySelector('#mini-compare-hidden-card')); + merchCard.style.visibility = 'hidden'; + setTimeout(() => { + merchCard.style.visibility = 'visible'; + }, 500); + }); }); describe('Merch Card with Offer Selection', () => { diff --git a/test/blocks/merch-card/mocks/mini-compare-chart.html b/test/blocks/merch-card/mocks/mini-compare-chart.html index f0dbca545b..f5a75cf892 100644 --- a/test/blocks/merch-card/mocks/mini-compare-chart.html +++ b/test/blocks/merch-card/mocks/mini-compare-chart.html @@ -1,5 +1,5 @@
-
+
+
+
+
#EDCC2D, #000000
+
LOREM IPSUM DOLOR
+
+
+
+ + + + + + +

Illustrator

+

Get Illustrator on desktop and iPad as part of Creative Cloud. This is promo text

+

Cloud storage:

+ +

PRICE - ABM - Creative Cloud All Apps with 4TB

+

Buy now free trial

+
+
+
+
+ + + + + + +
+
Illustrator on desktop, web, and iPad
+
+
+
+
+
+
+
+ + + + + + +
+
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+
+ + + + + + +
+
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe Fonts
+
+
+
+ + + + + + +
+ +
+
+
+
+
#EDCC2D, #000000
+
LOREM IPSUM DOLOR
+
+
+
+ + + + + + +

Illustrator

+

Get Illustrator on desktop and iPad as part of Creative Cloud. This is promo text

+

Cloud storage:

+ +

PRICE - ABM - Creative Cloud All Apps with 4TB

+

Buy now free trial

+
+
+
+
+ + + + + + +
+
Illustrator on desktop, web, and iPad
+
+
+
+
+
+
+
+ + + + + + +
+
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+
+ + + + + + +
+
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe Fonts
+
+
+
+ + + + + + +
+ +
+