MWPW-157888 - Hero marquee w/ no-min-height and no l/r padding when u…

…sing a full-width variant in masonry(repost) (#2923)

* conditional check for linkPic

* Add `no-min-height` and check if elementIsEmpty before decorate row

* revert decorate change. in diff pr

* childNodes instead of specific elements

* remove console

* added test mocks for empty or element based bg content. Added style for -up .full-width

* added better test coverage and simplified the isElementEmpty

* simplified logic to check if head element is empty

* removed unused func

* fixed text mock markup

libs/blocks/hero-marquee/hero-marquee.css

@@ -17,6 +17,7 @@
   align-items: center;
 }
 
+.hero-marquee.no-min-height { min-height: unset;}
 .hero-marquee.s-min-height { min-height: var(--s-min-height); }
 .hero-marquee.l-min-height { min-height: var(--l-min-height); }
 
@@ -150,6 +151,12 @@ html[dir="rtl"] .hero-marquee .foreground {
   display: none;
 }
 
+div[class*='-up'] .hero-marquee.has-bg.full-width,
+div[class*='-up'] .hero-marquee.has-bg.grid-full-width { 
+  padding-left: 0;
+  padding-right: 0;
+}
+
 /* Row Types */
 .hero-marquee .row-list {
   text-align: left;

libs/blocks/hero-marquee/hero-marquee.js

@@ -123,6 +123,7 @@ function extendButtonsClass(copy) {
     button.classList.add('button-xl', 'button-justified-mobile');
   });
 }
+
 function parseKeyString(str) {
   const regex = /^(\w+)\s*\((.*)\)$/;
   const match = str.match(regex);
@@ -165,14 +166,16 @@ function loadBreakpointThemes() {
 export default async function init(el) {
   el.classList.add('con-block');
   let rows = el.querySelectorAll(':scope > div');
-  if (rows.length > 1 && rows[0].textContent !== '') {
+  if (rows.length <= 1) return;
+  const [head, ...tail] = rows;
+  rows = tail;
+  if (!head.textContent.trim() && !head.querySelector('picture', 'video')) {
+    head.remove();
+  } else {
     el.classList.add('has-bg');
-    const [head, ...tail] = rows;
     handleObjectFit(head);
     decorateBlockBg(el, head, { useHandleFocalpoint: true });
-    rows = tail;
   }
-
   // get first row that's not a keyword key/value row
   const mainRowIndex = rows.findIndex((row) => {
     const firstColText = row.children[0].textContent.toLowerCase().trim();

test/blocks/hero-marquee/mocks/body.html

@@ -17,8 +17,12 @@
     </div>
   </div>
   <div>
-    <div>con-block-row-lockup (xl-icon-size)</div>
-    <div><picture><img loading="lazy" src="./"></picture> <strong>XL Icon Size</strong></div>
+    <div>con-block-row-lockup (xl-icon)</div>
+    <div><picture><img loading="lazy" src="./"></picture> <strong>XL Icon</strong></div>
+  </div>
+  <div>
+    <div>con-block-row-lockup</div>
+    <div><picture><img loading="lazy" src="./"></picture> <strong>default size</strong></div>
   </div>
   <div>
     <div>
@@ -30,7 +34,7 @@ <h2 id="this-hero-has-all-row-types">This Hero has all row types</h2>
     </div>
   </div>
   <div>
-    <div data-valign="middle">con-block-row-list (max-width-6-tablet)</div>
+    <div data-valign="middle">con-block-row-list (max-width-6-tablet, xl-body)</div>
     <div>
       <ul>
         <li><span class="icon icon-checkmark"></span>Small</li>
@@ -117,3 +121,41 @@ <h1 id="row-cell---text-right-2">Hero w/ Adobe.tv link</h1>
     <div><a href="https://video.tv.adobe.com/v/3427744">https://video.tv.adobe.com/v/3427744</a></div>
   </div>
 </div>
+
+<div id="hero-w-empty-bg-row" class="hero-marquee">
+  <div>
+    <div></div>
+  </div>
+  <div>
+    <div>
+      <h1 id="row-cell---text-right-2">Hero w/ empty bg row</h1>
+    </div>
+    <div><p>This is the body</p></div>
+  </div>
+</div>
+
+<div id="hero-w-bg-elements" class="hero-marquee">
+  <div>
+    <div>
+      <picture>
+        <img loading="lazy" alt="" src="./" width="100" height="100">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="lazy" alt="" src="./" width="100" height="100">
+      </picture>
+    </div>
+    <div>
+      <picture>
+        <img loading="lazy" alt="" src="./" width="100" height="100">
+      </picture>
+    </div>
+  </div>
+  <div>
+    <div>
+      <h1 id="row-cell---text-right-2">Hero w/ bg elements</h1>
+    </div>
+    <div><p>This is the body</p></div>
+  </div>
+</div>