MWPW-153372 - Add ability to further customize buttons (#2776)

* update button decorator to handle custom classes

* add dash character to regex

* add coverage

* add safeguard for href-less buttons

* account for modals

* Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux)" (#2777)

Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux) (#2767)"

This reverts commit 88cb101.

* add modal coverage

* Revert "Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux)" (#2777)"

This reverts commit b1a3948.

libs/utils/decorate.js

@@ -5,17 +5,27 @@ export function decorateButtons(el, size) {
   if (buttons.length === 0) return;
   const buttonTypeMap = { STRONG: 'blue', EM: 'outline', A: 'blue' };
   buttons.forEach((button) => {
+    let target = button;
     const parent = button.parentElement;
     const buttonType = buttonTypeMap[parent.nodeName] || 'outline';
     if (button.nodeName === 'STRONG') {
-      parent.classList.add('con-button', buttonType);
-      if (size) parent.classList.add(size); /* button-l, button-xl */
+      target = parent;
     } else {
-      button.classList.add('con-button', buttonType);
-      if (size) button.classList.add(size); /* button-l, button-xl */
       parent.insertAdjacentElement('afterend', button);
       parent.remove();
     }
+    target.classList.add('con-button', buttonType);
+    if (size) target.classList.add(size); /* button-l, button-xl */
+    const customClasses = target.href && [...target.href.matchAll(/#_button-([a-zA-Z-]+)/g)];
+    if (customClasses) {
+      customClasses.forEach((match) => {
+        target.href = target.href.replace(match[0], '');
+        if (target.dataset.modalHash) {
+          target.setAttribute('data-modal-hash', target.dataset.modalHash.replace(match[0], ''));
+        }
+        target.classList.add(match[1]);
+      });
+    }
     const actionArea = button.closest('p, div');
     if (actionArea) {
       actionArea.classList.add('action-area');

test/blocks/text/mocks/body.html

@@ -220,3 +220,18 @@ <h2 id="get-20-creative-cloud-for-less-than-the-price-of-3-apps" class="heading-
      </div>
   </div>
 </div>
+
+<div>
+  <div class="text full-width medium">
+    <div>
+      <div>#ffffff</div>
+    </div>
+    <div>
+      <div>
+        <h3 id="text--full-width-medium">Text – Full-Width, Medium</h3>
+        <p>Featuring over 600,000 hand-picked stock photos and graphics, curated from the world’s leading photographers, illustrators, and agencies. Our Premium collection is perfect for organizations looking for authentic, high-quality commercial content, and easy licensing plans.</p>
+        <p><em><a id="milo-modal-link" href="https://milo.adobe.com/test/blocks/modals/mocks/milo#modal#_button-fill" data-modal-path="/test/blocks/modals/mocks/milo" data-modal-hash="#modal#_button-fill">Milo</a></em></p>
+      </div>
+    </div>
+  </div>
+</div>