unit tests, strip slot and more

adobecom · Sep 19, 2024 · 329be3a · 329be3a
1 parent eb40fb4
commit 329be3a
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 54 deletions.
diff --git a/libs/features/mas/web-components/src/merch-card.js b/libs/features/mas/web-components/src/merch-card.js
@@ -147,20 +147,6 @@ export class MerchCard extends LitElement {
             ?.assignedElements()[0];
     }
 
-    get strip() {
-      if (this.stripSize && this.stripBackground) {
-        switch (this.stripSize) {
-            case 'wide':
-                return '44px';
-            case 'small':
-                return '4px';
-            default:
-                return '0';
-        }
-      }
-      return '';
-    }
-
     get price() {
         return this.headingmMSlot?.querySelector('span[is="inline-price"]');
     }

diff --git a/libs/features/mas/web-components/src/variants/ccd-suggested.css.js b/libs/features/mas/web-components/src/variants/ccd-suggested.css.js
@@ -20,6 +20,16 @@ merch-card[variant="ccd-suggested"] [slot='heading-xs'] {
 
 }
 
+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);

diff --git a/libs/features/mas/web-components/src/variants/ccd-suggested.js b/libs/features/mas/web-components/src/variants/ccd-suggested.js
@@ -11,22 +11,6 @@ export class CCDSuggested extends VariantLayout {
     return CSS;
   }
 
-  get headingSelector() {
-    return '[slot="detail-m"]';
-  }
-
-  get stripStyle() {
-    if (this.strip && this.stripBackground) {
-      return `
-        background: ${this.stripBackground};  
-        background-size: ${this.strip} 100%;
-        background-repeat: no-repeat;
-        background-position: left;
-      `;
-    }
-    return '';
-  }
-
   renderLayout () {
       return html`
           <div style="${this.stripStyle}" class="body">
@@ -69,6 +53,18 @@ export class CCDSuggested extends VariantLayout {
       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;
@@ -77,9 +73,9 @@ export class CCDSuggested extends VariantLayout {
     :host([variant='ccd-suggested']) .footer {
       display: flex;
       justify-content: space-between;
-      flex-grow: 1;
+      flex-grow: 0;
       margin-top: auto;
-      align-items: flex-end;
+      align-items: center;
     }
   `;
 };
diff --git a/libs/features/mas/web-components/src/variants/variant-layout.js b/libs/features/mas/web-components/src/variants/variant-layout.js
@@ -63,6 +63,34 @@ export class VariantLayout {
   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

diff --git a/libs/features/mas/web-components/test/merch-card.ccd-suggested.test.html b/libs/features/mas/web-components/test/merch-card.ccd-suggested.test.html
@@ -17,13 +17,19 @@
             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.ccd-suggested.test.html.js"></script>
     <main>
+      <sp-theme theme="spectrum" color="light" scale="medium">
           <merch-card class="" tabindex="0" variant="ccd-suggested" filters="" types="">
             <sp-status-light size="l" variant="info" dir="ltr"></sp-status-light>
             <merch-icon
@@ -84,6 +90,48 @@
           </div>
           </merch-card>
           <merch-card strip-size="wide" strip-background="./img/strip-wide.png" tabindex="0" variant="ccd-suggested" 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="detail-m">YOUR RECENT TRIAL</p>
+            <p slot="heading-xs"><strong>Try the All Apps plan</strong></p>
+            <p slot="body-xs">
+              Creative Cloud Photography plan.<br>
+              Starting at US$19.99/mo
+            </p>
+              <div slot="price">
+                <span
+          is="inline-price"
+          data-display-old-price="true"
+          data-display-per-unit="false"
+          data-promotion-code=""
+          data-quantity="1"
+          data-template="price"
+          data-wcs-osi="r_JXAnlFI7xD6FxWKl2ODvZriLYBoSL701Kd1hRyhe8"
+          class="placeholder-resolved"
+          ><span class="price" aria-label="US$35.99 per month"
+            ><span class="price-currency-symbol">US$</span
+            ><span class="price-currency-space disabled"></span
+            ><span class="price-integer">35</span
+            ><span class="price-decimals-delimiter">.</span
+            ><span class="price-decimals">99</span
+            ><span class="price-recurrence">/mo</span
+            ><span class="price-unit-type disabled"></span
+            ><span class="price-tax-inclusivity disabled"></span></span
+          ></span
+                >
+              </div>
+                <div slot="cta">
+                  <strong>Buy now</strong>
+                </div>
+          </merch-card>
+          <merch-card strip-size="small" strip-background="./img/strip-wide.png" tabindex="0" variant="ccd-suggested" filters="" types="">
             <sp-status-light size="l" variant="info" dir="ltr"></sp-status-light>
             <merch-icon
               slot="icons"
@@ -130,9 +178,10 @@
                 >
               </div>
                 <div slot="cta">
-
+                  <sp-button variant="secondary">Browse all tutorials</sp-button>
                 </div>
           </merch-card>
-</main>
+      </sp-theme>
+    </main>
 </body>
 </html>
diff --git a/libs/features/mas/web-components/test/merch-card.ccd-suggested.test.html.js b/libs/features/mas/web-components/test/merch-card.ccd-suggested.test.html.js
@@ -23,29 +23,18 @@ runTests(async () => {
 
     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 display a CTA', async () => {
-          const ccdSliceCard = document.querySelector(
-            'merch-card[variant="ccd-slice"]',
-          );
-          const shadowRoot = ccdSliceCard.shadowRoot;
-          const cta = ccdSliceCard.querySelector('.con-button');
-          expect(cta).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');
+          expect(document.querySelector('merch-card[variant="ccd-suggested"]')).to.exist;
       });
 
-      it('should display a CTA in the ccd-slice wide card', async () => {
-          const ccdSliceWideCard = document.querySelector('merch-card[variant="ccd-slice"][size="wide"]');
-          const cta = ccdSliceWideCard.querySelector('.con-button');
-          expect(cta).to.exist;
+      it('should have strip with size wide for the ccd-suggested wide card', async () => {
+          const ccdSliceWideCard = document.querySelector('merch-card[variant="ccd-suggested"][strip-size="wide"]');
+          expect(ccdSliceWideCard.getAttribute('variant')).to.equal('ccd-suggested');
       });
+
+      it('should have strip with size small for the ccd-suggested wide card', async () => {
+        const ccdSliceWideCard = document.querySelector('merch-card[variant="ccd-suggested"][strip-size="small"]');
+        expect(ccdSliceWideCard.getAttribute('variant')).to.equal('ccd-suggested');
+    });
     });
 
 });