MWPW-161355: Update MAS documentation

.hlxignore

@@ -10,3 +10,4 @@ web-test-runner.config.mjs
 codecov.yaml
 libs/features/mas/*
 !libs/features/mas/docs
+!libs/features/mas/mas

libs/features/mas/build-docs.mjs

@@ -25,8 +25,6 @@ if (!targetFile) {
     process.exit(1);
 }
 
-const skipMas = process.argv.includes('--skip-mas');
-
 // Initialize markdown-it with desired plugins
 const md = markdownIt({
     html: true,
@@ -76,14 +74,16 @@ const htmlTemplate = `
   </script>
   <!-- Include your custom element script as an ES6 module -->
   <script src="../../../features/spectrum-web-components/dist/theme.js" type="module"></script>
+  <script src="../../../features/spectrum-web-components/dist/action-button.js" type="module"></script>
   <script src="../../../features/spectrum-web-components/dist/button.js" type="module"></script>
-  <script type="module" src="../../../deps/mas/mas.js"></script>
+  <script type="module" src="../mas/dist/mas.js"></script>
 
   <script type="module">
     const params = new URLSearchParams(document.location.search);
     const masCommerceService = document.createElement('mas-commerce-service');
-    ['locale','language','env'].forEach((attribute) => {
-      const value = params.get(attribute);
+    ['locale','language','env','cli'].forEach((attribute) => {
+      let value = params.get(attribute);
+      if (value === 'cli') attribute = 'checkout-client-id';
       if (value) masCommerceService.setAttribute(attribute, value);
     });
     document.head.appendChild(masCommerceService);

libs/features/mas/commerce/checkout-link.md

@@ -164,29 +164,47 @@ For each event except `click`, the following css classes are toggled on the elem
 ### Example
 
 ```html {.demo}
-<a
-    id="co2"
-    href="#"
-    is="checkout-link"
-    data-wcs-osi="A1xn6EL4pK93bWjM8flffQpfEL-bnvtoQKQAvkx574M"
-    >Buy now (click me)</a
->
+<div id="eventsDemo">
+    <a
+        is="checkout-link"
+        data-wcs-osi="A1xn6EL4pK93bWjM8flffQpfEL-bnvtoQKQAvkx574M"
+        >Buy now (click me)</a
+    >
+    <br />
+    <a
+        is="checkout-link"
+        data-wcs-osi="A1xn6EL4pK93bWjM8flffQpfEL-bnvtoQKQAvkx574M"
+        ><span>Span + <strong>Strong + Buy now</strong></span></a
+    >
+</div>
 <button id="btnRefresh">Refresh</button>
 <script type="module">
     const log = document.getElementById('log');
     const logger = (...messages) =>
         (log.innerHTML = `${messages.join(' ')}<br>${log.innerHTML}`);
-    const a = document.getElementById('co2');
-    a.addEventListener('mas:pending', () => logger('checkout-link pending'));
-    a.addEventListener('mas:resolved', () => logger('checkout-link resolved'));
-    a.addEventListener('mas:failed', () => logger('checkout-link failed'));
-    a.addEventListener('click', (e) => {
+    const eventsDemo = document.getElementById('eventsDemo');
+    eventsDemo.addEventListener('mas:pending', () =>
+        logger('checkout-link pending'),
+    );
+    eventsDemo.addEventListener('mas:resolved', (e) =>
+        logger('checkout-link resolved'),
+    );
+    eventsDemo.addEventListener('mas:failed', () =>
+        logger('checkout-link failed'),
+    );
+    eventsDemo.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
-        logger('checkout link is clicked: ', e.target.href);
+        if (e.target.isCheckoutLink) {
+            logger('checkout link is clicked: ', e.target.href);
+        } else {
+            logger('element clicked: ', e.target);
+        }
     });
     document.getElementById('btnRefresh').addEventListener('click', () => {
-        a.requestUpdate(true);
+        [...eventsDemo.querySelectorAll('a')].forEach((a) =>
+            a.requestUpdate(true),
+        );
     });
 </script>
 ```

libs/features/mas/commerce/src/inline-price.js

@@ -174,6 +174,10 @@ export class InlinePrice extends HTMLSpanElement {
         return this.masElement.value;
     }
 
+    get options() {
+        return this.masElement.options;
+    }
+
     requestUpdate(force = false) {
         return this.masElement.requestUpdate(force);
     }

libs/features/mas/commerce/test/price.test.js

@@ -46,6 +46,29 @@ describe('class "InlinePrice"', () => {
         await inlinePrice.onceSettled();
         expect(inlinePrice.innerHTML).to.be.html(snapshots.price);
         expect(inlinePrice.value).to.be.not.empty;
+        expect(inlinePrice.options).to.be.not.empty;
+    });
+
+    it('re-dispatches click event', async () => {
+        await initMasCommerceService();
+        const inlinePrice = mockInlinePrice('puf');
+        let targetIsInlinePrice = false;
+        inlinePrice.addEventListener(
+            'click',
+            (event) => {
+                targetIsInlinePrice = event.target === inlinePrice;
+            },
+            { once: true },
+        );
+        await inlinePrice.onceSettled();
+        inlinePrice.firstElementChild.dispatchEvent(
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            }),
+        );
+        expect(targetIsInlinePrice).to.be.true;
     });
 
     it('re-dispatches click event', async () => {

libs/features/mas/docs/ccd.html

@@ -16,7 +16,7 @@
     </script>
     <!-- Include your custom element script as an ES6 module -->
     <script src="../../../features/spectrum-web-components/dist/button.js" type="module"></script>
-    <script type="module" src="../../../deps/mas/mas.js"></script>
+    <script type="module" src="../mas/mas/dist/mas.js"></script>
 
     <script type="module">
       const params = new URLSearchParams(document.location.search);
@@ -50,45 +50,84 @@ <h1 id="ccd-gallery" tabindex="-1">CCD Gallery <a class="header-anchor" href="#c
 
         <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">
-          <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>
+          <div>
+            <h3>Percentage</h3>
+            <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>Two icons & pricing</h3>
+            <merch-card><aem-fragment fragment="58c7906f-70a6-4e2b-bc29-257ff2ade513"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>See Terms link</h3>
+            <merch-card><aem-fragment fragment="51c23f28-504f-450d-9764-0e60f1e279b2"></aem-fragment></merch-card>
+          </div>
+          <div>
             <h3>Arbitrary Text</h3>
+            <merch-card><aem-fragment fragment="2a293069-1f9a-45ae-9840-2fa0303fe685"></aem-fragment></merch-card>
+          </div>
+          <div>
             <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>
         </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>
         <div class="gallery-grid-1">
-          <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>
+          <div>
+            <h3>Slice Wide</h3>
+            <merch-card><aem-fragment fragment="bdf40d06-5914-4f1f-aa10-77c5676fe671"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>Slice Wide with Badge</h3>
+            <merch-card><aem-fragment fragment="31205553-b453-4c9e-a2ef-7b6aa7bfdc72"></aem-fragment></merch-card>
+          </div>
         </div>
 
         <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">
-          <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>
+            <h3>With eyebrow</h3>
+            <merch-card><aem-fragment fragment="0a2ac7c9-1965-488e-beca-856849305313"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>See Terms link</h3>
+            <merch-card><aem-fragment fragment="549f6981-f5c8-4512-b41c-313d60f375b2"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>No eyebrow, price with term</h3>
+            <merch-card><aem-fragment fragment="8b198434-f32d-4a77-8be0-cd6b9f7155b1"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>With Image</h3>
+            <merch-card><aem-fragment fragment="cdfae8c5-4129-43bc-a283-9ce46d07e21f"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>Starting at & price</h3>
+            <merch-card><aem-fragment fragment="33c8f437-3c39-48cc-8afd-938a13af5732"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>Image & longer price</h3>
+            <merch-card><aem-fragment fragment="45783ec8-ed85-4595-a445-3f018ac4ad9d"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>Wide Image</h3>
+            <merch-card><aem-fragment fragment="6217fb6d-e793-4235-af70-6f82401fc5de"></aem-fragment></merch-card>
+          </div>
         </div>
         <div class="gallery-grid-2">
-          <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>
+          <div>
+            <h3>With thin strip</h3>
+            <merch-card><aem-fragment fragment="93fdba19-3d43-49a7-ae48-0a10605da304"></aem-fragment></merch-card>
+          </div>
+          <div>
+            <h3>With wide strip</h3>
+            <merch-card><aem-fragment fragment="b253109f-9bc6-4ee2-8aea-1a0918b0b9c9"></aem-fragment></merch-card>
+          </div>
+          </div>
       </div>
     </sp-theme>
     <script type="module">