init

adobecom · Jan 17, 2025 · 08ce83b · 08ce83b
1 parent aae89dd
commit 08ce83b
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 12 deletions.
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
@@ -1694,7 +1694,7 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         font-size: 14px;
         line-height: 18px;
     }
-`;var uc={mnemonics:{size:"s"},title:{tag:"h3",slot:"heading-xxxs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},De=class extends P{constructor(t){super(t),this.card.spectrum="swc",this.updateComplete}getGlobalCSS(){return Wo}get aemFragmentMapping(){return uc}renderLayout(){return x`
+`;var uc={mnemonics:{size:"s"},backgroundImage:{tag:"div",slot:"image"},title:{tag:"h3",slot:"heading-xxxs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},De=class extends P{constructor(t){super(t),this.card.spectrum="swc",this.updateComplete}getGlobalCSS(){return Wo}get aemFragmentMapping(){return uc}renderLayout(){return x`
         <div class="header">
     		    <slot name="icons"></slot>
             <slot name="heading-xxxs"></slot>
@@ -1704,10 +1704,11 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         <div class="footer">
           <slot name="cta"></slot>
         </div>
+        <slot name="image"></slot>
       <slot></slot>
     `}};p(De,"variantStyle",C`
     :host([variant='ah-single-plan']) {
-        --merch-card-ah-single-plan-width: 132px;
+        --merch-card-ah-single-plan-width: 484px;
         --merch-card-ah-single-plan-height: 212px;
         --merch-card-ah-single-plan-heading-color: rgba(44, 44, 44, 1);
         --merch-card-ah-single-plan-gray-background: rgba(248, 248, 248, 1);

diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
@@ -1719,7 +1719,7 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         font-size: 14px;
         line-height: 18px;
     }
-`;var Bo={mnemonics:{size:"s"},title:{tag:"h3",slot:"heading-xxxs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},q=class extends E{constructor(t){super(t),this.card.spectrum="swc",this.updateComplete}getGlobalCSS(){return Ur}get aemFragmentMapping(){return Bo}renderLayout(){return ko`
+`;var Bo={mnemonics:{size:"s"},backgroundImage:{tag:"div",slot:"image"},title:{tag:"h3",slot:"heading-xxxs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},q=class extends E{constructor(t){super(t),this.card.spectrum="swc",this.updateComplete}getGlobalCSS(){return Ur}get aemFragmentMapping(){return Bo}renderLayout(){return ko`
         <div class="header">
     		    <slot name="icons"></slot>
             <slot name="heading-xxxs"></slot>
@@ -1729,10 +1729,11 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         <div class="footer">
           <slot name="cta"></slot>
         </div>
+        <slot name="image"></slot>
       <slot></slot>
     `}};p(q,"variantStyle",Io`
     :host([variant='ah-single-plan']) {
-        --merch-card-ah-single-plan-width: 132px;
+        --merch-card-ah-single-plan-width: 484px;
         --merch-card-ah-single-plan-height: 212px;
         --merch-card-ah-single-plan-heading-color: rgba(44, 44, 44, 1);
         --merch-card-ah-single-plan-gray-background: rgba(248, 248, 248, 1);

diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
@@ -1694,7 +1694,7 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         font-size: 14px;
         line-height: 18px;
     }
-`;var uc={mnemonics:{size:"s"},title:{tag:"h3",slot:"heading-xxxs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},De=class extends P{constructor(t){super(t),this.card.spectrum="swc",this.updateComplete}getGlobalCSS(){return Wo}get aemFragmentMapping(){return uc}renderLayout(){return x`
+`;var uc={mnemonics:{size:"s"},backgroundImage:{tag:"div",slot:"image"},title:{tag:"h3",slot:"heading-xxxs"},description:{tag:"div",slot:"body-xxs"},prices:{tag:"p",slot:"price"},ctas:{slot:"cta",size:"S"},allowedColors:["gray"]},De=class extends P{constructor(t){super(t),this.card.spectrum="swc",this.updateComplete}getGlobalCSS(){return Wo}get aemFragmentMapping(){return uc}renderLayout(){return x`
         <div class="header">
     		    <slot name="icons"></slot>
             <slot name="heading-xxxs"></slot>
@@ -1704,10 +1704,11 @@ merch-card[variant="ccd-slice"] [slot='body-s'] a.spectrum-Link {
         <div class="footer">
           <slot name="cta"></slot>
         </div>
+        <slot name="image"></slot>
       <slot></slot>
     `}};p(De,"variantStyle",C`
     :host([variant='ah-single-plan']) {
-        --merch-card-ah-single-plan-width: 132px;
+        --merch-card-ah-single-plan-width: 484px;
         --merch-card-ah-single-plan-height: 212px;
         --merch-card-ah-single-plan-heading-color: rgba(44, 44, 44, 1);
         --merch-card-ah-single-plan-gray-background: rgba(248, 248, 248, 1);

diff --git a/libs/features/mas/docs/adobe-home.html b/libs/features/mas/docs/adobe-home.html
@@ -98,6 +98,35 @@ <h1 id="ah-gallery" tabindex="-1">
         ToDo: Implement theme switch once dark theme designs are ready
         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> -->
 
+                <div class="adobe-home-container">
+                    <h2 id="ah-pricing-widget" tabindex="-1">
+                        Adobe Home Pricing Widget
+                        <a
+                            class="header-anchor"
+                            href="#ah-pricing-widget"
+                            title="Permalink to this heading"
+                            >#</a
+                        >
+                    </h2>
+                    <div class="three-merch-cards ah-pricing-widget">
+                        <merch-card
+                            ><aem-fragment
+                                fragment="44520fdc-f6e1-4c21-8978-9cd25a1be158"
+                            ></aem-fragment
+                        ></merch-card>
+                        <merch-card
+                            ><aem-fragment
+                                fragment="dc4605b3-64ec-4b21-981a-b363835abe0d"
+                            ></aem-fragment
+                        ></merch-card>
+                        <merch-card
+                            ><aem-fragment
+                                fragment="dca47eeb-eab3-4000-84ad-c70d41ba2b01"
+                            ></aem-fragment
+                        ></merch-card>
+                    </div>
+                </div>
+
                 <div class="adobe-home-container">
                     <h2 id="ah-single-plan" tabindex="-1">
                         Adobe Home Single Plan
@@ -108,10 +137,10 @@ <h2 id="ah-single-plan" tabindex="-1">
                             >#</a
                         >
                     </h2>
-                    <div class="three-merch-cards ah-single-plan">
+                    <div class="ah-single-plan">
                         <merch-card
                             ><aem-fragment
-                                fragment="d61c8b50-184c-40af-be3e-87ad3990ebcf"
+                                fragment="8058f4b0-309b-44be-9ae8-1494d8cfa6c4"
                             ></aem-fragment
                         ></merch-card>
                     </div>

diff --git a/libs/features/mas/docs/styles.css b/libs/features/mas/docs/styles.css
@@ -209,20 +209,21 @@ merch-card[variant='ccd-slice'][size='wide'] {
     border-radius: 16px;
     background: #ffffff;
     box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
+    margin-block: 20px;
 }
 
-.three-merch-cards.ah-single-plan {
+.three-merch-cards.ah-pricing-widget {
     grid-template-columns: repeat(3, minmax(156px, 0px));
 }
 
 @media screen and (min-width: 644px) {
-    .three-merch-cards.ah-single-plan {
+    .three-merch-cards.ah-pricing-widget {
         grid-template-columns: repeat(2, minmax(156px, 322px));
     }
 }
 
 @media screen and (min-width: 966px) {
-    .three-merch-cards.ah-single-plan {
+    .three-merch-cards.ah-pricing-widget {
         grid-template-columns: repeat(3, minmax(156px, 322px));
     }
 }

diff --git a/libs/features/mas/src/variants/ah-single-plan.js b/libs/features/mas/src/variants/ah-single-plan.js
@@ -4,6 +4,7 @@ import { CSS } from './ah-single-plan.css.js';
 
 const AEM_FRAGMENT_MAPPING = {
   mnemonics: { size: 's' },
+  backgroundImage: { tag: 'div', slot: 'image' },
   title: { tag: 'h3', slot: 'heading-xxxs' },
   description: { tag: 'div', slot: 'body-xxs' },
   prices: { tag: 'p', slot: 'price' },
@@ -39,13 +40,14 @@ export class AHSinglePlan extends VariantLayout {
         <div class="footer">
           <slot name="cta"></slot>
         </div>
+        <slot name="image"></slot>
       <slot></slot>
     `;
   }
 
   static variantStyle = css`
     :host([variant='ah-single-plan']) {
-        --merch-card-ah-single-plan-width: 132px;
+        --merch-card-ah-single-plan-width: 484px;
         --merch-card-ah-single-plan-height: 212px;
         --merch-card-ah-single-plan-heading-color: rgba(44, 44, 44, 1);
         --merch-card-ah-single-plan-gray-background: rgba(248, 248, 248, 1);