MWPW-164093: Adobe Home pricing widget merch card

libs/features/mas/src/global.css.js

@@ -27,6 +27,8 @@ styles.innerHTML = `
     --consonant-merch-card-cta-font-size: 15px;
 
     /* headings */
+    --consonant-merch-card-heading-xxxs-font-size: 14px;
+    --consonant-merch-card-heading-xxxs-line-height: 18.2px;
     --consonant-merch-card-heading-xxs-font-size: 16px;
     --consonant-merch-card-heading-xxs-line-height: 20px;
     --consonant-merch-card-heading-xs-font-size: 18px;

libs/features/mas/src/variants/pricing-widget.css.js

@@ -0,0 +1,36 @@
+export const CSS = `
+:root {
+  	--merch-card-pricing-widget-width: 132px;
+  	--merch-card-pricing-widget-height: 212px;
+}
+
+merch-card[variant="pricing-widget"] [slot="heading-xxxs"] {
+    letter-spacing: normal;
+    font-size: 12px;
+    line-height: 18px;
+    color: var(--spectrum-gray-800);
+}
+
+merch-card[variant="pricing-widget"] [slot="body-xxs"] {
+    letter-spacing: normal;
+    max-height: 54px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    margin-bottom: 12px;
+    box-sizing: border-box;
+    color: var(--spectrum-gray-800);
+}
+
+merch-card[variant="pricing-widget"] [slot="price"] a {
+    color: var(--spectrum-gray-900);
+}
+
+
+merch-card[variant="pricing-widget"] [slot="price"] span[is="inline-price"] {
+    font-size: 14px;
+    line-height: 18px;
+}
+  `;

libs/features/mas/src/variants/pricing-widget.js

@@ -0,0 +1,97 @@
+import { html, css } from 'lit';
+import { VariantLayout } from './variant-layout';
+import { CSS } from './pricing-widget.css.js';
+
+const AEM_FRAGMENT_MAPPING = {
+  mnemonics: { size: 's' },
+  title: { tag: 'h3', slot: 'heading-xs' },
+  description: { tag: 'div', slot: 'body-xs' },
+  prices: { tag: 'p', slot: 'price' },
+  ctas: { slot: 'cta', size: 's' },
+};
+
+export class PricingWidget extends VariantLayout {
+
+  getGlobalCSS() {
+    return CSS;
+  }
+
+  /* c8 ignore next 3 */
+  get aemFragmentMapping() {
+    return AEM_FRAGMENT_MAPPING;
+  }
+
+  renderLayout() {
+    return html`
+        <div class="header">
+    		    <slot name="icons"></slot>
+            <slot name="heading-xxxs"></slot>
+        </div>
+        <slot name="body-xxs"></slot>
+        <slot name="price"></slot>
+        <div class="footer">
+          <slot name="cta"></slot>
+        </div>
+      <slot></slot>
+    `;
+  }
+
+  static variantStyle = css`
+    :host([variant='pricing-widget']) {
+        width: var(--merch-card-pricing-widget-width);
+        min-height: var(--merch-card-pricing-widget-height);
+        background-color: var(--spectrum-gray-50);
+        color: var(--spectrum-gray-800);
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 12px;
+        box-sizing: content-box;
+        border: none;
+    }
+
+    :host([variant='pricing-widget'][size='gray']) {
+        background-color: var(--spectrum-gray-100);
+    }
+
+    :host([variant='pricing-widget']) .header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--consonant-merch-spacing-xxs);
+        padding-bottom: 4px;
+    }
+
+    :host([variant='pricing-widget']) ::slotted([slot='heading-xxxs']) {
+        letter-spacing: normal;
+        font-size: 12px;
+        line-height: 18px;
+        color: var(--spectrum-gray-800);
+    }
+
+    :host([variant='pricing-widget']) ::slotted([slot='price']) {
+        margin-left: var(--spacing-xs);
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        line-height: 18px;
+        color: var(--spectrum-gray-800);
+    }
+
+    :host([variant='pricing-widget']) .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: auto;
+    }
+
+    :host([variant='pricing-widget']) ::slotted([slot='cta']) {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+    }
+  `;
+}
+
+customElements.define('pricing-widget', PricingWidget);

libs/features/mas/src/variants/variants.js

@@ -9,6 +9,7 @@ import { SpecialOffer } from './special-offer.js';
 import { TWP } from './twp.js';
 import { CCDSuggested } from './ccd-suggested.js';
 import { CCDSlice } from './ccd-slice.js';
+import { PricingWidget } from './pricing-widget.js';
 
 const getVariantLayout = (card, mustMatch = false) => {
     switch (card.variant) {
@@ -34,6 +35,8 @@ const getVariantLayout = (card, mustMatch = false) => {
               return new CCDSuggested(card);
         case 'ccd-slice':
             return new CCDSlice(card);
+          case 'pricing-widget':
+            return new PricingWidget(card);
         default:
             return mustMatch ? undefined : new Product(card);
     }
@@ -50,6 +53,7 @@ const getVariantStyles = () => {
     styles.push(TWP.variantStyle);
     styles.push(CCDSuggested.variantStyle);
     styles.push(CCDSlice.variantStyle);
+    styles.push(PricingWidget.variantStyle);
     return styles;
 };
 

libs/features/mas/test/merch-card.pricing-widget.test.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Merch Card CCD Pricing Widget Web Component demo page</title>
+    <script>
+        window.process = {
+            env: {},
+        };
+    </script>
+    <style>
+        main {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            flex-direction: column;
+            padding-top: 80px;
+            width: 100%;
+            height: 100%;
+        }
+        merch-card {
+          margin-bottom: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <script type="module" src="./merch-card.pricing-widget.test.html.js"></script>
+    <main>
+      <sp-theme color="light" scale="medium" dir="ltr">
+          <merch-card size="gray" class="" tabindex="0" variant="pricing-widget">
+            <sp-status-light size="s" variant="info" dir="ltr"></sp-status-light>
+            <merch-icon
+              slot="icons"
+              src="./img/pixel.png"
+              alt=""
+              href=""
+              size="s"
+              >undefined</merch-icon
+            >
+            <h3 slot="heading-xxxs">Creative Cloud All Apps</h3>
+            <p slot="body-xxs">
+              Get 20+ creative apps including Photoshop and Illustrator.
+            </p>
+            <div slot="price">
+              <strong><span is="inline-price" data-wcs-osi="r_JXAnlFI7xD6FxWKl2ODvZriLYBoSL701Kd1hRyhe8"></span></strong>
+                <p><em>Annual, paid monthly</em></p>
+                <a href="#">See terms</a>
+        </div>
+          <div slot="cta">
+            <sp-button size="s" variant="secondary">Free trial</sp-button>
+            <sp-button size="s" variant="accent">Buy</sp-button>
+          </div>
+          </merch-card>
+          <merch-card class="" tabindex="0" variant="pricing-widget">
+            <sp-status-light size="s" variant="info" dir="ltr"></sp-status-light>
+            <merch-icon
+              slot="icons"
+              src="./img/pixel.png"
+              alt=""
+              href=""
+              size="s"
+              >undefined</merch-icon
+            >
+            <h3 slot="heading-xxxs">Photoshop</h3>
+            <p slot="body-xxs">
+              Create beautiful graphics, photos and art anywhere.
+            </p>
+            <div slot="price">
+              <strong><span is="inline-price" data-wcs-osi="r_JXAnlFI7xD6FxWKl2ODvZriLYBoSL701Kd1hRyhe8"></span></strong>
+                <a href="#">See terms</a>
+        </div>
+          <div slot="cta">
+            <sp-button size="s" variant="secondary">Try</sp-button>
+            <sp-button size="s" variant="primary">Buy</sp-button>
+          </div>
+          </merch-card>
+          <merch-card class="" tabindex="0" variant="pricing-widget">
+            <sp-status-light size="s" variant="info" dir="ltr"></sp-status-light>
+            <merch-icon
+              slot="icons"
+              src="./img/pixel.png"
+              alt=""
+              href=""
+              size="s"
+              >undefined</merch-icon
+            >
+            <h3 slot="heading-xxxs">Acrobat</h3>
+            <p slot="body-xxs">
+              View, share, or comment on PDFs for free. Subscribe for premium tools like editing text and images.
+            </p>
+            <div slot="price">
+              <strong><span is="inline-price" data-wcs-osi="r_JXAnlFI7xD6FxWKl2ODvZriLYBoSL701Kd1hRyhe8"></span></strong>
+              <a href="#">See terms</a>
+          </div>
+          <div slot="cta">
+            <sp-button size="s" variant="secondary">Try</sp-button>
+            <sp-button size="s" variant="primary">Buy</sp-button>
+          </div>
+          </merch-card>
+      </sp-theme>
+      <sp-theme  color="dark" scale="medium" dir="rtl">
+        <merch-card size="gray" class="" tabindex="0" variant="pricing-widget">
+          <sp-status-light size="s" variant="info" dir="ltr"></sp-status-light>
+          <merch-icon
+            slot="icons"
+            src="./img/pixel.png"
+            alt=""
+            href=""
+            size="s"
+            >undefined</merch-icon
+          >
+          <h3 slot="heading-xxxs">Creative Cloud All Apps</h3>
+          <p slot="body-xxs">
+            Get 20+ creative apps including Photoshop and Illustrator.
+          </p>
+          <div slot="price">
+            <strong><span is="inline-price" data-wcs-osi="r_JXAnlFI7xD6FxWKl2ODvZriLYBoSL701Kd1hRyhe8"></span></strong>
+              <p><em>Annual, paid monthly</em></p>
+              <a href="#">See terms</a>
+      </div>
+        <div slot="cta">
+          <sp-button size="s" variant="secondary">Free trial</sp-button>
+          <sp-button size="s" variant="accent">Buy</sp-button>
+        </div>
+        </merch-card>
+        <merch-card class="" tabindex="0" variant="pricing-widget">
+          <sp-status-light size="s" variant="info" dir="ltr"></sp-status-light>
+          <merch-icon
+            slot="icons"
+            src="./img/pixel.png"
+            alt=""
+            href=""
+            size="s"
+            >undefined</merch-icon
+          >
+          <h3 slot="heading-xxxs">Photoshop</h3>
+          <p slot="body-xxs">
+            Create beautiful graphics, photos and art anywhere.
+          </p>
+          <div slot="price">
+            <strong><span is="inline-price" data-wcs-osi="r_JXAnlFI7xD6FxWKl2ODvZriLYBoSL701Kd1hRyhe8"></span></strong>
+              <a href="#">See terms</a>
+      </div>
+        <div slot="cta">
+          <sp-button size="s" variant="secondary">Try</sp-button>
+          <sp-button size="s" variant="primary">Buy</sp-button>
+        </div>
+        </merch-card>
+        <merch-card class="" tabindex="0" variant="pricing-widget">
+          <sp-status-light size="s" variant="info" dir="ltr"></sp-status-light>
+          <merch-icon
+            slot="icons"
+            src="./img/pixel.png"
+            alt=""
+            href=""
+            size="s"
+            >undefined</merch-icon
+          >
+          <h3 slot="heading-xxxs">Acrobat</h3>
+          <p slot="body-xxs">
+            View, share, or comment on PDFs for free. Subscribe for premium tools like editing text and images.
+          </p>
+          <div slot="price">
+            <strong><span is="inline-price" data-wcs-osi="r_JXAnlFI7xD6FxWKl2ODvZriLYBoSL701Kd1hRyhe8"></span></strong>
+            <a href="#">See terms</a>
+        </div>
+        <div slot="cta">
+          <sp-button size="s" variant="secondary">Try</sp-button>
+          <sp-button size="s" variant="primary">Buy</sp-button>
+        </div>
+        </merch-card>
+      </sp-theme>
+    </main>
+</body>
+</html>

libs/features/mas/test/merch-card.pricing-widget.test.html.js

@@ -0,0 +1,29 @@
+// @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 './spectrum.js';
+import '../src/merch-offer.js';
+import '../src/merch-offer-select.js';
+import '../src/merch-quantity-select.js';
+
+import { mockIms } from './mocks/ims.js';
+import { withWcs } from './mocks/wcs.js';
+import mas from './mas.js';
+
+
+runTests(async () => {
+    mockIms();
+    mockLana();
+    await mockFetch(withWcs);
+    await mas();
+
+    describe('merch-card web component', () => {
+        it('should exist in the HTML document', async () => {
+            expect(document.querySelector('merch-card[variant="pricing-widget"]')).to.exist;
+        });
+    });
+});