[MWPW-141785] Implement custom link actions (#2324)

Co-authored-by: Okan Sahin <[email protected]>
adobecom · Jun 4, 2024 · 1362ce1 · 1362ce1
1 parent a60b132
commit 1362ce1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/libs/blocks/card/cardUtils.js b/libs/blocks/card/cardUtils.js
@@ -32,19 +32,18 @@ export const addFooter = (links, container, merch) => {
   const linksArr = Array.from(links);
   const linksLeng = linksArr.length;
   const hrTag = merch ? '<hr>' : '';
-  let footer = `<div class="consonant-CardFooter">${hrTag}<div class="consonant-CardFooter-row" data-cells="1">`;
-  footer = linksArr.reduce(
-    (combined, link, index) => (
-      `${combined}<div class="consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}">${link.outerHTML}</div>`),
-    footer,
-  );
-  footer += '</div></div>';
-
-  container.insertAdjacentHTML('beforeend', footer);
-  links.forEach((link) => {
+  const footer = createTag('div', { class: 'consonant-CardFooter' }, hrTag);
+  const row = createTag('div', { class: 'consonant-CardFooter-row', 'data-cells': '1' });
+  linksArr.forEach((link, index) => {
     const { parentElement } = link;
     if (parentElement && document.body.contains(parentElement)) parentElement.remove();
+    const holder = createTag('div', { class: `consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}` });
+    holder.append(link);
+    row.append(holder);
   });
+
+  footer.append(row);
+  container.insertAdjacentElement('beforeend', footer);
 };
 
 export const addWrapper = (el, section, cardType) => {

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -626,6 +626,15 @@ export function decorateLinks(el) {
         rdx.push(a);
       }
     }
+    // Custom action links
+    const loginEvent = '#_evt-login';
+    if (a.href.includes(loginEvent)) {
+      a.href = a.href.replace(loginEvent, '');
+      a.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.adobeIMS?.signIn();
+      });
+    }
     return rdx;
   }, []);
 }

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -30,6 +30,8 @@
     <p><a class="disable-autoblock" href="https://www.instagram.com/#_dnb">Disable Autoblock</a></p>
     <!-- Auto Block -->
     <p><a class="autoblock" href="https://twitter.com/Adobe#_dnb">Auto Block</a></p>
+    <!-- Custom actions -->
+    <p><a class="login-action" href="https://www.adobe.com/#_evt-login"></a></p>
   </div>
   <div class="quote borders contained hide-block">
     <div>

diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -87,6 +87,15 @@ describe('Utils', () => {
       });
     });
 
+    describe('Custom Link Actions', () => {
+      it('Implements a login action', async () => {
+        await waitForElement('.login-action');
+        const login = document.querySelector('.login-action');
+        utils.decorateLinks(login);
+        expect(login.href).to.equal('https://www.adobe.com/');
+      });
+    });
+
     describe('Fragments', () => {
       it('fully unwraps a fragment', () => {
         const fragments = document.querySelectorAll('.link-block.fragment');