MWPW-161354: MAS: export variant metadata

libs/features/mas/docs/ccd.html

@@ -56,16 +56,16 @@
       <div class="gallery-content">
 
         <h1 id="ccd-gallery">CCD Gallery <a class="header-anchor" href="#ccd-gallery" href="#ccd-gallery" title="Permalink to this heading">#</a></h1>
-        Switch Theme: <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('darkest');">Darkest</a> OR <a class="spectrum-Link pectrum-Link--secondary" href="javascript:toggleTheme('light');">Light</a>
+        Switch Theme: <a class="spectrum-Link spectrum-Link--secondary" href="javascript:toggleTheme('darkest');">Darkest</a> OR <a class="spectrum-Link spectrum-Link--secondary" href="javascript:toggleTheme('light');">Light</a>
 
         <h2 id="ccd-slice-card">CCD Slice Cards <a class="header-anchor" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
         <div class="three-merch-cards ccd-slice">
-            <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></aem-fragment></merch-card>
-            <merch-card><aem-fragment fragment="c13897c7-de77-4e45-b23b-eec9fd66cad1"></aem-fragment></merch-card>  
-            <merch-card><aem-fragment fragment="58c7906f-70a6-4e2b-bc29-257ff2ade513"></aem-fragment></merch-card>
-            <merch-card><aem-fragment fragment="51c23f28-504f-450d-9764-0e60f1e279b2"></aem-fragment></merch-card>
-            <merch-card><aem-fragment fragment="2a293069-1f9a-45ae-9840-2fa0303fe685"></aem-fragment></merch-card>
-            <merch-card><aem-fragment fragment="3d26df5b-0784-4967-8149-8a9e59131084"></aem-fragment></merch-card>
+          <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></aem-fragment></merch-card>
+          <merch-card><aem-fragment fragment="c13897c7-de77-4e45-b23b-eec9fd66cad1"></aem-fragment></merch-card>  
+          <merch-card><aem-fragment fragment="58c7906f-70a6-4e2b-bc29-257ff2ade513"></aem-fragment></merch-card>
+          <merch-card><aem-fragment fragment="51c23f28-504f-450d-9764-0e60f1e279b2"></aem-fragment></merch-card>
+          <merch-card><aem-fragment fragment="2a293069-1f9a-45ae-9840-2fa0303fe685"></aem-fragment></merch-card>
+          <merch-card><aem-fragment fragment="3d26df5b-0784-4967-8149-8a9e59131084"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="bdf40d06-5914-4f1f-aa10-77c5676fe671"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="31205553-b453-4c9e-a2ef-7b6aa7bfdc72"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="f3e5f2e7-df41-4300-87b9-465b3ad11abc"></aem-fragment></merch-card>

libs/features/mas/docs/styles.css

@@ -105,10 +105,6 @@ button {
   margin-top: 16px;
 }
 
-.gallery-content {
-  padding: 30px;
-}
-
 code {
   max-width: 90vw;
 }
@@ -117,43 +113,49 @@ code {
   color: #fbecec;
 }
 
+merch-card {
+  width: 100%;
+}
+
 .gallery-content .three-merch-cards {
+  max-width: 322px;
   justify-content: start;
+  grid-auto-flow: row;
 }
 
-.three-merch-cards.ccd-suggested {
-  grid-template-columns: minmax(270px, 305px);
+.three-merch-cards.ccd-slice {
+  grid-template-columns: minmax(290px, 322px);
 }
 
 @media screen and (min-width: 644px) {
-  .three-merch-cards.ccd-suggested {
-    grid-template-columns: repeat(2, minmax(270px, 305px));
+  merch-card[variant="ccd-slice"][size="wide"] {
+    grid-column: span 2;
   }
-}
 
-@media screen and (min-width: 966px) {
-  .three-merch-cards.ccd-suggested {
-    grid-template-columns: repeat(3, minmax(270px, 305px));
+  .three-merch-cards.ccd-slice {
+    grid-template-columns: repeat(2, 322px);
   }
 }
 
-merch-card[variant="ccd-slice"][size="wide"] {
-  grid-column: span 2;
+@media screen and (min-width: 966px) {
+  .three-merch-cards.ccd-slice {
+    grid-template-columns: repeat(3, 322px);
+  }
 }
 
-.three-merch-cards.ccd-slice {
-  grid-template-columns: minmax(290px, 322px);
+.three-merch-cards.ccd-suggested {
+  grid-template-columns: minmax(270px, 305px);
 }
 
 @media screen and (min-width: 644px) {
-  .three-merch-cards.ccd-slice {
-    grid-template-columns: repeat(2, minmax(290px, 322px));
+  .three-merch-cards.ccd-suggested {
+    grid-template-columns: repeat(2, minmax(270px, 305px));
   }
 }
 
 @media screen and (min-width: 966px) {
-  .three-merch-cards.ccd-slice {
-    grid-template-columns: repeat(3, minmax(290px, 322px));
+  .three-merch-cards.ccd-suggested {
+    grid-template-columns: repeat(3, minmax(270px, 305px));
   }
 }
 

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

@@ -1,6 +1,10 @@
 import { LitElement } from 'lit';
 import { sizeStyles, styles } from './merch-card.css.js';
-import { getVariantLayout, getVariantStyles } from './variants/variants.js';
+import {
+    getVariantLayout,
+    getVariantStyles,
+    variantFragmentMappings,
+} from './variants/variants.js';
 
 import './global.css.js';
 import {
@@ -43,7 +47,7 @@
         actionMenu: { type: Boolean, attribute: 'action-menu' },
         customHr: { type: Boolean, attribute: 'custom-hr' },
         consonant: { type: Boolean, attribute: 'consonant' },
-        spectrum: { type: String, attribute: 'spectrum' }, /* css|swc */
+        spectrum: { type: String, attribute: 'spectrum' } /* css|swc */,
         detailBg: { type: String, attribute: 'detail-bg' },
         secureLabel: { type: String, attribute: 'secure-label' },
         checkboxLabel: { type: String, attribute: 'checkbox-label' },
@@ -95,7 +99,11 @@
             reflect: true,
         },
         merchOffer: { type: Object },
-        analyticsId: { type: String, attribute: ANALYTICS_SECTION_ATTR, reflect: true },
+        analyticsId: {
+            type: String,
+            attribute: ANALYTICS_SECTION_ATTR,
+            reflect: true,
+        },
     };
 
     static styles = [styles, getVariantStyles(), ...sizeStyles()];
@@ -116,6 +124,10 @@
         this.handleAemFragmentEvents = this.handleAemFragmentEvents.bind(this);
     }
 
+    static getFragmentMapping(variant) {
+        return variantFragmentMappings[variant];
+    }
+
     firstUpdated() {
         this.variantLayout = getVariantLayout(this, false);
         this.variantLayout?.connectedCallbackHook();
@@ -136,7 +148,10 @@
             changedProperties.has('badgeBackgroundColor') ||
             changedProperties.has('borderColor')
         ) {
-            this.style.setProperty('--consonant-merch-card-border', this.computedBorderStyle);
+            this.style.setProperty(
+                '--consonant-merch-card-border',
+                this.computedBorderStyle,
+            );
         }
         this.variantLayout?.postCardUpdateHook(changedProperties);
     }

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

@@ -4,8 +4,10 @@ import { isMobileOrTablet } from '../utils.js';
 import { EVENT_MERCH_CARD_ACTION_MENU_TOGGLE } from '../constants.js';
 import { CSS } from './catalog.css.js';
 
-const AEM_FRAGMENT_MAPPING = {
+export const CATALOG_AEM_FRAGMENT_MAPPING = {
+    size: ['wide', 'super-wide'],
     title: { tag: 'h3', slot: 'heading-xs' },
+    badge: true,
     prices: { tag: 'h3', slot: 'heading-xs' },
     description: { tag: 'div', slot: 'body-xs' },
     ctas: { slot: 'footer', size: 'm' },
@@ -19,7 +21,7 @@ export class Catalog extends VariantLayout {
 
     /* c8 ignore next 3 */
     get aemFragmentMapping() {
-        return AEM_FRAGMENT_MAPPING;
+        return CATALOG_AEM_FRAGMENT_MAPPING;
     }
 
     renderLayout() {

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

@@ -2,8 +2,10 @@ import { VariantLayout } from './variant-layout.js';
 import { html, css } from 'lit';
 import { CSS } from './ccd-slice.css.js';
 
-export const AEM_FRAGMENT_MAPPING = {
+export const CCD_SLICE_AEM_FRAGMENT_MAPPING = {
+    size: ['wide'],
     mnemonics: { size: 'm' },
+    badge: true,
     backgroundImage: { tag: 'div', slot: 'image' },
     description: { tag: 'div', slot: 'body-s' },
     ctas: { slot: 'footer', size: 'S' },
@@ -17,15 +19,15 @@ export class CCDSlice extends VariantLayout {
 
     /* c8 ignore next 3 */
     get aemFragmentMapping() {
-        return AEM_FRAGMENT_MAPPING;
+        return CCD_SLICE_AEM_FRAGMENT_MAPPING;
     }
 
     renderLayout() {
         return html` <div class="content">
                 <div class="top-section">
-                  <slot name="icons"></slot> 
-                  ${this.badge}
-                </div>  
+                    <slot name="icons"></slot>
+                    ${this.badge}
+                </div>
                 <slot name="body-s"></slot>
                 <slot name="footer"></slot>
             </div>
@@ -36,11 +38,11 @@ export class CCDSlice extends VariantLayout {
     static variantStyle = css`
         :host([variant='ccd-slice']) {
             --consonant-merch-card-background-color: rgb(248, 248, 248);
-            --consonant-merch-card-border-color:rgb(230, 230, 230);
+            --consonant-merch-card-border-color: rgb(230, 230, 230);
             --consonant-merch-card-body-s-color: rgb(34, 34, 34);
             --merch-color-inline-price-strikethrough: var(--spectrum-gray-600);
             --mod-img-height: 29px;
-            
+
             box-sizing: border-box;
             min-width: 290px;
             max-width: 322px;
@@ -53,7 +55,7 @@ export class CCDSlice extends VariantLayout {
         }
 
         :host([variant='ccd-slice']) * {
-          overflow: hidden;
+            overflow: hidden;
         }
 
         :host([variant='ccd-slice']) ::slotted([slot='body-s']) {
@@ -66,7 +68,7 @@ export class CCDSlice extends VariantLayout {
         }
 
         :host([variant='ccd-slice'][size='wide']) ::slotted([slot='body-s']) {
-          max-width: 425px;
+            max-width: 425px;
         }
 
         :host([variant='ccd-slice'][size='wide']) {

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

@@ -2,8 +2,10 @@ import { html, css } from 'lit';
 import { VariantLayout } from './variant-layout.js';
 import { CSS } from './ccd-suggested.css.js';
 
-const AEM_FRAGMENT_MAPPING = {
+export const CCD_SUGGESTED_AEM_FRAGMENT_MAPPING = {
+    size: [],
     mnemonics: { size: 'l' },
+    badge: true,
     subtitle: { tag: 'h4', slot: 'detail-s' },
     title: { tag: 'h3', slot: 'heading-xs' },
     prices: { tag: 'p', slot: 'price' },
@@ -18,7 +20,7 @@ export class CCDSuggested extends VariantLayout {
 
     /* c8 ignore next 3 */
     get aemFragmentMapping() {
-        return AEM_FRAGMENT_MAPPING;
+        return CCD_SUGGESTED_AEM_FRAGMENT_MAPPING;
     }
 
     get stripStyle() {
@@ -53,8 +55,7 @@ export class CCDSuggested extends VariantLayout {
     }
 
     postCardUpdateHook(changedProperties) {
-        if (changedProperties.has('backgroundImage'))
-            this.styleBackgroundImage();
+        if (changedProperties.has(' dImage')) this.styleBackgroundImage();
     }
 
     styleBackgroundImage() {

libs/features/mas/src/variants/special-offer.js

@@ -2,7 +2,7 @@
 import { VariantLayout } from './variant-layout';
 import { CSS } from './special-offer.css.js';
 
-const AEM_FRAGMENT_MAPPING = {
+export const SPECIAL_OFFERS_AEM_FRAGMENT_MAPPING = {
     name: { tag: 'h4', slot: 'detail-m' },
     title: { tag: 'h4', slot: 'detail-m' },
     backgroundImage: { tag: 'div', slot: 'bg-image' },
@@ -25,7 +25,7 @@
     }
 
     get aemFragmentMapping() {
-        return AEM_FRAGMENT_MAPPING;
+        return SPECIAL_OFFERS_AEM_FRAGMENT_MAPPING;
     }
 
     renderLayout() {

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

@@ -1,14 +1,20 @@
-import { Catalog } from './catalog.js';
+import { Catalog, CATALOG_AEM_FRAGMENT_MAPPING } from './catalog.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 {
+    SPECIAL_OFFERS_AEM_FRAGMENT_MAPPING,
+    SpecialOffer,
+} from './special-offer.js';
 import { TWP } from './twp.js';
-import { CCDSuggested } from './ccd-suggested.js';
-import { CCDSlice } from './ccd-slice.js';
+import {
+    CCD_SUGGESTED_AEM_FRAGMENT_MAPPING,
+    CCDSuggested,
+} from './ccd-suggested.js';
+import { CCD_SLICE_AEM_FRAGMENT_MAPPING, CCDSlice } from './ccd-slice.js';
 
 const getVariantLayout = (card, mustMatch = false) => {
     switch (card.variant) {
@@ -31,14 +37,28 @@ const getVariantLayout = (card, mustMatch = false) => {
         case 'twp':
             return new TWP(card);
         case 'ccd-suggested':
-              return new CCDSuggested(card);
+            return new CCDSuggested(card);
         case 'ccd-slice':
             return new CCDSlice(card);
         default:
             return mustMatch ? undefined : new Product(card);
     }
 };
 
+export const variantFragmentMappings = {
+    catalog: CATALOG_AEM_FRAGMENT_MAPPING,
+    image: null,
+    'inline-heading': null,
+    'mini-compare-chart': null,
+    plans: null,
+    product: null,
+    segment: null,
+    'special-offers': SPECIAL_OFFERS_AEM_FRAGMENT_MAPPING,
+    twp: null,
+    'ccd-suggested': CCD_SUGGESTED_AEM_FRAGMENT_MAPPING,
+    'ccd-slice': CCD_SLICE_AEM_FRAGMENT_MAPPING,
+};
+
 const getVariantStyles = () => {
     const styles = [];
     styles.push(Catalog.variantStyle);

libs/features/mas/test/hydrate.test.js

@@ -18,7 +18,7 @@ import {
     processDescription,
     updateLinksCSS,
 } from '../src/hydrate.js';
-import { AEM_FRAGMENT_MAPPING } from '../src/variants/ccd-slice.js';
+import { CCD_SLICE_AEM_FRAGMENT_MAPPING } from '../src/variants/ccd-slice.js';
 
 import { mockFetch } from './mocks/fetch.js';
 import { withWcs } from './mocks/wcs.js';
@@ -481,7 +481,7 @@ describe('hydrate', () => {
                 tags: ['mas:term/montly', 'mas:product_code/ccsn'],
             },
         };
-        merchCard.variantLayout = { aemFragmentMapping: AEM_FRAGMENT_MAPPING };
+        merchCard.variantLayout = { aemFragmentMapping: CCD_SLICE_AEM_FRAGMENT_MAPPING };
         await hydrate(fragment, merchCard);
 
         expect(merchCard.getAttribute(ANALYTICS_SECTION_ATTR)).to.equal('ccsn');