MWPW-160360 - Decorate standalone text with body default styles (#3060)

* style wrappers when no nested elements * better logic and check for text nodes in elements * dialing in util * keep contains text function in decorate js * use is magic in emtpy elements selector * simplify el contains text function * early return in block text decorator * codecov on decorate block text * adjust decorate and marquee anchors to hopefully pass tests * style wrappers when no nested elements * better logic and check for text nodes in elements * dialing in util * keep contains text function in decorate js * use is magic in emtpy elements selector * simplify el contains text function * early return in block text decorator * codecov on decorate block text * adjust decorate and marquee anchors to hopefully pass tests * fix marquee anchors for nala
adobecom · Nov 7, 2024 · 36e869f · 36e869f
1 parent f950ca5
commit 36e869f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/libs/blocks/marquee-anchors/marquee-anchors.js b/libs/blocks/marquee-anchors/marquee-anchors.js
@@ -54,11 +54,11 @@ export default function init(el) {
   decorateBlockText(copy, blockTypeSizes.default[size]);
   const links = createTag('div', { class: 'links' }, list);
   const foreground = createTag('div', { class: 'foreground' }, copy);
-  decorateBlockText(links, blockTypeSizes.default.xsmall);
   foreground.append(links);
   el.append(foreground);
 
-  [...list].forEach((i) => {
+  [...list].forEach((i, index) => {
+    decorateBlockText(i, blockTypeSizes.default.xsmall);
     const aTag = i.querySelector('a');
     if (aTag?.textContent.charAt(0) === '#') {
       const content = i.querySelector(':scope > div');
@@ -73,12 +73,10 @@ export default function init(el) {
       } else {
         aTag.classList.add('external');
       }
+    } else {
+      i.classList.add(`links-${index === 0 ? 'header' : 'footer'}`);
     }
   });
-  const emptyLinkRows = links.querySelectorAll(':scope > div:not([class])');
-  if (emptyLinkRows[0]) emptyLinkRows[0].classList.add('links-header');
-  if (emptyLinkRows[1]) emptyLinkRows[1].classList.add('links-footer', 'body-s');
-  decorateBlockText(emptyLinkRows[0], blockTypeSizes.default.xsmall);
 
   const anchors = el.querySelectorAll('.anchor-link');
   if (anchors.length) decorateAnchors(anchors);

diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
@@ -65,9 +65,16 @@ export function decorateIconArea(el) {
   });
 }
 
+function elContainsText(el) {
+  return [...el.childNodes].some(({ nodeType, innerText, textContent }) => (
+    (nodeType === Node.ELEMENT_NODE && innerText.trim() !== '')
+    || (nodeType === Node.TEXT_NODE && textContent.trim() !== '')
+  ));
+}
+
 export function decorateBlockText(el, config = ['m', 's', 'm'], type = null) {
-  let headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
   if (!el.classList.contains('default')) {
+    let headings = el?.querySelectorAll('h1, h2, h3, h4, h5, h6');
     if (headings) {
       if (type === 'hasDetailHeading' && headings.length > 1) headings = [...headings].splice(1);
       headings.forEach((h) => h.classList.add(`heading-${config[0]}`));
@@ -77,13 +84,12 @@ export function decorateBlockText(el, config = ['m', 's', 'm'], type = null) {
         decorateIconArea(el);
       }
     }
-    const emptyEls = el.querySelectorAll('p:not([class]), ul:not([class]), ol:not([class])');
+    const bodyStyle = `body-${config[1]}`;
+    const emptyEls = el?.querySelectorAll(':is(p, ul, ol, div):not([class])');
     if (emptyEls.length) {
-      emptyEls.forEach((p) => p.classList.add(`body-${config[1]}`));
-    } else {
-      [...el.querySelectorAll('div:not([class])')]
-        .filter((emptyDivs) => emptyDivs.textContent.trim() !== '')
-        .forEach((text) => text.classList.add(`body-${config[1]}`));
+      [...emptyEls].filter(elContainsText).forEach((e) => e.classList.add(bodyStyle));
+    } else if (!el.classList.length && elContainsText(el)) {
+      el.classList.add(bodyStyle);
     }
   }
   const buttonSize = config.length > 3 ? `button-${config[3]}` : '';

diff --git a/test/blocks/text/mocks/body.html b/test/blocks/text/mocks/body.html
@@ -334,3 +334,16 @@ <h3 id="text--full-width-medium">Text – Full-Width, Medium</h3>
     </div>
   </div>
 </div>
+<div>
+  <div class="text s-spacing center xxs-body">
+    <div>
+      <div data-valign="middle">XXS Body - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+    </div>
+  </div>
+  <div class="section-metadata">
+    <div>
+      <div>background</div>
+      <div>#95B9C7</div>
+    </div>
+  </div>
+</div>