tokenized the feature requested

adobecom · Apr 22, 2024 · e0c5259 · e0c5259
1 parent fb8d600
commit e0c5259
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/creativecloud/blocks/interactive-marquee/interactive-marquee.js b/creativecloud/blocks/interactive-marquee/interactive-marquee.js
@@ -3,7 +3,7 @@ import { getLibs } from '../../scripts/utils.js';
 // [headingSize, bodySize, detailSize, titlesize]
 const typeSizes = ['xxl', 'xl', 'l', 'xs'];
 
-function decorateText(el, createTag) {
+function decorateText(el, createTag, isMwebMarquee = false) {
   const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
   const heading = headings[headings.length - 1];
   const config = typeSizes;
@@ -24,12 +24,19 @@ function decorateText(el, createTag) {
     iconAreaElements?.classList.add('icon-area');
     iconText.innerText = (iconAreaElements.textContent.trim());
     iconText.previousSibling.textContent = '';
-    const foreground = el.closest('.foreground');
-    const mwebContainer = createTag('div', { class: 'mweb-container' });
-    const actionItem = el.querySelector('.action-area');
-    mwebContainer.append(heading.cloneNode(true), actionItem.cloneNode(true));
-    if (sib) mwebContainer.prepend(sib);
-    foreground.prepend(mwebContainer);
+    if (isMwebMarquee) {
+      const foreground = el.closest('.foreground');
+      const mwebContainer = createTag('div', { class: 'mweb-container' });
+      const actionItem = el.querySelector('.action-area');
+      mwebContainer.append(heading.cloneNode(true), actionItem.cloneNode(true));
+      heading.classList.add('mobile-cta-top');
+      actionItem.classList.add('mobile-cta-top');
+      if (sib) {
+        mwebContainer.prepend(sib.cloneNode(true));
+        sib.classList.add('mobile-cta-top');
+      }
+      foreground.prepend(mwebContainer);
+    }
   };
   decorate(heading, config);
 }
@@ -66,9 +73,10 @@ function interactiveInit(el, decorateButtons, decorateBlockBg, createTag) {
 
   const firstDivInForeground = foreground.querySelector(':scope > div');
   if (firstDivInForeground?.classList.contains('asset')) el.classList.add('row-reversed');
+  const isMwebMarquee = el.classList.contains('mobile-cta-top');
 
   decorateButtons(text, 'button-xl');
-  decorateText(text, createTag);
+  decorateText(text, createTag, isMwebMarquee);
   extendButtonsClass(text);
 }
 

diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css
@@ -207,10 +207,10 @@
     text-align: center;
   }
 
-  .interactive-marquee .text .detail-l,
-  .interactive-marquee .text .icon-area,
-  .interactive-marquee .text .action-area,
-  .interactive-marquee .text h1[class^="heading"]
+  .interactive-marquee .text .detail-l.mobile-cta-top,
+  .interactive-marquee .text .icon-area.mobile-cta-top,
+  .interactive-marquee .text .action-area.mobile-cta-top,
+  .interactive-marquee .text h1[class^="heading"].mobile-cta-top
   {
     display: none;
   }