diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js index fc98a582f8..2ebc69b233 100644 --- a/libs/blocks/merch-card/merch-card.js +++ b/libs/blocks/merch-card/merch-card.js @@ -15,9 +15,10 @@ 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) => { - if (entry.target.clientHeight === 0) return; + const container = entry.target.closest('main > div'); + if (!container) return; + [...container.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate()); intersectionObserver.unobserve(entry.target); - entry.target.requestUpdate(); }); }); @@ -34,7 +35,7 @@ const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName); const isParagraphTag = (tagName) => tagName === 'P'; const appendSlot = (slotEls, slotName, merchCard) => { - if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return; + if (slotEls.length === 0) return; const newEl = createTag( 'p', { slot: slotName, class: slotName }, @@ -189,7 +190,7 @@ const simplifyHrs = (el) => { }); }; -async function extractQuantitySelect(el) { +function extractQuantitySelect(el) { const quantitySelectConfig = el.querySelector('ul'); if (!quantitySelectConfig) return null; const configMarkup = quantitySelectConfig.querySelector('li'); @@ -201,7 +202,7 @@ async function extractQuantitySelect(el) { const quantityValues = config[1].textContent.split(',').map((value) => value.trim()) .filter((value) => /^\d+$/.test(value)); if (quantityValues.length !== 3) return null; - await import('../../deps/merch-quantity-select.js'); + import('../../deps/merch-quantity-select.js'); [attributes.min, attributes.max, attributes.step] = quantityValues.map(Number); const quantitySelect = createTag('merch-quantity-select', attributes); quantitySelectConfig.remove(); @@ -239,12 +240,8 @@ const decorateFooterRows = (merchCard, footerRows) => { const setMiniCompareOfferSlot = (merchCard, offers) => { if (merchCard.variant !== MINI_COMPARE_CHART) return; - const miniCompareOffers = merchCard.querySelector('div[slot="offers"]'); - if (offers) { - miniCompareOffers.append(offers); - } else { - miniCompareOffers.appendChild(createTag('p')); - } + const miniCompareOffers = createTag('div', { slot: 'offers' }, offers); + if (offers === undefined) { miniCompareOffers.appendChild(createTag('p')); } merchCard.appendChild(miniCompareOffers); }; @@ -309,7 +306,10 @@ const init = async (el) => { } let footerRows; if (cardType === MINI_COMPARE_CHART) { - intersectionObserver.observe(merchCard); + const container = el.closest('[data-status="decorated"]'); + if (container) { + intersectionObserver.observe(container); + } footerRows = getMiniCompareChartFooterRows(el); } const images = el.querySelectorAll('picture'); @@ -386,11 +386,7 @@ const init = async (el) => { merchCard.appendChild(footer); if (MULTI_OFFER_CARDS.includes(cardType)) { - if (merchCard.variant === MINI_COMPARE_CHART) { - const miniCompareOffers = createTag('div', { slot: 'offers' }); - merchCard.append(miniCompareOffers); - } - const quantitySelect = await extractQuantitySelect(el, cardType); + const quantitySelect = extractQuantitySelect(el); 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 3c40e931bb..f3071c05b8 100644 --- a/libs/blocks/merch-card/merch-offer-select.js +++ b/libs/blocks/merch-card/merch-offer-select.js @@ -25,7 +25,6 @@ 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 18dc3049b6..7f96a79c9a 100644 --- a/libs/deps/merch-card.js +++ b/libs/deps/merch-card.js @@ -1,5 +1,5 @@ -// 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` +// 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` :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); - min-height: var(--consonant-merch-card-mini-compare-body-height); + height: auto; } :host([variant='mini-compare-chart']) .price { @@ -272,13 +272,9 @@ 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(m)} { - :host([variant='mini-compare-chart']) .top-section { - padding-top: var(--consonant-merch-spacing-xs); - } + @media screen and ${p(d)} { :host([variant='mini-compare-chart']) .mini-compare-chart-badge { font-size: var(--consonant-merch-card-detail-font-size); } @@ -287,16 +283,9 @@ 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); } } @@ -308,7 +297,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 d=[x` +`,k=()=>{let m=[x` /* Tablet */ @media screen and ${p(i)} { :host([size='wide']), @@ -323,14 +312,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 d.push(x` + `];return m.push(x` /* Large desktop */ @media screen and ${p(s)} { :host([size='super-wide']) { grid-column: span 4; } } - `),d};var[u,v,z,$,C,S]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var E=document.createElement("style");E.innerHTML=` + `),m};var[u,v,z,$,E,C]=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Enter","Tab"];var S=document.createElement("style");S.innerHTML=` :root { --consonant-merch-card-detail-font-size: 12px; @@ -429,8 +418,14 @@ 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"); @@ -641,14 +636,8 @@ 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) var(--consonant-merch-spacing-s); - min-height: var(--consonant-merch-card-mini-compare-body-slot-height); + padding: var(--consonant-merch-spacing-xs) 0; } merch-card[variant="mini-compare-chart"] span.placeholder-resolved[data-template="strikethrough"] { @@ -657,25 +646,17 @@ 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); - min-height: var(--consonant-merch-card-mini-compare-promo-text-height); + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; } merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { @@ -697,6 +678,7 @@ 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 { @@ -734,7 +716,7 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { text-decoration: solid; } -@media screen and ${m} { +@media screen and ${d} { merch-card[variant="mini-compare-chart"] .mini-compare-chart-badge + [slot='heading-m'] { margin-top: var(--consonant-merch-spacing-m); @@ -743,13 +725,11 @@ 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"] { @@ -758,19 +738,6 @@ 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 { @@ -794,7 +761,6 @@ 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 { @@ -831,7 +797,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${m} { +@media screen and ${d} { :root { --consonant-merch-card-mini-compare-chart-width: 142px; --consonant-merch-card-special-offers-width: 302px; @@ -1099,7 +1065,7 @@ div[slot='bg-image'] img { } /* Mobile */ -@media screen and ${m} { +@media screen and ${d} { .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); @@ -1178,7 +1144,7 @@ merch-card .footer-row-cell:nth-child(8) { min-height: var(--consonant-merch-card-footer-row-8-min-height); } -`;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` +`;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` @@ -1299,8 +1265,10 @@ merch-card .footer-row-cell:nth-child(8) { ${this.secureLabelFooter}`}renderMiniCompareChart(){return a`
${this.renderIcons()} ${this.badge}
- - +
+ + +
@@ -1308,5 +1276,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===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}; + `}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}; //# sourceMappingURL=merch-card.js.map diff --git a/libs/img/icons/icons.svg b/libs/img/icons/icons.svg index a9d592d9d4..4d91de3b63 100644 --- a/libs/img/icons/icons.svg +++ b/libs/img/icons/icons.svg @@ -69,13 +69,10 @@ c-0.1,0.3-0.1,0.6-0.1,0.9v5.7H5.8c0,0,0-9.7,0-10.6h3.7v1.7c0.7-1.2,2-1.9,3.3-1.8c2.4,0,4.2,1.5,4.2,4.8V16.3z"/> - - Twitter - Twitter Logo - + + X + X Logo + diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js index 628c806386..8778c8e16a 100644 --- a/test/blocks/merch-card/merch-card.test.js +++ b/test/blocks/merch-card/merch-card.test.js @@ -336,7 +336,6 @@ 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')); @@ -347,25 +346,6 @@ 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 f5a75cf892..f0dbca545b 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
-
-
-
- - - - - - -
- -
-