MWPW-163845: Merch-card a11y fix for CTAs (#3403)

* MWPW-162385 add wcsApiKey attribute * MWPW-161355: Update MAS documentation (#3135) * MWPW-159374: Update hydrate logic to support all cta styles organise code and code coverage Update tests * add workaround for ccd-suggested cards * remove source maps * improve code coverage * merge MWPW-159374 * MWPW-161355: Update MAS documentation * Example with contextual menu * Checkout click event with correct event target when the CTA contains a text wrapped by a span * cleanup all attributes during card hydration * remove deps/mas/mas.js * update test * update doc * allow list libs/features/mas/mas/dist/mas.js * change order in ignore * trying with wildcard * allow list dist * update hlxignore rules * update hlxignore rules * MWPW-161176: restructure ccd gallery (#3169) restructure ccd gallery * fix mas path * fix undefined error in merch-icon * fix regression in ctas size * update doc * fix css with checkout-link * fix random rtl issue * revert removal of mas.js from deps * update ccd gallery --------- Co-authored-by: Mariia Lukianets <lukianet@adobe.com> * MWPW-161845: basic analytics on mas cards (#3206) * MWPW-161845: add analytics * fix review changes * add build files * MWPW-159191: MAS Freyja support (#3209) * initial freyja commit * increase codecov * trival * add qa support to ccd page * improve page performance * update ccd.html * MWPW-161804: Merch card style auditing (#3216) Refactor merch-card styles to improve structure and specificity * Added space after price recurrence label for display-per-unit prices (#3196) * Added space after price recurrence label for display-per-unit prices * more specific selector * built * fix cr * built * adding example * MWPW-162933: merge mas modules (#3248) * MWPW-162933: merge mas modules + consonant-templates module from tacocat.js into a single module * MWPW-160755 - add tests for CCD cards (#3256) * MWPW-160755 - add tests for CCD cards * refactor and prepare dark mode checks * add tests for slice cards * activate dark for suggested and eslint fixes * add check for cta variant * fix multi mnemonic check * fix lint * add analytics check * remove comment * MWPW-163041: analytics fix (#3257) * MWPW-163041: fix analytics & add docs * add tests for analytics * add analytics docu * fix test * Fix overriding of border style on merch cards (#3278) * Fix overriding of border style on merch cards * width change * built --------- Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com> * Bump timeout from 2 to 10 sec (#3282) * bump to 10 seconds * new change * MWPW-163479: Switch to Spectrum CSS from SWC CCD app already provides Spectrum CCS styles. * update doc style * update doc style * update doc style * update doc style * update doc style * update doc style * Update styles * update docs * Keep SWC logic as an option * MWPW-161645: lana logging for CCD (#3271) * MWPW-161645: lana logging for CCD with <mas-commerce-service data-lana-tags="consumer=ccd" ...> lana will be enabled. TODO: Update docs * Update tests * fix review comments * add host env attribute, fix lana override * fix docs * fix unit tests * start loggin missing osi's * fix message * fix message * Update libs/features/mas/src/lana.js Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> * PR review changes * avoid duplicate logging, log wcs url, limit page length in log * fix formatString error * fix render * add tests * fix loggin * revert ccd comments * fix milo tags --------- Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> * fix gaps with Spectrum CSS support * update version * fix gaps reported by ccd teamm * address gaps * address gaps * address gaps * address gaps * address gaps * fix for MWPW-163718 addressed design gaps. * addressed design gaps. * bump the version * add build artifacts * Update colors based on CCD app * Update colors based on CCD app * build without source maps * update Nala tests * fix lint * reset box-sizing for merch-card elements * Force box-sizing on merch-card * update styles: box-sizing * fix ccd gallery * update version * limit ccd price style to their variants * limit ccd price style to suggest variant * preserve white spaces in prices section * fix spacing in price * Update version * Update doc * update cards * update gallery styles * make the gallery responsive * align slice card ctas * cards resize responsively * fix 1x of gap issue * fix description text alignement * fix gaps in minimal widths * fix the gallery layout * Fix strikethrough price color in promos * Update nala tests * MWPW-164177: clean up card style on fragment * Added a new section to ccd gallery * update mas version * fix missing default spectrum css button style * WIP * fix tabindex * fix nala tests * MWPW-164484: fix see terms focus indicator * MWPW-164484: fix see terms focus indicator * increase codecov * Update doc * Update doc * rename constant * Restrict updateLinks to spectrum css * revert env related doc changes * revert merch modal change * revert merch modal change * add data-href attribute to checkout-button element * Update libs/features/mas/docs/src/mas.js.md Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com> * fix docs * Fix style regressions * remove broken link * update doc * fix styles --------- Co-authored-by: Nicolas Peltier <npeltier@adobe.com> Co-authored-by: Mariia Lukianets <lukianet@adobe.com> Co-authored-by: Axel Cureno Basurto <axelcureno@gmail.com> Co-authored-by: Angelo Statescu <angelostatescu.adobe@gmail.com> Co-authored-by: Milica Micic <cod23684@adobe.com> Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com> Co-authored-by: Nicolas Peltier <1032754+npeltier@users.noreply.github.com>
adobecom · Jan 16, 2025 · 6eb0401 · 6eb0401
1 parent 91d1e3d
commit 6eb0401
Show file tree

Hide file tree

Showing 32 changed files with 1,715 additions and 730 deletions.
diff --git a/libs/deps/mas/commerce.js b/libs/deps/mas/commerce.js
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/deps/mas/merch-sidenav.js b/libs/deps/mas/merch-sidenav.js
@@ -1,4 +1,4 @@
-var M=Object.defineProperty;var g=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?M(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var i=(o,e,t)=>V(o,typeof e!="symbol"?e+"":e,t),v=(o,e,t)=>e.has(o)||g("Cannot "+t);var S=(o,e,t)=>(v(o,e,"read from private field"),t?t.call(o):e.get(o)),b=(o,e,t)=>e.has(o)?g("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),C=(o,e,t,s)=>(v(o,e,"write to private field"),s?s.call(o,t):e.set(o,t),t);import{html as I,css as K,LitElement as W}from"/libs/deps/lit-all.min.js";var c=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as P}from"/libs/deps/lit-all.min.js";var u=P`
+var M=Object.defineProperty;var v=o=>{throw TypeError(o)};var V=(o,e,t)=>e in o?M(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var i=(o,e,t)=>V(o,typeof e!="symbol"?e+"":e,t),g=(o,e,t)=>e.has(o)||v("Cannot "+t);var S=(o,e,t)=>(g(o,e,"read from private field"),t?t.call(o):e.get(o)),b=(o,e,t)=>e.has(o)?v("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),C=(o,e,t,s)=>(g(o,e,"write to private field"),s?s.call(o,t):e.set(o,t),t);import{html as I,css as K,LitElement as W}from"/libs/deps/lit-all.min.js";var c=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};import{css as P}from"/libs/deps/lit-all.min.js";var u=P`
     h2 {
         font-size: 11px;
         font-style: normal;

diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
diff --git a/libs/features/mas/docs/checkout-button.html b/libs/features/mas/docs/checkout-button.html
diff --git a/libs/features/mas/docs/checkout-link.html b/libs/features/mas/docs/checkout-link.html
@@ -6,7 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="spectrum.css">
-    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <!-- Include your custom element script as an ES6 module -->
@@ -16,19 +16,17 @@
   </script>
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-  <!-- Include any additional stylesheets -->
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body class="spectrum spectrum--medium spectrum--light">
-<div class="sidenav">
+<aside class="sidenav">
     <a href="/libs/features/mas/docs/mas.html">Home</a>
     <a href="/libs/features/mas/docs/mas.js.html">mas.js</a>
     <a href="/libs/features/mas/docs/checkout-link.html">Checkout Link</a>
     <a href="/libs/features/mas/docs/inline-price.html">Inline Price</a>
     <a href="/libs/features/mas/docs/merch-card.html">Merch Card</a>
     <a href="/libs/features/mas/docs/ccd.html">CCD Gallery</a>
     <a href="/libs/features/mas/docs/benchmarks.html">Benchmarks</a>
-</div>
+</aside>
 <main>
 <sp-theme color="light" scale="medium">
 <h1 id="checkout-link" tabindex="-1">checkout-link <a class="header-anchor" href="#checkout-link" href="#checkout-link" title="Permalink to this heading">#</a></h1>
@@ -145,7 +143,7 @@ <h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#att
 </tr>
 <tr>
 <td><code>daa-ll</code></td>
-<td>martech-compatible link id for analytics. Format: ‘${data-analytics-id}-${#}’, where # is the position of the link within a card. E.g. : see-terms-1,  buy-now-2</td>
+<td>martech-compatible link id for analytics. Format: ‘${data-analytics-id}-${#}’, where # is the position of the link within a card. E.g. : see-terms-1, buy-now-2</td>
 <td><code>false</code></td>
 <td><code>false</code></td>
 <td>mas.js</td>
@@ -286,14 +284,10 @@ <h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" hre
 <td><code>mas:failed</code></td>
 <td>fires when the offer could not be found or fetched</td>
 </tr>
-<tr>
-<td><code>click</code></td>
-<td>native click event on the <code>a</code> element</td>
-</tr>
 </tbody>
 </table>
 <br>
-<p>For each event except <code>click</code>, the following css classes are toggled on the element: <code>placeholder-pending</code>, <code>placeholder-resolved</code>, <code>placeholder-failed</code>.</p>
+<p>For each event, the following css classes are toggled on the element: <code>placeholder-pending</code>, <code>placeholder-resolved</code>, <code>placeholder-failed</code>.</p>
 <h3 id="example-2" tabindex="-1">Example <a class="header-anchor" href="#example-2" href="#example-2" title="Permalink to this heading">#</a></h3>
 <pre><code class="hljs demo language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;eventsDemo&quot;</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">a</span>
@@ -305,7 +299,9 @@ <h3 id="example-2" tabindex="-1">Example <a class="header-anchor" href="#example
     <span class="hljs-tag">&lt;<span class="hljs-name">a</span>
         <span class="hljs-attr">is</span>=<span class="hljs-string">&quot;checkout-link&quot;</span>
         <span class="hljs-attr">data-wcs-osi</span>=<span class="hljs-string">&quot;A1xn6EL4pK93bWjM8flffQpfEL-bnvtoQKQAvkx574M&quot;</span>
-        &gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Span + <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Strong + Buy now<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&lt;/a
+        &gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;pointer-events: none;&quot;</span>
+            &gt;</span>Span + <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Strong + Buy now<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>&lt;/span
+        &gt;&lt;/a
     &gt;
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btnRefresh&quot;</span>&gt;</span>Refresh<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

diff --git a/libs/features/mas/docs/inline-price.html b/libs/features/mas/docs/inline-price.html
@@ -6,7 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="spectrum.css">
-    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <!-- Include your custom element script as an ES6 module -->
@@ -16,19 +16,17 @@
   </script>
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-  <!-- Include any additional stylesheets -->
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body class="spectrum spectrum--medium spectrum--light">
-<div class="sidenav">
+<aside class="sidenav">
     <a href="/libs/features/mas/docs/mas.html">Home</a>
     <a href="/libs/features/mas/docs/mas.js.html">mas.js</a>
     <a href="/libs/features/mas/docs/checkout-link.html">Checkout Link</a>
     <a href="/libs/features/mas/docs/inline-price.html">Inline Price</a>
     <a href="/libs/features/mas/docs/merch-card.html">Merch Card</a>
     <a href="/libs/features/mas/docs/ccd.html">CCD Gallery</a>
     <a href="/libs/features/mas/docs/benchmarks.html">Benchmarks</a>
-</div>
+</aside>
 <main>
 <sp-theme color="light" scale="medium">
 <h1 id="inline-price" tabindex="-1">inline-price <a class="header-anchor" href="#inline-price" href="#inline-price" title="Permalink to this heading">#</a></h1>

diff --git a/libs/features/mas/docs/mas.html b/libs/features/mas/docs/mas.html
@@ -6,7 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="spectrum.css">
-    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <!-- Include your custom element script as an ES6 module -->
@@ -16,19 +16,17 @@
   </script>
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-  <!-- Include any additional stylesheets -->
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body class="spectrum spectrum--medium spectrum--light">
-<div class="sidenav">
+<aside class="sidenav">
     <a href="/libs/features/mas/docs/mas.html">Home</a>
     <a href="/libs/features/mas/docs/mas.js.html">mas.js</a>
     <a href="/libs/features/mas/docs/checkout-link.html">Checkout Link</a>
     <a href="/libs/features/mas/docs/inline-price.html">Inline Price</a>
     <a href="/libs/features/mas/docs/merch-card.html">Merch Card</a>
     <a href="/libs/features/mas/docs/ccd.html">CCD Gallery</a>
     <a href="/libs/features/mas/docs/benchmarks.html">Benchmarks</a>
-</div>
+</aside>
 <main>
 <sp-theme color="light" scale="medium">
 <h1 id="merch-at-scale-(mas)" tabindex="-1">Merch At Scale (MAS) <a class="header-anchor" href="#merch-at-scale-(mas)" href="#merch-at-scale-(mas)" title="Permalink to this heading">#</a></h1>

diff --git a/libs/features/mas/docs/mas.js.html b/libs/features/mas/docs/mas.js.html
@@ -6,7 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="spectrum.css">
-    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <!-- Include your custom element script as an ES6 module -->
@@ -16,19 +16,17 @@
   </script>
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-  <!-- Include any additional stylesheets -->
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body class="spectrum spectrum--medium spectrum--light">
-<div class="sidenav">
+<aside class="sidenav">
     <a href="/libs/features/mas/docs/mas.html">Home</a>
     <a href="/libs/features/mas/docs/mas.js.html">mas.js</a>
     <a href="/libs/features/mas/docs/checkout-link.html">Checkout Link</a>
     <a href="/libs/features/mas/docs/inline-price.html">Inline Price</a>
     <a href="/libs/features/mas/docs/merch-card.html">Merch Card</a>
     <a href="/libs/features/mas/docs/ccd.html">CCD Gallery</a>
     <a href="/libs/features/mas/docs/benchmarks.html">Benchmarks</a>
-</div>
+</aside>
 <main>
 <sp-theme color="light" scale="medium">
 <h1 id="mas.js" tabindex="-1">mas.js <a class="header-anchor" href="#mas.js" href="#mas.js" title="Permalink to this heading">#</a></h1>
@@ -38,10 +36,16 @@ <h2 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="
 <ul>
 <li><a href="/libs/features/mas/docs/inline-price.html">inline-price</a></li>
 <li><a href="/libs/features/mas/docs/checkout-link.html">checkout-link</a></li>
+<li><a href="/libs/features/mas/docs/checkout-button.html">checkout-button</a></li>
 <li><a href="/libs/features/mas/docs/merch-card.html">merch-card</a></li>
 </ul>
 <h2 id="enablement-mas-commerce-service" tabindex="-1">Enablement <code>mas-commerce-service</code> <a class="header-anchor" href="#enablement-mas-commerce-service" href="#enablement-mas-commerce-service" title="Permalink to this heading">#</a></h2>
-<p>You do need to have mas.js on your page / application, including it can be done like the following</p>
+<p>⚠️ Safari does not support customized built-in elements. Therefore, you need to load the following polyfill before <code>mas.js</code> for browser compatibility (not required for in-app usage).</p>
+<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>
+    <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.adobe.comlibs/deps/custom-elements.js&quot;</span>
+&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
+</code></pre>
+<p>To add <code>mas.js</code> to your page or application, include it as shown below:</p>
 <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>
     <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.adobe.com/libs/features/mas/mas/dist/mas.js&quot;</span>
     <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>

diff --git a/libs/features/mas/docs/merch-card.html b/libs/features/mas/docs/merch-card.html
@@ -6,7 +6,7 @@
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="spectrum.css">
-    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
 
   <!-- Include your custom element script as an ES6 module -->
@@ -16,19 +16,17 @@
   </script>
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-  <!-- Include any additional stylesheets -->
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body class="spectrum spectrum--medium spectrum--light">
-<div class="sidenav">
+<aside class="sidenav">
     <a href="/libs/features/mas/docs/mas.html">Home</a>
     <a href="/libs/features/mas/docs/mas.js.html">mas.js</a>
     <a href="/libs/features/mas/docs/checkout-link.html">Checkout Link</a>
     <a href="/libs/features/mas/docs/inline-price.html">Inline Price</a>
     <a href="/libs/features/mas/docs/merch-card.html">Merch Card</a>
     <a href="/libs/features/mas/docs/ccd.html">CCD Gallery</a>
     <a href="/libs/features/mas/docs/benchmarks.html">Benchmarks</a>
-</div>
+</aside>
 <main>
 <sp-theme color="light" scale="medium">
 <h1 id="merch-card-custom-element" tabindex="-1">merch-card custom element <a class="header-anchor" href="#merch-card-custom-element" href="#merch-card-custom-element" title="Permalink to this heading">#</a></h1>
@@ -71,17 +69,21 @@ <h3 id="with-an-odin%2Faem-fragment-(vpn-required)" tabindex="-1">With an Odin/A
             <span class="hljs-title function_">log</span>(target, <span class="hljs-string">&#x27;merch-card is ready: &#x27;</span>, e.<span class="hljs-property">target</span>.<span class="hljs-property">variant</span>);
         });
 
-        card1.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;click&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> {
-            e.<span class="hljs-title function_">preventDefault</span>();
-            e.<span class="hljs-title function_">stopPropagation</span>();
-            <span class="hljs-keyword">if</span> (e.<span class="hljs-property">target</span>.<span class="hljs-property">isCheckoutLink</span>) {
-                <span class="hljs-title function_">log</span>(target, <span class="hljs-string">&#x27;merch-card checkout-link click: &#x27;</span>, e.<span class="hljs-property">target</span>);
-            } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (e.<span class="hljs-property">target</span>.<span class="hljs-property">isInlinePrice</span>) {
-                <span class="hljs-title function_">log</span>(target, <span class="hljs-string">&#x27;merch-card price click: &#x27;</span>, e.<span class="hljs-property">target</span>.<span class="hljs-property">innerText</span>);
-            } <span class="hljs-keyword">else</span> {
-                <span class="hljs-title function_">log</span>(target, <span class="hljs-string">&#x27;merch-card click: &#x27;</span>, e.<span class="hljs-property">target</span>);
-            }
-        });
+        card1.<span class="hljs-title function_">addEventListener</span>(
+            <span class="hljs-string">&#x27;click&#x27;</span>,
+            <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> {
+                e.<span class="hljs-title function_">preventDefault</span>();
+                e.<span class="hljs-title function_">stopPropagation</span>();
+                <span class="hljs-keyword">if</span> (e.<span class="hljs-property">target</span>.<span class="hljs-property">isCheckoutButton</span>) {
+                    <span class="hljs-title function_">log</span>(target, <span class="hljs-string">&#x27;merch-card checkout-button click: &#x27;</span>, e.<span class="hljs-property">target</span>);
+                } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (e.<span class="hljs-property">target</span>.<span class="hljs-property">isInlinePrice</span>) {
+                    <span class="hljs-title function_">log</span>(target, <span class="hljs-string">&#x27;merch-card price click: &#x27;</span>, e.<span class="hljs-property">target</span>.<span class="hljs-property">innerText</span>);
+                } <span class="hljs-keyword">else</span> {
+                    <span class="hljs-title function_">log</span>(target, <span class="hljs-string">&#x27;merch-card click: &#x27;</span>, e.<span class="hljs-property">target</span>);
+                }
+            },
+            { <span class="hljs-attr">capture</span>: <span class="hljs-literal">true</span> },
+        );
     }
 </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
 </code></pre>

diff --git a/libs/features/mas/docs/src/build-docs.mjs b/libs/features/mas/docs/src/build-docs.mjs
@@ -63,7 +63,7 @@ const htmlTemplate = `
     <title>M@S Web Components</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="spectrum.css">
-    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   
   <!-- Include your custom element script as an ES6 module -->
@@ -73,8 +73,6 @@ const htmlTemplate = `
   </script>
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-  <!-- Include any additional stylesheets -->
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body class="spectrum spectrum--medium spectrum--light">
 <aside class="sidenav">

diff --git a/libs/features/mas/docs/src/build-docs.sh b/libs/features/mas/docs/src/build-docs.sh
@@ -2,6 +2,7 @@
 
 node ./build-docs.mjs inline-price.md ../inline-price.html
 node ./build-docs.mjs checkout-link.md ../checkout-link.html
+node ./build-docs.mjs checkout-button.md ../checkout-button.html
 node ./build-docs.mjs mas.md ../mas.html
 node ./build-docs.mjs mas.js.md ../mas.js.html
 node ./build-docs.mjs merch-card.md ../merch-card.html