MWPW-160511: badge & switch to AEM Prod (#3094)

* fix fonts & add badge * fix merge issue * switch to odin prod * remove banner * fix typo * fix flacky test
adobecom · Nov 4, 2024 · 277e00f · 277e00f
1 parent 89cc1e3
commit 277e00f
Show file tree

Hide file tree

Showing 19 changed files with 223 additions and 141 deletions.
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
diff --git a/libs/features/mas/build-docs.mjs b/libs/features/mas/build-docs.mjs
@@ -88,6 +88,7 @@ const htmlTemplate = `
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

diff --git a/libs/features/mas/docs/ccd.html b/libs/features/mas/docs/ccd.html
@@ -34,7 +34,8 @@
       });
       document.head.appendChild(masCommerceService);
     </script>
-    <link rel="stylesheet" href="../../../styles/styles.css">
+    <!-- Fonts -->
+    <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
     <!-- Include any additional stylesheets -->
     <link rel="stylesheet" href="styles.css">
 </head>
@@ -43,22 +44,23 @@
   <main>
     <sp-theme color="light" scale="medium"> 
       <div class="gallery-content">
-        <div class="vpn-banner">
-          Please enable VPN
-        </div>
 
         <h1 id="ccd-gallery" tabindex="-1">CCD Gallery <a class="header-anchor" href="#ccd-gallery" href="#ccd-gallery" title="Permalink to this heading">#</a></h1>
         Switch Theme: <a href="?theme=dark">Dark</a> OR <a href="?theme=light">Light</a>
 
         <h2 id="ccd-slice-card" tabindex="-1">CCD Slice Card <a class="header-anchor" href="#ccd-slice-card" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
         <div class="gallery-grid-3">
-          <h5>Percentage</h5>
-          <h5>Two icons & pricing</h5>
-          <h5>See Terms link</h5>
+          <h3>Percentage</h3>
+          <h3>Two icons & pricing</h3>
+          <h3>See Terms link</h3>
           <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></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>
+            <h3>Arbitrary Text</h3>
+            <h3>With Badge</h3>
+            <h3></h3>
           <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>
         </div>
 
         <h2 id="ccd-slice-wide-card" tabindex="-1">CCD Slice Wide Card <a class="header-anchor" href="#ccd-slice-wide-card" href="#ccd-slice-wide-card" title="Permalink to this heading">#</a></h2>
@@ -69,20 +71,21 @@ <h2 id="ccd-slice-wide-card" tabindex="-1">CCD Slice Wide Card <a class="header-
 
         <h2 id="ccd-suggested-card" tabindex="-1">CCD Suggested Card <a class="header-anchor" href="#ccd-suggested-card" href="#ccd-suggested-card" title="Permalink to this heading">#</a></h2>
         <div class="gallery-grid-3">
-          <h5>With eyebrow</h5>
-          <h5>See Terms link</h5>
-          <h5>No eyebrow, price with term</h5>
+          <h3>With eyebrow</h3>
+          <h3>See Terms link</h3>
+          <h3>No eyebrow, price with term</h3>
           <merch-card><aem-fragment fragment="0a2ac7c9-1965-488e-beca-856849305313"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="549f6981-f5c8-4512-b41c-313d60f375b2"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="8b198434-f32d-4a77-8be0-cd6b9f7155b1"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="cdfae8c5-4129-43bc-a283-9ce46d07e21f"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="33c8f437-3c39-48cc-8afd-938a13af5732"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="45783ec8-ed85-4595-a445-3f018ac4ad9d"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="6217fb6d-e793-4235-af70-6f82401fc5de"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="215273c2-183d-41a1-983e-ccb462ace666"></aem-fragment></merch-card>
         </div>
         <div class="gallery-grid-2">
-          <h5>With thin strip</h5>
-          <h5>With wide strip</h5>
+          <h3>With thin strip</h3>
+          <h3>With wide strip</h3>
           <merch-card><aem-fragment fragment="93fdba19-3d43-49a7-ae48-0a10605da304"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="b253109f-9bc6-4ee2-8aea-1a0918b0b9c9"></aem-fragment></merch-card>
         </div>

diff --git a/libs/features/mas/docs/checkout-link.html b/libs/features/mas/docs/checkout-link.html
@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

diff --git a/libs/features/mas/docs/inline-price.html b/libs/features/mas/docs/inline-price.html
@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

diff --git a/libs/features/mas/docs/mas.html b/libs/features/mas/docs/mas.html
@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

diff --git a/libs/features/mas/docs/mas.js.html b/libs/features/mas/docs/mas.js.html
@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

diff --git a/libs/features/mas/docs/merch-card.html b/libs/features/mas/docs/merch-card.html
@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
@@ -167,7 +168,7 @@ <h3 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#pro
 <tbody>
 <tr>
 <td><code>updateComplete</code></td>
-<td>a promise that resolves when the <code>merch-card</code> finishes to execute render method. Doesn’t mean that card is ready, for that use ‘mas:ready’ or ‘mas:error’ event.</td>
+<td>a promise that resolves when the <code>merch-card</code> finishes to execute render method. Doesn’t mean that card is ready, for that use ‘mas:ready’ or ‘mas:error’ event. method. Doesn’t mean that card is ready, for that use ‘mas:ready’ or ‘mas:error’ event.</td>
 </tr>
 </tbody>
 </table>

diff --git a/libs/features/mas/docs/styles.css b/libs/features/mas/docs/styles.css
@@ -8,6 +8,7 @@ sp-theme {
   width: 100%;
   max-width: 1200px;
   font-family:
+    adobe-clean,
     var(
       --mod-body-sans-serif-font-family,
       var(--spectrum-body-sans-serif-font-family)
@@ -140,15 +141,3 @@ button {
   grid-template-columns: 1fr;
   gap: 20px;
 }
-
-.vpn-banner {
-  background-color: #f8d7da; /* Light red */
-  color: #721c24; /* Dark red text */
-  padding: 15px;
-  text-align: center;
-  border: 1px solid #f5c6cb;
-  border-radius: 5px;
-  font-family: Arial, sans-serif;
-  font-size: 18px;
-  margin-bottom: 20px;
-}
diff --git a/libs/features/mas/mas/dist/mas.js b/libs/features/mas/mas/dist/mas.js
diff --git a/libs/features/mas/package-lock.json b/libs/features/mas/package-lock.json
diff --git a/libs/features/mas/web-components/merch-card.md b/libs/features/mas/web-components/merch-card.md
@@ -114,7 +114,7 @@ Designs:
 
 | Name             | Description                                                      |
 | ---------------- | ---------------------------------------------------------------- |
-| `updateComplete` | a promise that resolves when the `merch-card` finishes to execute render method. Doesn't mean that card is ready, for that use 'mas:ready' or 'mas:error' event. |
+| `updateComplete` | a promise that resolves when the `merch-card` finishes to execute render method. Doesn't mean that card is ready, for that use 'mas:ready' or 'mas:error' event. method. Doesn’t mean that card is ready, for that use ‘mas:ready’ or ‘mas:error’ event. |
 
 ### Events
 

diff --git a/libs/features/mas/web-components/src/aem-fragment.js b/libs/features/mas/web-components/src/aem-fragment.js
@@ -6,7 +6,7 @@ sheet.replaceSync(':host { display: contents; }');
 
 const baseUrl =
     document.querySelector('meta[name="aem-base-url"]')?.content ??
-    'https://publish-p22655-e155390.adobeaemcloud.com';
+    'https://odin.adobe.com';
 
 const ATTRIBUTE_FRAGMENT = 'fragment';
 const ATTRIBUTE_IMS = 'ims';

diff --git a/libs/features/mas/web-components/src/global.css.js b/libs/features/mas/web-components/src/global.css.js
@@ -13,6 +13,9 @@ styles.innerHTML = `
     --consonant-merch-card-body-line-height: 21px;
     --consonant-merch-card-promo-text-height: var(--consonant-merch-card-body-font-size);
 
+    /* Fonts */
+    --merch-body-font-family: 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
+
     /* spacing */
     --consonant-merch-spacing-xxxs: 4px;
     --consonant-merch-spacing-xxs: 8px;
@@ -71,6 +74,8 @@ styles.innerHTML = `
     --merch-color-grey-10: #f6f6f6;
     --merch-color-grey-60: #6D6D6D;
     --merch-color-grey-80: #2c2c2c;
+    --merch-color-grey-200: #E8E8E8;
+    --merch-color-grey-600: #686868;
     --merch-color-green-promo: #2D9D78;
 
     /* merch card generic */

diff --git a/libs/features/mas/web-components/src/merch-card.css.js b/libs/features/mas/web-components/src/merch-card.css.js
@@ -10,7 +10,7 @@ export const styles = css`
         background-color: var(--merch-card-background-color);
         grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
         background-color: var(--merch-card-background-color);
-        font-family: var(--body-font-family, 'Adobe Clean');
+        font-family: var(--merch-body-font-family, 'Adobe Clean');
         border-radius: var(--consonant-merch-spacing-xs);
         border: 1px solid var(--consonant-merch-card-border-color);
         box-sizing: border-box;
@@ -78,7 +78,7 @@ export const styles = css`
     }
 
     hr {
-        background-color: var(--color-gray-200);
+        background-color: var(--merch-color-grey-200);
         border: none;
         height: 1px;
         width: auto;
@@ -137,7 +137,7 @@ export const styles = css`
     .secure-transaction-label {
         font-size: var(--consonant-merch-card-body-xxs-font-size);
         line-height: 1.3;
-        color: var(--color-gray-600);
+        color: var(--merch-color-grey-600);
     }
 
     #stock-checkbox {

diff --git a/libs/features/mas/web-components/src/merch-card.js b/libs/features/mas/web-components/src/merch-card.js
@@ -157,7 +157,7 @@ export class MerchCard extends LitElement {
     }
 
     get computedBorderStyle() {
-        if (!['twp', 'ccd-slice'].includes(this.variant)) {
+        if (!['twp', 'ccd-slice', 'ccd-suggested'].includes(this.variant)) {
             return `1px solid ${
                 this.borderColor ? this.borderColor : this.badgeBackgroundColor
             }`;

diff --git a/libs/features/mas/web-components/src/variants/ccd-suggested.js b/libs/features/mas/web-components/src/variants/ccd-suggested.js
@@ -25,7 +25,10 @@ export class CCDSuggested extends VariantLayout {
       return html`
           <div style="${this.stripStyle}" class="body">
               <div class="header">
-                <slot name="icons"></slot>
+                <div class="top-section">
+                  <slot name="icons"></slot> 
+                  ${this.badge}
+                </div>
                 <div class="headings">
                   <slot name="detail-s"></slot>
                   <slot name="heading-xs"></slot>
@@ -113,5 +116,14 @@ export class CCDSuggested extends VariantLayout {
       margin-top: auto;
       align-items: center;
     }
+
+    :host([variant='ccd-suggested']) div[class$='-badge'] {
+      position: static;
+      border-radius: 4px;
+    }
+
+    :host([variant='ccd-suggested']) .top-section {
+      align-items: center;
+    }
   `;
 };
diff --git a/test/blocks/notification/notification.test.js b/test/blocks/notification/notification.test.js
@@ -1,16 +1,15 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
-import { setConfig, getConfig } from '../../../libs/utils/utils.js';
-
-const mockBody = await readFile({ path: './mocks/body.html' });
-const { default: init } = await import('../../../libs/blocks/notification/notification.js');
+import { setConfig } from '../../../libs/utils/utils.js';
+import { delay } from '../../helpers/waitfor.js';
 
 const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
 const conf = { locales, miloLibs: 'http://localhost:2000/libs' };
 setConfig(conf);
-getConfig().locale.contentRoot = '/test/blocks/notification/mocks';
 
-document.head.innerHTML = '<link rel="stylesheet" href="../../../libs/blocks/notification/notification.css"><meta name="countdown-timer" content="2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST">';
+const mockBody = await readFile({ path: './mocks/body.html' });
+const { default: init } = await import('../../../libs/blocks/notification/notification.js');
+document.head.innerHTML = '<meta name="countdown-timer" content="2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST">';
 
 describe('notification', async () => {
   let notifs;
@@ -48,7 +47,8 @@ describe('notification', async () => {
       const border = notifs[2].querySelector(':scope > .border');
       expect(border).to.exist;
     });
-    it('has a cdt', () => {
+    it('has a cdt', async () => {
+      await delay(100);
       expect(notifs[15].querySelectorAll('.timer-label')).to.have.lengthOf(1);
     });
   });