MWPW-158053: CCD Slice Card [Merch card] (#2878)

* MWPW-156612 fragment merch-card variant layouts

- move from merch-card.js code each layout code related to a given variant under variants/<variant> class
- move from global.css.js css related to a given variant under variants/<variant>.css.js
- move from merch-card.css.js wc css related to a given variant under variants/<variant>.variantStyle
- uses variants/variants as an index to get related class from related variant, and wc style too,
- uses variants/VariantLayout, superclass of all variants, to insert css if card is used, and hold common code

* MWPW-156612 changing title selector

to something independent of the layout (not initialized when used at first in collections)

* MWPW-156612 forking style insertion

* MWPW-156612 styles fixes

* MWPW-156612 review comments

* MWPW-156612 fixing unit tests

* initial commit

* MWPW-158053: CCD Slide Card

* RTL alignment

* ccd slice card added to merch-datasource libs

* review comments addressed

* so long, milo styles

* decluttered html test page

* spectrum ctas in test file

* removed images and added pixel png

* removed dead code

* Update merch-card.ccd-slice.test.html.js

* Update merch-twp-d2p.test.html

* Update ccd-slice.js

* Update merch-datasource.js

* inherited width of images

* updated deps

---------

Co-authored-by: Nicolas Peltier <npeltier@adobe.com>

libs/features/mas/web-components/src/merch-datasource.js

@@ -6,6 +6,7 @@ const VARIANTS = {
     AH: 'ah',
     CCD_ACTION: 'ccd-action',
     SPECIAL_OFFERS: 'special-offers',
+    CCD_SLICE: 'ccd-slice',
 };
 
 const cardContent = {
@@ -35,6 +36,11 @@ const cardContent = {
         description: { tag: 'div', slot: 'body-xs' },
         ctas: { size: 'l' },
     },
+    [VARIANTS.CCD_SLICE]: {
+      backgroundImage: { tag: 'div', slot: 'image' },
+      description: { tag: 'div', slot: 'body-s' },
+      ctas: { size: 'l' },
+  },
 };
 
 async function parseMerchCard(fragmentData, appendFn, merchCard, consonant) {

libs/features/mas/web-components/src/variants/ccd-slice.css.js

@@ -0,0 +1,23 @@
+export const CSS = `
+:root {
+  --consonant-merch-card-ccd-slice-single-width: 322px;
+  --consonant-merch-card-ccd-slice-icon-size: 30px;
+  --consonant-merch-card-ccd-slice-wide-width: 600px;
+  --consonant-merch-card-ccd-slice-single-height: 154px;
+  --consonant-merch-card-ccd-slice-background-img-size: 119px;
+}
+
+merch-card[variant="ccd-slice"] [slot='body-s'] a:not(.con-button) {
+    font-size: var(--consonant-merch-card-body-xxs-font-size);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--consonant-merch-card-body-xxs-line-height);
+    text-decoration-line: underline;
+    color: var(--merch-color-grey-80);
+  }
+
+  merch-card[variant="ccd-slice"] [slot='image'] img {
+    overflow: hidden;
+    border-radius: 50%;
+  }
+`;

libs/features/mas/web-components/src/variants/ccd-slice.js

@@ -0,0 +1,78 @@
+import { VariantLayout } from './variant-layout.js';
+import { html, css } from 'lit';
+import { CSS } from './ccd-slice.css.js';
+
+export class CCDSlice extends VariantLayout {
+
+  getGlobalCSS() {
+    return CSS;
+  }
+
+  renderLayout() {
+    return html` <div class="content">
+          <slot name="icons"></slot> ${this.badge}
+          <slot name="body-s"></slot>
+          <slot name="footer"></slot>
+        </div>
+        <slot name="image"></slot>
+        <slot></slot>`;
+  }
+
+  static variantStyle = css`
+    :host([variant='ccd-slice']) {
+      width: var(--consonant-merch-card-ccd-slice-single-width);
+      border-radius: 4px;
+      display: flex;
+      flex-flow: wrap;
+    }
+
+    :host([variant='ccd-slice']) ::slotted([slot='body-s'])  {
+      font-size: var(--consonant-merch-card-body-xs-font-size);
+      line-height: var(--consonant-merch-card-body-xxs-line-height);
+    }
+
+    :host([variant='ccd-slice'][size='wide']) {
+      width: var(--consonant-merch-card-ccd-slice-wide-width);
+    }
+
+    :host([variant='ccd-slice']) .content {
+      display: flex;
+      gap: var(--consonant-merch-spacing-xxs);
+      padding: var(--consonant-merch-spacing-xs);
+      padding-inline-end: 0;
+      width: 154px;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex: 1 0 0;
+    }
+
+    :host([variant='ccd-slice']) ::slotted([slot='body-s']) ::slotted(a:not(.con-button)) {
+      font-size: var(--consonant-merch-card-body-xxs-font-size);
+      font-style: normal;
+      font-weight: 400;
+      line-height: var(--consonant-merch-card-body-xxs-line-height);
+      text-decoration-line: underline;
+      color: var(--merch-color-grey-80);
+    }
+
+    :host([variant='ccd-slice']) ::slotted([slot='image']) {
+      display: flex;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--consonant-merch-card-ccd-slice-background-img-size);
+      height: var(--consonant-merch-card-ccd-slice-background-img-size);
+      overflow: hidden;
+      border-radius: 50%;
+      padding: var(--consonant-merch-spacing-xs);
+      align-self: center;
+    }
+
+    :host([variant='ccd-slice']) ::slotted([slot='image']) img {
+      overflow: hidden;
+      border-radius: 50%;
+      width: inherit;
+      height: inherit;
+    }
+  `;
+}

libs/features/mas/web-components/src/variants/variants.js

@@ -8,6 +8,7 @@ import { Product } from './product.js';
 import { Segment } from './segment.js';
 import { SpecialOffer } from './special-offer.js';
 import { TWP } from './twp.js';
+import { CCDSlice } from './ccd-slice.js';
 
 const getVariantLayout = (card, mustMatch = false) => {
     switch (card.variant) {
@@ -31,6 +32,8 @@ const getVariantLayout = (card, mustMatch = false) => {
             return new SpecialOffer(card);
         case 'twp':
             return new TWP(card);
+        case 'ccd-slice':
+            return new CCDSlice(card);
         default:
             return mustMatch ? undefined : new Product(card);
     }
@@ -45,6 +48,7 @@ const getVariantStyles = () => {
     styles.push(Segment.variantStyle);
     styles.push(SpecialOffer.variantStyle);
     styles.push(TWP.variantStyle);
+    styles.push(CCDSlice.variantStyle);
     return styles;
 };
 

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Merch Card CCD SliceWeb Component demo page</title>
+    <script>
+        window.process = {
+            env: {},
+        };
+    </script>
+    <style>
+        main {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            flex-direction: column;
+            padding-top: 80px;
+        }
+
+    </style>
+</head>
+
+<body>
+    <script type="module" src="./merch-card.ccd-slice.test.html.js"></script>
+    <main>
+      <sp-theme theme="spectrum" color="light" scale="medium">
+          <merch-card class="" tabindex="0" variant="ccd-slice" filters="" types="">
+            <sp-status-light size="l" variant="info" dir="ltr"></sp-status-light>
+            <merch-icon
+              slot="icons"
+              src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/photoshop.svg"
+              alt=""
+              href=""
+              size="l"
+              >undefined</merch-icon
+            >
+            <merch-icon
+              slot="icons"
+              src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/lightroom.svg"
+              alt=""
+              href=""
+              size="l"
+              >undefined</merch-icon
+            >
+            <p slot="body-s">
+              <strong>Creative Cloud Photography plan.<br>
+              Starting at US$19.99/mo
+              </strong>
+            </p>
+            <div slot="footer">
+                <sp-button size="s" focusable>Buy now</sp-button>
+            </div>
+            <div slot="image">
+              <img src="./img/pixel.png" alt="">
+            </div>
+            </merch-card
+          >
+  <merch-card size="wide" class="" tabindex="0" variant="ccd-slice" filters="" types="">
+    <sp-status-light size="l" variant="info" dir="ltr"></sp-status-light>
+    <merch-icon
+      slot="icons"
+      src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/creative-cloud.svg"
+      alt=""
+      href=""
+      size="l"
+      >undefined</merch-icon
+    >
+    <p slot="body-s">
+      <strong>Save over 30% on Creative Cloud All Apps. Register for MAX by August 31 and save US$200 on a full conference pass.</strong>
+      <br><a href="https://www.adobe.com/creativecloud/all-apps.html" target="_blank">See terms</a>
+            </p>
+    <div slot="footer">
+        <sp-button size="s" focusable>Register now</sp-button>
+    </div>
+    <div slot="image">
+      <img src="./img/pixel.png" alt="">
+    </div>
+    </merch-card>
+  </sp-theme>
+</main>
+</body>
+</html>

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html.js

@@ -0,0 +1,37 @@
+// @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';
+
+const skipTests = sessionStorage.getItem('skipTests');
+
+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="ccd-slice"]')).to.exist;
+      });
+
+      it('should have correct attributes for the ccd-slice wide card', async () => {
+          const ccdSliceWideCard = document.querySelector('merch-card[variant="ccd-slice"][size="wide"]');
+          expect(ccdSliceWideCard.getAttribute('variant')).to.equal('ccd-slice');
+          expect(ccdSliceWideCard.getAttribute('size')).to.equal('wide');
+      });
+    });
+
+});

libs/features/mas/web-components/test/merch-twp-d2p.test.html

@@ -86,7 +86,7 @@
 
     </div>
     <template id="merch-twp-d2p">
-        <sp-theme theme="spectrum" color="light" scale="large">
+      <sp-theme theme="spectrum" color="light" scale="large">
             <sp-dialog-base slot="click-content" dismissable underlay no-divider>
                 <sp-icon-close-circle size="l"></sp-icon-close-circle>
                 <merch-twp-d2p>