diff --git a/libs/blocks/article-feed/article-helpers.js b/libs/blocks/article-feed/article-helpers.js index 779099e8f18..e9cfe1d59b5 100644 --- a/libs/blocks/article-feed/article-helpers.js +++ b/libs/blocks/article-feed/article-helpers.js @@ -129,7 +129,7 @@ export async function loadTaxonomy() { a.href = tax.link; } else { // eslint-disable-next-line no-console - window.lana.log(`Trying to get a link for an unknown topic: ${topic} (current page)`, { tags: 'errorType=warn,module=article-feed' }); + window.lana.log(`Trying to get a link for an unknown topic: ${topic} (current page)`, { tags: 'article-feed' }); a.href = '#'; } delete a.dataset.topicLink; diff --git a/libs/blocks/bulk-publish-v2/components/bulk-publisher.js b/libs/blocks/bulk-publish-v2/components/bulk-publisher.js index c0c88ae5db9..712f663fa08 100644 --- a/libs/blocks/bulk-publish-v2/components/bulk-publisher.js +++ b/libs/blocks/bulk-publish-v2/components/bulk-publisher.js @@ -1,7 +1,7 @@ import './job-process.js'; import { LitElement, html } from '../../../deps/lit-all.min.js'; import { getSheet } from '../../../../tools/utils/utils.js'; -import { authenticate, startJob } from '../services.js'; +import { authenticate, getPublishable, startJob } from '../services.js'; import { getConfig } from '../../../utils/utils.js'; import { delay, @@ -95,7 +95,8 @@ class BulkPublish2 extends LitElement { this.validateUrls(); } - setJobErrors(errors) { + setJobErrors(jobErrors, authErrors) { + const errors = [...jobErrors, ...authErrors]; const urls = []; errors.forEach((error) => { const matched = this.urls.filter((url) => { @@ -323,7 +324,8 @@ class BulkPublish2 extends LitElement { class="panel-title" @click=${handleToggle}> - Job Results + ${this.jobs.length ? html`${this.jobs.length}` : ''} + Job Result${this.jobs.length > 1 ? 's' : ''}
{ + /* c8 ignore next 4 */ const loader = this.renderRoot.querySelector('.load-indicator'); const message = this.renderRoot.querySelector('.message'); loader?.classList.add('hide'); @@ -427,6 +431,7 @@ class BulkPublish2 extends LitElement { const canUse = Object.values(this.user.permissions).filter((perms) => perms.canUse); if (canUse.length) return html``; message = 'Current user is not authorized to use Bulk Publishing Tool'; + /* c8 ignore next 3 */ } else { message = 'Please sign in to AEM sidekick to continue'; } diff --git a/libs/blocks/bulk-publish-v2/services.js b/libs/blocks/bulk-publish-v2/services.js index 2889aa56600..76af892bf2d 100644 --- a/libs/blocks/bulk-publish-v2/services.js +++ b/libs/blocks/bulk-publish-v2/services.js @@ -1,3 +1,4 @@ +import userCanPublishPage from '../../tools/utils/publish.js'; import { PROCESS_TYPES, getErrorText, @@ -246,8 +247,32 @@ const updateRetry = async ({ queue, urls, process }) => { return newQueue; }; +// publish authentication service +const getPublishable = async ({ urls, process, user }) => { + let publishable = { authorized: [], unauthorized: [] }; + if (!isLive(process)) { + publishable.authorized = urls; + } else { + const { permissions, profile } = user; + const live = { permissions: ['read'] }; + if (permissions?.publish?.canUse) { + live.permissions.push('write'); + } + publishable = await urls.reduce(async (init, url) => { + const result = await init; + const detail = { webPath: new URL(url).pathname, live, profile }; + const { canPublish, message } = await userCanPublishPage(detail); + if (canPublish) result.authorized.push(url); + else result.unauthorized.push({ href: url, message }); + return result; + }, Promise.resolve(publishable)); + } + return publishable; +}; + export { authenticate, + getPublishable, pollJobStatus, startJob, updateRetry, diff --git a/libs/blocks/event-rich-results/event-rich-results.js b/libs/blocks/event-rich-results/event-rich-results.js index e0df0551d6d..78f69ff15ba 100644 --- a/libs/blocks/event-rich-results/event-rich-results.js +++ b/libs/blocks/event-rich-results/event-rich-results.js @@ -16,7 +16,7 @@ function logNullValues(obj) { Object.keys(obj).forEach((key) => { const value = obj[key]; if (!value || value === '') { - window.lana.log(`Event property ${key} is not defined`, { tags: 'errorType=warn,module=event-rich-results' }); + window.lana.log(`Event property ${key} is not defined`, { tags: 'event-rich-results' }); } logNullValues(value); }); diff --git a/libs/blocks/faas/utils.js b/libs/blocks/faas/utils.js index 70c17f093d4..9c3249d7e4a 100644 --- a/libs/blocks/faas/utils.js +++ b/libs/blocks/faas/utils.js @@ -248,7 +248,7 @@ const beforeSubmitCallback = () => { }), }) .catch((error) => { - window.lana.log(`AA Sandbox Error: ${error.reason || error.error || error.message || error}`, { tags: 'errorType=info,module=faas' }); + window.lana.log(`AA Sandbox Error: ${error.reason || error.error || error.message || error}`, { tags: 'faas', errorType: 'i' }); }); } }; diff --git a/libs/blocks/library-config/lists/templates.js b/libs/blocks/library-config/lists/templates.js index 2c1f7800782..736f79c35c5 100644 --- a/libs/blocks/library-config/lists/templates.js +++ b/libs/blocks/library-config/lists/templates.js @@ -43,7 +43,7 @@ function formatDom(aemDom, path) { async function formatTemplate(path) { const resp = await fetch(path); - if (!resp.ok) window.lana.log('Could not fetch template path', { tags: 'errorType=info,module=sidekick-templates' }); + if (!resp.ok) window.lana.log('Could not fetch template path', { tags: 'sidekick-templates', errorType: 'i' }); const html = await resp.text(); const dom = new DOMParser().parseFromString(html, 'text/html'); diff --git a/libs/blocks/mobile-app-banner/mobile-app-banner.js b/libs/blocks/mobile-app-banner/mobile-app-banner.js index 9c5988ee44f..62f68b70869 100644 --- a/libs/blocks/mobile-app-banner/mobile-app-banner.js +++ b/libs/blocks/mobile-app-banner/mobile-app-banner.js @@ -18,7 +18,7 @@ async function getECID() { if (window.alloy) { await window.alloy('getIdentity').then((data) => { ecid = data?.identity?.ECID; - }).catch((err) => window.lana.log(`Error fetching ECID: ${err}`, { tags: 'errorType=error,module=mobile-app-banner' })); + }).catch((err) => window.lana.log(`Error fetching ECID: ${err}`, { tags: 'mobile-app-banner' })); } return ecid; } diff --git a/libs/blocks/path-finder/path-finder.js b/libs/blocks/path-finder/path-finder.js index 8cad4c1c9dc..3ba93e71df1 100644 --- a/libs/blocks/path-finder/path-finder.js +++ b/libs/blocks/path-finder/path-finder.js @@ -63,7 +63,7 @@ function buildUi(el, path) { async function setup(el) { await login({ scopes: SCOPES, telemetry: TELEMETRY }); if (!account.value.username) { - window.lana.log('Could not login to MS Graph', { tags: 'errorType=info,module=path-finder' }); + window.lana.log('Could not login to MS Graph', { tags: 'path-finder', errorType: 'i' }); return; } el.innerHTML = ''; diff --git a/libs/blocks/preflight/panels/seo.js b/libs/blocks/preflight/panels/seo.js index e69c561a7d5..443b35d7c86 100644 --- a/libs/blocks/preflight/panels/seo.js +++ b/libs/blocks/preflight/panels/seo.js @@ -160,7 +160,7 @@ async function spidyCheck(url) { connectionError(); } catch (e) { connectionError(); - window.lana.log(`There was a problem connecting to the link check API ${url}. ${e}`, { tags: 'errorType=info,module=preflight' }); + window.lana.log(`There was a problem connecting to the link check API ${url}. ${e}`, { tags: 'preflight', errorType: 'i' }); } return false; } @@ -182,7 +182,7 @@ async function getSpidyResults(url, opts) { return acc; }, []); } catch (e) { - window.lana.log(`There was a problem connecting to the link check API ${url}/api/url-http-status. ${e}`, { tags: 'errorType=info,module=preflight' }); + window.lana.log(`There was a problem connecting to the link check API ${url}/api/url-http-status. ${e}`, { tags: 'preflight', errorType: 'i' }); return []; } } diff --git a/libs/blocks/quiz-entry/mlField.js b/libs/blocks/quiz-entry/mlField.js index a04545b80c2..17b9f72fc96 100644 --- a/libs/blocks/quiz-entry/mlField.js +++ b/libs/blocks/quiz-entry/mlField.js @@ -26,7 +26,7 @@ export const getMLResults = async (endpoint, apiKey, threshold, input, count, va body: JSON.stringify(params), }) .then((response) => response.json()) - .catch((error) => window.lana.log(`ERROR: Fetching fi codes ${error}`, { tags: 'errorType=info,module=quiz-entry' })); + .catch((error) => window.lana.log(`ERROR: Fetching fi codes ${error}`, { tags: 'quiz-entry', errorType: 'i' })); let value; let highestProb = null; diff --git a/libs/blocks/quiz-entry/quiz-entry.js b/libs/blocks/quiz-entry/quiz-entry.js index 6c9c9394ba1..ea83b47c606 100644 --- a/libs/blocks/quiz-entry/quiz-entry.js +++ b/libs/blocks/quiz-entry/quiz-entry.js @@ -212,7 +212,7 @@ const App = ({ } if (fiResults.errors) error = fiResults.errors[0].title; if (fiResults.error_code) error = fiResults.message; - window.lana.log(`ML results error - ${error}`, { tags: 'errorType=info,module=quiz-entry' }); + window.lana.log(`ML results error - ${error}`, { tags: 'quiz-entry', errorType: 'i' }); sendMLFieldAnalytics(fallback, false); } diff --git a/libs/blocks/quiz-entry/quizPopover.js b/libs/blocks/quiz-entry/quizPopover.js index 1c444d0d3d8..ed0edbe212b 100644 --- a/libs/blocks/quiz-entry/quizPopover.js +++ b/libs/blocks/quiz-entry/quizPopover.js @@ -12,7 +12,7 @@ export const getSuggestions = async (endpoint, clientId, input, scope) => { }); if (!response.ok) { - window.lana.log('Failed to fetch suggestions', { tags: 'errorType=info,module=quiz-entry' }); + window.lana.log('Failed to fetch suggestions', { tags: 'quiz-entry', errorType: 'i' }); return ''; } diff --git a/libs/blocks/quiz-results/quiz-results.js b/libs/blocks/quiz-results/quiz-results.js index 7465782fc79..7c9622366a9 100644 --- a/libs/blocks/quiz-results/quiz-results.js +++ b/libs/blocks/quiz-results/quiz-results.js @@ -20,7 +20,7 @@ async function loadFragments(el, experiences) { function redirectPage(quizUrl, debug, message) { const url = quizUrl ? getLocalizedURL(quizUrl.text) : 'https://adobe.com'; - window.lana.log(message, { tags: 'errorType=error,module=quiz-results' }); + window.lana.log(message, { tags: 'quiz-results' }); if (debug === 'quiz-results') { // eslint-disable-next-line no-console @@ -97,7 +97,7 @@ export default async function init(el, debug = null, localStoreKey = null) { loadFragments(el, basic); } else { - window.lana.log(`${LOADING_ERROR} The quiz-results block is misconfigured`, { tags: 'errorType=error,module=quiz-results' }); + window.lana.log(`${LOADING_ERROR} The quiz-results block is misconfigured`, { tags: 'quiz-results' }); return; } diff --git a/libs/blocks/table/table.js b/libs/blocks/table/table.js index 57ed330eb4f..9d41802ff67 100644 --- a/libs/blocks/table/table.js +++ b/libs/blocks/table/table.js @@ -6,6 +6,7 @@ const DESKTOP_SIZE = 900; const MOBILE_SIZE = 768; const tableHighlightLoadedEvent = new Event('milo:table:highlight:loaded'); let tableIndex = 0; +const isMobileLandscape = () => (window.matchMedia('(orientation: landscape)').matches && window.innerHeight <= MOBILE_SIZE); function defineDeviceByScreenSize() { const screenWidth = window.innerWidth; if (screenWidth >= DESKTOP_SIZE) { @@ -17,6 +18,12 @@ function defineDeviceByScreenSize() { return 'TABLET'; } +function isStickyHeader(el) { + return el.classList.contains('sticky') + || (el.classList.contains('sticky-desktop-up') && defineDeviceByScreenSize() === 'DESKTOP') + || (el.classList.contains('sticky-tablet-up') && defineDeviceByScreenSize() !== 'MOBILE' && !isMobileLandscape()); +} + function handleHeading(table, headingCols) { const isPriceBottom = table.classList.contains('pricing-bottom'); headingCols.forEach((col, i) => { @@ -382,7 +389,7 @@ function applyStylesBasedOnScreenSize(table, originTable) { } if ((!isMerch && !table.querySelector('.col-3')) - || (isMerch && !table.querySelector('.col-2'))) return; + || (isMerch && !table.querySelector('.col-2'))) return; const filterChangeEvent = () => { table.innerHTML = originTable.innerHTML; @@ -501,10 +508,6 @@ export default function init(el) { expandSection = handleSection(sectionParams); }); - const isStickyHeader = el.classList.contains('sticky') - || (el.classList.contains('sticky-desktop-up') && defineDeviceByScreenSize() === 'DESKTOP') - || (el.classList.contains('sticky-tablet-up') && defineDeviceByScreenSize() !== 'MOBILE'); - handleHighlight(el); if (isMerch) formatMerchTable(el); @@ -525,7 +528,7 @@ export default function init(el) { const handleResize = () => { applyStylesBasedOnScreenSize(el, originTable); - if (isStickyHeader) handleScrollEffect(el); + if (isStickyHeader(el)) handleScrollEffect(el); }; handleResize(); diff --git a/libs/blocks/tag-selector/tag-selector.js b/libs/blocks/tag-selector/tag-selector.js index 8607fed08c3..ccfc43f9c97 100644 --- a/libs/blocks/tag-selector/tag-selector.js +++ b/libs/blocks/tag-selector/tag-selector.js @@ -86,7 +86,7 @@ const TagSelector = ({ consumerUrls = [] }) => { const fetchCasS = async () => { const { tags, errorMsg } = await loadCaasTags(caasTagUrl); - if (errorMsg) window.lana.log(`Tag Selector. Error fetching caas tags: ${errorMsg}`, { tags: 'errorType=info,module=tag-selector' }); + if (errorMsg) window.lana.log(`Tag Selector. Error fetching caas tags: ${errorMsg}`, { tags: 'tag-selector', errorType: 'i' }); setTagSelectorTags((prevConsumerTags) => ({ CaaS: tags, ...prevConsumerTags })); }; diff --git a/libs/blocks/video-metadata/video-metadata.js b/libs/blocks/video-metadata/video-metadata.js index 388cb62034c..d94b9410b4c 100644 --- a/libs/blocks/video-metadata/video-metadata.js +++ b/libs/blocks/video-metadata/video-metadata.js @@ -25,7 +25,7 @@ function addBroadcastEventField(videoObj, blockKey, blockValue) { videoObj.publication[i][camelize(key)] = blockValue; break; default: - window.lana.log(`VideoMetadata -- Unknown BroadcastEvent property: ${blockKey}`, { tags: 'errorType=warn,module=video-metadata' }); + window.lana.log(`VideoMetadata -- Unknown BroadcastEvent property: ${blockKey}`, { tags: 'video-metadata' }); break; } } @@ -45,7 +45,7 @@ function addClipField(videoObj, blockKey, blockValue) { videoObj.hasPart[i][camelize(key)] = blockValue; break; default: - window.lana.log(`VideoMetadata -- Unhandled Clip property: ${blockKey}`, { tags: 'errorType=warn,module=video-metadata' }); + window.lana.log(`VideoMetadata -- Unhandled Clip property: ${blockKey}`, { tags: 'video-metadata' }); break; } } @@ -61,7 +61,7 @@ function addSeekToActionField(videoObj, blockKey, blockValue) { videoObj.potentialAction['startOffset-input'] = blockValue; break; default: - window.lana.log(`VideoMetadata -- Unhandled SeekToAction property: ${blockKey}`, { tags: 'errorType=warn,module=video-metadata' }); + window.lana.log(`VideoMetadata -- Unhandled SeekToAction property: ${blockKey}`, { tags: 'video-metadata' }); break; } } @@ -96,7 +96,7 @@ export function createVideoObject(record) { addSeekToActionField(video, blockKey, blockVal); break; default: - window.lana.log(`VideoMetadata -- Unhandled VideoObject property: ${blockKey}`, { tags: 'errorType=warn,module=video-metadata' }); + window.lana.log(`VideoMetadata -- Unhandled VideoObject property: ${blockKey}`, { tags: 'video-metadata' }); break; } }); diff --git a/libs/blocks/vimeo/vimeo.js b/libs/blocks/vimeo/vimeo.js index deabe6bb85d..10c55b599df 100644 --- a/libs/blocks/vimeo/vimeo.js +++ b/libs/blocks/vimeo/vimeo.js @@ -36,7 +36,7 @@ class LiteVimeo extends HTMLElement { this.style.backgroundImage = `url("${thumbnailUrl}")`; }) .catch((e) => { - window.lana.log(`Error fetching Vimeo thumbnail: ${e}`, { tags: 'errorType=info,module=vimeo' }); + window.lana.log(`Error fetching Vimeo thumbnail: ${e}`, { tags: 'vimeo', errorType: 'i' }); }); } diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js index 588638587ab..aa77c875675 100644 --- a/libs/deps/mas/merch-card.js +++ b/libs/deps/mas/merch-card.js @@ -1,6 +1,6 @@ -import{html as n,LitElement as N}from"../lit-all.min.js";import{LitElement as L,html as E,css as O}from"../lit-all.min.js";var h=class extends L{static properties={size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}};constructor(){super(),this.size="m",this.alt=""}render(){let{href:e}=this;return e?E` +import{LitElement as we}from"../lit-all.min.js";import{LitElement as me,html as V,css as de}from"../lit-all.min.js";var n=class extends me{static properties={size:{type:String,attribute:!0},src:{type:String,attribute:!0},alt:{type:String,attribute:!0},href:{type:String,attribute:!0}};constructor(){super(),this.size="m",this.alt=""}render(){let{href:e}=this;return e?V` ${this.alt} - `:E` ${this.alt}`}static styles=O` + `:V` ${this.alt}`}static styles=de` :host { --img-width: 32px; --img-height: 32px; @@ -23,7 +23,7 @@ import{html as n,LitElement as N}from"../lit-all.min.js";import{LitElement as L, width: var(--img-width); height: var(--img-height); } - `};customElements.define("merch-icon",h);import{css as b,unsafeCSS as u}from"../lit-all.min.js";var g="(max-width: 767px)",x="(max-width: 1199px)",c="(min-width: 768px)",a="(min-width: 1200px)",i="(min-width: 1600px)";var C=b` + `};customElements.define("merch-icon",n);import{css as M,unsafeCSS as A}from"../lit-all.min.js";var g="(max-width: 767px)",k="(max-width: 1199px)",m="(min-width: 768px)",s="(min-width: 1200px)",l="(min-width: 1600px)";var G=M` :host { position: relative; display: flex; @@ -42,26 +42,6 @@ import{html as n,LitElement as N}from"../lit-all.min.js";import{LitElement as L, visibility: hidden; } - :host([variant='special-offers']) { - min-height: 439px; - } - - :host([variant='catalog']) { - min-height: 330px; - } - - :host([variant='plans']) { - min-height: 348px; - } - - :host([variant='segment']) { - min-height: 214px; - } - - :host([variant='ccd-action']:not([size])) { - width: var(--consonant-merch-card-ccd-action-width); - } - :host([aria-selected]) { outline: none; box-sizing: border-box; @@ -83,10 +63,6 @@ import{html as n,LitElement as N}from"../lit-all.min.js";import{LitElement as L, background-image: var(--ellipsis-icon); } - :host([variant='mini-compare-chart']) > slot:not([name='icons']) { - display: block; - } - .top-section { display: flex; justify-content: flex-start; @@ -151,19 +127,6 @@ import{html as n,LitElement as N}from"../lit-all.min.js";import{LitElement as L, border-radius: 0 5px 5px 0; } - .body .catalog-badge { - display: flex; - 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 { right: 0; padding: var(--consonant-merch-spacing-xs); @@ -267,131 +230,13 @@ import{html as n,LitElement as N}from"../lit-all.min.js";import{LitElement as L, margin-top: 2px; } - .twp-badge { - padding: 4px 10px 5px 10px; - } - - :host([aria-selected]) .twp-badge { - margin-inline-end: 2px; - padding-inline-end: 9px; - } - - :host([variant='twp']) { - padding: 4px 10px 5px 10px; - } - slot[name='icons'] { display: flex; gap: 8px; } - - :host([variant='twp']) ::slotted(merch-offer-select) { - display: none; - } - - :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 { - gap: var(--consonant-merch-spacing-xxs); - flex-direction: column; - align-self: flex-start; - } - - :host([variant='special-offers'].center) { - text-align: center; - } - - /* plans */ - :host([variant='plans']) { - min-height: 348px; - } - - :host([variant='mini-compare-chart']) footer { - min-height: var(--consonant-merch-card-mini-compare-footer-height); - padding: var(--consonant-merch-spacing-xs); - } - - /* mini-compare card */ - :host([variant='mini-compare-chart']) .top-section { - padding-top: var(--consonant-merch-spacing-s); - padding-inline-start: var(--consonant-merch-spacing-s); - height: var(--consonant-merch-card-mini-compare-top-section-height); - } - - @media screen and ${u(x)} { - [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer { - flex-direction: column; - align-items: stretch; - text-align: center; - } - } - - @media screen and ${u(a)} { - :host([variant='mini-compare-chart']) footer { - padding: var(--consonant-merch-spacing-xs) - var(--consonant-merch-spacing-s) - var(--consonant-merch-spacing-s) - var(--consonant-merch-spacing-s); - } - } - - :host([variant='mini-compare-chart']) slot[name='footer-rows'] { - flex: 1; - display: flex; - flex-direction: column; - justify-content: end; - } - /* mini-compare card heights for the slots: heading-m, body-m, heading-m-price, price-commitment, offers, promo-text, footer */ - :host([variant='mini-compare-chart']) slot[name='heading-m'] { - min-height: var(--consonant-merch-card-mini-compare-heading-m-height); - } - :host([variant='mini-compare-chart']) slot[name='body-m'] { - min-height: var(--consonant-merch-card-mini-compare-body-m-height); - } - :host([variant='mini-compare-chart']) slot[name='heading-m-price'] { - min-height: var( - --consonant-merch-card-mini-compare-heading-m-price-height - ); - } - :host([variant='mini-compare-chart']) slot[name='price-commitment'] { - min-height: var( - --consonant-merch-card-mini-compare-price-commitment-height - ); - } - :host([variant='mini-compare-chart']) slot[name='offers'] { - min-height: var(--consonant-merch-card-mini-compare-offers-height); - } - :host([variant='mini-compare-chart']) slot[name='promo-text'] { - min-height: var(--consonant-merch-card-mini-compare-promo-text-height); - } - :host([variant='mini-compare-chart']) slot[name='callout-content'] { - min-height: var( - --consonant-merch-card-mini-compare-callout-content-height - ); - } - - :host([variant='plans']) ::slotted([slot='heading-xs']), - :host([variant='segment']) ::slotted([slot='heading-xs']) { - max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); - } -`,z=()=>{let l=[b` +`,U=()=>{let r=[M` /* Tablet */ - @media screen and ${u(c)} { + @media screen and ${A(m)} { :host([size='wide']), :host([size='super-wide']) { grid-column: span 3; @@ -402,556 +247,424 @@ import{html as n,LitElement as N}from"../lit-all.min.js";import{LitElement as L, } /* Laptop */ - @media screen and ${u(a)} { + @media screen and ${A(s)} { :host([size='super-wide']) { grid-column: span 3; } - `];return l.push(b` + `];return r.push(M` /* Large desktop */ - @media screen and ${u(i)} { + @media screen and ${A(l)} { :host([size='super-wide']) { grid-column: span 4; } } - `),l};function k(){return window.matchMedia("(max-width: 767px)").matches}function S(){return window.matchMedia("(max-width: 1024px)").matches}var $=document.createElement("style");$.innerHTML=` + `),r};import{html as z}from"../lit-all.min.js";var d=class r{static styleMap={};card;insertVariantStyle(){if(!r.styleMap[this.card.variant]){r.styleMap[this.card.variant]=!0;let e=document.createElement("style");e.innerHTML=this.getGlobalCSS(),document.head.appendChild(e)}}constructor(e){this.card=e,setTimeout(()=>this.insertVariantStyle(),1)}get badge(){let e;if(!(!this.card.badgeBackgroundColor||!this.card.badgeColor||!this.card.badgeText))return this.evergreen&&(e=`border: 1px solid ${this.card.badgeBackgroundColor}; border-right: none;`),z` +
+ ${this.card.badgeText} +
+ `}get cardImage(){return z`
+ + ${this.badge} +
`}getGlobalCSS(){return""}get evergreen(){return this.card.classList.contains("intro-pricing")}get promoBottom(){return this.card.classList.contains("promo-bottom")}get headingSelector(){return'[slot="heading-xs"]'}get secureLabelFooter(){let e=this.card.secureLabel?z`${this.card.secureLabel}`:"";return z`
${e}
`}async adjustTitleWidth(){let e=this.card.getBoundingClientRect().width,t=this.card.badgeElement?.getBoundingClientRect().width||0;e===0||t===0||this.card.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-t-16)}px`)}postCardUpdateHook(){}connectedCallbackHook(){}disconnectedCallbackHook(){}renderLayout(){}};import{html as P,css as le}from"../lit-all.min.js";function q(){return window.matchMedia("(max-width: 767px)").matches}function j(){return window.matchMedia("(max-width: 1024px)").matches}var I="merch-offer-select:ready",K="merch-card:ready",F="merch-card:action-menu-toggle";var O="merch-storage:change",R="merch-quantity-selector:change";var W=` :root { - --consonant-merch-card-detail-font-size: 12px; - --consonant-merch-card-detail-font-weight: 500; - --consonant-merch-card-detail-letter-spacing: 0.8px; - --consonant-merch-card-background-color: #fff; + --consonant-merch-card-catalog-width: 276px; + --consonant-merch-card-catalog-icon-size: 40px; +} +.one-merch-card.catalog, +.two-merch-cards.catalog, +.three-merch-cards.catalog, +.four-merch-cards.catalog { + grid-template-columns: var(--consonant-merch-card-catalog-width); +} - --consonant-merch-card-heading-font-size: 18px; - --consonant-merch-card-heading-line-height: 22.5px; - --consonant-merch-card-heading-secondary-font-size: 14px; - --consonant-merch-card-body-font-size: 14px; - --consonant-merch-card-body-line-height: 21px; - --consonant-merch-card-promo-text-height: var(--consonant-merch-card-body-font-size); +@media screen and ${m} { + :root { + --consonant-merch-card-catalog-width: 302px; + } - /* responsive width */ - --consonant-merch-card-mobile-width: 300px; - --consonant-merch-card-tablet-wide-width: 700px; + .two-merch-cards.catalog, + .three-merch-cards.catalog, + .four-merch-cards.catalog { + grid-template-columns: repeat(2, var(--consonant-merch-card-catalog-width)); + } +} - /* spacing */ - --consonant-merch-spacing-xxxs: 4px; - --consonant-merch-spacing-xxs: 8px; - --consonant-merch-spacing-xs: 16px; - --consonant-merch-spacing-s: 24px; - --consonant-merch-spacing-m: 32px; +@media screen and ${s} { + :root { + --consonant-merch-card-catalog-width: 276px; + } - /* cta */ - --consonant-merch-card-cta-font-size: 15px; + .three-merch-cards.catalog, + .four-merch-cards.catalog { + grid-template-columns: repeat(3, var(--consonant-merch-card-catalog-width)); + } +} - /* headings */ - --consonant-merch-card-heading-xs-font-size: 18px; - --consonant-merch-card-heading-xs-line-height: 22.5px; - --consonant-merch-card-heading-s-font-size: 20px; - --consonant-merch-card-heading-s-line-height: 25px; - --consonant-merch-card-heading-m-font-size: 24px; - --consonant-merch-card-heading-m-line-height: 30px; - --consonant-merch-card-heading-l-font-size: 20px; - --consonant-merch-card-heading-l-line-height: 30px; - --consonant-merch-card-heading-xl-font-size: 36px; - --consonant-merch-card-heading-xl-line-height: 45px; +@media screen and ${l} { + .four-merch-cards.catalog { + grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); + } +} - /* detail */ - --consonant-merch-card-detail-m-font-size: 12px; - --consonant-merch-card-detail-m-line-height: 15px; - --consonant-merch-card-detail-m-font-weight: 700; - --consonant-merch-card-detail-m-letter-spacing: 1px; +merch-card[variant="catalog"] [slot="action-menu-content"] { + background-color: #000; + color: var(--color-white, #fff); + font-size: var(--consonant-merch-card-body-xs-font-size); + width: fit-content; + padding: var(--consonant-merch-spacing-xs); + border-radius: var(--consonant-merch-spacing-xxxs); + position: absolute; + top: 55px; + right: 15px; + line-height: var(--consonant-merch-card-body-line-height); +} - /* body */ - --consonant-merch-card-body-xxs-font-size: 12px; - --consonant-merch-card-body-xxs-line-height: 18px; - --consonant-merch-card-body-xxs-letter-spacing: 1px; - --consonant-merch-card-body-xs-font-size: 14px; - --consonant-merch-card-body-xs-line-height: 21px; - --consonant-merch-card-body-s-font-size: 16px; - --consonant-merch-card-body-s-line-height: 24px; - --consonant-merch-card-body-m-font-size: 18px; - --consonant-merch-card-body-m-line-height: 27px; - --consonant-merch-card-body-l-font-size: 20px; - --consonant-merch-card-body-l-line-height: 30px; - --consonant-merch-card-body-xl-font-size: 22px; - --consonant-merch-card-body-xl-line-height: 33px; +merch-card[variant="catalog"] [slot="action-menu-content"] ul { + padding-left: 0; + padding-bottom: var(--consonant-merch-spacing-xss); + margin-top: 0; + margin-bottom: 0; + list-style-position: inside; + list-style-type: '\u2022 '; +} +merch-card[variant="catalog"] [slot="action-menu-content"] ul li { + padding-left: 0; + line-height: var(--consonant-merch-card-body-line-height); +} - --consonant-merch-card-heading-padding: 0; - --consonant-merch-card-image-height: 180px; +merch-card[variant="catalog"] [slot="action-menu-content"] ::marker { + margin-right: 0; +} - /* colors */ - --consonant-merch-card-border-color: #eaeaea; - --color-accent: #1473E6; - --merch-color-focus-ring: #1473E6; - --merch-color-grey-80: #2c2c2c; - --merch-color-green-promo: #2D9D78; +merch-card[variant="catalog"] [slot="action-menu-content"] p { + color: var(--color-white, #fff); +} - /* merch card generic */ - --consonant-merch-card-max-width: 300px; - --transition: cmax-height 0.3s linear, opacity 0.3s linear; +merch-card[variant="catalog"] [slot="action-menu-content"] a { + color: var(--consonant-merch-card-background-color); + text-decoration: underline; +} - /* special offers */ - --consonant-merch-card-special-offers-width: 378px; +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); +}`;var u=class extends d{constructor(e){super(e)}renderLayout(){return P`
+
+ ${this.badge} +
+
+ ${this.card.actionMenuContent} + + + + ${this.promoBottom?"":P``} + + ${this.promoBottom?P``:""} +
+ ${this.secureLabelFooter}`}getGlobalCSS(){return W}toggleActionMenu=e=>{let t=e?.type==="mouseleave"?!0:void 0,o=this.card.shadowRoot.querySelector('slot[name="action-menu-content"]');o&&(t||this.card.dispatchEvent(new CustomEvent(F,{bubbles:!0,composed:!0,detail:{card:this.card.name,type:"action-menu"}})),o.classList.toggle("hidden",t))};connectedCallbackHook(){this.card.addEventListener("mouseleave",this.toggleActionMenu)}disconnectedCallbackHook(){this.card.removeEventListener("mouseleave",this.toggleActionMenu)}static variantStyle=le` + :host([variant='catalog']) { + min-height: 330px; + } - /* image */ - --consonant-merch-card-image-width: 300px; + .body .catalog-badge { + display: flex; + 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; + } + `};import{html as H,css as pe}from"../lit-all.min.js";var Y=` +:root { + --consonant-merch-card-ccd-action-width: 276px; + --consonant-merch-card-ccd-action-min-height: 320px; +} - /* segment */ - --consonant-merch-card-segment-width: 378px; +.one-merch-card.ccd-action, +.two-merch-cards.ccd-action, +.three-merch-cards.ccd-action, +.four-merch-cards.ccd-action { + grid-template-columns: var(--consonant-merch-card-ccd-action-width); +} - /* inline-heading */ - --consonant-merch-card-inline-heading-width: 300px; +merch-card[variant="ccd-action"] .price-strikethrough { + font-size: 18px; +} - /* product */ - --consonant-merch-card-product-width: 300px; +@media screen and ${m} { + .two-merch-cards.ccd-action, + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(2, var(--consonant-merch-card-ccd-action-width)); + } +} - /* plans */ - --consonant-merch-card-plans-width: 300px; - --consonant-merch-card-plans-icon-size: 40px; - - /* catalog */ - --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; - - /* ccd-action */ - --consonant-merch-card-ccd-action-width: 276px; - --consonant-merch-card-ccd-action-min-height: 320px; - - - /*mini compare chart */ - --consonant-merch-card-mini-compare-chart-icon-size: 32px; - --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; - --consonant-merch-card-mini-compare-mobile-cta-width: 75px; - --consonant-merch-card-mini-compare-badge-mobile-max-width: 50px; - - /* inline SVGs */ - --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'>'); - - /* callout */ - --consonant-merch-card-callout-line-height: 21px; - --consonant-merch-card-callout-font-size: 14px; - --consonant-merch-card-callout-font-color: #2C2C2C; - --consonant-merch-card-callout-icon-size: 16px; - --consonant-merch-card-callout-icon-top: 6px; - --consonant-merch-card-callout-icon-right: 8px; - --consonant-merch-card-callout-letter-spacing: 0px; - --consonant-merch-card-callout-icon-padding: 34px; - --consonant-merch-card-callout-spacing-xxs: 8px; -} - -merch-card-collection { - display: contents; -} - -merch-card-collection > merch-card:not([style]) { - display: none; -} - -merch-card-collection > p[slot], -merch-card-collection > div[slot] p { - margin: 0; -} - -.one-merch-card, -.two-merch-cards, -.three-merch-cards, -.four-merch-cards { - display: grid; - justify-content: center; - justify-items: stretch; - gap: var(--consonant-merch-spacing-m); - padding: var(--spacing-m); -} - -merch-card.background-opacity-70 { - background-color: rgba(255 255 255 / 70%); -} - -merch-card.has-divider hr { - margin-bottom: var(--consonant-merch-spacing-xs); - height: 1px; - border: none; -} - -merch-card[variant="special-offers"] span[is="inline-price"][data-template="strikethrough"] { - font-size: var(--consonant-merch-card-body-xs-font-size); -} - -merch-card p, merch-card h3, merch-card h4 { - margin: 0; -} - -merch-card span[is=inline-price] { - display: inline-block; -} - -merch-card [slot='heading-xs'] { - color: var(--merch-color-grey-80); - font-size: var(--consonant-merch-card-heading-xs-font-size); - line-height: var(--consonant-merch-card-heading-xs-line-height); - margin: 0; - text-decoration: none; -} - -merch-card.dc-pricing [slot='heading-xs'] { - margin-bottom: var(--consonant-merch-spacing-xxs); -} - -merch-card:not([variant='inline-heading']) [slot='heading-xs'] a { - color: var(--merch-color-grey-80); -} - -merch-card [slot='starting-at'] { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - font-weight: 500; -} - -merch-card [slot='heading-xs'] a:not(:hover) { - text-decoration: inherit; -} - -merch-card [slot='heading-s'] { - font-size: var(--consonant-merch-card-heading-s-font-size); - line-height: var(--consonant-merch-card-heading-s-line-height); - margin: 0; - color: var(--merch-color-grey-80); -} - -merch-card [slot='heading-m'] { - font-size: var(--consonant-merch-card-heading-m-font-size); - line-height: var(--consonant-merch-card-heading-m-line-height); - margin: 0; - color: var(--merch-color-grey-80); - font-weight: 700; -} - -merch-card [slot='heading-m-price'] { - font-size: var(--consonant-merch-card-heading-m-font-size); - line-height: var(--consonant-merch-card-heading-m-line-height); - padding: 0 var(--consonant-merch-spacing-s); - font-weight: 700; - margin: 0; - color: var(--merch-color-grey-80); -} - -merch-card [slot='offers'] { - padding: var(--consonant-merch-spacing-xxs) var(--consonant-merch-spacing-s); -} - -merch-card [slot='heading-l'] { - font-size: var(--consonant-merch-card-heading-l-font-size); - line-height: var(--consonant-merch-card-heading-l-line-height); - margin: 0; - color: var(--merch-color-grey-80); -} - -merch-card [slot='heading-xl'] { - font-size: var(--consonant-merch-card-heading-xl-font-size); - line-height: var(--consonant-merch-card-heading-xl-line-height); - margin: 0; - color: var(--merch-color-grey-80); -} - -merch-card [slot='callout-content'] { - display: flex; - flex-direction: column; - margin: var(--consonant-merch-spacing-xxxs) 0px; - gap: var(--consonant-merch-card-callout-spacing-xxs); -} - -merch-card [slot='callout-content'] > div { - display: flex; - flex-direction: column; - margin: var(--consonant-merch-spacing-xxxs) 0px; - gap: var(--consonant-merch-card-callout-spacing-xxs); - align-items: flex-start; -} - -merch-card [slot='callout-content'] > div > div { - display: flex; - background: rgba(203 203 203 / 50%); - border-radius: var(--consonant-merch-spacing-xxxs); - padding: var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxs); -} - -merch-card [slot='callout-content'] > div > div > div { - display: inline-block; - text-align: left; - font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) var(--body-font-family, 'Adobe Clean'); - letter-spacing: var(--consonant-merch-card-callout-letter-spacing); - color: var(--consonant-merch-card-callout-font-color); -} - -merch-card [slot='callout-content'] img { - width: var(--consonant-merch-card-callout-icon-size); - height: var(--consonant-merch-card-callout-icon-size); - margin: 2.5px 0px 0px 9px; -} - -merch-card [slot='detail-m'] { - font-size: var(--consonant-merch-card-detail-m-font-size); - letter-spacing: var(--consonant-merch-card-detail-m-letter-spacing); - font-weight: var(--consonant-merch-card-detail-m-font-weight); - text-transform: uppercase; - margin: 0; - color: var(--merch-color-grey-80); -} - -merch-card [slot="body-xxs"] { - font-size: var(--consonant-merch-card-body-xxs-font-size); - line-height: var(--consonant-merch-card-body-xxs-line-height); - font-weight: normal; - letter-spacing: var(--consonant-merch-card-body-xxs-letter-spacing); - color: var(--merch-color-grey-80); - margin: 0; -} - -merch-card [slot="body-xs"] { - 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 [slot="body-m"] { - font-size: var(--consonant-merch-card-body-m-font-size); - line-height: var(--consonant-merch-card-body-m-line-height); - color: var(--merch-color-grey-80); -} - -merch-card [slot="body-l"] { - font-size: var(--consonant-merch-card-body-l-font-size); - line-height: var(--consonant-merch-card-body-l-line-height); - color: var(--merch-color-grey-80); -} - -merch-card [slot="body-xl"] { - font-size: var(--consonant-merch-card-body-xl-font-size); - line-height: var(--consonant-merch-card-body-xl-line-height); - color: var(--merch-color-grey-80); -} - -merch-card[variant="plans"] [slot="description"] { - min-height: 84px; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] { - background-color: #000; - color: var(--color-white, #fff); - font-size: var(--consonant-merch-card-body-xs-font-size); - width: fit-content; - padding: var(--consonant-merch-spacing-xs); - border-radius: var(--consonant-merch-spacing-xxxs); - position: absolute; - top: 55px; - right: 15px; - line-height: var(--consonant-merch-card-body-line-height); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ul { - padding-left: 0; - padding-bottom: var(--consonant-merch-spacing-xss); - margin-top: 0; - margin-bottom: 0; - list-style-position: inside; - list-style-type: '\u2022 '; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ul li { - padding-left: 0; - line-height: var(--consonant-merch-card-body-line-height); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ::marker { - margin-right: 0; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] p { - color: var(--color-white, #fff); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] a { - color: var(--consonant-merch-card-background-color); - 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; -} - -merch-card[variant="plans"] [slot="quantity-select"] { - display: flex; - justify-content: flex-start; - box-sizing: border-box; - width: 100%; - padding: var(--consonant-merch-spacing-xs); +@media screen and ${s} { + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(3, var(--consonant-merch-card-ccd-action-width)); + } } -merch-card[variant="twp"] div[class$='twp-badge'] { - padding: 4px 10px 5px 10px; +@media screen and ${l} { + .four-merch-cards.ccd-action { + grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); + } } - -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); +`;var f=class extends d{constructor(e){super(e)}getGlobalCSS(){return Y}renderLayout(){return H`
+ ${this.badge} + + + ${this.promoBottom?H``:H``} +
+ +
`}static variantStyle=pe` + :host([variant='ccd-action']:not([size])) { + width: var(--consonant-merch-card-ccd-action-width); + } + `};import{html as v}from"../lit-all.min.js";var Q=` +:root { + --consonant-merch-card-image-width: 300px; } -merch-card[variant="twp"] [slot="body-xs"] ul { - padding: 0; - margin: 0; +.one-merch-card.image, +.two-merch-cards.image, +.three-merch-cards.image, +.four-merch-cards.image { + grid-template-columns: var(--consonant-merch-card-image-width); } -merch-card[variant="twp"] [slot="body-xs"] ul li { - list-style-type: none; - padding-left: 0; +@media screen and ${m} { + .two-merch-cards.image, + .three-merch-cards.image, + .four-merch-cards.image { + grid-template-columns: repeat(2, var(--consonant-merch-card-image-width)); + } } -merch-card[variant="twp"] [slot="body-xs"] ul li::before { - content: '\xB7'; - font-size: 20px; - padding-right: 5px; - font-weight: bold; +@media screen and ${s} { + :root { + --consonant-merch-card-image-width: 378px; + } + + .three-merch-cards.image, + .four-merch-cards.image { + grid-template-columns: repeat(3, var(--consonant-merch-card-image-width)); + } } -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); - padding: var(--consonant-merch-spacing-s) - var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-xs); - color: var(--merch-color-grey-80); - display: flex; - flex-flow: wrap; +@media screen and ${l} { + .four-merch-cards.image { + grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); + } +} +`;var L=class extends d{constructor(e){super(e)}getGlobalCSS(){return Q}renderLayout(){return v`${this.cardImage} +
+ + + + ${this.promoBottom?v``:v``} +
+ ${this.evergreen?v` +
+ +
+ `:v` +
+ ${this.secureLabelFooter} + `}`}};import{html as J}from"../lit-all.min.js";var Z=` +:root { + --consonant-merch-card-inline-heading-width: 300px; } -merch-card[variant='twp'] merch-quantity-select, -merch-card[variant='twp'] merch-offer-select { - display: none; +.one-merch-card.inline-heading, +.two-merch-cards.inline-heading, +.three-merch-cards.inline-heading, +.four-merch-cards.inline-heading { + grid-template-columns: var(--consonant-merch-card-inline-heading-width); } -[slot="cci-footer"] p, -[slot="cct-footer"] p, -[slot="cce-footer"] p { - margin: 0; +@media screen and ${m} { + .two-merch-cards.inline-heading, + .three-merch-cards.inline-heading, + .four-merch-cards.inline-heading { + grid-template-columns: repeat(2, var(--consonant-merch-card-inline-heading-width)); + } } -/* mini compare chart card styles */ +@media screen and ${s} { + :root { + --consonant-merch-card-inline-heading-width: 378px; + } -merch-card[variant="mini-compare-chart"] [slot="heading-m"] { - padding: 0 var(--consonant-merch-spacing-s) 0; + .three-merch-cards.inline-heading, + .four-merch-cards.inline-heading { + grid-template-columns: repeat(3, var(--consonant-merch-card-inline-heading-width)); + } } -merch-card[variant="mini-compare-chart"] [slot="body-m"] { - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); +@media screen and ${l} { + .four-merch-cards.inline-heading { + grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); + } } +`;var T=class extends d{constructor(e){super(e)}getGlobalCSS(){return Z}renderLayout(){return J` ${this.badge} +
+
+ + +
+ +
+ ${this.card.customHr?"":J`
`} ${this.secureLabelFooter}`}};import{html as _,css as ge,unsafeCSS as ee}from"../lit-all.min.js";var X=` + :root { + --consonant-merch-card-mini-compare-chart-icon-size: 32px; + --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; + --consonant-merch-card-mini-compare-mobile-cta-width: 75px; + --consonant-merch-card-mini-compare-badge-mobile-max-width: 50px; + } + + merch-card[variant="mini-compare-chart"] [slot="heading-m"] { + padding: 0 var(--consonant-merch-spacing-s) 0; + } + + merch-card[variant="mini-compare-chart"] [slot="body-m"] { + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); + } -merch-card[variant="mini-compare-chart"] [is="inline-price"] { + merch-card[variant="mini-compare-chart"] [is="inline-price"] { display: inline-block; min-height: 30px; min-width: 1px; -} + } -merch-card[variant="mini-compare-chart"] [slot='callout-content'] { + merch-card[variant="mini-compare-chart"] [slot='callout-content'] { padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0px; -} + } -merch-card[variant="mini-compare-chart"] [slot='callout-content'] [is="inline-price"] { + merch-card[variant="mini-compare-chart"] [slot='callout-content'] [is="inline-price"] { min-height: unset; -} + } -merch-card[variant="mini-compare-chart"] [slot="price-commitment"] { + merch-card[variant="mini-compare-chart"] [slot="price-commitment"] { font-size: var(--consonant-merch-card-body-xs-font-size); padding: 0 var(--consonant-merch-spacing-s); -} + } -merch-card[variant="mini-compare-chart"] [slot="price-commitment"] a { + merch-card[variant="mini-compare-chart"] [slot="price-commitment"] a { display: inline-block; height: 27px; -} + } -merch-card[variant="mini-compare-chart"] [slot="offers"] { + merch-card[variant="mini-compare-chart"] [slot="offers"] { font-size: var(--consonant-merch-card-body-xs-font-size); -} - -merch-card [slot="promo-text"] { - color: var(--merch-color-green-promo); - font-size: var(--consonant-merch-card-promo-text-height); - font-weight: 700; - line-height: var(--consonant-merch-card-promo-text-height); - margin: 0; - min-height: var(--consonant-merch-card-promo-text-height); - padding: 0; -} - + } -merch-card[variant="mini-compare-chart"] [slot="body-xxs"] { + merch-card[variant="mini-compare-chart"] [slot="body-xxs"] { font-size: var(--consonant-merch-card-body-xs-font-size); padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; -} + } -merch-card[variant="mini-compare-chart"] [slot="promo-text"] { + merch-card[variant="mini-compare-chart"] [slot="promo-text"] { font-size: var(--consonant-merch-card-body-m-font-size); padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; -} + } -merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { + merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { text-decoration: underline; -} + } -merch-card[variant="mini-compare-chart"] .footer-row-icon { + merch-card[variant="mini-compare-chart"] .footer-row-icon { display: flex; place-items: center; -} + } -merch-card[variant="mini-compare-chart"] .footer-row-icon img { + merch-card[variant="mini-compare-chart"] .footer-row-icon img { max-width: initial; width: var(--consonant-merch-card-mini-compare-chart-icon-size); height: var(--consonant-merch-card-mini-compare-chart-icon-size); -} + } -merch-card[variant="mini-compare-chart"] .footer-row-cell { + merch-card[variant="mini-compare-chart"] .footer-row-cell { border-top: 1px solid var(--consonant-merch-card-border-color); display: flex; gap: var(--consonant-merch-spacing-xs); justify-content: start; place-items: center; padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); -} + } -merch-card[variant="mini-compare-chart"] .footer-row-cell-description { + merch-card[variant="mini-compare-chart"] .footer-row-cell-description { font-size: var(--consonant-merch-card-body-s-font-size); line-height: var(--consonant-merch-card-body-s-line-height); -} + } -merch-card[variant="mini-compare-chart"] .footer-row-cell-description p { + merch-card[variant="mini-compare-chart"] .footer-row-cell-description p { color: var(--merch-color-grey-80); vertical-align: bottom; -} + } -merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { + merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { color: var(--color-accent); text-decoration: solid; + } + +.one-merch-card.mini-compare-chart { + grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); + gap: var(--consonant-merch-spacing-xs); +} + +.two-merch-cards.mini-compare-chart, +.three-merch-cards.mini-compare-chart, +.four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-width)); + gap: var(--consonant-merch-spacing-xs); } /* mini compare mobile */ @media screen and ${g} { + :root { + --consonant-merch-card-mini-compare-chart-width: 302px; + --consonant-merch-card-mini-compare-chart-wide-width: 302px; + } + + .two-merch-cards.mini-compare-chart, + .three-merch-cards.mini-compare-chart, + .four-merch-cards.mini-compare-chart { + grid-template-columns: var(--consonant-merch-card-mini-compare-chart-width); + gap: var(--consonant-merch-spacing-xs); + } + 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); @@ -977,8 +690,12 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { } } -/* mini compare tablet */ -@media screen and ${x} { +@media screen and ${k} { + .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, + .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { + flex: 1; + } + 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); @@ -1004,73 +721,183 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { line-height: var(--consonant-merch-card-body-xs-line-height); } } +@media screen and ${m} { + :root { + --consonant-merch-card-mini-compare-chart-width: 302px; + --consonant-merch-card-mini-compare-chart-wide-width: 302px; + } -div[slot="footer"] { - display: contents; + .two-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); + gap: var(--consonant-merch-spacing-m); + } + + .three-merch-cards.mini-compare-chart, + .four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); + } } -[slot="footer"] a { - word-wrap: break-word; - text-align: center; +/* desktop */ +@media screen and ${s} { + :root { + --consonant-merch-card-mini-compare-chart-width: 378px; + --consonant-merch-card-mini-compare-chart-wide-width: 484px; + } + .one-merch-card.mini-compare-chart { + grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); + } + + .two-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-wide-width)); + gap: var(--consonant-merch-spacing-m); + } + + .three-merch-cards.mini-compare-chart, + .four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(3, var(--consonant-merch-card-mini-compare-chart-width)); + gap: var(--consonant-merch-spacing-m); + } } -[slot="footer"] a:not([class]) { - font-weight: 700; - font-size: var(--consonant-merch-card-cta-font-size); +@media screen and ${l} { + .four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); + } } -div[slot='bg-image'] img { - position: relative; - width: 100%; - min-height: var(--consonant-merch-card-image-height); - max-height: var(--consonant-merch-card-image-height); - object-fit: cover; - border-top-left-radius: 16px; - border-top-right-radius: 16px; +merch-card .footer-row-cell:nth-child(1) { + min-height: var(--consonant-merch-card-footer-row-1-min-height); } -/* Mobile */ -@media screen and ${g} { - :root { - --consonant-merch-card-mini-compare-chart-width: 302px; - --consonant-merch-card-segment-width: 276px; - --consonant-merch-card-mini-compare-chart-wide-width: 302px; - --consonant-merch-card-special-offers-width: 302px; - --consonant-merch-card-twp-width: 300px; - } +merch-card .footer-row-cell:nth-child(2) { + min-height: var(--consonant-merch-card-footer-row-2-min-height); +} + +merch-card .footer-row-cell:nth-child(3) { + min-height: var(--consonant-merch-card-footer-row-3-min-height); } +merch-card .footer-row-cell:nth-child(4) { + min-height: var(--consonant-merch-card-footer-row-4-min-height); +} -/* Tablet */ -@media screen and ${c} { - :root { - --consonant-merch-card-catalog-width: 302px; - --consonant-merch-card-plans-width: 302px; - --consonant-merch-card-segment-width: 276px; - --consonant-merch-card-mini-compare-chart-width: 302px; - --consonant-merch-card-mini-compare-chart-wide-width: 302px; - --consonant-merch-card-special-offers-width: 302px; - --consonant-merch-card-twp-width: 268px; - } +merch-card .footer-row-cell:nth-child(5) { + min-height: var(--consonant-merch-card-footer-row-5-min-height); } -/* desktop */ -@media screen and ${a} { - :root { - --consonant-merch-card-catalog-width: 276px; - --consonant-merch-card-plans-width: 276px; - --consonant-merch-card-segment-width: 302px; - --consonant-merch-card-inline-heading-width: 378px; - --consonant-merch-card-product-width: 378px; - --consonant-merch-card-image-width: 378px; - --consonant-merch-card-mini-compare-chart-width: 378px; - --consonant-merch-card-mini-compare-chart-wide-width: 484px; - --consonant-merch-card-twp-width: 268px; +merch-card .footer-row-cell:nth-child(6) { + min-height: var(--consonant-merch-card-footer-row-6-min-height); +} + +merch-card .footer-row-cell:nth-child(7) { + min-height: var(--consonant-merch-card-footer-row-7-min-height); +} + +merch-card .footer-row-cell:nth-child(8) { + min-height: var(--consonant-merch-card-footer-row-8-min-height); +} +`;var xe=32,b=class extends d{constructor(e){super(e)}#e;getRowMinHeightPropertyName=e=>`--consonant-merch-card-footer-row-${e}-min-height`;getContainer(){return this.#e=this.#e??this.card.closest('[class*="-merch-cards"]')??this.card.parentElement,this.#e}getGlobalCSS(){return X}getMiniCompareFooter=()=>{let e=this.card.secureLabel?_` + ${this.card.secureLabel}`:_``;return _`
${e}
`};updateMiniCompareElementMinHeight(e,t){let o=`--consonant-merch-card-mini-compare-${t}-height`,h=Math.max(0,parseInt(window.getComputedStyle(e).height)||0),p=parseInt(this.getContainer().style.getPropertyValue(o))||0;h>p&&this.getContainer().style.setProperty(o,`${h}px`)}adjustMiniCompareBodySlots(){if(this.card.getBoundingClientRect().width===0)return;this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","price-commitment","offers","promo-text","callout-content","secure-transaction-label"].forEach(o=>this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector(`slot[name="${o}"]`),o)),this.updateMiniCompareElementMinHeight(this.card.shadowRoot.querySelector("footer"),"footer");let t=this.card.shadowRoot.querySelector(".mini-compare-chart-badge");t&&t.textContent!==""&&this.getContainer().style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.card.getBoundingClientRect().width===0)return;[...this.card.querySelector('[slot="footer-rows"]')?.children].forEach((t,o)=>{let h=Math.max(xe,parseInt(window.getComputedStyle(t).height)||0),p=parseInt(this.getContainer().style.getPropertyValue(this.getRowMinHeightPropertyName(o+1)))||0;h>p&&this.getContainer().style.setProperty(this.getRowMinHeightPropertyName(o+1),`${h}px`)})}removeEmptyRows(){this.card.querySelectorAll(".footer-row-cell").forEach(t=>{let o=t.querySelector(".footer-row-cell-description");o&&!o.textContent.trim()&&t.remove()})}renderLayout(){return _`
+ ${this.badge} +
+ + + + + + + + + ${this.getMiniCompareFooter()} + `}postCardUpdateHook(){q()?this.removeEmptyRows():(this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows())}static variantStyle=ge` + :host([variant='mini-compare-chart']) > slot:not([name='icons']) { + display: block; + } + :host([variant='mini-compare-chart']) footer { + min-height: var(--consonant-merch-card-mini-compare-footer-height); + padding: var(--consonant-merch-spacing-xs); + } + + /* mini-compare card */ + :host([variant='mini-compare-chart']) .top-section { + padding-top: var(--consonant-merch-spacing-s); + padding-inline-start: var(--consonant-merch-spacing-s); + height: var(--consonant-merch-card-mini-compare-top-section-height); + } + + @media screen and ${ee(k)} { + [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer { + flex-direction: column; + align-items: stretch; + text-align: center; + } + } + + @media screen and ${ee(s)} { + :host([variant='mini-compare-chart']) footer { + padding: var(--consonant-merch-spacing-xs) + var(--consonant-merch-spacing-s) + var(--consonant-merch-spacing-s) + var(--consonant-merch-spacing-s); + } + } + + :host([variant='mini-compare-chart']) slot[name='footer-rows'] { + flex: 1; + display: flex; + flex-direction: column; + justify-content: end; + } + /* mini-compare card heights for the slots: heading-m, body-m, heading-m-price, price-commitment, offers, promo-text, footer */ + :host([variant='mini-compare-chart']) slot[name='heading-m'] { + min-height: var(--consonant-merch-card-mini-compare-heading-m-height); + } + :host([variant='mini-compare-chart']) slot[name='body-m'] { + min-height: var(--consonant-merch-card-mini-compare-body-m-height); + } + :host([variant='mini-compare-chart']) slot[name='heading-m-price'] { + min-height: var( + --consonant-merch-card-mini-compare-heading-m-price-height + ); + } + :host([variant='mini-compare-chart']) slot[name='price-commitment'] { + min-height: var( + --consonant-merch-card-mini-compare-price-commitment-height + ); + } + :host([variant='mini-compare-chart']) slot[name='offers'] { + min-height: var(--consonant-merch-card-mini-compare-offers-height); + } + :host([variant='mini-compare-chart']) slot[name='promo-text'] { + min-height: var(--consonant-merch-card-mini-compare-promo-text-height); + } + :host([variant='mini-compare-chart']) slot[name='callout-content'] { + min-height: var( + --consonant-merch-card-mini-compare-callout-content-height + ); } + `};import{html as $,css as ue}from"../lit-all.min.js";var te=` +:root { + --consonant-merch-card-plans-width: 300px; + --consonant-merch-card-plans-icon-size: 40px; +} + +merch-card[variant="plans"] [slot="description"] { + min-height: 84px; +} + +merch-card[variant="plans"] [slot="quantity-select"] { + display: flex; + justify-content: flex-start; + box-sizing: border-box; + width: 100%; + padding: var(--consonant-merch-spacing-xs); } -/* supported cards */ -/* grid style for plans */ .one-merch-card.plans, .two-merch-cards.plans, .three-merch-cards.plans, @@ -1079,399 +906,716 @@ div[slot='bg-image'] img { } /* Tablet */ -@media screen and ${c} { - .two-merch-cards.plans, - .three-merch-cards.plans, - .four-merch-cards.plans { - grid-template-columns: repeat(2, var(--consonant-merch-card-plans-width)); +@media screen and ${m} { + :root { + --consonant-merch-card-plans-width: 302px; + } + .two-merch-cards.plans, + .three-merch-cards.plans, + .four-merch-cards.plans { + grid-template-columns: repeat(2, var(--consonant-merch-card-plans-width)); + } +} + +/* desktop */ +@media screen and ${s} { + :root { + --consonant-merch-card-plans-width: 276px; + } + .three-merch-cards.plans, + .four-merch-cards.plans { + grid-template-columns: repeat(3, var(--consonant-merch-card-plans-width)); + } +} + +/* Large desktop */ + @media screen and ${l} { + .four-merch-cards.plans { + grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); + } +} +`;var y=class extends d{constructor(e){super(e)}getGlobalCSS(){return te}postCardUpdateHook(){this.adjustTitleWidth()}get stockCheckbox(){return this.card.checkboxLabel?$``:""}renderLayout(){return $` ${this.badge} +
+ + + + + ${this.promoBottom?"":$` `} + + ${this.promoBottom?$` `:""} + ${this.stockCheckbox} +
+ + ${this.secureLabelFooter}`}static variantStyle=ue` + :host([variant='plans']) { + min-height: 348px; + } + + :host([variant='plans']) ::slotted([slot='heading-xs']) { + max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); + } + `};import{html as N}from"../lit-all.min.js";var re=` +:root { + --consonant-merch-card-product-width: 300px; +} + +/* grid style for product */ +.one-merch-card.product, +.two-merch-cards.product, +.three-merch-cards.product, +.four-merch-cards.product { + grid-template-columns: var(--consonant-merch-card-product-width); +} + +/* Tablet */ +@media screen and ${m} { + .two-merch-cards.product, + .three-merch-cards.product, + .four-merch-cards.product { + grid-template-columns: repeat(2, var(--consonant-merch-card-product-width)); } } /* desktop */ -@media screen and ${a} { - .three-merch-cards.plans, - .four-merch-cards.plans { - grid-template-columns: repeat(3, var(--consonant-merch-card-plans-width)); - } +@media screen and ${s} { + :root { + --consonant-merch-card-product-width: 378px; + } + + .three-merch-cards.product, + .four-merch-cards.product { + grid-template-columns: repeat(3, var(--consonant-merch-card-product-width)); + } } /* Large desktop */ - @media screen and ${i} { - .four-merch-cards.plans { - grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); - } +@media screen and ${l} { + .four-merch-cards.product { + grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); + } +} +`;var w=class extends d{constructor(e){super(e)}getGlobalCSS(){return re}renderLayout(){return N` ${this.badge} +
+ + + + ${this.promoBottom?"":N``} + + ${this.promoBottom?N``:""} +
+ ${this.secureLabelFooter}`}};import{html as B,css as fe}from"../lit-all.min.js";var oe=` +:root { + --consonant-merch-card-segment-width: 378px; } +/* grid style for segment */ +.one-merch-card.segment, +.two-merch-cards.segment, +.three-merch-cards.segment, +.four-merch-cards.segment { + grid-template-columns: minmax(276px, var(--consonant-merch-card-segment-width)); +} -/* grid style for catalog */ -.one-merch-card.catalog, -.two-merch-cards.catalog, -.three-merch-cards.catalog, -.four-merch-cards.catalog { - grid-template-columns: var(--consonant-merch-card-catalog-width); +/* Mobile */ +@media screen and ${g} { + :root { + --consonant-merch-card-segment-width: 276px; + } } -/* Tablet */ -@media screen and ${c} { - .two-merch-cards.catalog, - .three-merch-cards.catalog, - .four-merch-cards.catalog { - grid-template-columns: repeat(2, var(--consonant-merch-card-catalog-width)); - } +@media screen and ${m} { + :root { + --consonant-merch-card-segment-width: 276px; + } + + .two-merch-cards.segment, + .three-merch-cards.segment, + .four-merch-cards.segment { + grid-template-columns: repeat(2, minmax(276px, var(--consonant-merch-card-segment-width))); + } } /* desktop */ -@media screen and ${a} { - .three-merch-cards.catalog, - .four-merch-cards.catalog { - grid-template-columns: repeat(3, var(--consonant-merch-card-catalog-width)); - } -} +@media screen and ${s} { + :root { + --consonant-merch-card-segment-width: 302px; + } + + .three-merch-cards.segment { + grid-template-columns: repeat(3, minmax(276px, var(--consonant-merch-card-segment-width))); + } -/* Large desktop */ - @media screen and ${i} { - .four-merch-cards.catalog { - grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); + .four-merch-cards.segment { + grid-template-columns: repeat(4, minmax(276px, var(--consonant-merch-card-segment-width))); + } +} +`;var E=class extends d{constructor(e){super(e)}getGlobalCSS(){return oe}postCardUpdateHook(){this.adjustTitleWidth()}renderLayout(){return B` ${this.badge} +
+ + + ${this.promoBottom?"":B``} + + ${this.promoBottom?B``:""} +
+
+ ${this.secureLabelFooter}`}static variantStyle=fe` + :host([variant='segment']) { + min-height: 214px; + } + :host([variant='segment']) ::slotted([slot='heading-xs']) { + max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); } + `};import{html as D,css as ve}from"../lit-all.min.js";var ne=` +:root { + --consonant-merch-card-special-offers-width: 378px; } +merch-card[variant="special-offers"] span[is="inline-price"][data-template="strikethrough"] { + font-size: var(--consonant-merch-card-body-xs-font-size); +} /* grid style for special-offers */ .one-merch-card.special-offers, .two-merch-cards.special-offers, .three-merch-cards.special-offers, .four-merch-cards.special-offers { - grid-template-columns: minmax(300px, var(--consonant-merch-card-special-offers-width)); + grid-template-columns: minmax(300px, var(--consonant-merch-card-special-offers-width)); } -/* Tablet */ -@media screen and ${c} { - .two-merch-cards.special-offers, - .three-merch-cards.special-offers, - .four-merch-cards.special-offers { - grid-template-columns: repeat(2, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } +@media screen and ${g} { + :root { + --consonant-merch-card-special-offers-width: 302px; + } +} + +@media screen and ${m} { + :root { + --consonant-merch-card-special-offers-width: 302px; + } + + .two-merch-cards.special-offers, + .three-merch-cards.special-offers, + .four-merch-cards.special-offers { + grid-template-columns: repeat(2, minmax(300px, var(--consonant-merch-card-special-offers-width))); + } } /* desktop */ -@media screen and ${a} { - .three-merch-cards.special-offers, - .four-merch-cards.special-offers { - grid-template-columns: repeat(3, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } +@media screen and ${s} { + .three-merch-cards.special-offers, + .four-merch-cards.special-offers { + grid-template-columns: repeat(3, minmax(300px, var(--consonant-merch-card-special-offers-width))); + } } -@media screen and ${i} { - .four-merch-cards.special-offers { - grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); +@media screen and ${l} { + .four-merch-cards.special-offers { + grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); + } +} +`;var S=class extends d{constructor(e){super(e)}getGlobalCSS(){return ne}get headingSelector(){return'[slot="detail-m"]'}renderLayout(){return D`${this.cardImage} +
+ + + +
+ ${this.evergreen?D` +
+ +
+ `:D` +
+ ${this.secureLabelFooter} + `} + `}static variantStyle=ve` + :host([variant='special-offers']) { + min-height: 439px; } + + :host([variant='special-offers'].center) { + text-align: center; + } + `};import{html as be,css as ye}from"../lit-all.min.js";var ae=` +:root { + --consonant-merch-card-twp-width: 268px; + --consonant-merch-card-twp-mobile-width: 300px; + --consonant-merch-card-twp-mobile-height: 358px; +} + +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); +} -/* grid style for image */ -.one-merch-card.image, -.two-merch-cards.image, -.three-merch-cards.image, -.four-merch-cards.image { - grid-template-columns: var(--consonant-merch-card-image-width); +merch-card[variant="twp"] [slot="body-xs"] ul { + padding: 0; + margin: 0; } -/* Tablet */ -@media screen and ${c} { - .two-merch-cards.image, - .three-merch-cards.image, - .four-merch-cards.image { - grid-template-columns: repeat(2, var(--consonant-merch-card-image-width)); - } +merch-card[variant="twp"] [slot="body-xs"] ul li { + list-style-type: none; + padding-left: 0; } -/* desktop */ -@media screen and ${a} { - .three-merch-cards.image, - .four-merch-cards.image { - grid-template-columns: repeat(3, var(--consonant-merch-card-image-width)); - } +merch-card[variant="twp"] [slot="body-xs"] ul li::before { + content: '\xB7'; + font-size: 20px; + padding-right: 5px; + font-weight: bold; } -/* Large desktop */ - @media screen and ${i} { - .four-merch-cards.image { - grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); - } +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); + padding: var(--consonant-merch-spacing-s); + var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-xs); + color: var(--merch-color-grey-80); + display: flex; + flex-flow: wrap; } +merch-card[variant='twp'] merch-quantity-select, +merch-card[variant='twp'] merch-offer-select { + display: none; +} -/* grid style for segment */ -.one-merch-card.segment, -.two-merch-cards.segment, -.three-merch-cards.segment, -.four-merch-cards.segment { - grid-template-columns: minmax(276px, var(--consonant-merch-card-segment-width)); +.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 ${c} { - .two-merch-cards.segment, - .three-merch-cards.segment, - .four-merch-cards.segment { - grid-template-columns: repeat(2, minmax(276px, var(--consonant-merch-card-segment-width))); +@media screen and ${g} { + :root { + --consonant-merch-card-twp-width: 300px; + } + .one-merch-card.twp, + .two-merch-cards.twp, + .three-merch-cards.twp { + grid-template-columns: repeat(1, var(--consonant-merch-card-twp-mobile-width)); + } +} + +@media screen and ${m} { + :root { + --consonant-merch-card-twp-width: 268px; + } + .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)); + } +} + +@media screen and ${s} { + :root { + --consonant-merch-card-twp-width: 268px; + } + .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)); + } +} + +@media screen and ${l} { + .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)); + } } +`;var C=class extends d{constructor(e){super(e)}getGlobalCSS(){return ae}renderLayout(){return be`${this.badge} +
+ + + +
+
+ +
+
`}static variantStyle=ye` + :host([variant='twp']) { + padding: 4px 10px 5px 10px; + } + .twp-badge { + padding: 4px 10px 5px 10px; + } -/* desktop */ -@media screen and ${a} { - .three-merch-cards.segment { - grid-template-columns: repeat(3, minmax(276px, var(--consonant-merch-card-segment-width))); + :host([variant='twp']) ::slotted(merch-offer-select) { + display: none; + } + + :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([aria-selected]) .twp-badge { + margin-inline-end: 2px; + padding-inline-end: 9px; } - .four-merch-cards.segment { - grid-template-columns: repeat(4, minmax(276px, var(--consonant-merch-card-segment-width))); + :host([variant='twp']) footer { + gap: var(--consonant-merch-spacing-xxs); + flex-direction: column; + align-self: flex-start; } + `};var ce=r=>{switch(r.variant){case"catalog":return new u(r);case"ccd-action":return new f(r);case"image":return new L(r);case"inline-heading":return new T(r);case"mini-compare-chart":return new b(r);case"plans":return new y(r);case"product":return new w(r);case"segment":return new E(r);case"special-offers":return new S(r);case"twp":return new C(r);default:return new w(r)}},ie=()=>{let r=[];return r.push(u.variantStyle),r.push(f.variantStyle),r.push(b.variantStyle),r.push(y.variantStyle),r.push(E.variantStyle),r.push(S.variantStyle),r.push(C.variantStyle),r};var se=document.createElement("style");se.innerHTML=` +:root { + --consonant-merch-card-detail-font-size: 12px; + --consonant-merch-card-detail-font-weight: 500; + --consonant-merch-card-detail-letter-spacing: 0.8px; + --consonant-merch-card-background-color: #fff; + + --consonant-merch-card-heading-font-size: 18px; + --consonant-merch-card-heading-line-height: 22.5px; + --consonant-merch-card-heading-secondary-font-size: 14px; + --consonant-merch-card-body-font-size: 14px; + --consonant-merch-card-body-line-height: 21px; + --consonant-merch-card-promo-text-height: var(--consonant-merch-card-body-font-size); + + /* responsive width */ + --consonant-merch-card-mobile-width: 300px; + --consonant-merch-card-tablet-wide-width: 700px; + + /* spacing */ + --consonant-merch-spacing-xxxs: 4px; + --consonant-merch-spacing-xxs: 8px; + --consonant-merch-spacing-xs: 16px; + --consonant-merch-spacing-s: 24px; + --consonant-merch-spacing-m: 32px; + + /* cta */ + --consonant-merch-card-cta-font-size: 15px; + + /* headings */ + --consonant-merch-card-heading-xs-font-size: 18px; + --consonant-merch-card-heading-xs-line-height: 22.5px; + --consonant-merch-card-heading-s-font-size: 20px; + --consonant-merch-card-heading-s-line-height: 25px; + --consonant-merch-card-heading-m-font-size: 24px; + --consonant-merch-card-heading-m-line-height: 30px; + --consonant-merch-card-heading-l-font-size: 20px; + --consonant-merch-card-heading-l-line-height: 30px; + --consonant-merch-card-heading-xl-font-size: 36px; + --consonant-merch-card-heading-xl-line-height: 45px; + + /* detail */ + --consonant-merch-card-detail-m-font-size: 12px; + --consonant-merch-card-detail-m-line-height: 15px; + --consonant-merch-card-detail-m-font-weight: 700; + --consonant-merch-card-detail-m-letter-spacing: 1px; + + /* body */ + --consonant-merch-card-body-xxs-font-size: 12px; + --consonant-merch-card-body-xxs-line-height: 18px; + --consonant-merch-card-body-xxs-letter-spacing: 1px; + --consonant-merch-card-body-xs-font-size: 14px; + --consonant-merch-card-body-xs-line-height: 21px; + --consonant-merch-card-body-s-font-size: 16px; + --consonant-merch-card-body-s-line-height: 24px; + --consonant-merch-card-body-m-font-size: 18px; + --consonant-merch-card-body-m-line-height: 27px; + --consonant-merch-card-body-l-font-size: 20px; + --consonant-merch-card-body-l-line-height: 30px; + --consonant-merch-card-body-xl-font-size: 22px; + --consonant-merch-card-body-xl-line-height: 33px; + + + --consonant-merch-card-heading-padding: 0; + + /* colors */ + --consonant-merch-card-border-color: #eaeaea; + --color-accent: #1473E6; + --merch-color-focus-ring: #1473E6; + --merch-color-grey-80: #2c2c2c; + --merch-color-green-promo: #2D9D78; + + /* merch card generic */ + --consonant-merch-card-max-width: 300px; + --transition: cmax-height 0.3s linear, opacity 0.3s linear; + + /* background image */ + --consonant-merch-card-bg-img-height: 180px; + + /* inline SVGs */ + --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'>'); + + /* callout */ + --consonant-merch-card-callout-line-height: 21px; + --consonant-merch-card-callout-font-size: 14px; + --consonant-merch-card-callout-font-color: #2C2C2C; + --consonant-merch-card-callout-icon-size: 16px; + --consonant-merch-card-callout-icon-top: 6px; + --consonant-merch-card-callout-icon-right: 8px; + --consonant-merch-card-callout-letter-spacing: 0px; + --consonant-merch-card-callout-icon-padding: 34px; + --consonant-merch-card-callout-spacing-xxs: 8px; +} + +merch-card-collection { + display: contents; +} + +merch-card-collection > merch-card:not([style]) { + display: none; } - -/* grid style for product */ -.one-merch-card.product, -.two-merch-cards.product, -.three-merch-cards.product, -.four-merch-cards.product { - grid-template-columns: var(--consonant-merch-card-product-width); +merch-card-collection > p[slot], +merch-card-collection > div[slot] p { + margin: 0; } -/* Tablet */ -@media screen and ${c} { - .two-merch-cards.product, - .three-merch-cards.product, - .four-merch-cards.product { - grid-template-columns: repeat(2, var(--consonant-merch-card-product-width)); - } +.one-merch-card, +.two-merch-cards, +.three-merch-cards, +.four-merch-cards { + display: grid; + justify-content: center; + justify-items: stretch; + gap: var(--consonant-merch-spacing-m); + padding: var(--spacing-m); } -/* desktop */ -@media screen and ${a} { - .three-merch-cards.product, - .four-merch-cards.product { - grid-template-columns: repeat(3, var(--consonant-merch-card-product-width)); - } +merch-card.background-opacity-70 { + background-color: rgba(255 255 255 / 70%); } -/* Large desktop */ - @media screen and ${i} { - .four-merch-cards.product { - grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); - } +merch-card.has-divider hr { + margin-bottom: var(--consonant-merch-spacing-xs); + height: 1px; + border: none; } -/* 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); +merch-card p, merch-card h3, merch-card h4 { + margin: 0; } -/* Tablet */ -@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)); - } +merch-card span[is=inline-price] { + display: inline-block; } -/* desktop */ -@media screen and ${a} { - .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)); - } +merch-card [slot='heading-xs'] { + color: var(--merch-color-grey-80); + font-size: var(--consonant-merch-card-heading-xs-font-size); + line-height: var(--consonant-merch-card-heading-xs-line-height); + margin: 0; + text-decoration: none; } -/* Large desktop */ - @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)); - } +merch-card.dc-pricing [slot='heading-xs'] { + margin-bottom: var(--consonant-merch-spacing-xxs); } -/* Mobile */ -@media screen and ${g} { - .one-merch-card.twp, - .two-merch-cards.twp, - .three-merch-cards.twp { - grid-template-columns: repeat(1, var(--consonant-merch-card-twp-mobile-width)); - } +merch-card:not([variant='inline-heading']) [slot='heading-xs'] a { + color: var(--merch-color-grey-80); } -/* grid style for inline-heading */ -.one-merch-card.inline-heading, -.two-merch-cards.inline-heading, -.three-merch-cards.inline-heading, -.four-merch-cards.inline-heading { - grid-template-columns: var(--consonant-merch-card-inline-heading-width); +merch-card [slot='starting-at'] { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xs-line-height); + font-weight: 500; } -/* Tablet */ -@media screen and ${c} { - .two-merch-cards.inline-heading, - .three-merch-cards.inline-heading, - .four-merch-cards.inline-heading { - grid-template-columns: repeat(2, var(--consonant-merch-card-inline-heading-width)); - } +merch-card [slot='heading-xs'] a:not(:hover) { + text-decoration: inherit; } -/* desktop */ -@media screen and ${a} { - .three-merch-cards.inline-heading, - .four-merch-cards.inline-heading { - grid-template-columns: repeat(3, var(--consonant-merch-card-inline-heading-width)); - } +merch-card [slot='heading-s'] { + font-size: var(--consonant-merch-card-heading-s-font-size); + line-height: var(--consonant-merch-card-heading-s-line-height); + margin: 0; + color: var(--merch-color-grey-80); } -/* Large desktop */ - @media screen and ${i} { - .four-merch-cards.inline-heading { - grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); - } +merch-card [slot='heading-m'] { + font-size: var(--consonant-merch-card-heading-m-font-size); + line-height: var(--consonant-merch-card-heading-m-line-height); + margin: 0; + color: var(--merch-color-grey-80); + font-weight: 700; } -/* grid style for ccd-action */ -.one-merch-card.ccd-action, -.two-merch-cards.ccd-action, -.three-merch-cards.ccd-action, -.four-merch-cards.ccd-action { - grid-template-columns: var(--consonant-merch-card-ccd-action-width); +merch-card [slot='heading-m-price'] { + font-size: var(--consonant-merch-card-heading-m-font-size); + line-height: var(--consonant-merch-card-heading-m-line-height); + padding: 0 var(--consonant-merch-spacing-s); + font-weight: 700; + margin: 0; + color: var(--merch-color-grey-80); } -/* Tablet */ -@media screen and ${c} { - .two-merch-cards.ccd-action, - .three-merch-cards.ccd-action, - .four-merch-cards.ccd-action { - grid-template-columns: repeat(2, var(--consonant-merch-card-ccd-action-width)); - } +merch-card [slot='offers'] { + padding: var(--consonant-merch-spacing-xxs) var(--consonant-merch-spacing-s); } -/* desktop */ -@media screen and ${a} { - .three-merch-cards.ccd-action, - .four-merch-cards.ccd-action { - grid-template-columns: repeat(3, var(--consonant-merch-card-ccd-action-width)); - } +merch-card [slot='heading-l'] { + font-size: var(--consonant-merch-card-heading-l-font-size); + line-height: var(--consonant-merch-card-heading-l-line-height); + margin: 0; + color: var(--merch-color-grey-80); } -/* Large desktop */ - @media screen and ${i} { - .four-merch-cards.ccd-action { - grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); - } +merch-card [slot='heading-xl'] { + font-size: var(--consonant-merch-card-heading-xl-font-size); + line-height: var(--consonant-merch-card-heading-xl-line-height); + margin: 0; + color: var(--merch-color-grey-80); } -/* grid style for mini-compare-chart */ -.one-merch-card.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); - gap: var(--consonant-merch-spacing-xs); +merch-card [slot='callout-content'] { + display: flex; + flex-direction: column; + margin: var(--consonant-merch-spacing-xxxs) 0px; + gap: var(--consonant-merch-card-callout-spacing-xxs); } -.two-merch-cards.mini-compare-chart, -.three-merch-cards.mini-compare-chart, -.four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-width)); - gap: var(--consonant-merch-spacing-xs); +merch-card [slot='callout-content'] > div { + display: flex; + flex-direction: column; + margin: var(--consonant-merch-spacing-xxxs) 0px; + gap: var(--consonant-merch-card-callout-spacing-xxs); + align-items: flex-start; } -@media screen and ${g} { - .two-merch-cards.mini-compare-chart, - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-width); - gap: var(--consonant-merch-spacing-xs); - } +merch-card [slot='callout-content'] > div > div { + display: flex; + background: rgba(203 203 203 / 50%); + border-radius: var(--consonant-merch-spacing-xxxs); + padding: var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxs); } -@media screen and ${x} { - .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, - .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { - flex: 1; - } +merch-card [slot='callout-content'] > div > div > div { + display: inline-block; + text-align: left; + font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) var(--body-font-family, 'Adobe Clean'); + letter-spacing: var(--consonant-merch-card-callout-letter-spacing); + color: var(--consonant-merch-card-callout-font-color); } -/* Tablet */ -@media screen and ${c} { - .two-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); - gap: var(--consonant-merch-spacing-m); - } - - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); - } +merch-card [slot='callout-content'] img { + width: var(--consonant-merch-card-callout-icon-size); + height: var(--consonant-merch-card-callout-icon-size); + margin: 2.5px 0px 0px 9px; } -/* desktop */ -@media screen and ${a} { - .one-merch-card.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); - } +merch-card [slot='detail-m'] { + font-size: var(--consonant-merch-card-detail-m-font-size); + letter-spacing: var(--consonant-merch-card-detail-m-letter-spacing); + font-weight: var(--consonant-merch-card-detail-m-font-weight); + text-transform: uppercase; + margin: 0; + color: var(--merch-color-grey-80); +} - .two-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-wide-width)); - gap: var(--consonant-merch-spacing-m); - } +merch-card [slot="body-xxs"] { + font-size: var(--consonant-merch-card-body-xxs-font-size); + line-height: var(--consonant-merch-card-body-xxs-line-height); + font-weight: normal; + letter-spacing: var(--consonant-merch-card-body-xxs-letter-spacing); + color: var(--merch-color-grey-80); + margin: 0; +} - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(3, var(--consonant-merch-card-mini-compare-chart-width)); - gap: var(--consonant-merch-spacing-m); - } +merch-card [slot="body-xs"] { + 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); } -@media screen and ${i} { - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); - } +merch-card [slot="body-m"] { + font-size: var(--consonant-merch-card-body-m-font-size); + line-height: var(--consonant-merch-card-body-m-line-height); + color: var(--merch-color-grey-80); } -/* mini-compare card footer rows */ -merch-card .footer-row-cell:nth-child(1) { - min-height: var(--consonant-merch-card-footer-row-1-min-height); +merch-card [slot="body-l"] { + font-size: var(--consonant-merch-card-body-l-font-size); + line-height: var(--consonant-merch-card-body-l-line-height); + color: var(--merch-color-grey-80); } -merch-card .footer-row-cell:nth-child(2) { - min-height: var(--consonant-merch-card-footer-row-2-min-height); +merch-card [slot="body-xl"] { + font-size: var(--consonant-merch-card-body-xl-font-size); + line-height: var(--consonant-merch-card-body-xl-line-height); + color: var(--merch-color-grey-80); } -merch-card .footer-row-cell:nth-child(3) { - min-height: var(--consonant-merch-card-footer-row-3-min-height); +[slot="cci-footer"] p, +[slot="cct-footer"] p, +[slot="cce-footer"] p { + margin: 0; } -merch-card .footer-row-cell:nth-child(4) { - min-height: var(--consonant-merch-card-footer-row-4-min-height); +merch-card [slot="promo-text"] { + color: var(--merch-color-green-promo); + font-size: var(--consonant-merch-card-promo-text-height); + font-weight: 700; + line-height: var(--consonant-merch-card-promo-text-height); + margin: 0; + min-height: var(--consonant-merch-card-promo-text-height); + padding: 0; } -merch-card .footer-row-cell:nth-child(5) { - min-height: var(--consonant-merch-card-footer-row-5-min-height); +div[slot="footer"] { + display: contents; } -merch-card .footer-row-cell:nth-child(6) { - min-height: var(--consonant-merch-card-footer-row-6-min-height); +[slot="footer"] a { + word-wrap: break-word; + text-align: center; } -merch-card .footer-row-cell:nth-child(7) { - min-height: var(--consonant-merch-card-footer-row-7-min-height); +[slot="footer"] a:not([class]) { + font-weight: 700; + font-size: var(--consonant-merch-card-cta-font-size); } -merch-card .footer-row-cell:nth-child(8) { - min-height: var(--consonant-merch-card-footer-row-8-min-height); +div[slot='bg-image'] img { + position: relative; + width: 100%; + min-height: var(--consonant-merch-card-bg-img-height); + max-height: var(--consonant-merch-card-bg-img-height); + object-fit: cover; + border-top-left-radius: 16px; + border-top-right-radius: 16px; } span[is="inline-price"][data-template='strikethrough'] { @@ -1510,152 +1654,4 @@ body.merch-modal { scrollbar-gutter: stable; height: 100vh; } -`;document.head.appendChild($);var T="merch-offer-select:ready",_="merch-card:ready",M="merch-card:action-menu-toggle";var y="merch-storage:change",w="merch-quantity-selector:change";var m="merch-card",H=32,v="mini-compare-chart",R=l=>`--consonant-merch-card-footer-row-${l}-min-height`,d=class extends N{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[t,r,o]=e.split(",");return{PUF:t,ABM:r,M2M:o}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[r,o,s]=t.split(":"),p=Number(o);return[r,{order:isNaN(p)?void 0:p,size:s}]})),toAttribute:e=>Object.entries(e).map(([t,{order:r,size:o}])=>[t,r,o].filter(s=>s!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[C,...z()];customerSegment;marketSegment;constructor(){super(),this.filters={},this.types="",this.selected=!1}#e;updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.updateComplete.then(async()=>{let r=Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]')).filter(o=>!o.closest('[slot="callout-content"]'));await Promise.all(r.map(o=>o.onceSettled())),this.adjustTitleWidth(),k()?this.removeEmptyRows():(this.adjustMiniCompareBodySlots(),this.adjustMiniCompareFooterRows())})}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get evergreen(){return this.classList.contains("intro-pricing")}get stockCheckbox(){return this.checkboxLabel?n``:""}get cardImage(){return n`
- - ${this.badge} -
`}get secureLabelFooter(){let e=this.secureLabel?n`${this.secureLabel}`:"";return n`
${e}
`}get miniCompareFooter(){let e=this.secureLabel?n` - ${this.secureLabel}`:n``;return n`
${e}
`}get badge(){let e;if(!(!this.badgeBackgroundColor||!this.badgeColor||!this.badgeText))return this.evergreen&&(e=`border: 1px solid ${this.badgeBackgroundColor}; border-right: none;`),n` -
- ${this.badgeText} -
- `}get badgeElement(){return this.shadowRoot.getElementById("badge")}getContainer(){return this.closest('[class*="-merch-cards"]')??this.parentElement}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let t=this.checkoutLinks;if(t.length!==0)for(let r of t){await r.onceSettled();let o=r.value?.[0]?.planType;if(!o)return;let s=this.stockOfferOsis[o];if(!s)return;let p=r.dataset.wcsOsi.split(",").filter(A=>A!==s);e.checked&&p.push(s),r.dataset.wcsOsi=p.join(",")}}toggleActionMenu(e){let t=e?.type==="mouseleave"?!0:void 0,r=this.shadowRoot.querySelector('slot[name="action-menu-content"]');r&&(t||this.dispatchEvent(new CustomEvent(M,{bubbles:!0,composed:!0,detail:{card:this.name,type:"action-menu"}})),r.classList.toggle("hidden",t))}handleQuantitySelection(e){let t=this.checkoutLinks;for(let r of t)r.dataset.quantity=e.detail.option}get titleElement(){return this.variant==="special-offers"?this.querySelector('[slot="detail-m"]'):this.querySelector('[slot="heading-xs"]')}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let t={...this.filters};Object.keys(t).forEach(r=>{if(e){t[r].order=Math.min(t[r].order||2,2);return}let o=t[r].order;o===1||isNaN(o)||(t[r].order=Number(o)+1)}),this.filters=t}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}render(){if(!(!this.isConnected||this.style.display==="none"))switch(this.variant){case"special-offers":return this.renderSpecialOffer();case"segment":return this.renderSegment();case"plans":return this.renderPlans();case"catalog":return this.renderCatalog();case"image":return this.renderImage();case"product":return this.renderProduct();case"inline-heading":return this.renderInlineHeading();case v:return this.renderMiniCompareChart();case"ccd-action":return this.renderCcdAction();case"twp":return this.renderTwp();default:return this.renderProduct()}}renderSpecialOffer(){return n`${this.cardImage} -
- - - -
- ${this.evergreen?n` -
- -
- `:n` -
- ${this.secureLabelFooter} - `} - `}get promoBottom(){return this.classList.contains("promo-bottom")}get startingAt(){return this.classList.contains("starting-at")}renderSegment(){return n` ${this.badge} -
- - - ${this.promoBottom?"":n``} - - ${this.promoBottom?n``:""} -
-
- ${this.secureLabelFooter}`}renderPlans(){return n` ${this.badge} -
- - - - - ${this.promoBottom?"":n` `} - - ${this.promoBottom?n` `:""} - ${this.stockCheckbox} -
- - ${this.secureLabelFooter}`}renderCatalog(){return n`
-
- ${this.badge} -
-
- ${this.actionMenuContent} - - - - ${this.promoBottom?"":n``} - - ${this.promoBottom?n``:""} -
- ${this.secureLabelFooter}`}renderImage(){return n`${this.cardImage} -
- - - - ${this.promoBottom?n``:n``} -
- ${this.evergreen?n` -
- -
- `:n` -
- ${this.secureLabelFooter} - `}`}renderInlineHeading(){return n` ${this.badge} -
-
- - -
- -
- ${this.customHr?"":n`
`} ${this.secureLabelFooter}`}renderProduct(){return n` ${this.badge} -
- - - - ${this.promoBottom?"":n``} - - ${this.promoBottom?n``:""} -
- ${this.secureLabelFooter}`}renderMiniCompareChart(){let{badge:e}=this;return n`
- ${e} -
- - - - - - - - - ${this.miniCompareFooter} - `}renderTwp(){return n`${this.badge} -
- - - -
-
- -
-
`}renderCcdAction(){return n`
- ${this.badge} - - - ${this.promoBottom?n``:n``} -
- -
`}connectedCallback(){super.connectedCallback(),this.#e=this.getContainer(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener("mouseleave",this.toggleActionMenu),this.addEventListener(w,this.handleQuantitySelection),this.addEventListener(T,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(w,this.handleQuantitySelection),this.storageOptions?.removeEventListener(y,this.handleStorageChange)}updateMiniCompareElementMinHeight(e,t){let r=`--consonant-merch-card-mini-compare-${t}-height`,o=Math.max(0,parseInt(window.getComputedStyle(e).height)||0),s=parseInt(this.#e.style.getPropertyValue(r))||0;o>s&&this.#e.style.setProperty(r,`${o}px`)}async adjustTitleWidth(){if(!["segment","plans"].includes(this.variant))return;let e=this.getBoundingClientRect().width,t=this.badgeElement?.getBoundingClientRect().width||0;e===0||t===0||this.style.setProperty("--consonant-merch-card-heading-xs-max-width",`${Math.round(e-t-16)}px`)}async adjustMiniCompareBodySlots(){if(this.variant!==v||this.getBoundingClientRect().width===0)return;this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(".top-section"),"top-section"),["heading-m","body-m","heading-m-price","price-commitment","offers","promo-text","callout-content","secure-transaction-label"].forEach(r=>this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector(`slot[name="${r}"]`),r)),this.updateMiniCompareElementMinHeight(this.shadowRoot.querySelector("footer"),"footer");let t=this.shadowRoot.querySelector(".mini-compare-chart-badge");t&&t.textContent!==""&&this.#e.style.setProperty("--consonant-merch-card-mini-compare-top-section-mobile-height","32px")}adjustMiniCompareFooterRows(){if(this.variant!==v||this.getBoundingClientRect().width===0)return;[...this.querySelector('[slot="footer-rows"]').children].forEach((t,r)=>{let o=Math.max(H,parseInt(window.getComputedStyle(t).height)||0),s=parseInt(this.#e.style.getPropertyValue(R(r+1)))||0;o>s&&this.#e.style.setProperty(R(r+1),`${o}px`)})}removeEmptyRows(){if(this.variant!==v)return;this.querySelectorAll(".footer-row-cell").forEach(t=>{let r=t.querySelector(".footer-row-cell-description");r&&!r.textContent.trim()&&t.remove()})}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let t=this.querySelector(`merch-offer-select[storage="${e}"]`);if(t)return t}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(_,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(y,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let t=this.dynamicPrice;if(e.price&&t){let r=e.price.cloneNode(!0);t.onceSettled?t.onceSettled().then(()=>{t.replaceWith(r)}):t.replaceWith(r)}}};customElements.define(m,d); +`;document.head.appendChild(se);var c="merch-card",a=class extends we{static properties={name:{type:String,attribute:"name",reflect:!0},variant:{type:String,reflect:!0},size:{type:String,attribute:"size",reflect:!0},badgeColor:{type:String,attribute:"badge-color"},borderColor:{type:String,attribute:"border-color"},badgeBackgroundColor:{type:String,attribute:"badge-background-color"},badgeText:{type:String,attribute:"badge-text"},actionMenu:{type:Boolean,attribute:"action-menu"},actionMenuContent:{type:String,attribute:"action-menu-content"},customHr:{type:Boolean,attribute:"custom-hr"},detailBg:{type:String,attribute:"detail-bg"},secureLabel:{type:String,attribute:"secure-label"},checkboxLabel:{type:String,attribute:"checkbox-label"},selected:{type:Boolean,attribute:"aria-selected",reflect:!0},storageOption:{type:String,attribute:"storage",reflect:!0},stockOfferOsis:{type:Object,attribute:"stock-offer-osis",converter:{fromAttribute:e=>{let[t,o,h]=e.split(",");return{PUF:t,ABM:o,M2M:h}}}},filters:{type:String,reflect:!0,converter:{fromAttribute:e=>Object.fromEntries(e.split(",").map(t=>{let[o,h,p]=t.split(":"),x=Number(h);return[o,{order:isNaN(x)?void 0:x,size:p}]})),toAttribute:e=>Object.entries(e).map(([t,{order:o,size:h}])=>[t,o,h].filter(p=>p!=null).join(":")).join(",")}},types:{type:String,attribute:"types",reflect:!0},merchOffer:{type:Object}};static styles=[G,ie(),...U()];customerSegment;marketSegment;variantLayout;constructor(){super(),this.filters={},this.types="",this.selected=!1}updated(e){(e.has("badgeBackgroundColor")||e.has("borderColor"))&&(this.style.border=this.computedBorderStyle),this.updateComplete.then(async()=>{let o=Array.from(this.querySelectorAll('span[is="inline-price"][data-wcs-osi]')).filter(h=>!h.closest('[slot="callout-content"]'));await Promise.all(o.map(h=>h.onceSettled())),this.variantLayout.postCardUpdateHook(this)})}render(){if(!(!this.isConnected||this.style.display==="none"))return this.variantLayout.renderLayout()}get computedBorderStyle(){return this.variant!=="twp"?`1px solid ${this.borderColor?this.borderColor:this.badgeBackgroundColor}`:""}get badgeElement(){return this.shadowRoot.getElementById("badge")}get headingmMSlot(){return this.shadowRoot.querySelector('slot[name="heading-m"]').assignedElements()[0]}get footerSlot(){return this.shadowRoot.querySelector('slot[name="footer"]')?.assignedElements()[0]}get price(){return this.headingmMSlot?.querySelector('span[is="inline-price"]')}get checkoutLinks(){return[...this.footerSlot?.querySelectorAll('a[is="checkout-link"]')??[]]}async toggleStockOffer({target:e}){if(!this.stockOfferOsis)return;let t=this.checkoutLinks;if(t.length!==0)for(let o of t){await o.onceSettled();let h=o.value?.[0]?.planType;if(!h)return;let p=this.stockOfferOsis[h];if(!p)return;let x=o.dataset.wcsOsi.split(",").filter(he=>he!==p);e.checked&&x.push(p),o.dataset.wcsOsi=x.join(",")}}handleQuantitySelection(e){let t=this.checkoutLinks;for(let o of t)o.dataset.quantity=e.detail.option}get titleElement(){return this.querySelector(this.variantLayout?.headingSelector||".card-heading")}get title(){return this.titleElement?.textContent?.trim()}get description(){return this.querySelector('[slot="body-xs"]')?.textContent?.trim()}updateFilters(e){let t={...this.filters};Object.keys(t).forEach(o=>{if(e){t[o].order=Math.min(t[o].order||2,2);return}let h=t[o].order;h===1||isNaN(h)||(t[o].order=Number(h)+1)}),this.filters=t}includes(e){return this.textContent.match(new RegExp(e,"i"))!==null}get startingAt(){return this.classList.contains("starting-at")}connectedCallback(){super.connectedCallback(),this.variantLayout=ce(this),this.variantLayout.connectedCallbackHook(),this.setAttribute("tabindex",this.getAttribute("tabindex")??"0"),this.addEventListener(R,this.handleQuantitySelection),this.addEventListener(I,this.merchCardReady,{once:!0}),this.updateComplete.then(()=>{this.merchCardReady()}),this.storageOptions?.addEventListener("change",this.handleStorageChange)}disconnectedCallback(){super.disconnectedCallback(),this.variantLayout.disconnectedCallbackHook(),this.removeEventListener(R,this.handleQuantitySelection),this.storageOptions?.removeEventListener(O,this.handleStorageChange)}get storageOptions(){return this.querySelector("sp-radio-group#storage")}get storageSpecificOfferSelect(){let e=this.storageOptions?.selected;if(e){let t=this.querySelector(`merch-offer-select[storage="${e}"]`);if(t)return t}return this.querySelector("merch-offer-select")}get offerSelect(){return this.storageOptions?this.storageSpecificOfferSelect:this.querySelector("merch-offer-select")}get quantitySelect(){return this.querySelector("merch-quantity-select")}merchCardReady(){this.offerSelect&&!this.offerSelect.planType||this.dispatchEvent(new CustomEvent(K,{bubbles:!0}))}handleStorageChange(){let e=this.closest("merch-card")?.offerSelect.cloneNode(!0);e&&this.dispatchEvent(new CustomEvent(O,{detail:{offerSelect:e},bubbles:!0}))}get dynamicPrice(){return this.querySelector('[slot="price"]')}selectMerchOffer(e){if(e===this.merchOffer)return;this.merchOffer=e;let t=this.dynamicPrice;if(e.price&&t){let o=e.price.cloneNode(!0);t.onceSettled?t.onceSettled().then(()=>{t.replaceWith(o)}):t.replaceWith(o)}}};customElements.define(c,a); diff --git a/libs/deps/mas/plans-modal.js b/libs/deps/mas/plans-modal.js index 986dd500153..93c8e38a635 100644 --- a/libs/deps/mas/plans-modal.js +++ b/libs/deps/mas/plans-modal.js @@ -4999,13 +4999,6 @@ var MatchMediaController = class { } }; -// src/media.js -var MOBILE_LANDSCAPE = "(max-width: 767px)"; -var TABLET_DOWN = "(max-width: 1199px)"; -var TABLET_UP = "(min-width: 768px)"; -var DESKTOP_UP = "(min-width: 1200px)"; -var LARGE_DESKTOP = "(min-width: 1600px)"; - // src/global.css.js var styles = document.createElement("style"); styles.innerHTML = ` @@ -5071,7 +5064,6 @@ styles.innerHTML = ` --consonant-merch-card-heading-padding: 0; - --consonant-merch-card-image-height: 180px; /* colors */ --consonant-merch-card-border-color: #eaeaea; @@ -5084,45 +5076,6 @@ styles.innerHTML = ` --consonant-merch-card-max-width: 300px; --transition: cmax-height 0.3s linear, opacity 0.3s linear; - /* special offers */ - --consonant-merch-card-special-offers-width: 378px; - - /* image */ - --consonant-merch-card-image-width: 300px; - - /* segment */ - --consonant-merch-card-segment-width: 378px; - - /* inline-heading */ - --consonant-merch-card-inline-heading-width: 300px; - - /* product */ - --consonant-merch-card-product-width: 300px; - - /* plans */ - --consonant-merch-card-plans-width: 300px; - --consonant-merch-card-plans-icon-size: 40px; - - /* catalog */ - --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; - - /* ccd-action */ - --consonant-merch-card-ccd-action-width: 276px; - --consonant-merch-card-ccd-action-min-height: 320px; - - - /*mini compare chart */ - --consonant-merch-card-mini-compare-chart-icon-size: 32px; - --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; - --consonant-merch-card-mini-compare-mobile-cta-width: 75px; - --consonant-merch-card-mini-compare-badge-mobile-max-width: 50px; - /* inline SVGs */ --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"); @@ -5178,10 +5131,6 @@ merch-card.has-divider hr { border: none; } -merch-card[variant="special-offers"] span[is="inline-price"][data-template="strikethrough"] { - font-size: var(--consonant-merch-card-body-xs-font-size); -} - merch-card p, merch-card h3, merch-card h4 { margin: 0; } @@ -5336,155 +5285,12 @@ merch-card [slot="body-xl"] { color: var(--merch-color-grey-80); } -merch-card[variant="plans"] [slot="description"] { - min-height: 84px; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] { - background-color: #000; - color: var(--color-white, #fff); - font-size: var(--consonant-merch-card-body-xs-font-size); - width: fit-content; - padding: var(--consonant-merch-spacing-xs); - border-radius: var(--consonant-merch-spacing-xxxs); - position: absolute; - top: 55px; - right: 15px; - line-height: var(--consonant-merch-card-body-line-height); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ul { - padding-left: 0; - padding-bottom: var(--consonant-merch-spacing-xss); - margin-top: 0; - margin-bottom: 0; - list-style-position: inside; - list-style-type: '\u2022 '; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ul li { - padding-left: 0; - line-height: var(--consonant-merch-card-body-line-height); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ::marker { - margin-right: 0; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] p { - color: var(--color-white, #fff); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] a { - color: var(--consonant-merch-card-background-color); - 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; -} - -merch-card[variant="plans"] [slot="quantity-select"] { - display: flex; - justify-content: flex-start; - box-sizing: border-box; - width: 100%; - 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); - padding: var(--consonant-merch-spacing-s) - var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-xs); - color: var(--merch-color-grey-80); - display: flex; - flex-flow: wrap; -} - -merch-card[variant='twp'] merch-quantity-select, -merch-card[variant='twp'] merch-offer-select { - display: none; -} - [slot="cci-footer"] p, [slot="cct-footer"] p, [slot="cce-footer"] p { margin: 0; } -/* mini compare chart card styles */ - -merch-card[variant="mini-compare-chart"] [slot="heading-m"] { - padding: 0 var(--consonant-merch-spacing-s) 0; -} - -merch-card[variant="mini-compare-chart"] [slot="body-m"] { - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); -} - -merch-card[variant="mini-compare-chart"] [is="inline-price"] { - display: inline-block; - min-height: 30px; - min-width: 1px; -} - -merch-card[variant="mini-compare-chart"] [slot='callout-content'] { - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0px; -} - -merch-card[variant="mini-compare-chart"] [slot='callout-content'] [is="inline-price"] { - min-height: unset; -} - -merch-card[variant="mini-compare-chart"] [slot="price-commitment"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - padding: 0 var(--consonant-merch-spacing-s); -} - -merch-card[variant="mini-compare-chart"] [slot="price-commitment"] a { - display: inline-block; - height: 27px; -} - -merch-card[variant="mini-compare-chart"] [slot="offers"] { - font-size: var(--consonant-merch-card-body-xs-font-size); -} - merch-card [slot="promo-text"] { color: var(--merch-color-green-promo); font-size: var(--consonant-merch-card-promo-text-height); @@ -5495,111 +5301,6 @@ merch-card [slot="promo-text"] { padding: 0; } - -merch-card[variant="mini-compare-chart"] [slot="body-xxs"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; -} - -merch-card[variant="mini-compare-chart"] [slot="promo-text"] { - font-size: var(--consonant-merch-card-body-m-font-size); - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; -} - -merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { - text-decoration: underline; -} - -merch-card[variant="mini-compare-chart"] .footer-row-icon { - display: flex; - place-items: center; -} - -merch-card[variant="mini-compare-chart"] .footer-row-icon img { - max-width: initial; - width: var(--consonant-merch-card-mini-compare-chart-icon-size); - height: var(--consonant-merch-card-mini-compare-chart-icon-size); -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell { - border-top: 1px solid var(--consonant-merch-card-border-color); - display: flex; - gap: var(--consonant-merch-spacing-xs); - justify-content: start; - place-items: center; - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell-description { - font-size: var(--consonant-merch-card-body-s-font-size); - line-height: var(--consonant-merch-card-body-s-line-height); -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell-description p { - color: var(--merch-color-grey-80); - vertical-align: bottom; -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { - color: var(--color-accent); - text-decoration: solid; -} - -/* mini compare mobile */ -@media screen and ${MOBILE_LANDSCAPE} { - 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); - } - - merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] { - font-size: var(--consonant-merch-card-body-s-font-size); - line-height: var(--consonant-merch-card-body-s-line-height); - } - - 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); - } - - merch-card[variant="mini-compare-chart"] [slot="promo-text"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } - merch-card[variant="mini-compare-chart"] .footer-row-cell-description { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } -} - -/* mini compare tablet */ -@media screen and ${TABLET_DOWN} { - 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); - } - - merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] { - font-size: var(--consonant-merch-card-body-s-font-size); - line-height: var(--consonant-merch-card-body-s-line-height); - } - - 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); - } - - merch-card[variant="mini-compare-chart"] [slot="promo-text"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } - - merch-card[variant="mini-compare-chart"] .footer-row-cell-description { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } -} - div[slot="footer"] { display: contents; } @@ -5624,451 +5325,6 @@ div[slot='bg-image'] img { border-top-right-radius: 16px; } -/* Mobile */ -@media screen and ${MOBILE_LANDSCAPE} { - :root { - --consonant-merch-card-mini-compare-chart-width: 302px; - --consonant-merch-card-segment-width: 276px; - --consonant-merch-card-mini-compare-chart-wide-width: 302px; - --consonant-merch-card-special-offers-width: 302px; - --consonant-merch-card-twp-width: 300px; - } -} - - -/* Tablet */ -@media screen and ${TABLET_UP} { - :root { - --consonant-merch-card-catalog-width: 302px; - --consonant-merch-card-plans-width: 302px; - --consonant-merch-card-segment-width: 276px; - --consonant-merch-card-mini-compare-chart-width: 302px; - --consonant-merch-card-mini-compare-chart-wide-width: 302px; - --consonant-merch-card-special-offers-width: 302px; - --consonant-merch-card-twp-width: 268px; - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - :root { - --consonant-merch-card-catalog-width: 276px; - --consonant-merch-card-plans-width: 276px; - --consonant-merch-card-segment-width: 302px; - --consonant-merch-card-inline-heading-width: 378px; - --consonant-merch-card-product-width: 378px; - --consonant-merch-card-image-width: 378px; - --consonant-merch-card-mini-compare-chart-width: 378px; - --consonant-merch-card-mini-compare-chart-wide-width: 484px; - --consonant-merch-card-twp-width: 268px; - } -} - -/* supported cards */ -/* grid style for plans */ -.one-merch-card.plans, -.two-merch-cards.plans, -.three-merch-cards.plans, -.four-merch-cards.plans { - grid-template-columns: var(--consonant-merch-card-plans-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.plans, - .three-merch-cards.plans, - .four-merch-cards.plans { - grid-template-columns: repeat(2, var(--consonant-merch-card-plans-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.plans, - .four-merch-cards.plans { - grid-template-columns: repeat(3, var(--consonant-merch-card-plans-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.plans { - grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); - } -} - - -/* grid style for catalog */ -.one-merch-card.catalog, -.two-merch-cards.catalog, -.three-merch-cards.catalog, -.four-merch-cards.catalog { - grid-template-columns: var(--consonant-merch-card-catalog-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.catalog, - .three-merch-cards.catalog, - .four-merch-cards.catalog { - grid-template-columns: repeat(2, var(--consonant-merch-card-catalog-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.catalog, - .four-merch-cards.catalog { - grid-template-columns: repeat(3, var(--consonant-merch-card-catalog-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.catalog { - grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); - } -} - - -/* grid style for special-offers */ -.one-merch-card.special-offers, -.two-merch-cards.special-offers, -.three-merch-cards.special-offers, -.four-merch-cards.special-offers { - grid-template-columns: minmax(300px, var(--consonant-merch-card-special-offers-width)); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.special-offers, - .three-merch-cards.special-offers, - .four-merch-cards.special-offers { - grid-template-columns: repeat(2, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.special-offers, - .four-merch-cards.special-offers { - grid-template-columns: repeat(3, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } -} - -@media screen and ${LARGE_DESKTOP} { - .four-merch-cards.special-offers { - grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } -} - - -/* grid style for image */ -.one-merch-card.image, -.two-merch-cards.image, -.three-merch-cards.image, -.four-merch-cards.image { - grid-template-columns: var(--consonant-merch-card-image-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.image, - .three-merch-cards.image, - .four-merch-cards.image { - grid-template-columns: repeat(2, var(--consonant-merch-card-image-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.image, - .four-merch-cards.image { - grid-template-columns: repeat(3, var(--consonant-merch-card-image-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.image { - grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); - } -} - - -/* grid style for segment */ -.one-merch-card.segment, -.two-merch-cards.segment, -.three-merch-cards.segment, -.four-merch-cards.segment { - grid-template-columns: minmax(276px, var(--consonant-merch-card-segment-width)); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.segment, - .three-merch-cards.segment, - .four-merch-cards.segment { - grid-template-columns: repeat(2, minmax(276px, var(--consonant-merch-card-segment-width))); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.segment { - grid-template-columns: repeat(3, minmax(276px, var(--consonant-merch-card-segment-width))); - } - - .four-merch-cards.segment { - grid-template-columns: repeat(4, minmax(276px, var(--consonant-merch-card-segment-width))); - } -} - - -/* grid style for product */ -.one-merch-card.product, -.two-merch-cards.product, -.three-merch-cards.product, -.four-merch-cards.product { - grid-template-columns: var(--consonant-merch-card-product-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.product, - .three-merch-cards.product, - .four-merch-cards.product { - grid-template-columns: repeat(2, var(--consonant-merch-card-product-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.product, - .four-merch-cards.product { - grid-template-columns: repeat(3, var(--consonant-merch-card-product-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.product { - grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); - } -} - -/* 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 ${TABLET_UP} { - .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 ${DESKTOP_UP} { - .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 ${LARGE_DESKTOP} { - .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 ${MOBILE_LANDSCAPE} { - .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, -.two-merch-cards.inline-heading, -.three-merch-cards.inline-heading, -.four-merch-cards.inline-heading { - grid-template-columns: var(--consonant-merch-card-inline-heading-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.inline-heading, - .three-merch-cards.inline-heading, - .four-merch-cards.inline-heading { - grid-template-columns: repeat(2, var(--consonant-merch-card-inline-heading-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.inline-heading, - .four-merch-cards.inline-heading { - grid-template-columns: repeat(3, var(--consonant-merch-card-inline-heading-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.inline-heading { - grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); - } -} - -/* grid style for ccd-action */ -.one-merch-card.ccd-action, -.two-merch-cards.ccd-action, -.three-merch-cards.ccd-action, -.four-merch-cards.ccd-action { - grid-template-columns: var(--consonant-merch-card-ccd-action-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.ccd-action, - .three-merch-cards.ccd-action, - .four-merch-cards.ccd-action { - grid-template-columns: repeat(2, var(--consonant-merch-card-ccd-action-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.ccd-action, - .four-merch-cards.ccd-action { - grid-template-columns: repeat(3, var(--consonant-merch-card-ccd-action-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.ccd-action { - grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); - } -} - -/* grid style for mini-compare-chart */ -.one-merch-card.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); - gap: var(--consonant-merch-spacing-xs); -} - -.two-merch-cards.mini-compare-chart, -.three-merch-cards.mini-compare-chart, -.four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-width)); - gap: var(--consonant-merch-spacing-xs); -} - -@media screen and ${MOBILE_LANDSCAPE} { - .two-merch-cards.mini-compare-chart, - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-width); - gap: var(--consonant-merch-spacing-xs); - } -} - -@media screen and ${TABLET_DOWN} { - .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, - .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { - flex: 1; - } -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); - gap: var(--consonant-merch-spacing-m); - } - - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .one-merch-card.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); - } - - .two-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-wide-width)); - gap: var(--consonant-merch-spacing-m); - } - - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(3, var(--consonant-merch-card-mini-compare-chart-width)); - gap: var(--consonant-merch-spacing-m); - } -} - -@media screen and ${LARGE_DESKTOP} { - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); - } -} - -/* mini-compare card footer rows */ -merch-card .footer-row-cell:nth-child(1) { - min-height: var(--consonant-merch-card-footer-row-1-min-height); -} - -merch-card .footer-row-cell:nth-child(2) { - min-height: var(--consonant-merch-card-footer-row-2-min-height); -} - -merch-card .footer-row-cell:nth-child(3) { - min-height: var(--consonant-merch-card-footer-row-3-min-height); -} - -merch-card .footer-row-cell:nth-child(4) { - min-height: var(--consonant-merch-card-footer-row-4-min-height); -} - -merch-card .footer-row-cell:nth-child(5) { - min-height: var(--consonant-merch-card-footer-row-5-min-height); -} - -merch-card .footer-row-cell:nth-child(6) { - min-height: var(--consonant-merch-card-footer-row-6-min-height); -} - -merch-card .footer-row-cell:nth-child(7) { - min-height: var(--consonant-merch-card-footer-row-7-min-height); -} - -merch-card .footer-row-cell:nth-child(8) { - min-height: var(--consonant-merch-card-footer-row-8-min-height); -} - span[is="inline-price"][data-template='strikethrough'] { text-decoration: line-through; } @@ -6231,6 +5487,9 @@ var styles2 = css` `; var plans_modal_css_default = styles2; +// src/media.js +var MOBILE_LANDSCAPE = "(max-width: 767px)"; + // src/plans-modal.js var PlansModal = class extends LitElement { static properties = { diff --git a/libs/features/footer-promo.js b/libs/features/footer-promo.js index 78466a00558..2d47501b847 100644 --- a/libs/features/footer-promo.js +++ b/libs/features/footer-promo.js @@ -20,7 +20,7 @@ async function getPromoFromTaxonomy(contentRoot, doc) { if (primaryTag) return primaryTag[FOOTER_PROMO_LINK_KEY]; } catch (error) { /* c8 ignore next 2 */ - window.lana.log(`Footer Promo - Taxonomy error: ${error}`, { tags: 'errorType=info,module=footer-promo' }); + window.lana.log(`Footer Promo - Taxonomy error: ${error}`, { tags: 'footer-promo', errorType: 'i' }); } return undefined; } diff --git a/libs/features/mas/web-components/src/global.css.js b/libs/features/mas/web-components/src/global.css.js index a1437269078..0d4d5bfe9eb 100644 --- a/libs/features/mas/web-components/src/global.css.js +++ b/libs/features/mas/web-components/src/global.css.js @@ -1,11 +1,3 @@ -import { - TABLET_UP, - DESKTOP_UP, - LARGE_DESKTOP, - MOBILE_LANDSCAPE, - TABLET_DOWN, -} from './media.js'; - const styles = document.createElement('style'); styles.innerHTML = ` @@ -71,7 +63,6 @@ styles.innerHTML = ` --consonant-merch-card-heading-padding: 0; - --consonant-merch-card-image-height: 180px; /* colors */ --consonant-merch-card-border-color: #eaeaea; @@ -84,44 +75,8 @@ styles.innerHTML = ` --consonant-merch-card-max-width: 300px; --transition: cmax-height 0.3s linear, opacity 0.3s linear; - /* special offers */ - --consonant-merch-card-special-offers-width: 378px; - - /* image */ - --consonant-merch-card-image-width: 300px; - - /* segment */ - --consonant-merch-card-segment-width: 378px; - - /* inline-heading */ - --consonant-merch-card-inline-heading-width: 300px; - - /* product */ - --consonant-merch-card-product-width: 300px; - - /* plans */ - --consonant-merch-card-plans-width: 300px; - --consonant-merch-card-plans-icon-size: 40px; - - /* catalog */ - --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; - - /* ccd-action */ - --consonant-merch-card-ccd-action-width: 276px; - --consonant-merch-card-ccd-action-min-height: 320px; - - - /*mini compare chart */ - --consonant-merch-card-mini-compare-chart-icon-size: 32px; - --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; - --consonant-merch-card-mini-compare-mobile-cta-width: 75px; - --consonant-merch-card-mini-compare-badge-mobile-max-width: 50px; + /* background image */ + --consonant-merch-card-bg-img-height: 180px; /* inline SVGs */ --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"); @@ -178,10 +133,6 @@ merch-card.has-divider hr { border: none; } -merch-card[variant="special-offers"] span[is="inline-price"][data-template="strikethrough"] { - font-size: var(--consonant-merch-card-body-xs-font-size); -} - merch-card p, merch-card h3, merch-card h4 { margin: 0; } @@ -336,155 +287,12 @@ merch-card [slot="body-xl"] { color: var(--merch-color-grey-80); } -merch-card[variant="plans"] [slot="description"] { - min-height: 84px; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] { - background-color: #000; - color: var(--color-white, #fff); - font-size: var(--consonant-merch-card-body-xs-font-size); - width: fit-content; - padding: var(--consonant-merch-spacing-xs); - border-radius: var(--consonant-merch-spacing-xxxs); - position: absolute; - top: 55px; - right: 15px; - line-height: var(--consonant-merch-card-body-line-height); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ul { - padding-left: 0; - padding-bottom: var(--consonant-merch-spacing-xss); - margin-top: 0; - margin-bottom: 0; - list-style-position: inside; - list-style-type: '• '; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ul li { - padding-left: 0; - line-height: var(--consonant-merch-card-body-line-height); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] ::marker { - margin-right: 0; -} - -merch-card[variant="catalog"] [slot="action-menu-content"] p { - color: var(--color-white, #fff); -} - -merch-card[variant="catalog"] [slot="action-menu-content"] a { - color: var(--consonant-merch-card-background-color); - 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; -} - -merch-card[variant="plans"] [slot="quantity-select"] { - display: flex; - justify-content: flex-start; - box-sizing: border-box; - width: 100%; - 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: '·'; - 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); - padding: var(--consonant-merch-spacing-s) - var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-xs); - color: var(--merch-color-grey-80); - display: flex; - flex-flow: wrap; -} - -merch-card[variant='twp'] merch-quantity-select, -merch-card[variant='twp'] merch-offer-select { - display: none; -} - [slot="cci-footer"] p, [slot="cct-footer"] p, [slot="cce-footer"] p { margin: 0; } -/* mini compare chart card styles */ - -merch-card[variant="mini-compare-chart"] [slot="heading-m"] { - padding: 0 var(--consonant-merch-spacing-s) 0; -} - -merch-card[variant="mini-compare-chart"] [slot="body-m"] { - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); -} - -merch-card[variant="mini-compare-chart"] [is="inline-price"] { - display: inline-block; - min-height: 30px; - min-width: 1px; -} - -merch-card[variant="mini-compare-chart"] [slot='callout-content'] { - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0px; -} - -merch-card[variant="mini-compare-chart"] [slot='callout-content'] [is="inline-price"] { - min-height: unset; -} - -merch-card[variant="mini-compare-chart"] [slot="price-commitment"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - padding: 0 var(--consonant-merch-spacing-s); -} - -merch-card[variant="mini-compare-chart"] [slot="price-commitment"] a { - display: inline-block; - height: 27px; -} - -merch-card[variant="mini-compare-chart"] [slot="offers"] { - font-size: var(--consonant-merch-card-body-xs-font-size); -} - merch-card [slot="promo-text"] { color: var(--merch-color-green-promo); font-size: var(--consonant-merch-card-promo-text-height); @@ -495,111 +303,6 @@ merch-card [slot="promo-text"] { padding: 0; } - -merch-card[variant="mini-compare-chart"] [slot="body-xxs"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; -} - -merch-card[variant="mini-compare-chart"] [slot="promo-text"] { - font-size: var(--consonant-merch-card-body-m-font-size); - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; -} - -merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { - text-decoration: underline; -} - -merch-card[variant="mini-compare-chart"] .footer-row-icon { - display: flex; - place-items: center; -} - -merch-card[variant="mini-compare-chart"] .footer-row-icon img { - max-width: initial; - width: var(--consonant-merch-card-mini-compare-chart-icon-size); - height: var(--consonant-merch-card-mini-compare-chart-icon-size); -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell { - border-top: 1px solid var(--consonant-merch-card-border-color); - display: flex; - gap: var(--consonant-merch-spacing-xs); - justify-content: start; - place-items: center; - padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell-description { - font-size: var(--consonant-merch-card-body-s-font-size); - line-height: var(--consonant-merch-card-body-s-line-height); -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell-description p { - color: var(--merch-color-grey-80); - vertical-align: bottom; -} - -merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { - color: var(--color-accent); - text-decoration: solid; -} - -/* mini compare mobile */ -@media screen and ${MOBILE_LANDSCAPE} { - 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); - } - - merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] { - font-size: var(--consonant-merch-card-body-s-font-size); - line-height: var(--consonant-merch-card-body-s-line-height); - } - - 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); - } - - merch-card[variant="mini-compare-chart"] [slot="promo-text"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } - merch-card[variant="mini-compare-chart"] .footer-row-cell-description { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } -} - -/* mini compare tablet */ -@media screen and ${TABLET_DOWN} { - 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); - } - - merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] { - font-size: var(--consonant-merch-card-body-s-font-size); - line-height: var(--consonant-merch-card-body-s-line-height); - } - - 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); - } - - merch-card[variant="mini-compare-chart"] [slot="promo-text"] { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } - - merch-card[variant="mini-compare-chart"] .footer-row-cell-description { - font-size: var(--consonant-merch-card-body-xs-font-size); - line-height: var(--consonant-merch-card-body-xs-line-height); - } -} - div[slot="footer"] { display: contents; } @@ -617,458 +320,13 @@ div[slot="footer"] { div[slot='bg-image'] img { position: relative; width: 100%; - min-height: var(--consonant-merch-card-image-height); - max-height: var(--consonant-merch-card-image-height); + min-height: var(--consonant-merch-card-bg-img-height); + max-height: var(--consonant-merch-card-bg-img-height); object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; } -/* Mobile */ -@media screen and ${MOBILE_LANDSCAPE} { - :root { - --consonant-merch-card-mini-compare-chart-width: 302px; - --consonant-merch-card-segment-width: 276px; - --consonant-merch-card-mini-compare-chart-wide-width: 302px; - --consonant-merch-card-special-offers-width: 302px; - --consonant-merch-card-twp-width: 300px; - } -} - - -/* Tablet */ -@media screen and ${TABLET_UP} { - :root { - --consonant-merch-card-catalog-width: 302px; - --consonant-merch-card-plans-width: 302px; - --consonant-merch-card-segment-width: 276px; - --consonant-merch-card-mini-compare-chart-width: 302px; - --consonant-merch-card-mini-compare-chart-wide-width: 302px; - --consonant-merch-card-special-offers-width: 302px; - --consonant-merch-card-twp-width: 268px; - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - :root { - --consonant-merch-card-catalog-width: 276px; - --consonant-merch-card-plans-width: 276px; - --consonant-merch-card-segment-width: 302px; - --consonant-merch-card-inline-heading-width: 378px; - --consonant-merch-card-product-width: 378px; - --consonant-merch-card-image-width: 378px; - --consonant-merch-card-mini-compare-chart-width: 378px; - --consonant-merch-card-mini-compare-chart-wide-width: 484px; - --consonant-merch-card-twp-width: 268px; - } -} - -/* supported cards */ -/* grid style for plans */ -.one-merch-card.plans, -.two-merch-cards.plans, -.three-merch-cards.plans, -.four-merch-cards.plans { - grid-template-columns: var(--consonant-merch-card-plans-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.plans, - .three-merch-cards.plans, - .four-merch-cards.plans { - grid-template-columns: repeat(2, var(--consonant-merch-card-plans-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.plans, - .four-merch-cards.plans { - grid-template-columns: repeat(3, var(--consonant-merch-card-plans-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.plans { - grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); - } -} - - -/* grid style for catalog */ -.one-merch-card.catalog, -.two-merch-cards.catalog, -.three-merch-cards.catalog, -.four-merch-cards.catalog { - grid-template-columns: var(--consonant-merch-card-catalog-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.catalog, - .three-merch-cards.catalog, - .four-merch-cards.catalog { - grid-template-columns: repeat(2, var(--consonant-merch-card-catalog-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.catalog, - .four-merch-cards.catalog { - grid-template-columns: repeat(3, var(--consonant-merch-card-catalog-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.catalog { - grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); - } -} - - -/* grid style for special-offers */ -.one-merch-card.special-offers, -.two-merch-cards.special-offers, -.three-merch-cards.special-offers, -.four-merch-cards.special-offers { - grid-template-columns: minmax(300px, var(--consonant-merch-card-special-offers-width)); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.special-offers, - .three-merch-cards.special-offers, - .four-merch-cards.special-offers { - grid-template-columns: repeat(2, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.special-offers, - .four-merch-cards.special-offers { - grid-template-columns: repeat(3, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } -} - -@media screen and ${LARGE_DESKTOP} { - .four-merch-cards.special-offers { - grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); - } -} - - -/* grid style for image */ -.one-merch-card.image, -.two-merch-cards.image, -.three-merch-cards.image, -.four-merch-cards.image { - grid-template-columns: var(--consonant-merch-card-image-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.image, - .three-merch-cards.image, - .four-merch-cards.image { - grid-template-columns: repeat(2, var(--consonant-merch-card-image-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.image, - .four-merch-cards.image { - grid-template-columns: repeat(3, var(--consonant-merch-card-image-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.image { - grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); - } -} - - -/* grid style for segment */ -.one-merch-card.segment, -.two-merch-cards.segment, -.three-merch-cards.segment, -.four-merch-cards.segment { - grid-template-columns: minmax(276px, var(--consonant-merch-card-segment-width)); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.segment, - .three-merch-cards.segment, - .four-merch-cards.segment { - grid-template-columns: repeat(2, minmax(276px, var(--consonant-merch-card-segment-width))); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.segment { - grid-template-columns: repeat(3, minmax(276px, var(--consonant-merch-card-segment-width))); - } - - .four-merch-cards.segment { - grid-template-columns: repeat(4, minmax(276px, var(--consonant-merch-card-segment-width))); - } -} - - -/* grid style for product */ -.one-merch-card.product, -.two-merch-cards.product, -.three-merch-cards.product, -.four-merch-cards.product { - grid-template-columns: var(--consonant-merch-card-product-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.product, - .three-merch-cards.product, - .four-merch-cards.product { - grid-template-columns: repeat(2, var(--consonant-merch-card-product-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.product, - .four-merch-cards.product { - grid-template-columns: repeat(3, var(--consonant-merch-card-product-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.product { - grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); - } -} - -/* 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 ${TABLET_UP} { - .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 ${DESKTOP_UP} { - .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 ${LARGE_DESKTOP} { - .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 ${MOBILE_LANDSCAPE} { - .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, -.two-merch-cards.inline-heading, -.three-merch-cards.inline-heading, -.four-merch-cards.inline-heading { - grid-template-columns: var(--consonant-merch-card-inline-heading-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.inline-heading, - .three-merch-cards.inline-heading, - .four-merch-cards.inline-heading { - grid-template-columns: repeat(2, var(--consonant-merch-card-inline-heading-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.inline-heading, - .four-merch-cards.inline-heading { - grid-template-columns: repeat(3, var(--consonant-merch-card-inline-heading-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.inline-heading { - grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); - } -} - -/* grid style for ccd-action */ -.one-merch-card.ccd-action, -.two-merch-cards.ccd-action, -.three-merch-cards.ccd-action, -.four-merch-cards.ccd-action { - grid-template-columns: var(--consonant-merch-card-ccd-action-width); -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.ccd-action, - .three-merch-cards.ccd-action, - .four-merch-cards.ccd-action { - grid-template-columns: repeat(2, var(--consonant-merch-card-ccd-action-width)); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .three-merch-cards.ccd-action, - .four-merch-cards.ccd-action { - grid-template-columns: repeat(3, var(--consonant-merch-card-ccd-action-width)); - } -} - -/* Large desktop */ - @media screen and ${LARGE_DESKTOP} { - .four-merch-cards.ccd-action { - grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); - } -} - -/* grid style for mini-compare-chart */ -.one-merch-card.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); - gap: var(--consonant-merch-spacing-xs); -} - -.two-merch-cards.mini-compare-chart, -.three-merch-cards.mini-compare-chart, -.four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-width)); - gap: var(--consonant-merch-spacing-xs); -} - -@media screen and ${MOBILE_LANDSCAPE} { - .two-merch-cards.mini-compare-chart, - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-width); - gap: var(--consonant-merch-spacing-xs); - } -} - -@media screen and ${TABLET_DOWN} { - .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, - .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { - flex: 1; - } -} - -/* Tablet */ -@media screen and ${TABLET_UP} { - .two-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); - gap: var(--consonant-merch-spacing-m); - } - - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); - } -} - -/* desktop */ -@media screen and ${DESKTOP_UP} { - .one-merch-card.mini-compare-chart { - grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); - } - - .two-merch-cards.mini-compare-chart { - grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-wide-width)); - gap: var(--consonant-merch-spacing-m); - } - - .three-merch-cards.mini-compare-chart, - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(3, var(--consonant-merch-card-mini-compare-chart-width)); - gap: var(--consonant-merch-spacing-m); - } -} - -@media screen and ${LARGE_DESKTOP} { - .four-merch-cards.mini-compare-chart { - grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); - } -} - -/* mini-compare card footer rows */ -merch-card .footer-row-cell:nth-child(1) { - min-height: var(--consonant-merch-card-footer-row-1-min-height); -} - -merch-card .footer-row-cell:nth-child(2) { - min-height: var(--consonant-merch-card-footer-row-2-min-height); -} - -merch-card .footer-row-cell:nth-child(3) { - min-height: var(--consonant-merch-card-footer-row-3-min-height); -} - -merch-card .footer-row-cell:nth-child(4) { - min-height: var(--consonant-merch-card-footer-row-4-min-height); -} - -merch-card .footer-row-cell:nth-child(5) { - min-height: var(--consonant-merch-card-footer-row-5-min-height); -} - -merch-card .footer-row-cell:nth-child(6) { - min-height: var(--consonant-merch-card-footer-row-6-min-height); -} - -merch-card .footer-row-cell:nth-child(7) { - min-height: var(--consonant-merch-card-footer-row-7-min-height); -} - -merch-card .footer-row-cell:nth-child(8) { - min-height: var(--consonant-merch-card-footer-row-8-min-height); -} - span[is="inline-price"][data-template='strikethrough'] { text-decoration: line-through; } 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 6599a6e153a..bcc20816514 100644 --- a/libs/features/mas/web-components/src/merch-card.css.js +++ b/libs/features/mas/web-components/src/merch-card.css.js @@ -1,5 +1,5 @@ import { css, unsafeCSS } from 'lit'; -import { DESKTOP_UP, LARGE_DESKTOP, TABLET_UP, TABLET_DOWN } from './media.js'; +import { DESKTOP_UP, LARGE_DESKTOP, TABLET_UP, } from './media.js'; export const styles = css` :host { @@ -20,26 +20,6 @@ export const styles = css` visibility: hidden; } - :host([variant='special-offers']) { - min-height: 439px; - } - - :host([variant='catalog']) { - min-height: 330px; - } - - :host([variant='plans']) { - min-height: 348px; - } - - :host([variant='segment']) { - min-height: 214px; - } - - :host([variant='ccd-action']:not([size])) { - width: var(--consonant-merch-card-ccd-action-width); - } - :host([aria-selected]) { outline: none; box-sizing: border-box; @@ -61,10 +41,6 @@ export const styles = css` background-image: var(--ellipsis-icon); } - :host([variant='mini-compare-chart']) > slot:not([name='icons']) { - display: block; - } - .top-section { display: flex; justify-content: flex-start; @@ -129,19 +105,6 @@ export const styles = css` border-radius: 0 5px 5px 0; } - .body .catalog-badge { - display: flex; - 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 { right: 0; padding: var(--consonant-merch-spacing-xs); @@ -245,128 +208,10 @@ export const styles = css` margin-top: 2px; } - .twp-badge { - padding: 4px 10px 5px 10px; - } - - :host([aria-selected]) .twp-badge { - margin-inline-end: 2px; - padding-inline-end: 9px; - } - - :host([variant='twp']) { - padding: 4px 10px 5px 10px; - } - slot[name='icons'] { display: flex; gap: 8px; } - - :host([variant='twp']) ::slotted(merch-offer-select) { - display: none; - } - - :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 { - gap: var(--consonant-merch-spacing-xxs); - flex-direction: column; - align-self: flex-start; - } - - :host([variant='special-offers'].center) { - text-align: center; - } - - /* plans */ - :host([variant='plans']) { - min-height: 348px; - } - - :host([variant='mini-compare-chart']) footer { - min-height: var(--consonant-merch-card-mini-compare-footer-height); - padding: var(--consonant-merch-spacing-xs); - } - - /* mini-compare card */ - :host([variant='mini-compare-chart']) .top-section { - padding-top: var(--consonant-merch-spacing-s); - padding-inline-start: var(--consonant-merch-spacing-s); - height: var(--consonant-merch-card-mini-compare-top-section-height); - } - - @media screen and ${unsafeCSS(TABLET_DOWN)} { - [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer { - flex-direction: column; - align-items: stretch; - text-align: center; - } - } - - @media screen and ${unsafeCSS(DESKTOP_UP)} { - :host([variant='mini-compare-chart']) footer { - padding: var(--consonant-merch-spacing-xs) - var(--consonant-merch-spacing-s) - var(--consonant-merch-spacing-s) - var(--consonant-merch-spacing-s); - } - } - - :host([variant='mini-compare-chart']) slot[name='footer-rows'] { - flex: 1; - display: flex; - flex-direction: column; - justify-content: end; - } - /* mini-compare card heights for the slots: heading-m, body-m, heading-m-price, price-commitment, offers, promo-text, footer */ - :host([variant='mini-compare-chart']) slot[name='heading-m'] { - min-height: var(--consonant-merch-card-mini-compare-heading-m-height); - } - :host([variant='mini-compare-chart']) slot[name='body-m'] { - min-height: var(--consonant-merch-card-mini-compare-body-m-height); - } - :host([variant='mini-compare-chart']) slot[name='heading-m-price'] { - min-height: var( - --consonant-merch-card-mini-compare-heading-m-price-height - ); - } - :host([variant='mini-compare-chart']) slot[name='price-commitment'] { - min-height: var( - --consonant-merch-card-mini-compare-price-commitment-height - ); - } - :host([variant='mini-compare-chart']) slot[name='offers'] { - min-height: var(--consonant-merch-card-mini-compare-offers-height); - } - :host([variant='mini-compare-chart']) slot[name='promo-text'] { - min-height: var(--consonant-merch-card-mini-compare-promo-text-height); - } - :host([variant='mini-compare-chart']) slot[name='callout-content'] { - min-height: var( - --consonant-merch-card-mini-compare-callout-content-height - ); - } - - :host([variant='plans']) ::slotted([slot='heading-xs']), - :host([variant='segment']) ::slotted([slot='heading-xs']) { - max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); - } `; export const sizeStyles = () => { diff --git a/libs/features/mas/web-components/src/merch-card.js b/libs/features/mas/web-components/src/merch-card.js index 025be0ef1cb..92136552a12 100644 --- a/libs/features/mas/web-components/src/merch-card.js +++ b/libs/features/mas/web-components/src/merch-card.js @@ -1,6 +1,7 @@ -import { html, LitElement, nothing } from 'lit'; +import { LitElement } from 'lit'; import { sizeStyles, styles } from './merch-card.css.js'; -import { isMobile, isMobileOrTablet } from './utils.js'; +import { getVariantLayout, getVariantStyles } from './variants/variants.js'; + import './global.css.js'; import { @@ -8,19 +9,11 @@ import { EVENT_MERCH_OFFER_SELECT_READY, EVENT_MERCH_QUANTITY_SELECTOR_CHANGE, EVENT_MERCH_STORAGE_CHANGE, - EVENT_MERCH_CARD_ACTION_MENU_TOGGLE, } from './constants.js'; export const MERCH_CARD_NODE_NAME = 'MERCH-CARD'; export const MERCH_CARD = 'merch-card'; -const FOOTER_ROW_MIN_HEIGHT = 32; // as per the XD. - -const MINI_COMPARE_CHART = 'mini-compare-chart'; - -const getRowMinHeightPropertyName = (index) => - `--consonant-merch-card-footer-row-${index}-min-height`; - export class MerchCard extends LitElement { static properties = { name: { type: String, attribute: 'name', reflect: true }, @@ -89,10 +82,11 @@ export class MerchCard extends LitElement { merchOffer: { type: Object }, }; - static styles = [styles, ...sizeStyles()]; + static styles = [styles, getVariantStyles(), ...sizeStyles()]; customerSegment; marketSegment; + variantLayout; constructor() { super(); @@ -101,8 +95,6 @@ export class MerchCard extends LitElement { this.selected = false; } - #container; - updated(changedProperties) { if ( changedProperties.has('badgeBackgroundColor') || @@ -112,23 +104,22 @@ export class MerchCard extends LitElement { } this.updateComplete.then(async () => { const allPrices = Array.from( - this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'), + this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'), ); // Filter out prices within the callout-content slot const prices = allPrices.filter( (price) => !price.closest('[slot="callout-content"]'), ); await Promise.all(prices.map((price) => price.onceSettled())); - this.adjustTitleWidth(); - if (!isMobile()) { - this.adjustMiniCompareBodySlots(); - this.adjustMiniCompareFooterRows(); - } else { - this.removeEmptyRows(); - } + this.variantLayout.postCardUpdateHook(this); }); } + render() { + if (!this.isConnected || this.style.display === 'none') return; + return this.variantLayout.renderLayout(); + } + get computedBorderStyle() { if (this.variant !== 'twp') { return `1px solid ${ @@ -138,76 +129,10 @@ export class MerchCard extends LitElement { return ''; } - get evergreen() { - return this.classList.contains('intro-pricing'); - } - - get stockCheckbox() { - return this.checkboxLabel - ? html`` - : ''; - } - - get cardImage() { - return html`
- - ${this.badge} -
`; - } - - get secureLabelFooter() { - const secureLabel = this.secureLabel - ? html`${this.secureLabel}` - : ''; - return html`
${secureLabel}
`; - } - - get miniCompareFooter() { - const secureLabel = this.secureLabel - ? html` - ${this.secureLabel}` - : html``; - return html`
${secureLabel}
`; - } - - get badge() { - let additionalStyles; - if (!this.badgeBackgroundColor || !this.badgeColor || !this.badgeText) { - return; - } - if (this.evergreen) { - additionalStyles = `border: 1px solid ${this.badgeBackgroundColor}; border-right: none;`; - } - return html` -
- ${this.badgeText} -
- `; - } - get badgeElement() { return this.shadowRoot.getElementById('badge'); } - getContainer() { - return this.closest('[class*="-merch-cards"]') ?? this.parentElement; - } - get headingmMSlot() { return this.shadowRoot .querySelector('slot[name="heading-m"]') @@ -252,27 +177,6 @@ export class MerchCard extends LitElement { } } - toggleActionMenu(e) { - const retract = e?.type === 'mouseleave' ? true : undefined; - const actionMenuContentSlot = this.shadowRoot.querySelector( - 'slot[name="action-menu-content"]', - ); - if (!actionMenuContentSlot) return; - if (!retract) { - this.dispatchEvent( - new CustomEvent(EVENT_MERCH_CARD_ACTION_MENU_TOGGLE, { - bubbles: true, - composed: true, - detail: { - card: this.name, - type: 'action-menu', - }, - }), - ); - } - actionMenuContentSlot.classList.toggle('hidden', retract); - } - handleQuantitySelection(event) { const elements = this.checkoutLinks; for (const element of elements) { @@ -280,12 +184,8 @@ export class MerchCard extends LitElement { } } - get titleElement() { - const heading = - this.variant === 'special-offers' - ? this.querySelector('[slot="detail-m"]') - : this.querySelector('[slot="heading-xs"]'); - return heading; + get titleElement() { + return this.querySelector(this.variantLayout?.headingSelector || '.card-heading'); } get title() { @@ -321,225 +221,15 @@ export class MerchCard extends LitElement { return this.textContent.match(new RegExp(text, 'i')) !== null; } - render() { - if (!this.isConnected || this.style.display === 'none') return; - switch (this.variant) { - case 'special-offers': - return this.renderSpecialOffer(); - case 'segment': - return this.renderSegment(); - case 'plans': - return this.renderPlans(); - case 'catalog': - return this.renderCatalog(); - case 'image': - return this.renderImage(); - case 'product': - return this.renderProduct(); - case 'inline-heading': - return this.renderInlineHeading(); - case MINI_COMPARE_CHART: - return this.renderMiniCompareChart(); - case 'ccd-action': - return this.renderCcdAction(); - case 'twp': - return this.renderTwp(); - default: - // this line should never hit, to check. - return this.renderProduct(); - } - } - - renderSpecialOffer() { - return html`${this.cardImage} -
- - - -
- ${this.evergreen - ? html` -
- -
- ` - : html` -
- ${this.secureLabelFooter} - `} - `; - } - - get promoBottom() { - return this.classList.contains('promo-bottom'); - } - get startingAt() { return this.classList.contains('starting-at'); } - renderSegment() { - return html` ${this.badge} -
- - - ${!this.promoBottom ? html`` : ''} - - ${this.promoBottom ? html`` : ''} -
-
- ${this.secureLabelFooter}`; - } - - renderPlans() { - return html` ${this.badge} -
- - - - - ${!this.promoBottom ? html` ` : ''} - - ${this.promoBottom ? html` ` : ''} - ${this.stockCheckbox} -
- - ${this.secureLabelFooter}`; - } - - renderCatalog() { - return html`
-
- ${this.badge} -
-
- ${this.actionMenuContent} - - - - ${!this.promoBottom - ? html`` - : ''} - - ${this.promoBottom - ? html`` - : ''} -
- ${this.secureLabelFooter}`; - } - - renderImage() { - return html`${this.cardImage} -
- - - - ${this.promoBottom ? html`` : html``} -
- ${this.evergreen - ? html` -
- -
- ` - : html` -
- ${this.secureLabelFooter} - `}`; - } - - renderInlineHeading() { - return html` ${this.badge} -
-
- - -
- -
- ${!this.customHr ? html`
` : ''} ${this.secureLabelFooter}`; - } - - renderProduct() { - return html` ${this.badge} -
- - - - ${!this.promoBottom ? html`` : ''} - - ${this.promoBottom ? html`` : ''} -
- ${this.secureLabelFooter}`; - } - - renderMiniCompareChart() { - // Define the HTML structure for the 'mini-compare-chart' variant here - const { badge } = this; - return html`
- ${badge} -
- - - - - - - - - ${this.miniCompareFooter} - `; - } - - renderTwp() { - return html`${this.badge} -
- - - -
-
- -
-
`; - } - - renderCcdAction() { - return html`
- ${this.badge} - - - ${this.promoBottom ? html`` : html``} -
- -
`; - } - connectedCallback() { super.connectedCallback(); - this.#container = this.getContainer(); + this.variantLayout = getVariantLayout(this); + this.variantLayout.connectedCallbackHook(); this.setAttribute('tabindex', this.getAttribute('tabindex') ?? '0'); - this.addEventListener('mouseleave', this.toggleActionMenu); this.addEventListener( EVENT_MERCH_QUANTITY_SELECTOR_CHANGE, this.handleQuantitySelection, @@ -560,6 +250,7 @@ export class MerchCard extends LitElement { disconnectedCallback() { super.disconnectedCallback(); + this.variantLayout.disconnectedCallbackHook(); this.removeEventListener( EVENT_MERCH_QUANTITY_SELECTOR_CHANGE, @@ -570,119 +261,8 @@ export class MerchCard extends LitElement { this.handleStorageChange, ); } - // custom methods - updateMiniCompareElementMinHeight(el, name) { - const elMinHeightPropertyName = `--consonant-merch-card-mini-compare-${name}-height`; - const height = Math.max( - 0, - parseInt(window.getComputedStyle(el).height) || 0, - ); - const maxMinHeight = - parseInt( - this.#container.style.getPropertyValue(elMinHeightPropertyName), - ) || 0; - if (height > maxMinHeight) { - this.#container.style.setProperty( - elMinHeightPropertyName, - `${height}px`, - ); - } - } - - async adjustTitleWidth() { - if (!['segment', 'plans'].includes(this.variant)) return; - const cardWidth = this.getBoundingClientRect().width; - const badgeWidth = - this.badgeElement?.getBoundingClientRect().width || 0; - if (cardWidth === 0 || badgeWidth === 0) return; - this.style.setProperty( - '--consonant-merch-card-heading-xs-max-width', - `${Math.round(cardWidth - badgeWidth - 16)}px`, // consonant-merch-spacing-xs - ); - } - - async adjustMiniCompareBodySlots() { - if (this.variant !== MINI_COMPARE_CHART) return; - if (this.getBoundingClientRect().width === 0) return; - - this.updateMiniCompareElementMinHeight( - this.shadowRoot.querySelector('.top-section'), - 'top-section', - ); - - const slots = [ - 'heading-m', - 'body-m', - 'heading-m-price', - 'price-commitment', - 'offers', - 'promo-text', - 'callout-content', - 'secure-transaction-label', - ]; - - slots.forEach((slot) => - this.updateMiniCompareElementMinHeight( - this.shadowRoot.querySelector(`slot[name="${slot}"]`), - slot, - ), - ); - this.updateMiniCompareElementMinHeight( - this.shadowRoot.querySelector('footer'), - 'footer', - ); - - const badge = this.shadowRoot.querySelector( - '.mini-compare-chart-badge', - ); - if (badge && badge.textContent !== '') { - this.#container.style.setProperty( - '--consonant-merch-card-mini-compare-top-section-mobile-height', - '32px', - ); - } - } - - adjustMiniCompareFooterRows() { - if (this.variant !== MINI_COMPARE_CHART) return; - if (this.getBoundingClientRect().width === 0) return; - const footerRows = this.querySelector('[slot="footer-rows"]'); - [...footerRows.children].forEach((el, index) => { - const height = Math.max( - FOOTER_ROW_MIN_HEIGHT, - parseInt(window.getComputedStyle(el).height) || 0, - ); - const maxMinHeight = - parseInt( - this.#container.style.getPropertyValue( - getRowMinHeightPropertyName(index + 1), - ), - ) || 0; - if (height > maxMinHeight) { - this.#container.style.setProperty( - getRowMinHeightPropertyName(index + 1), - `${height}px`, - ); - } - }); - } - - removeEmptyRows() { - if (this.variant !== MINI_COMPARE_CHART) return; - const footerRows = this.querySelectorAll('.footer-row-cell'); - footerRows.forEach((row) => { - const rowDescription = row.querySelector('.footer-row-cell-description'); - if (rowDescription) { - const isEmpty = !rowDescription.textContent.trim(); - if (isEmpty) { - row.remove(); - } - } - }); - } - get storageOptions() { return this.querySelector('sp-radio-group#storage'); } diff --git a/libs/features/mas/web-components/src/variants/catalog.css.js b/libs/features/mas/web-components/src/variants/catalog.css.js new file mode 100644 index 00000000000..db237356417 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/catalog.css.js @@ -0,0 +1,89 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP,} from '../media.js'; + +export const CSS = ` +:root { + --consonant-merch-card-catalog-width: 276px; + --consonant-merch-card-catalog-icon-size: 40px; +} +.one-merch-card.catalog, +.two-merch-cards.catalog, +.three-merch-cards.catalog, +.four-merch-cards.catalog { + grid-template-columns: var(--consonant-merch-card-catalog-width); +} + +@media screen and ${TABLET_UP} { + :root { + --consonant-merch-card-catalog-width: 302px; + } + + .two-merch-cards.catalog, + .three-merch-cards.catalog, + .four-merch-cards.catalog { + grid-template-columns: repeat(2, var(--consonant-merch-card-catalog-width)); + } +} + +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-catalog-width: 276px; + } + + .three-merch-cards.catalog, + .four-merch-cards.catalog { + grid-template-columns: repeat(3, var(--consonant-merch-card-catalog-width)); + } +} + +@media screen and ${LARGE_DESKTOP} { + .four-merch-cards.catalog { + grid-template-columns: repeat(4, var(--consonant-merch-card-catalog-width)); + } +} + +merch-card[variant="catalog"] [slot="action-menu-content"] { + background-color: #000; + color: var(--color-white, #fff); + font-size: var(--consonant-merch-card-body-xs-font-size); + width: fit-content; + padding: var(--consonant-merch-spacing-xs); + border-radius: var(--consonant-merch-spacing-xxxs); + position: absolute; + top: 55px; + right: 15px; + line-height: var(--consonant-merch-card-body-line-height); +} + +merch-card[variant="catalog"] [slot="action-menu-content"] ul { + padding-left: 0; + padding-bottom: var(--consonant-merch-spacing-xss); + margin-top: 0; + margin-bottom: 0; + list-style-position: inside; + list-style-type: '• '; +} + +merch-card[variant="catalog"] [slot="action-menu-content"] ul li { + padding-left: 0; + line-height: var(--consonant-merch-card-body-line-height); +} + +merch-card[variant="catalog"] [slot="action-menu-content"] ::marker { + margin-right: 0; +} + +merch-card[variant="catalog"] [slot="action-menu-content"] p { + color: var(--color-white, #fff); +} + +merch-card[variant="catalog"] [slot="action-menu-content"] a { + color: var(--consonant-merch-card-background-color); + 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); +}`; diff --git a/libs/features/mas/web-components/src/variants/catalog.js b/libs/features/mas/web-components/src/variants/catalog.js new file mode 100644 index 00000000000..8a9f80162c7 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/catalog.js @@ -0,0 +1,97 @@ +import { VariantLayout } from './variant-layout.js'; +import { html, css } from 'lit'; +import { isMobileOrTablet } from '../utils.js'; +import { EVENT_MERCH_CARD_ACTION_MENU_TOGGLE } from '../constants.js'; +import { CSS } from './catalog.css.js'; + +export class Catalog extends VariantLayout { + constructor(card) { + super(card); + } + + renderLayout() { + return html`
+
+ ${this.badge} +
+
+ ${this.card.actionMenuContent} + + + + ${!this.promoBottom + ? html`` + : ''} + + ${this.promoBottom + ? html`` + : ''} +
+ ${this.secureLabelFooter}`; + } + + getGlobalCSS() { + return CSS; + } + + toggleActionMenu = (e) => { + //beware this is an event on card, so this points to the card, not the layout + const retract = e?.type === 'mouseleave' ? true : undefined; + const actionMenuContentSlot = this.card.shadowRoot.querySelector( + 'slot[name="action-menu-content"]', + ); + if (!actionMenuContentSlot) return; + if (!retract) { + this.card.dispatchEvent( + new CustomEvent(EVENT_MERCH_CARD_ACTION_MENU_TOGGLE, { + bubbles: true, + composed: true, + detail: { + card: this.card.name, + type: 'action-menu', + }, + }), + ); + } + actionMenuContentSlot.classList.toggle('hidden', retract); + } + + connectedCallbackHook() { + this.card.addEventListener('mouseleave', this.toggleActionMenu); + } + disconnectedCallbackHook() { + this.card.removeEventListener('mouseleave', this.toggleActionMenu); + } + static variantStyle = css` + :host([variant='catalog']) { + min-height: 330px; + } + + .body .catalog-badge { + display: flex; + 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; + } + `; +} diff --git a/libs/features/mas/web-components/src/variants/ccd-action.css.js b/libs/features/mas/web-components/src/variants/ccd-action.css.js new file mode 100644 index 00000000000..1bae9d8f3c4 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/ccd-action.css.js @@ -0,0 +1,40 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP } from "../media.js"; + +export const CSS = ` +:root { + --consonant-merch-card-ccd-action-width: 276px; + --consonant-merch-card-ccd-action-min-height: 320px; +} + +.one-merch-card.ccd-action, +.two-merch-cards.ccd-action, +.three-merch-cards.ccd-action, +.four-merch-cards.ccd-action { + grid-template-columns: var(--consonant-merch-card-ccd-action-width); +} + +merch-card[variant="ccd-action"] .price-strikethrough { + font-size: 18px; +} + +@media screen and ${TABLET_UP} { + .two-merch-cards.ccd-action, + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(2, var(--consonant-merch-card-ccd-action-width)); + } +} + +@media screen and ${DESKTOP_UP} { + .three-merch-cards.ccd-action, + .four-merch-cards.ccd-action { + grid-template-columns: repeat(3, var(--consonant-merch-card-ccd-action-width)); + } +} + +@media screen and ${LARGE_DESKTOP} { + .four-merch-cards.ccd-action { + grid-template-columns: repeat(4, var(--consonant-merch-card-ccd-action-width)); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/ccd-action.js b/libs/features/mas/web-components/src/variants/ccd-action.js new file mode 100644 index 00000000000..5fb02cc9a5b --- /dev/null +++ b/libs/features/mas/web-components/src/variants/ccd-action.js @@ -0,0 +1,29 @@ +import { VariantLayout } from './variant-layout.js'; +import { html, css } from 'lit'; +import { CSS } from './ccd-action.css.js'; + +export class CCDAction extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + renderLayout() { + return html`
+ ${this.badge} + + + ${this.promoBottom ? html`` : html``} +
+ +
`; + } + static variantStyle = css` + :host([variant='ccd-action']:not([size])) { + width: var(--consonant-merch-card-ccd-action-width); + } + `; +} diff --git a/libs/features/mas/web-components/src/variants/image.css.js b/libs/features/mas/web-components/src/variants/image.css.js new file mode 100644 index 00000000000..30551c0a848 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/image.css.js @@ -0,0 +1,38 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP,} from '../media.js'; +export const CSS = ` +:root { + --consonant-merch-card-image-width: 300px; +} + +.one-merch-card.image, +.two-merch-cards.image, +.three-merch-cards.image, +.four-merch-cards.image { + grid-template-columns: var(--consonant-merch-card-image-width); +} + +@media screen and ${TABLET_UP} { + .two-merch-cards.image, + .three-merch-cards.image, + .four-merch-cards.image { + grid-template-columns: repeat(2, var(--consonant-merch-card-image-width)); + } +} + +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-image-width: 378px; + } + + .three-merch-cards.image, + .four-merch-cards.image { + grid-template-columns: repeat(3, var(--consonant-merch-card-image-width)); + } +} + +@media screen and ${LARGE_DESKTOP} { + .four-merch-cards.image { + grid-template-columns: repeat(4, var(--consonant-merch-card-image-width)); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/image.js b/libs/features/mas/web-components/src/variants/image.js new file mode 100644 index 00000000000..dcc5599bd3f --- /dev/null +++ b/libs/features/mas/web-components/src/variants/image.js @@ -0,0 +1,36 @@ +import { VariantLayout } from "./variant-layout.js"; +import { html } from 'lit'; +import { CSS } from './image.css.js'; + +export class Image extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + renderLayout() { + return html`${this.cardImage} +
+ + + + ${this.promoBottom ? html`` : html``} +
+ ${this.evergreen + ? html` +
+ +
+ ` + : html` +
+ ${this.secureLabelFooter} + `}`; + } +} diff --git a/libs/features/mas/web-components/src/variants/inline-heading.css.js b/libs/features/mas/web-components/src/variants/inline-heading.css.js new file mode 100644 index 00000000000..7bb9c25a1e0 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/inline-heading.css.js @@ -0,0 +1,39 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP,} from '../media.js'; + +export const CSS = ` +:root { + --consonant-merch-card-inline-heading-width: 300px; +} + +.one-merch-card.inline-heading, +.two-merch-cards.inline-heading, +.three-merch-cards.inline-heading, +.four-merch-cards.inline-heading { + grid-template-columns: var(--consonant-merch-card-inline-heading-width); +} + +@media screen and ${TABLET_UP} { + .two-merch-cards.inline-heading, + .three-merch-cards.inline-heading, + .four-merch-cards.inline-heading { + grid-template-columns: repeat(2, var(--consonant-merch-card-inline-heading-width)); + } +} + +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-inline-heading-width: 378px; + } + + .three-merch-cards.inline-heading, + .four-merch-cards.inline-heading { + grid-template-columns: repeat(3, var(--consonant-merch-card-inline-heading-width)); + } +} + +@media screen and ${LARGE_DESKTOP} { + .four-merch-cards.inline-heading { + grid-template-columns: repeat(4, var(--consonant-merch-card-inline-heading-width)); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/inline-heading.js b/libs/features/mas/web-components/src/variants/inline-heading.js new file mode 100644 index 00000000000..a038819f3c9 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/inline-heading.js @@ -0,0 +1,24 @@ +import { VariantLayout } from './variant-layout'; +import { html } from 'lit'; +import { CSS } from './inline-heading.css.js' +export class InlineHeading extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + renderLayout() { + return html` ${this.badge} +
+
+ + +
+ +
+ ${!this.card.customHr ? html`
` : ''} ${this.secureLabelFooter}`; + } +} diff --git a/libs/features/mas/web-components/src/variants/mini-compare-chart.css.js b/libs/features/mas/web-components/src/variants/mini-compare-chart.css.js new file mode 100644 index 00000000000..167102700d4 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/mini-compare-chart.css.js @@ -0,0 +1,253 @@ +import { MOBILE_LANDSCAPE, TABLET_DOWN, TABLET_UP, DESKTOP_UP, LARGE_DESKTOP } from "../media.js"; +export const CSS = ` + :root { + --consonant-merch-card-mini-compare-chart-icon-size: 32px; + --consonant-merch-card-mini-compare-mobile-cta-font-size: 15px; + --consonant-merch-card-mini-compare-mobile-cta-width: 75px; + --consonant-merch-card-mini-compare-badge-mobile-max-width: 50px; + } + + merch-card[variant="mini-compare-chart"] [slot="heading-m"] { + padding: 0 var(--consonant-merch-spacing-s) 0; + } + + merch-card[variant="mini-compare-chart"] [slot="body-m"] { + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); + } + + merch-card[variant="mini-compare-chart"] [is="inline-price"] { + display: inline-block; + min-height: 30px; + min-width: 1px; + } + + merch-card[variant="mini-compare-chart"] [slot='callout-content'] { + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0px; + } + + merch-card[variant="mini-compare-chart"] [slot='callout-content'] [is="inline-price"] { + min-height: unset; + } + + merch-card[variant="mini-compare-chart"] [slot="price-commitment"] { + font-size: var(--consonant-merch-card-body-xs-font-size); + padding: 0 var(--consonant-merch-spacing-s); + } + + merch-card[variant="mini-compare-chart"] [slot="price-commitment"] a { + display: inline-block; + height: 27px; + } + + merch-card[variant="mini-compare-chart"] [slot="offers"] { + font-size: var(--consonant-merch-card-body-xs-font-size); + } + + merch-card[variant="mini-compare-chart"] [slot="body-xxs"] { + font-size: var(--consonant-merch-card-body-xs-font-size); + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; + } + + merch-card[variant="mini-compare-chart"] [slot="promo-text"] { + font-size: var(--consonant-merch-card-body-m-font-size); + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0; + } + + merch-card[variant="mini-compare-chart"] [slot="promo-text"] a { + text-decoration: underline; + } + + merch-card[variant="mini-compare-chart"] .footer-row-icon { + display: flex; + place-items: center; + } + + merch-card[variant="mini-compare-chart"] .footer-row-icon img { + max-width: initial; + width: var(--consonant-merch-card-mini-compare-chart-icon-size); + height: var(--consonant-merch-card-mini-compare-chart-icon-size); + } + + merch-card[variant="mini-compare-chart"] .footer-row-cell { + border-top: 1px solid var(--consonant-merch-card-border-color); + display: flex; + gap: var(--consonant-merch-spacing-xs); + justify-content: start; + place-items: center; + padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s); + } + + merch-card[variant="mini-compare-chart"] .footer-row-cell-description { + font-size: var(--consonant-merch-card-body-s-font-size); + line-height: var(--consonant-merch-card-body-s-line-height); + } + + merch-card[variant="mini-compare-chart"] .footer-row-cell-description p { + color: var(--merch-color-grey-80); + vertical-align: bottom; + } + + merch-card[variant="mini-compare-chart"] .footer-row-cell-description a { + color: var(--color-accent); + text-decoration: solid; + } + +.one-merch-card.mini-compare-chart { + grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); + gap: var(--consonant-merch-spacing-xs); +} + +.two-merch-cards.mini-compare-chart, +.three-merch-cards.mini-compare-chart, +.four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-width)); + gap: var(--consonant-merch-spacing-xs); +} + +/* mini compare mobile */ +@media screen and ${MOBILE_LANDSCAPE} { + :root { + --consonant-merch-card-mini-compare-chart-width: 302px; + --consonant-merch-card-mini-compare-chart-wide-width: 302px; + } + + .two-merch-cards.mini-compare-chart, + .three-merch-cards.mini-compare-chart, + .four-merch-cards.mini-compare-chart { + grid-template-columns: var(--consonant-merch-card-mini-compare-chart-width); + gap: var(--consonant-merch-spacing-xs); + } + + 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); + } + + merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] { + font-size: var(--consonant-merch-card-body-s-font-size); + line-height: var(--consonant-merch-card-body-s-line-height); + } + + 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); + } + + merch-card[variant="mini-compare-chart"] [slot="promo-text"] { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xs-line-height); + } + merch-card[variant="mini-compare-chart"] .footer-row-cell-description { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xs-line-height); + } +} + +@media screen and ${TABLET_DOWN} { + .three-merch-cards.mini-compare-chart merch-card [slot="footer"] a, + .four-merch-cards.mini-compare-chart merch-card [slot="footer"] a { + flex: 1; + } + + 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); + } + + merch-card[variant="mini-compare-chart"] [slot='heading-m-price'] { + font-size: var(--consonant-merch-card-body-s-font-size); + line-height: var(--consonant-merch-card-body-s-line-height); + } + + 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); + } + + merch-card[variant="mini-compare-chart"] [slot="promo-text"] { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xs-line-height); + } + + merch-card[variant="mini-compare-chart"] .footer-row-cell-description { + font-size: var(--consonant-merch-card-body-xs-font-size); + line-height: var(--consonant-merch-card-body-xs-line-height); + } +} +@media screen and ${TABLET_UP} { + :root { + --consonant-merch-card-mini-compare-chart-width: 302px; + --consonant-merch-card-mini-compare-chart-wide-width: 302px; + } + + .two-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); + gap: var(--consonant-merch-spacing-m); + } + + .three-merch-cards.mini-compare-chart, + .four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, minmax(var(--consonant-merch-card-mini-compare-chart-width), var(--consonant-merch-card-mini-compare-chart-wide-width))); + } +} + +/* desktop */ +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-mini-compare-chart-width: 378px; + --consonant-merch-card-mini-compare-chart-wide-width: 484px; + } + .one-merch-card.mini-compare-chart { + grid-template-columns: var(--consonant-merch-card-mini-compare-chart-wide-width); + } + + .two-merch-cards.mini-compare-chart { + grid-template-columns: repeat(2, var(--consonant-merch-card-mini-compare-chart-wide-width)); + gap: var(--consonant-merch-spacing-m); + } + + .three-merch-cards.mini-compare-chart, + .four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(3, var(--consonant-merch-card-mini-compare-chart-width)); + gap: var(--consonant-merch-spacing-m); + } +} + +@media screen and ${LARGE_DESKTOP} { + .four-merch-cards.mini-compare-chart { + grid-template-columns: repeat(4, var(--consonant-merch-card-mini-compare-chart-width)); + } +} + +merch-card .footer-row-cell:nth-child(1) { + min-height: var(--consonant-merch-card-footer-row-1-min-height); +} + +merch-card .footer-row-cell:nth-child(2) { + min-height: var(--consonant-merch-card-footer-row-2-min-height); +} + +merch-card .footer-row-cell:nth-child(3) { + min-height: var(--consonant-merch-card-footer-row-3-min-height); +} + +merch-card .footer-row-cell:nth-child(4) { + min-height: var(--consonant-merch-card-footer-row-4-min-height); +} + +merch-card .footer-row-cell:nth-child(5) { + min-height: var(--consonant-merch-card-footer-row-5-min-height); +} + +merch-card .footer-row-cell:nth-child(6) { + min-height: var(--consonant-merch-card-footer-row-6-min-height); +} + +merch-card .footer-row-cell:nth-child(7) { + min-height: var(--consonant-merch-card-footer-row-7-min-height); +} + +merch-card .footer-row-cell:nth-child(8) { + min-height: var(--consonant-merch-card-footer-row-8-min-height); +} +`; diff --git a/libs/features/mas/web-components/src/variants/mini-compare-chart.js b/libs/features/mas/web-components/src/variants/mini-compare-chart.js new file mode 100644 index 00000000000..b72a0923675 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/mini-compare-chart.js @@ -0,0 +1,223 @@ +import { html, css, unsafeCSS } from 'lit'; +import { isMobile } from '../utils.js'; +import { VariantLayout } from './variant-layout.js'; +import { CSS } from './mini-compare-chart.css.js'; +import { DESKTOP_UP, TABLET_DOWN } from '../media.js'; +const FOOTER_ROW_MIN_HEIGHT = 32; // as per the XD. + +export class MiniCompareChart extends VariantLayout { + constructor(card) { + super(card); + } + + #container; + + getRowMinHeightPropertyName = (index) => + `--consonant-merch-card-footer-row-${index}-min-height`; + + getContainer() { + this.#container = this.#container ?? this.card.closest('[class*="-merch-cards"]') ?? this.card.parentElement; + return this.#container; + } + + getGlobalCSS() { + return CSS; + } + + getMiniCompareFooter = () => { + const secureLabel = this.card.secureLabel + ? html` + ${this.card.secureLabel}` + : html``; + return html`
${secureLabel}
`; + } + + updateMiniCompareElementMinHeight (el, name) { + const elMinHeightPropertyName = `--consonant-merch-card-mini-compare-${name}-height`; + const height = Math.max( + 0, + parseInt(window.getComputedStyle(el).height) || 0, + ); + const maxMinHeight = + parseInt( + this.getContainer().style.getPropertyValue(elMinHeightPropertyName), + ) || 0; + if (height > maxMinHeight) { + this.getContainer().style.setProperty( + elMinHeightPropertyName, + `${height}px`, + ); + } + } + + adjustMiniCompareBodySlots () { + if (this.card.getBoundingClientRect().width === 0) return; + + this.updateMiniCompareElementMinHeight( + this.card.shadowRoot.querySelector('.top-section'), + 'top-section', + ); + + const slots = [ + 'heading-m', + 'body-m', + 'heading-m-price', + 'price-commitment', + 'offers', + 'promo-text', + 'callout-content', + 'secure-transaction-label', + ]; + + slots.forEach((slot) => + this.updateMiniCompareElementMinHeight( + this.card.shadowRoot.querySelector(`slot[name="${slot}"]`), + slot, + ), + ); + this.updateMiniCompareElementMinHeight( + this.card.shadowRoot.querySelector('footer'), + 'footer', + ); + + const badge = this.card.shadowRoot.querySelector( + '.mini-compare-chart-badge', + ); + if (badge && badge.textContent !== '') { + this.getContainer().style.setProperty( + '--consonant-merch-card-mini-compare-top-section-mobile-height', + '32px', + ); + } + } + adjustMiniCompareFooterRows () { + if (this.card.getBoundingClientRect().width === 0) return; + const footerRows = this.card.querySelector('[slot="footer-rows"]'); + [...footerRows?.children].forEach((el, index) => { + const height = Math.max( + FOOTER_ROW_MIN_HEIGHT, + parseInt(window.getComputedStyle(el).height) || 0, + ); + const maxMinHeight = + parseInt( + this.getContainer().style.getPropertyValue( + this.getRowMinHeightPropertyName(index + 1), + ), + ) || 0; + if (height > maxMinHeight) { + this.getContainer().style.setProperty( + this.getRowMinHeightPropertyName(index + 1), + `${height}px`, + ); + } + }); + } + + removeEmptyRows() { + const footerRows = this.card.querySelectorAll('.footer-row-cell'); + footerRows.forEach((row) => { + const rowDescription = row.querySelector('.footer-row-cell-description'); + if (rowDescription) { + const isEmpty = !rowDescription.textContent.trim(); + if (isEmpty) { + row.remove(); + } + } + }); + } + + renderLayout () { + return html`
+ ${this.badge} +
+ + + + + + + + + ${this.getMiniCompareFooter()} + `; + } + postCardUpdateHook() { + if (!isMobile()) { + this.adjustMiniCompareBodySlots(); + this.adjustMiniCompareFooterRows(); + } else { + this.removeEmptyRows(); + } + } + static variantStyle = css` + :host([variant='mini-compare-chart']) > slot:not([name='icons']) { + display: block; + } + :host([variant='mini-compare-chart']) footer { + min-height: var(--consonant-merch-card-mini-compare-footer-height); + padding: var(--consonant-merch-spacing-xs); + } + + /* mini-compare card */ + :host([variant='mini-compare-chart']) .top-section { + padding-top: var(--consonant-merch-spacing-s); + padding-inline-start: var(--consonant-merch-spacing-s); + height: var(--consonant-merch-card-mini-compare-top-section-height); + } + + @media screen and ${unsafeCSS(TABLET_DOWN)} { + [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer { + flex-direction: column; + align-items: stretch; + text-align: center; + } + } + + @media screen and ${unsafeCSS(DESKTOP_UP)} { + :host([variant='mini-compare-chart']) footer { + padding: var(--consonant-merch-spacing-xs) + var(--consonant-merch-spacing-s) + var(--consonant-merch-spacing-s) + var(--consonant-merch-spacing-s); + } + } + + :host([variant='mini-compare-chart']) slot[name='footer-rows'] { + flex: 1; + display: flex; + flex-direction: column; + justify-content: end; + } + /* mini-compare card heights for the slots: heading-m, body-m, heading-m-price, price-commitment, offers, promo-text, footer */ + :host([variant='mini-compare-chart']) slot[name='heading-m'] { + min-height: var(--consonant-merch-card-mini-compare-heading-m-height); + } + :host([variant='mini-compare-chart']) slot[name='body-m'] { + min-height: var(--consonant-merch-card-mini-compare-body-m-height); + } + :host([variant='mini-compare-chart']) slot[name='heading-m-price'] { + min-height: var( + --consonant-merch-card-mini-compare-heading-m-price-height + ); + } + :host([variant='mini-compare-chart']) slot[name='price-commitment'] { + min-height: var( + --consonant-merch-card-mini-compare-price-commitment-height + ); + } + :host([variant='mini-compare-chart']) slot[name='offers'] { + min-height: var(--consonant-merch-card-mini-compare-offers-height); + } + :host([variant='mini-compare-chart']) slot[name='promo-text'] { + min-height: var(--consonant-merch-card-mini-compare-promo-text-height); + } + :host([variant='mini-compare-chart']) slot[name='callout-content'] { + min-height: var( + --consonant-merch-card-mini-compare-callout-content-height + ); + } + `; +}; diff --git a/libs/features/mas/web-components/src/variants/plans.css.js b/libs/features/mas/web-components/src/variants/plans.css.js new file mode 100644 index 00000000000..d4f22fc53d0 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/plans.css.js @@ -0,0 +1,56 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP,} from '../media.js'; +export const CSS = ` +:root { + --consonant-merch-card-plans-width: 300px; + --consonant-merch-card-plans-icon-size: 40px; +} + +merch-card[variant="plans"] [slot="description"] { + min-height: 84px; +} + +merch-card[variant="plans"] [slot="quantity-select"] { + display: flex; + justify-content: flex-start; + box-sizing: border-box; + width: 100%; + padding: var(--consonant-merch-spacing-xs); +} + +.one-merch-card.plans, +.two-merch-cards.plans, +.three-merch-cards.plans, +.four-merch-cards.plans { + grid-template-columns: var(--consonant-merch-card-plans-width); +} + +/* Tablet */ +@media screen and ${TABLET_UP} { + :root { + --consonant-merch-card-plans-width: 302px; + } + .two-merch-cards.plans, + .three-merch-cards.plans, + .four-merch-cards.plans { + grid-template-columns: repeat(2, var(--consonant-merch-card-plans-width)); + } +} + +/* desktop */ +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-plans-width: 276px; + } + .three-merch-cards.plans, + .four-merch-cards.plans { + grid-template-columns: repeat(3, var(--consonant-merch-card-plans-width)); + } +} + +/* Large desktop */ + @media screen and ${LARGE_DESKTOP} { + .four-merch-cards.plans { + grid-template-columns: repeat(4, var(--consonant-merch-card-plans-width)); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/plans.js b/libs/features/mas/web-components/src/variants/plans.js new file mode 100644 index 00000000000..02fcdb7dc10 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/plans.js @@ -0,0 +1,53 @@ +import { VariantLayout } from "./variant-layout"; +import { html, css } from 'lit'; +import { CSS } from './plans.css.js'; + +export class Plans extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + postCardUpdateHook() { + this.adjustTitleWidth(); + } + + get stockCheckbox() { + return this.card.checkboxLabel + ? html`` + : ''; + } + + renderLayout() { + return html` ${this.badge} +
+ + + + + ${!this.promoBottom ? html` ` : ''} + + ${this.promoBottom ? html` ` : ''} + ${this.stockCheckbox} +
+ + ${this.secureLabelFooter}`; + } + + static variantStyle = css` + :host([variant='plans']) { + min-height: 348px; + } + + :host([variant='plans']) ::slotted([slot='heading-xs']) { + max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); + } + `; +} diff --git a/libs/features/mas/web-components/src/variants/product.css.js b/libs/features/mas/web-components/src/variants/product.css.js new file mode 100644 index 00000000000..0bfb799d119 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/product.css.js @@ -0,0 +1,42 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP,} from '../media.js'; +export const CSS = ` +:root { + --consonant-merch-card-product-width: 300px; +} + +/* grid style for product */ +.one-merch-card.product, +.two-merch-cards.product, +.three-merch-cards.product, +.four-merch-cards.product { + grid-template-columns: var(--consonant-merch-card-product-width); +} + +/* Tablet */ +@media screen and ${TABLET_UP} { + .two-merch-cards.product, + .three-merch-cards.product, + .four-merch-cards.product { + grid-template-columns: repeat(2, var(--consonant-merch-card-product-width)); + } +} + +/* desktop */ +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-product-width: 378px; + } + + .three-merch-cards.product, + .four-merch-cards.product { + grid-template-columns: repeat(3, var(--consonant-merch-card-product-width)); + } +} + +/* Large desktop */ +@media screen and ${LARGE_DESKTOP} { + .four-merch-cards.product { + grid-template-columns: repeat(4, var(--consonant-merch-card-product-width)); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/product.js b/libs/features/mas/web-components/src/variants/product.js new file mode 100644 index 00000000000..b9aced83799 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/product.js @@ -0,0 +1,26 @@ +import { VariantLayout } from "./variant-layout"; +import { html } from 'lit'; +import { CSS } from './product.css.js'; + +export class Product extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + renderLayout() { + return html` ${this.badge} +
+ + + + ${!this.promoBottom ? html`` : ''} + + ${this.promoBottom ? html`` : ''} +
+ ${this.secureLabelFooter}`; + } +} diff --git a/libs/features/mas/web-components/src/variants/segment.css.js b/libs/features/mas/web-components/src/variants/segment.css.js new file mode 100644 index 00000000000..010b74bdf8f --- /dev/null +++ b/libs/features/mas/web-components/src/variants/segment.css.js @@ -0,0 +1,48 @@ +import { TABLET_UP, DESKTOP_UP, MOBILE_LANDSCAPE,} from '../media.js'; +export const CSS = ` +:root { + --consonant-merch-card-segment-width: 378px; +} + +/* grid style for segment */ +.one-merch-card.segment, +.two-merch-cards.segment, +.three-merch-cards.segment, +.four-merch-cards.segment { + grid-template-columns: minmax(276px, var(--consonant-merch-card-segment-width)); +} + +/* Mobile */ +@media screen and ${MOBILE_LANDSCAPE} { + :root { + --consonant-merch-card-segment-width: 276px; + } +} + +@media screen and ${TABLET_UP} { + :root { + --consonant-merch-card-segment-width: 276px; + } + + .two-merch-cards.segment, + .three-merch-cards.segment, + .four-merch-cards.segment { + grid-template-columns: repeat(2, minmax(276px, var(--consonant-merch-card-segment-width))); + } +} + +/* desktop */ +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-segment-width: 302px; + } + + .three-merch-cards.segment { + grid-template-columns: repeat(3, minmax(276px, var(--consonant-merch-card-segment-width))); + } + + .four-merch-cards.segment { + grid-template-columns: repeat(4, minmax(276px, var(--consonant-merch-card-segment-width))); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/segment.js b/libs/features/mas/web-components/src/variants/segment.js new file mode 100644 index 00000000000..f62a9e00d28 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/segment.js @@ -0,0 +1,39 @@ +import { VariantLayout } from "./variant-layout" +import { html, css } from 'lit'; +import { CSS } from './segment.css.js'; + +export class Segment extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + postCardUpdateHook() { + this.adjustTitleWidth(); + } + + renderLayout() { + return html` ${this.badge} +
+ + + ${!this.promoBottom ? html`` : ''} + + ${this.promoBottom ? html`` : ''} +
+
+ ${this.secureLabelFooter }`; + } + + static variantStyle = css` + :host([variant='segment']) { + min-height: 214px; + } + :host([variant='segment']) ::slotted([slot='heading-xs']) { + max-width: var(--consonant-merch-card-heading-xs-max-width, 100%); + } + `; +} diff --git a/libs/features/mas/web-components/src/variants/special-offer.css.js b/libs/features/mas/web-components/src/variants/special-offer.css.js new file mode 100644 index 00000000000..ed4024d1a0c --- /dev/null +++ b/libs/features/mas/web-components/src/variants/special-offer.css.js @@ -0,0 +1,50 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP, MOBILE_LANDSCAPE,} from '../media.js'; +export const CSS = ` +:root { + --consonant-merch-card-special-offers-width: 378px; +} + +merch-card[variant="special-offers"] span[is="inline-price"][data-template="strikethrough"] { + font-size: var(--consonant-merch-card-body-xs-font-size); +} + +/* grid style for special-offers */ +.one-merch-card.special-offers, +.two-merch-cards.special-offers, +.three-merch-cards.special-offers, +.four-merch-cards.special-offers { + grid-template-columns: minmax(300px, var(--consonant-merch-card-special-offers-width)); +} + +@media screen and ${MOBILE_LANDSCAPE} { + :root { + --consonant-merch-card-special-offers-width: 302px; + } +} + +@media screen and ${TABLET_UP} { + :root { + --consonant-merch-card-special-offers-width: 302px; + } + + .two-merch-cards.special-offers, + .three-merch-cards.special-offers, + .four-merch-cards.special-offers { + grid-template-columns: repeat(2, minmax(300px, var(--consonant-merch-card-special-offers-width))); + } +} + +/* desktop */ +@media screen and ${DESKTOP_UP} { + .three-merch-cards.special-offers, + .four-merch-cards.special-offers { + grid-template-columns: repeat(3, minmax(300px, var(--consonant-merch-card-special-offers-width))); + } +} + +@media screen and ${LARGE_DESKTOP} { + .four-merch-cards.special-offers { + grid-template-columns: repeat(4, minmax(300px, var(--consonant-merch-card-special-offers-width))); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/special-offer.js b/libs/features/mas/web-components/src/variants/special-offer.js new file mode 100644 index 00000000000..b76faec0040 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/special-offer.js @@ -0,0 +1,50 @@ +import { html, css } from 'lit'; +import { VariantLayout } from './variant-layout'; +import { CSS } from './special-offer.css.js'; + +export class SpecialOffer extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + get headingSelector() { + return '[slot="detail-m"]'; + } + + renderLayout () { + return html`${this.cardImage} +
+ + + +
+ ${this.evergreen + ? html` +
+ +
+ ` + : html` +
+ ${this.secureLabelFooter} + `} + `; + } + + static variantStyle = css` + :host([variant='special-offers']) { + min-height: 439px; + } + + :host([variant='special-offers'].center) { + text-align: center; + } + `; +}; diff --git a/libs/features/mas/web-components/src/variants/twp.css.js b/libs/features/mas/web-components/src/variants/twp.css.js new file mode 100644 index 00000000000..76b8ff8d925 --- /dev/null +++ b/libs/features/mas/web-components/src/variants/twp.css.js @@ -0,0 +1,103 @@ +import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP, MOBILE_LANDSCAPE,} from '../media.js'; +export const CSS = ` +:root { + --consonant-merch-card-twp-width: 268px; + --consonant-merch-card-twp-mobile-width: 300px; + --consonant-merch-card-twp-mobile-height: 358px; +} + +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: '·'; + 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); + padding: var(--consonant-merch-spacing-s); + var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-xs); + color: var(--merch-color-grey-80); + display: flex; + flex-flow: wrap; +} + +merch-card[variant='twp'] merch-quantity-select, +merch-card[variant='twp'] merch-offer-select { + display: none; +} + +.one-merch-card.twp, +.two-merch-cards.twp, +.three-merch-cards.twp { + grid-template-columns: var(--consonant-merch-card-image-width); +} + +@media screen and ${MOBILE_LANDSCAPE} { + :root { + --consonant-merch-card-twp-width: 300px; + } + .one-merch-card.twp, + .two-merch-cards.twp, + .three-merch-cards.twp { + grid-template-columns: repeat(1, var(--consonant-merch-card-twp-mobile-width)); + } +} + +@media screen and ${TABLET_UP} { + :root { + --consonant-merch-card-twp-width: 268px; + } + .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)); + } +} + +@media screen and ${DESKTOP_UP} { + :root { + --consonant-merch-card-twp-width: 268px; + } + .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)); + } +} + +@media screen and ${LARGE_DESKTOP} { + .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)); + } +} +`; diff --git a/libs/features/mas/web-components/src/variants/twp.js b/libs/features/mas/web-components/src/variants/twp.js new file mode 100644 index 00000000000..0da885c4cbe --- /dev/null +++ b/libs/features/mas/web-components/src/variants/twp.js @@ -0,0 +1,67 @@ +import { VariantLayout } from "./variant-layout"; +import { html, css } from 'lit'; +import { CSS } from './twp.css.js'; + +export class TWP extends VariantLayout { + constructor(card) { + super(card); + } + + getGlobalCSS() { + return CSS; + } + + renderLayout() { + return html`${this.badge} +
+ + + +
+
+ +
+
`; + } + + static variantStyle = css` + :host([variant='twp']) { + padding: 4px 10px 5px 10px; + } + .twp-badge { + padding: 4px 10px 5px 10px; + } + + :host([variant='twp']) ::slotted(merch-offer-select) { + display: none; + } + + :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([aria-selected]) .twp-badge { + margin-inline-end: 2px; + padding-inline-end: 9px; + } + + :host([variant='twp']) footer { + gap: var(--consonant-merch-spacing-xxs); + flex-direction: column; + align-self: flex-start; + } + `; +} diff --git a/libs/features/mas/web-components/src/variants/variant-layout.js b/libs/features/mas/web-components/src/variants/variant-layout.js new file mode 100644 index 00000000000..d75cc465ccc --- /dev/null +++ b/libs/features/mas/web-components/src/variants/variant-layout.js @@ -0,0 +1,103 @@ +import { html } from 'lit'; + +export class VariantLayout { + static styleMap = {}; + + card; + + insertVariantStyle() { + if (!VariantLayout.styleMap[this.card.variant]) { + VariantLayout.styleMap[this.card.variant] = true; + const styles = document.createElement('style'); + styles.innerHTML = this.getGlobalCSS(); + document.head.appendChild(styles); + } + } + + constructor(card) { + this.card = card; + setTimeout(() => this.insertVariantStyle(), 1); + } + + get badge() { + let additionalStyles; + if (!this.card.badgeBackgroundColor || !this.card.badgeColor || !this.card.badgeText) { + return; + } + if (this.evergreen) { + additionalStyles = `border: 1px solid ${this.card.badgeBackgroundColor}; border-right: none;`; + } + return html` +
+ ${this.card.badgeText} +
+ `; + } + + get cardImage() { + return html`
+ + ${this.badge} +
`; + } + + /* c8 ignore next 3 */ + getGlobalCSS() { + return ''; + } + + get evergreen() { + return this.card.classList.contains('intro-pricing'); + } + + get promoBottom() { + return this.card.classList.contains('promo-bottom'); + } + + get headingSelector() { + return '[slot="heading-xs"]'; + } + + get secureLabelFooter() { + const secureLabel = this.card.secureLabel + ? html`${this.card.secureLabel}` + : ''; + return html`
${secureLabel}
`; + } + + async adjustTitleWidth() { + const cardWidth = this.card.getBoundingClientRect().width; + const badgeWidth = + this.card.badgeElement?.getBoundingClientRect().width || 0; + if (cardWidth === 0 || badgeWidth === 0) return; + this.card.style.setProperty( + '--consonant-merch-card-heading-xs-max-width', + `${Math.round(cardWidth - badgeWidth - 16)}px`, // consonant-merch-spacing-xs + ); + } + + postCardUpdateHook() { + //nothing to do by default + } + + connectedCallbackHook() { + //nothing to do by default + } + + disconnectedCallbackHook() { + //nothing to do by default + } + + /* c8 ignore next 3 */ + renderLayout () { + //nothing to do by default + } +} diff --git a/libs/features/mas/web-components/src/variants/variants.js b/libs/features/mas/web-components/src/variants/variants.js new file mode 100644 index 00000000000..934cf0998fa --- /dev/null +++ b/libs/features/mas/web-components/src/variants/variants.js @@ -0,0 +1,51 @@ +import { Catalog } from './catalog.js'; +import { CCDAction } from './ccd-action.js'; +import { Image } from './image.js'; +import { InlineHeading } from './inline-heading.js'; +import { MiniCompareChart } from './mini-compare-chart.js'; +import { Plans } from './plans.js'; +import { Product } from './product.js'; +import { Segment } from './segment.js'; +import { SpecialOffer } from './special-offer.js'; +import { TWP } from './twp.js'; + +const getVariantLayout = (card) => { + switch (card.variant) { + case 'catalog': + return new Catalog(card); + case 'ccd-action': + return new CCDAction(card); + case 'image': + return new Image(card); + case 'inline-heading': + return new InlineHeading(card); + case 'mini-compare-chart': + return new MiniCompareChart(card); + case 'plans': + return new Plans(card); + case 'product': + return new Product(card); + case 'segment': + return new Segment(card); + case 'special-offers': + return new SpecialOffer(card); + case 'twp': + return new TWP(card); + default: + return new Product(card); + } +}; + +const getVariantStyles = () => { + const styles = []; + styles.push(Catalog.variantStyle); + styles.push(CCDAction.variantStyle); + styles.push(MiniCompareChart.variantStyle); + styles.push(Plans.variantStyle); + styles.push(Segment.variantStyle); + styles.push(SpecialOffer.variantStyle); + styles.push(TWP.variantStyle); + return styles; +} + +export { getVariantLayout, getVariantStyles }; diff --git a/libs/features/mas/web-components/test/merch-card.catalog.test.html b/libs/features/mas/web-components/test/merch-card.catalog.test.html new file mode 100644 index 00000000000..8d7f0c10297 --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.catalog.test.html @@ -0,0 +1,276 @@ + + + + + + + Merch Card Web Component demo page + + + + + + +
+
+ + + +
+
+ + +
+

Best for:

+
    +
  • Photo editing
    • +
  • Compositing
    • +
  • Drawing and painting
    • +
  • Graphic design
    • +
+

Storage:

+

100 GB of cloud storage

+

See system requirements

+
+

Photography

+

+ +

+
+

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

+

Learn more

+
+ + + + +
+

Best for:

+
    +
  • Photo editing
    • +
  • Compositing
    • +
  • Drawing and painting
    • +
  • Graphic design
    • +
+

Storage:

+

100 GB of cloud storage

+

See system requirements

+
+

Photography

+

+ +
Inclusive of VAT
+

+
+

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

+

Learn more

+
+
+ Android + IOS + Save now +
+ + +

Creative Cloud All Apps

+

+
Desktop
+
+

+

Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. + (Substance 3D apps are not included.)

+

See what’s included | Learn more

+
+

Buy now free trial

+ +
+
+ + +
+

Best for:

+
    +
  • Photo editing
    • +
  • Compositing
    • +
  • Drawing and painting
    • +
  • Graphic design
    • +
+

Storage:

+

100 GB of cloud storage

+

See system requirements

+
+

Photography

+

+ +

+
+

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

+

Learn more

+
+
+
+
+
AI Assistant add-on available
+ +
+
+
+
+
+ For a limited time pay + when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.Learn More +
+ +
+
+
+ + + + +
+

Best for:

+
    +
  • Photo editing
    • +
  • Compositing
    • +
  • Drawing and painting
    • +
  • Graphic design
    • +
+

Storage:

+

100 GB of cloud storage

+

See system requirements

+
+

Photography

+

+ +

+
+

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

+

Learn more

+
+
+
+
+
AI Assistant add-on available
+ +
+
+
+
+
+ For a limited time pay + when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.Learn More +
+ +
+
+
+
+ Android + IOS + Save now +
+ + +

Creative Cloud All Apps

+

+
Desktop
+
+

+

Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. + (Substance 3D apps are not included.)

+

See what’s included | Learn more

+
+
+
+
+
AI Assistant add-on available
+ +
+
+
+
+
+ For a limited time pay + when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.Learn More +
+ +
+
+
+ +

Buy now free trial

+ +
+
+ + diff --git a/libs/features/mas/web-components/test/merch-card.catalog.test.html.js b/libs/features/mas/web-components/test/merch-card.catalog.test.html.js new file mode 100644 index 00000000000..1284a2224ff --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.catalog.test.html.js @@ -0,0 +1,71 @@ +// @ts-nocheck +import { runTests } from '@web/test-runner-mocha'; +import { expect } from '@esm-bundle/chai'; + +import { mockLana } from './mocks/lana.js'; +import { mockFetch } from './mocks/fetch.js'; +import { mockConfig } from './mocks/config.js'; + +import '../src/merch-offer.js'; +import '../src/merch-offer-select.js'; +import '../src/merch-quantity-select.js'; + +import { appendMiloStyles, delay } from './utils.js'; +import { mockIms } from './mocks/ims.js'; +import { withWcs } from './mocks/wcs.js'; +import mas from './mas.js'; + +const skipTests = sessionStorage.getItem('skipTests'); + +runTests(async () => { + mockIms(); + mockLana(); + await mockFetch(withWcs); + await mas(); + if (skipTests !== null) { + appendMiloStyles(); + return; + } + describe('merch-card web component', () => { + it('should exist in the HTML document', async () => { + expect(document.querySelector('merch-card')).to.exist; + }); + + it('should display an action menu on hover for catalog variant', async () => { + const catalogCard = document.querySelector( + 'merch-card[variant="catalog"]', + ); + catalogCard.dispatchEvent( + new MouseEvent('mouseover', { bubbles: true }), + ); + await delay(100); + const shadowRoot = catalogCard.shadowRoot; + const actionMenu = shadowRoot.querySelector('.action-menu'); + const actionMenuContent = shadowRoot.querySelector( + '.action-menu-content', + ); + expect(actionMenu.classList.contains('invisible')).to.be.true; + expect(actionMenuContent.classList.contains('hidden')).to.be.true; + expect(actionMenu).to.exist; + expect(actionMenuContent).to.exist; + }); + + it('should display some content when action is clicked for catalog variant', async () => { + const catalogCard = document.querySelector( + 'merch-card[variant="catalog"]', + ); + catalogCard.dispatchEvent( + new MouseEvent('mouseover', { bubbles: true }), + ); + await delay(100); + const actionMenu = catalogCard.shadowRoot.querySelector('.action-menu'); + const actionMenuContent = catalogCard.shadowRoot.querySelector( + '.action-menu-content', + ); + await actionMenu.click(); + await delay(100); + expect(actionMenuContent.classList.contains('hidden')).to.be.false; + }); + }); + +}); diff --git a/libs/features/mas/web-components/test/merch-card.mini-compare.mobile.test.html b/libs/features/mas/web-components/test/merch-card.mini-compare.mobile.test.html new file mode 100644 index 00000000000..33541245541 --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.mini-compare.mobile.test.html @@ -0,0 +1,634 @@ + + + + + + + Merch Card Web Component demo page + + + + + + +
+
+ + + +
+
+ + + +

This is promo text with a + link

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+
+

+

Creative Cloud All Apps +

+

This is promo text with a link

+
+
+
+
AI Assistant add-on available
+ +
+
+
+
+

+ free + trial + Buy now +

+
+ +
+
+
+ Creative Cloud +
Illustrator on desktop, web, and iPad
+
+
+ Creative Cloud +
Access to 20+ apps including Photoshop, Illustrator + Premiere Pro, After Effects, InDesign, Lightroom, and more
+
+
+ Creative Cloud +
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+ Creative Cloud +
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe + Fonts
+
+
+ Creative Cloud +
1,000 generative + credits
+
+
+ + + +

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+
+

+

Illustrator

+

+

+ free trial + Buy nowBuy +

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

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

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

+
+
+
+ Creative Cloud +
1,000 generative + credits
+
+
+ + + +

Save 19% ($US7.99/mo) + for the first year if you buy now.

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+

See terms.

+
+

+

Illustrator

+

Save 19% ($US7.99/mo) for the + first year if you buy now.

+
+
+

+ Free + trial + Buy now +

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

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+ Creative Cloud +
Adobe Express, Adobe Fresco, Adobe + Portfolio, and Adobe + Fonts
+
+
+ Creative Cloud +
1,000 generative + credits

+
+
+
+ +
+
+ + +

This is promo text with a + link

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+
+

+

Creative Cloud All Apps +

+

This is promo text with a link

+
+

+ free + trial + Buy now +

+
+ +
+
+
+ Creative Cloud +
Illustrator on desktop, web, and iPad
+
+
+ Creative Cloud +
Access to 20+ apps including Photoshop, Illustrator + Premiere Pro, After Effects, InDesign, Lightroom, and more
+
+
+ Creative Cloud +
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+ Creative Cloud +
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe + Fonts
+
+
+ Creative Cloud +
1,000 generative + credits
+
+
+ + + +

This is promo text with a + link

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+
+

+

Creative Cloud All Apps +

+

This is promo text with a link

+
+

+ free + trial + Buy now +

+
+ +
+
+
+ Creative Cloud +
Illustrator on desktop, web, and iPad
+
+
+ Creative Cloud +
Access to 20+ apps including Photoshop, Illustrator + Premiere Pro, After Effects, InDesign, Lightroom, and more
+
+
+ Creative Cloud +
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+ Creative Cloud +
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe + Fonts
+
+
+ Creative Cloud +
1,000 generative + credits
+
+
+ +
+
+ + +

This is promo text with a + link

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+
+

+

Creative Cloud All Apps +

+

This is promo text with a link

+
+
+
+
AI Assistant add-on available
+ +
+
+
+
+

+ free + trial + Buy now +

+
+ +
+
+
+ Creative Cloud +
Illustrator on desktop, web, and iPad
+
+
+ Creative Cloud +
Access to 20+ apps including Photoshop, Illustrator + Premiere Pro, After Effects, InDesign, Lightroom, and more
+
+
+ Creative Cloud +
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+ Creative Cloud +
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe + Fonts
+
+
+ Creative Cloud +
1,000 generative + credits
+
+
+ + + +

This is promo text with a + link

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+
+

+

Creative Cloud All Apps +

+

This is promo text with a link

+
+
+
+
AI Assistant add-on available
+ +
+
+
+
+

+ free + trial + Buy now +

+
+ +
+
+
+ Creative Cloud +
Illustrator on desktop, web, and iPad
+
+
+ Creative Cloud +
Access to 20+ apps including Photoshop, Illustrator + Premiere Pro, After Effects, InDesign, Lightroom, and more
+
+
+ Creative Cloud +
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+ Creative Cloud +
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe + Fonts
+
+
+ Creative Cloud +
1,000 generative + credits
+
+
+ +
+
+ + + +

This is promo text with a + link

+
+

+

Get Illustrator on desktop and iPad as part of Creative Cloud.

+
+

+

Creative Cloud All Apps +

+

This is promo text with a link

+
+

+ free + trial + Buy now +

+
+ +
+
+
+ Creative Cloud +
Illustrator on desktop, web, and iPad
+
+
+ Creative Cloud +
Access to 20+ apps including Photoshop, Illustrator + Premiere Pro, After Effects, InDesign, Lightroom, and more
+
+
+ Creative Cloud +
+

Business features like admin tools, dedicated 24x7

+

support, and 1TB of cloud storage

+
+
+
+ Creative Cloud +
Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe + Fonts
+
+
+ Creative Cloud +
1,000 generative + credits
+
+
+ +
+
+ + + diff --git a/libs/features/mas/web-components/test/merch-card.mini-compare.mobile.test.html.js b/libs/features/mas/web-components/test/merch-card.mini-compare.mobile.test.html.js new file mode 100644 index 00000000000..f86ba5895f3 --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.mini-compare.mobile.test.html.js @@ -0,0 +1,83 @@ +// @ts-nocheck +import { runTests } from '@web/test-runner-mocha'; +import { expect } from '@esm-bundle/chai'; + +import { mockLana } from './mocks/lana.js'; +import { mockFetch } from './mocks/fetch.js'; +import { mockConfig } from './mocks/config.js'; + +import '../src/merch-offer.js'; +import '../src/merch-offer-select.js'; +import '../src/merch-quantity-select.js'; + +import { appendMiloStyles, toggleMobile } from './utils.js'; +import { mockIms } from './mocks/ims.js'; +import { withWcs } from './mocks/wcs.js'; +import mas from './mas.js'; + +const skipTests = sessionStorage.getItem('skipTests'); + +runTests(async () => { + await toggleMobile(); + mockIms(); + mockLana(); + await mockFetch(withWcs); + await mas(); + if (skipTests !== null) { + appendMiloStyles(); + return; + } + describe('[mobile] merch-card web component with mini-compare variant', () => { + it('[mobile] mini-compare-chart should have same body slot heights', async () => { + const miniCompareCharts = document.querySelectorAll( + 'merch-card[variant="mini-compare-chart"]', + ); + await Promise.all( + [...miniCompareCharts].flatMap((card) => { + return [ + card.updateComplete, + ...[...card.querySelectorAll('[data-wcs-osi]')].map( + (osi) => osi.onceSettled(), + ), + ]; + }), + ); + const [card1Slots, card2Slots, card3Slots] = [ + ...miniCompareCharts, + ].map((miniCompareChart) => { + const heights = [ + 'slot[name="heading-m"]', + 'slot[name="body-m"]', + 'slot[name="heading-m-price"]', + 'slot[name="price-commitment"]', + 'slot[name="offers"]', + 'slot[name="promo-text"]', + 'slot[name="callout-content"]', + 'footer', + ] + .map((selector) => + Math.round( + window.getComputedStyle( + miniCompareChart.shadowRoot.querySelector( + selector, + ), + ).height, + ), + ) + .join(','); + return heights; + }); + expect(card1Slots).to.not.contain('auto'); + expect(card1Slots).to.equal(card2Slots); + expect(card2Slots).to.equal(card3Slots); + }); + + it('[mobile] mini-compare-chart should ', async () => { + const miniCompareChart = document.querySelector( + 'merch-card[variant="mini-compare-chart"]', + ); + miniCompareChart?.variantLayout?.removeEmptyRows(); + expect(true, 'removing empty lines do not fail').to.be.true; // TODO improve the assertion + }); + }); +}); diff --git a/libs/features/mas/web-components/test/merch-card.mini-compare.test.html b/libs/features/mas/web-components/test/merch-card.mini-compare.test.html index 38d0cf08933..a822c47b96a 100644 --- a/libs/features/mas/web-components/test/merch-card.mini-compare.test.html +++ b/libs/features/mas/web-components/test/merch-card.mini-compare.test.html @@ -63,7 +63,7 @@

This is promo text { const miniCompareChart = document.querySelector( 'merch-card[variant="mini-compare-chart"]', ); - miniCompareChart.removeEmptyRows(); + miniCompareChart?.variantLayout?.removeEmptyRows(); expect(true, 'removing empty lines do not fail').to.be.true; // TODO improve the assertion }); }); diff --git a/libs/features/mas/web-components/test/merch-card.special-offer.test.html.js b/libs/features/mas/web-components/test/merch-card.special-offer.test.html.js new file mode 100644 index 00000000000..63eb936984d --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.special-offer.test.html.js @@ -0,0 +1,53 @@ +// @ts-nocheck +import { runTests } from '@web/test-runner-mocha'; +import { expect } from '@esm-bundle/chai'; + +import { mockLana } from './mocks/lana.js'; +import { mockFetch } from './mocks/fetch.js'; +import { mockConfig } from './mocks/config.js'; + +import '../src/merch-offer.js'; +import '../src/merch-offer-select.js'; +import '../src/merch-quantity-select.js'; + +import { appendMiloStyles, delay } from './utils.js'; +import { mockIms } from './mocks/ims.js'; +import { withWcs } from './mocks/wcs.js'; +import mas from './mas.js'; + +const skipTests = sessionStorage.getItem('skipTests'); + +runTests(async () => { + mockIms(); + mockLana(); + await mockFetch(withWcs); + await mas(); + if (skipTests !== null) { + appendMiloStyles(); + return; + } + describe('merch-card web component', () => { + it('should exist in the HTML document', async () => { + expect(document.querySelector('merch-card')).to.exist; + }); + it('should exist special offers card in HTML document', async () => { + expect( + document.querySelector('merch-card[variant="special-offers"]'), + ).to.exist; + }); + it('should display a merch-badge', async () => { + expect( + document + .querySelector('merch-card[variant="special-offers"]') + .shadowRoot.querySelector('.special-offers-badge'), + ).to.exist; + }); + }); + + it('should return title for special offer card', async () => { + const title = document.querySelector( + 'merch-card[variant="special-offers"]', + ).title; + expect(title).to.equal('INDIVIDUALS'); + }); +}); diff --git a/libs/features/mas/web-components/test/merch-card.special-offers.test.html b/libs/features/mas/web-components/test/merch-card.special-offers.test.html new file mode 100644 index 00000000000..b0d613bf945 --- /dev/null +++ b/libs/features/mas/web-components/test/merch-card.special-offers.test.html @@ -0,0 +1,202 @@ + + + + + + + Merch Card Web Component demo page + + + + + + +

+
+ + + +
+
+

Three cards

+ +

INDIVIDUALS

+

Save over 30% on Creative Cloud All Apps.

+

+ +
+ Save now +
+
+ + + + + + +
+ + +

STUDENTS AND TEACHERS

+

Save over 60% on Creative Cloud All Apps.

+
+

Get 20+ apps — including Photoshop, Premiere Pro, and Illustrator — and save big for the first + year. +

+

Get 20+ apps — including Photoshop, Premiere Pro, and Illustrator — and save big for the first + year. +

+

Get 20+ apps — including Photoshop, Premiere Pro, and Illustrator — and save big for the first + year. +

+
+
+ Save now +
+
+ + + + + + +
+ + +

INDIVIDUALS

+

+

Get 10% off Photoshop.

+

+

+

US$19.99/mo US$54.99/mo

+

+
+

Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar + 20. +

+

See terms.

+
+
+ Save now +
+
+ + + + + + +
+ +
+
+ +

INDIVIDUALS

+

+

Get 10% off Photoshop.

+

+

+

US$19.99/mo US$54.99/mo

+

+
+

Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar + 20. +

+

See terms.

+
+
+ Save now +
+
+ + + + + + +
+ +
+
+ +

INDIVIDUALS

+

+

Get 10% off Photoshop.

+

+

+

US$19.99/mo US$54.99/mo

+

+
+

Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar + 20. +

+

See terms.

+
+
+ Save now +
+
+ + + + + + +
+ +
+
+ + 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 477880ec37d..3c6dbc83400 100644 --- a/libs/features/mas/web-components/test/merch-card.test.html +++ b/libs/features/mas/web-components/test/merch-card.test.html @@ -56,147 +56,6 @@
-
-

Three cards

- -

INDIVIDUALS

-

Save over 30% on Creative Cloud All Apps.

-

-
-

Get 20+ creative apps and save big when you choose a yearly plan instead of a monthly plan.

-

See terms.

-
-
- Save now -
-
- - - - - - -
- - -

STUDENTS AND TEACHERS

-

Save over 60% on Creative Cloud All Apps.

-
-

Get 20+ apps — including Photoshop, Premiere Pro, and Illustrator — and save big for the first - year. -

-

Get 20+ apps — including Photoshop, Premiere Pro, and Illustrator — and save big for the first - year. -

-

Get 20+ apps — including Photoshop, Premiere Pro, and Illustrator — and save big for the first - year. -

-
-
- Save now -
-
- - - - - - -
- - -

INDIVIDUALS

-

-

Get 10% off Photoshop.

-

-

-

US$19.99/mo US$54.99/mo

-

-
-

Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar - 20. -

-

See terms.

-
-
- Save now -
-
- - - - - - -
- -
-
- -

INDIVIDUALS

-

-

Get 10% off Photoshop.

-

-

-

US$19.99/mo US$54.99/mo

-

-
-

Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar - 20. -

-

See terms.

-
-
- Save now -
-
- - - - - - -
- -
-
- -

INDIVIDUALS

-

-

Get 10% off Photoshop.

-

-

-

US$19.99/mo US$54.99/mo

-

-
-

Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar - 20. -

-

See terms.

-
-
- Save now -
-
- - - - - - -
- -
@@ -339,88 +198,6 @@

-
- - -
-

Best for:

-
    -
  • Photo editing
    • -
  • Compositing
    • -
  • Drawing and painting
    • -
  • Graphic design
    • -
-

Storage:

-

100 GB of cloud storage

-

See system requirements

-
-

Photography

-

- -

-
-

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

-

Learn more

-
-
- Free trial - Save now -
- - - -
-

Best for:

-
    -
  • Photo editing
    • -
  • Compositing
    • -
  • Drawing and painting
    • -
  • Graphic design
    • -
-

Storage:

-

100 GB of cloud storage

-

See system requirements

-
-

Photography

-

- -
Inclusive of VAT
-

-
-

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

-

Learn more

-
-
- Android - IOS - Save now -
- - -

Creative Cloud All Apps

-

-
Desktop
-
-

-

Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. - (Substance 3D apps are not included.)

-

See what’s included | Learn more

-
-

Buy now free trial

- -

Acrobat

@@ -540,6 +317,29 @@

Desktop + Mobile

+ + +

Photoshop

+

Desktop + Mobile

+
+

Our real-time customer data platform collects B2C and B2B data from across systems and unifies it + into real-time profiles ready for activation across any channel.

+
+
+ Learn more +
+
+ + + + + + +
+
Save now
-
- - -
-

Best for:

-
    -
  • Photo editing
    • -
  • Compositing
    • -
  • Drawing and painting
    • -
  • Graphic design
    • -
-

Storage:

-

100 GB of cloud storage

-

See system requirements

-
-

Photography

-

- -

-
-

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

-

Learn more

-
-
-
-
-
AI Assistant add-on available
- -
-
-
-
-
- For a limited time pay - when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.Learn More -
- -
-
-
-
- Free trial - Save now -
- - - -
-

Best for:

-
    -
  • Photo editing
    • -
  • Compositing
    • -
  • Drawing and painting
    • -
  • Graphic design
    • -
-

Storage:

-

100 GB of cloud storage

-

See system requirements

-
-

Photography

-

- -

-
-

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

-

Learn more

-
-
-
-
-
AI Assistant add-on available
- -
-
-
-
-
- For a limited time pay - when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.Learn More -
- -
-
-
-
- Android - IOS - Save now -
- - -

Creative Cloud All Apps

-

-
Desktop
-
-

-

Get 20+ creative apps including Photoshop, Illustrator, Premiere Pro, Acrobat Pro, and Adobe Express. - (Substance 3D apps are not included.)

-

See what’s included | Learn more

-
-
-
-
-
AI Assistant add-on available
- -
-
-
-
-
- For a limited time pay - when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.Learn More -
- -
-
-
- -

Buy now free trial

- -
Desktop + Mobile secure-label="Secure Transaction" tabindex="0" filters="" + variant="product" types="" > diff --git a/libs/features/mas/web-components/test/merch-card.test.html.js b/libs/features/mas/web-components/test/merch-card.test.html.js index fd98d757a26..0bbd0c477d9 100644 --- a/libs/features/mas/web-components/test/merch-card.test.html.js +++ b/libs/features/mas/web-components/test/merch-card.test.html.js @@ -30,18 +30,6 @@ runTests(async () => { it('should exist in the HTML document', async () => { expect(document.querySelector('merch-card')).to.exist; }); - it('should exist special offers card in HTML document', async () => { - expect( - document.querySelector('merch-card[variant="special-offers"]'), - ).to.exist; - }); - it('should display a merch-badge', async () => { - expect( - document - .querySelector('merch-card[variant="special-offers"]') - .shadowRoot.querySelector('.special-offers-badge'), - ).to.exist; - }); it('should exist segment card in HTML document', async () => { expect(document.querySelector('merch-card[variant="segment"]')).to .exist; @@ -81,26 +69,6 @@ runTests(async () => { 'm2m,stock-m2m', ); }); - it('should display an action menu on hover for catalog variant', async () => { - const catalogCard = document.querySelector( - 'merch-card[variant="catalog"]', - ); - catalogCard.dispatchEvent( - new MouseEvent('mouseover', { bubbles: true }), - ); - await delay(100); - const shadowRoot = catalogCard.shadowRoot; - const actionMenu = shadowRoot.querySelector('.action-menu'); - const actionMenuContent = shadowRoot.querySelector( - '.action-menu-content', - ); - expect(actionMenu.classList.contains('invisible')).to.be.true; - expect(actionMenuContent.classList.contains('hidden')).to.be.true; - expect(actionMenu).to.exist; - expect(actionMenuContent).to.exist; - catalogCard.toggleActionMenu(); - - }); it('should have and interact with quantity-selector', async () => { const plansCard = document.querySelector('merch-card[type="q-ty"]'); @@ -124,13 +92,6 @@ runTests(async () => { }); }); - it('should return title for special offer card', async () => { - const title = document.querySelector( - 'merch-card[variant="special-offers"]', - ).title; - expect(title).to.equal('INDIVIDUALS'); - }); - it('should return title for segment card', async () => { const title = document.querySelector( 'merch-card[variant="segment"]', diff --git a/libs/features/mas/web-components/test/utils.js b/libs/features/mas/web-components/test/utils.js index 1fef69beaca..9fc4e11acb9 100644 --- a/libs/features/mas/web-components/test/utils.js +++ b/libs/features/mas/web-components/test/utils.js @@ -23,6 +23,12 @@ export async function toggleLargeDesktop() { } catch {} } +export async function toggleMobile() { + try { + await setViewport({ width: 430, height: 932 }); + } catch {} +} + window.skipTests = () => { window.location.hash = ''; sessionStorage.setItem('skipTests', 'true'); diff --git a/libs/martech/martech.js b/libs/martech/martech.js index 91906910bc5..01492cadfee 100644 --- a/libs/martech/martech.js +++ b/libs/martech/martech.js @@ -118,14 +118,14 @@ export const getTargetPersonalization = async () => { const responseStart = Date.now(); window.addEventListener(ALLOY_SEND_EVENT, () => { const responseTime = calculateResponseTime(responseStart); - window.lana.log(`target response time: ${responseTime}`, { tags: 'errorType=info,module=martech' }); + window.lana.log(`target response time: ${responseTime}`, { tags: 'martech', errorType: 'i' }); }, { once: true }); let manifests = []; let propositions = []; const response = await waitForEventOrTimeout(ALLOY_SEND_EVENT, timeout); if (response.error) { - window.lana.log('target response time: ad blocker', { tags: 'errorType=info,module=martech' }); + window.lana.log('target response time: ad blocker', { tags: 'martech', errorType: 'i' }); return []; } if (response.timeout) { diff --git a/libs/tools/utils/publish.js b/libs/tools/utils/publish.js new file mode 100644 index 00000000000..49acf0928dc --- /dev/null +++ b/libs/tools/utils/publish.js @@ -0,0 +1,32 @@ +import { getCustomConfig } from '../../../tools/utils/utils.js'; + +const userCanPublishPage = async (detail, isBulk = true) => { + if (!detail) return false; + const { live, profile, webPath } = detail; + let canPublish = isBulk ? live?.permissions?.includes('write') : true; + let message = 'Publishing is currently disabled for this page'; + const config = await getCustomConfig('/.milo/publish-permissions-config.json'); + const item = config?.urls?.data?.find(({ url }) => ( + url.endsWith('**') ? webPath.includes(url.slice(0, -2)) : url === webPath + )); + if (item) { + canPublish = false; + if (item.message) message = item.message; + const group = config[item.group]; + if (group && profile?.email) { + let isDeny; + const user = group.data?.find(({ allow, deny }) => { + if (deny) { + /* c8 ignore next 3 */ + isDeny = true; + return deny === profile.email; + } + return allow === profile.email; + }); + canPublish = isDeny ? !user : !!user; + } + } + return { canPublish, message }; +}; + +export default userCanPublishPage; diff --git a/libs/utils/sidekick-decorate.js b/libs/utils/sidekick-decorate.js index ec125ef6500..acaa4287166 100644 --- a/libs/utils/sidekick-decorate.js +++ b/libs/utils/sidekick-decorate.js @@ -1,4 +1,22 @@ +import userCanPublishPage from '../tools/utils/publish.js'; + +const PUBLISH_BTN = '.publish.plugin button'; +const BACKUP_PROFILE = '.profile-email'; +const CONFIRM_MESSAGE = 'Are you sure? This will publish to production.'; + export default function stylePublish(sk) { + const setupPublishBtn = async (page, btn) => { + const { canPublish, message } = await userCanPublishPage(page, false); + btn.setAttribute('disabled', !canPublish); + const messageText = btn.querySelector('span'); + const text = canPublish ? CONFIRM_MESSAGE : message; + if (messageText) { + messageText.innerText = text; + } else { + btn.insertAdjacentHTML('beforeend', `${text}`); + } + }; + const style = new CSSStyleSheet(); style.replaceSync(` :host { @@ -10,19 +28,21 @@ export default function stylePublish(sk) { order: 100; } .publish.plugin button { + position: relative; + } + .publish.plugin button:not([disabled=true]) { background: var(--bg-color); border-color: #b46157; color: var(--text-color); - position: relative; } - .publish.plugin button:hover { + .publish.plugin button:not([disabled=true]):hover { background-color: var(--hlx-sk-button-hover-bg); border-color: unset; color: var(--hlx-sk-button-hover-color); } .publish.plugin button > span { display: none; - background: var(--bg-color); + background: #666; border-radius: 4px; line-height: 1.2rem; padding: 8px 12px; @@ -33,6 +53,9 @@ export default function stylePublish(sk) { width: 150px; white-space: pre-wrap; } + .publish.plugin button:not([disabled=true]) > span { + background: var(--bg-color); + } .publish.plugin button:hover > span { display: block; color: var(--text-color); @@ -41,19 +64,39 @@ export default function stylePublish(sk) { content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; - border-bottom: 6px solid var(--bg-color); + border-bottom: 6px solid #666; position: absolute; text-align: center; top: -6px; left: 50%; transform: translateX(-50%); } + .publish.plugin button:not([disabled=true]) > span:before { + border-bottom: 6px solid var(--bg-color); + } `); + sk.shadowRoot.adoptedStyleSheets = [style]; - setTimeout(() => { - const btn = sk.shadowRoot.querySelector('.publish.plugin button'); - btn?.insertAdjacentHTML('beforeend', ` - Are you sure? This will publish to production. - `); + + sk.addEventListener('statusfetched', async (event) => { + const page = event?.detail?.data; + const btn = event?.target?.shadowRoot?.querySelector(PUBLISH_BTN); + if (page && btn) { + setupPublishBtn(page, btn); + } + }); + + setTimeout(async () => { + const btn = sk.shadowRoot.querySelector(PUBLISH_BTN); + btn?.setAttribute('disabled', true); + const message = btn?.querySelector('span'); + if (btn && !message) { + const page = { + webPath: window.location.pathname, + // added for edge case where the statusfetched event isnt fired on refresh + profile: { email: sk.shadowRoot.querySelector(BACKUP_PROFILE)?.innerText }, + }; + setupPublishBtn(page, btn); + } }, 500); } diff --git a/test/blocks/article-header/article-header.test.js b/test/blocks/article-header/article-header.test.js index cbcf096c1f3..7c0a20bd170 100644 --- a/test/blocks/article-header/article-header.test.js +++ b/test/blocks/article-header/article-header.test.js @@ -1,7 +1,6 @@ import { readFile } from '@web/test-runner-commands'; import { expect } from '@esm-bundle/chai'; -import sinon from 'sinon'; - +import sinon, { stub } from 'sinon'; import { setConfig, getConfig } from '../../../libs/utils/utils.js'; import { delay, waitForElement } from '../../helpers/waitfor.js'; @@ -9,9 +8,11 @@ const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } }; const conf = { locales, miloLibs: 'http://localhost:2000/libs' }; setConfig(conf); const config = getConfig(); +window.lana = { log: stub() }; document.body.innerHTML = await readFile({ path: './mocks/body.html' }); const { default: init } = await import('../../../libs/blocks/article-header/article-header.js'); +const { loadTaxonomy } = await import('../../../libs/blocks/article-feed/article-helpers.js'); const invalidDoc = await readFile({ path: './mocks/body-invalid.html' }); @@ -20,10 +21,20 @@ describe('article header', () => { const block = document.body.querySelector('.article-header'); config.locale.contentRoot = '/test/blocks/article-header/mocks'; config.taxonomyRoot = undefined; - await init(block); }); + it('should log unknown topic', async () => { + try { + const div = document.createElement('div'); + div.setAttribute('data-topic-link', ['abcd']); + document.body.append(div); + await loadTaxonomy(); + expect(window.lana.log.args[0][0]).to.equal('Trying to get a link for an unknown topic: abcd (current page)'); + } catch (e) { + console.log(e); + } + }); it('creates article header block', () => { expect(document.body.querySelector('.article-category')).to.exist; expect(document.body.querySelector('.article-title')).to.exist; @@ -36,16 +47,16 @@ describe('article header', () => { it('should open link popup when share links are clicked', () => { // first share link is twitter const shareLink = document.querySelector('.article-byline-sharing a'); - const stub = sinon.stub(window, 'open'); + const windowStub = sinon.stub(window, 'open'); shareLink.click(); const url = encodeURIComponent(window.location.href); const title = encodeURIComponent(document.querySelector('h1').textContent); - expect(stub.calledOnce).to.be.true; - expect(stub.firstCall.args[0]).to.equal(`https://www.twitter.com/share?&url=${url}&text=${title}`); - expect(stub.firstCall.args[2]).to.equal('popup,top=233,left=233,width=700,height=467'); + expect(windowStub.calledOnce).to.be.true; + expect(windowStub.firstCall.args[0]).to.equal(`https://www.twitter.com/share?&url=${url}&text=${title}`); + expect(windowStub.firstCall.args[2]).to.equal('popup,top=233,left=233,width=700,height=467'); - stub.restore(); + windowStub.restore(); }); it('updates share text after deferred event', async () => { @@ -111,7 +122,6 @@ describe('test the invalid article header', () => { it('adds invalid-date when invalid date is provided', async () => { await init(document.body.querySelector('.article-header')); - const date = await waitForElement('.article-date-invalid'); expect(date).to.exist; }); diff --git a/test/blocks/bulk-publish-v2/bulk-publish-v2.test.js b/test/blocks/bulk-publish-v2/bulk-publish-v2.test.js index 3b634681d23..7cd56109b46 100644 --- a/test/blocks/bulk-publish-v2/bulk-publish-v2.test.js +++ b/test/blocks/bulk-publish-v2/bulk-publish-v2.test.js @@ -114,6 +114,16 @@ describe('Bulk Publish Tool', () => { await mouseEvent(rootEl.querySelector('.fix-btn')); }); + it('can trigger cannot publish config', async () => { + await clock.runAllAsync(); + await setProcess(rootEl, 'publish'); + await setTextArea(rootEl, 'https://error--milo--adobecom.hlx.page/not/a/valid/path'); + await mouseEvent(rootEl.querySelector('#RunProcess')); + const errors = rootEl.querySelector('.errors'); + expect(errors.querySelector('strong').innerText).to.equal('Publishing disabled until the test is over'); + await mouseEvent(rootEl.querySelector('.fix-btn')); + }); + it('can validate milo urls and enable form', async () => { await clock.runAllAsync(); await setProcess(rootEl, 'publish'); @@ -132,6 +142,17 @@ describe('Bulk Publish Tool', () => { await mouseEvent(rootEl.querySelector('.switch.half')); }); + it('can toggle job timing flyout', async () => { + await clock.runAllAsync(); + const doneJobProcess = rootEl.querySelector('job-process'); + const jobInfo = doneJobProcess?.shadowRoot.querySelector('job-info'); + const timerDetail = jobInfo?.shadowRoot.querySelector('.timer'); + await mouseEvent(timerDetail); + await clock.runAllAsync(); + await mouseEvent(timerDetail); + expect(timerDetail.classList.contains('show-times')).to.be.false; + }); + it('can submit valid bulk preview job', async () => { await clock.runAllAsync(); await setProcess(rootEl, 'preview'); @@ -174,17 +195,6 @@ describe('Bulk Publish Tool', () => { expect(rootEl.querySelectorAll('job-process')).to.have.lengthOf(4); }); - it('can toggle job timing flyout', async () => { - await clock.runAllAsync(); - const doneJobProcess = rootEl.querySelector('job-process'); - const jobInfo = doneJobProcess?.shadowRoot.querySelector('job-info'); - const timerDetail = jobInfo?.shadowRoot.querySelector('.timer'); - await mouseEvent(timerDetail); - await clock.runAllAsync(); - await mouseEvent(timerDetail); - expect(timerDetail.classList.contains('show-times')).to.be.false; - }); - it('can toggle view mode', async () => { await mouseEvent(rootEl.querySelector('.switch.full')); await clock.runAllAsync(); @@ -218,7 +228,6 @@ describe('Bulk Publish Tool', () => { it('can clear bulk jobs', async () => { await clock.runAllAsync(); await mouseEvent(rootEl.querySelector('.clear-jobs')); - await clock.runAllAsync(); expect(rootEl.querySelectorAll('job-process')).to.have.lengthOf(0); }); }); diff --git a/test/blocks/bulk-publish-v2/mocks/authentication.js b/test/blocks/bulk-publish-v2/mocks/authentication.js index 22d01045adf..ca826fa82d5 100644 --- a/test/blocks/bulk-publish-v2/mocks/authentication.js +++ b/test/blocks/bulk-publish-v2/mocks/authentication.js @@ -23,7 +23,7 @@ class MockAuth extends HTMLElement { bubbles: true, detail: { data: { - profile: { name: 'Unit Test' }, + profile: { name: 'Unit Test', email: 'tester@adobe.com' }, preview: { permissions }, live: { permissions }, }, diff --git a/test/blocks/bulk-publish-v2/mocks/fetch.js b/test/blocks/bulk-publish-v2/mocks/fetch.js index 8ab62d86d32..48d7637f540 100644 --- a/test/blocks/bulk-publish-v2/mocks/fetch.js +++ b/test/blocks/bulk-publish-v2/mocks/fetch.js @@ -11,6 +11,7 @@ const requests = { delstatus: 'https://admin.hlx.page/job/adobecom/milo/main/preview-remove/job-2024-01-24t23-16-20-377z/details', retry: 'https://admin.hlx.page/preview/adobecom/milo/main/tools/bulk-publish-v2-test', index: 'https://admin.hlx.page/index/adobecom/milo/main/tools/bulk-publish-v2-test', + permissions: '/.milo/publish-permissions-config.json', }; const getMocks = async () => { @@ -25,7 +26,7 @@ const getMocks = async () => { export async function mockFetch() { const mocks = await getMocks(); stub(window, 'fetch').callsFake((...args) => { - const headers = args[1].body ?? null; + const headers = args[1]?.body ?? null; const body = headers ? JSON.parse(headers) : false; const [resource] = args; const response = mocks.find((mock) => (body.delete ? mock.request === 'delete' : mock.url === resource)); diff --git a/test/blocks/bulk-publish-v2/mocks/response/permissions.json b/test/blocks/bulk-publish-v2/mocks/response/permissions.json new file mode 100644 index 00000000000..37fe5eaec94 --- /dev/null +++ b/test/blocks/bulk-publish-v2/mocks/response/permissions.json @@ -0,0 +1,26 @@ +{ + "urls": { + "total": 4, + "offset": 0, + "limit": 4, + "data": [ + { + "url": "/not/a/valid/path", + "group": "gwp-test", + "message": "Publishing disabled until the test is over" + } + ] + }, + "gwp-test": { + "total": 2, + "offset": 0, + "limit": 2, + "data": [ + { "allow": "testuser@adobe.com" }, + { "allow": "testuser1@adobe.com" } + ] + }, + ":version": 3, + ":names": ["urls", "gwp-US", "no-publish", "gwp-FR"], + ":type": "multi-sheet" +} diff --git a/test/blocks/global-footer/global-footer.test.js b/test/blocks/global-footer/global-footer.test.js index d99e9868c5c..3ab306b9ce4 100644 --- a/test/blocks/global-footer/global-footer.test.js +++ b/test/blocks/global-footer/global-footer.test.js @@ -378,7 +378,7 @@ describe('global footer', () => { await createFullGlobalFooter({ waitForDecoration: false }); await clock.runAllAsync(); expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Failed to fetch footer content'))); - expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=warn,module=global-footer'))); + expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('global-footer'))); }); it('should send log when could not create URL for region picker', async () => { @@ -393,7 +393,7 @@ describe('global footer', () => { // should throw error } expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Could not create URL for region picker'))); - expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=global-footer'))); + expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('global-footer'))); }); it('should send log when footer cannot be instantiated ', async () => { @@ -401,7 +401,7 @@ describe('global footer', () => { await createFullGlobalFooter({ waitForDecoration: false }); await clock.runAllAsync(); expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Footer could not be instantiated'))); - expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=global-footer'))); + expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('global-footer'))); }); it('should send LANA log when icons.svg has some network issue', async () => { diff --git a/test/blocks/quiz-results/mocks/body.html b/test/blocks/quiz-results/mocks/body.html index 7323de08aca..10823f4ee23 100644 --- a/test/blocks/quiz-results/mocks/body.html +++ b/test/blocks/quiz-results/mocks/body.html @@ -38,5 +38,15 @@
http://this-is-a-fake-redirect-url
+
+
+
nested-fragments
+
marquee-product
+
+
+
style
+
m-spacing
+
+
diff --git a/test/blocks/quiz-results/quiz-results.test.js b/test/blocks/quiz-results/quiz-results.test.js index 37bb6b77b9f..7b0b887cb3e 100644 --- a/test/blocks/quiz-results/quiz-results.test.js +++ b/test/blocks/quiz-results/quiz-results.test.js @@ -76,4 +76,11 @@ describe('Quiz Results', () => { expect(el.querySelector('.fragment > .section > .content').getAttribute('daa-lh')).to.equal('b1|content'); expect(el.querySelector('a').getAttribute('daa-ll')).to.equal('Fragment link-1--This is a basic frag'); }); + it('should return misconfigured block', async () => { + const el = document.body.querySelector('.nested-three'); + localStorage.setItem('misconf', JSON.stringify(mockData.mockTwo)); + el.classList.remove('nested'); + await init(el, 'quiz-results', 'misconf'); + expect(window.lana.log.args[2][0]).to.equal(`${LOADING_ERROR} The quiz-results block is misconfigured`); + }); }); diff --git a/test/blocks/vimeo/vimeo.test.html b/test/blocks/vimeo/vimeo.test.html index 50504a2436f..8eb108eb547 100644 --- a/test/blocks/vimeo/vimeo.test.html +++ b/test/blocks/vimeo/vimeo.test.html @@ -15,9 +15,11 @@ diff --git a/test/features/webapp-prompt/webapp-prompt.test.js b/test/features/webapp-prompt/webapp-prompt.test.js index c065acd7263..e7e8308cfad 100644 --- a/test/features/webapp-prompt/webapp-prompt.test.js +++ b/test/features/webapp-prompt/webapp-prompt.test.js @@ -239,7 +239,7 @@ describe('PEP', () => { }), }); expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Error on getting anchor state'))).to.exist; - expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=pep'))).to.exist; + expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('pep'))).to.exist; }); it('should send log when cannot fetch content for prompt', async () => { @@ -256,7 +256,7 @@ describe('PEP', () => { }); await initPep({}); expect(window.lana.log.getCalls().find((c) => c.args[0].includes('Error fetching content for prompt'))).to.exist; - expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('errorType=error,module=pep'))).to.exist; + expect(window.lana.log.getCalls().find((c) => c.args[1].tags.includes('pep'))).to.exist; }); }); }); diff --git a/tools/utils/utils.js b/tools/utils/utils.js index 29d68397d87..8193d21fdf0 100644 --- a/tools/utils/utils.js +++ b/tools/utils/utils.js @@ -1,6 +1,7 @@ const IMS_CLIENT_ID = 'milo_ims'; const IMS_PROD_URL = 'https://auth.services.adobe.com/imslib/imslib.min.js'; const STYLE_SHEETS = {}; +const CONFIGS = {}; const getImsToken = async (loadScript) => { window.adobeid = { @@ -25,4 +26,15 @@ const getSheet = async (url) => { return sheet; }; -export { getImsToken, getSheet }; +const getCustomConfig = async (path) => { + /* c8 ignore next 3 */ + if (CONFIGS[path] !== undefined) { + return CONFIGS[path]; + } + const resp = await fetch(path); + const config = resp.ok ? await resp.json() : null; + CONFIGS[path] = config; + return config; +}; + +export { getImsToken, getSheet, getCustomConfig };