MWPW-158473: CCD Suggested Card [Merch card]

libs/features/mas/web-components/src/global.css.js

@@ -29,6 +29,8 @@ styles.innerHTML = `
     --consonant-merch-card-cta-font-size: 15px;
 
     /* headings */
+    --consonant-merch-card-heading-xxs-font-size: 16px;
+    --consonant-merch-card-heading-xxs-line-height: 20px;
     --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;
@@ -68,6 +70,7 @@ styles.innerHTML = `
     --consonant-merch-card-border-color: #eaeaea;
     --color-accent: #1473E6;
     --merch-color-focus-ring: #1473E6;
+    --merch-color-grey-60: #6D6D6D;
     --merch-color-grey-80: #2c2c2c;
     --merch-color-green-promo: #2D9D78;
 

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

@@ -25,6 +25,8 @@ export class MerchCard extends LitElement {
             type: String,
             attribute: 'badge-background-color',
         },
+        stripSize: { type: String, attribute: 'strip-size' },
+        stripBackground: { type: String, attribute: 'strip-background' },
         badgeText: { type: String, attribute: 'badge-text' },
         actionMenu: { type: Boolean, attribute: 'action-menu' },
         actionMenuContent: { type: String, attribute: 'action-menu-content' },

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

@@ -8,6 +8,7 @@ const VARIANTS = {
     AH: 'ah',
     CCD_ACTION: 'ccd-action',
     SPECIAL_OFFERS: 'special-offers',
+    CCD_SUGGESTED: 'ccd-suggested',
 };
 
 const cardContent = {
@@ -37,6 +38,13 @@ const cardContent = {
         description: { tag: 'div', slot: 'body-xs' },
         ctas: { size: 'l' },
     },
+    [VARIANTS.CCD_SUGGESTED]: {
+        name: { tag: 'h4', slot: 'detail-m' },
+        title: { tag: 'h3', slot: 'heading-xs' },
+        prices: { tag: 'h3', slot: 'heading-xs' },
+        description: { tag: 'div', slot: 'body-xs' },
+        ctas: { size: 'l' },
+    },
 };
 
 async function parseMerchCard(fragmentData, appendFn, merchCard, consonant) {

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

@@ -0,0 +1,38 @@
+export const CSS = `
+:root {
+  --consonant-merch-card-ccd-suggested-width: 304px;
+  --consonant-merch-card-ccd-suggested-height: 205px;
+  --consonant-merch-card-ccd-suggested-background-img-size: 119px;
+}
+
+merch-card[variant="ccd-suggested"] [slot='detail-m'] {
+  color: var(--merch-color-grey-60);
+}
+
+merch-card[variant="ccd-suggested"] [slot='icons'] {
+    flex-flow: wrap;
+    place-self: flex-start;
+}
+
+merch-card[variant="ccd-suggested"] [slot='heading-xs'] {
+  font-size: var(--consonant-merch-card-heading-xxs-font-size);
+  line-height: var(--consonant-merch-card-heading-xxs-line-height);
+
+}
+
+merch-card[variant="ccd-suggested"] [slot='price'] {
+  display: flex;
+  align-items: center;
+}
+
+merch-card[variant="ccd-suggested"] [slot='cta'] {
+  display: flex;
+  align-items: center;
+}
+
+merch-card[variant="ccd-suggested"] [slot='cta'] a {
+  text-decoration: none;
+  color: var(--merch-color-grey-60);
+  font-weight: 500;
+}
+`;

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

@@ -0,0 +1,81 @@
+import { html, css } from 'lit';
+import { VariantLayout } from './variant-layout';
+import { CSS } from './ccd-suggested.css.js';
+
+export class CCDSuggested extends VariantLayout {
+  constructor(card) {
+    super(card);
+  }
+
+  getGlobalCSS() {
+    return CSS;
+  }
+
+  renderLayout () {
+      return html`
+          <div style="${this.stripStyle}" class="body">
+              <div class="top-secton">
+                <slot name="icons"></slot>
+                <div class="header">
+                  <slot name="detail-m"></slot>
+                  <slot name="heading-xs"></slot>
+                </div>
+              </div>
+              <slot name="body-xs"></slot>
+              <div class="footer">
+                <slot name="price"></slot>
+                <slot name="cta"></slot>
+              </div>
+          </div>
+                <slot></slot>`;
+  }
+
+  static variantStyle = css`
+    :host([variant='ccd-suggested']) {
+      width: var(--consonant-merch-card-ccd-suggested-width);
+      min-height: var(--consonant-merch-card-ccd-suggested-height);
+      border-radius: 4px;
+      display: flex;
+      flex-flow: wrap;
+    }
+
+    :host([variant='ccd-suggested']) .body {
+      height: auto;
+    }
+
+    :host([variant='ccd-suggested']) .top-secton {
+      display: flex;
+      flex-flow: wrap;
+      place-self: flex-start;
+    }
+
+    :host([variant='ccd-suggested']) .header {
+      padding-inline-start: var(--consonant-merch-spacing-xxs);
+    }
+
+    :host([variant='ccd-suggested'][strip-size='small']) {
+      width: 
+    }
+
+    :host([variant='ccd-suggested'][strip-size='wide']) ::slotted([slot='body-xs']) {
+      padding-inline-start: 48px;
+    }
+
+    :host([variant='ccd-suggested'][strip-size='wide']) ::slotted([slot='price']) {
+      padding-inline-start: 48px;
+    }
+
+    :host([variant='ccd-suggested']) slot[name='detail-m'] {
+      flex-flow: wrap;
+      place-self: flex-start;
+    }
+
+    :host([variant='ccd-suggested']) .footer {
+      display: flex;
+      justify-content: space-between;
+      flex-grow: 0;
+      margin-top: auto;
+      align-items: center;
+    }
+  `;
+};

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

@@ -63,6 +63,34 @@
   get headingSelector() {
     return '[slot="heading-xs"]';
   }
+
+
+
+  get strip() {
+    if (this.card.stripSize && this.card.stripBackground) {
+      switch (this.card.stripSize) {
+          case 'wide':
+              return '44px';
+          case 'small':
+              return '4px';
+          default:
+              return '0';
+      }
+    }
+    return '';
+  }
+
+  get stripStyle() {
+    if (this.strip && this.card.stripBackground) {
+      return `
+        background: ${this.card.stripBackground.startsWith('url') ? this.card.stripBackground : `url("${this.card.stripBackground}")`};
+        background-size: ${this.strip} 100%;
+        background-repeat: no-repeat;
+        background-position: left;
+      `;
+    }
+    return '';
+  }
 
   get secureLabelFooter() {
     const secureLabel = this.card.secureLabel

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 { CCDSuggested } from './ccd-suggested.js';
 
 const getVariantLayout = (card) => {
   switch (card.variant) {
@@ -31,6 +32,8 @@ const getVariantLayout = (card) => {
       return new SpecialOffer(card);
     case 'twp':
       return new TWP(card);
+    case 'ccd-suggested':
+      return new CCDSuggested(card);
     default:
       return new Product(card);
   }
@@ -45,6 +48,7 @@ const getVariantStyles = () => {
   styles.push(Segment.variantStyle);
   styles.push(SpecialOffer.variantStyle);
   styles.push(TWP.variantStyle);
+  styles.push(CCDSuggested.variantStyle);
   return styles;
 }