Revert "MWPW-157888 - Hero marquee w/ no-min-height and no l/r paddin…

…g when using a full-width variant in masonry(repost)" (#3002) Revert "MWPW-157888 - Hero marquee w/ no-min-height and no l/r padding when u…" This reverts commit 067f609.
adobecom · Oct 3, 2024 · 9b05053 · 9b05053
1 parent 6cdc02a
commit 9b05053
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 59 deletions.
diff --git a/libs/blocks/hero-marquee/hero-marquee.css b/libs/blocks/hero-marquee/hero-marquee.css
@@ -17,7 +17,6 @@
   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); }
 
@@ -151,12 +150,6 @@ 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;

diff --git a/libs/blocks/hero-marquee/hero-marquee.js b/libs/blocks/hero-marquee/hero-marquee.js
@@ -123,7 +123,6 @@ function extendButtonsClass(copy) {
     button.classList.add('button-xl', 'button-justified-mobile');
   });
 }
-
 function parseKeyString(str) {
   const regex = /^(\w+)\s*\((.*)\)$/;
   const match = str.match(regex);
@@ -166,16 +165,14 @@ function loadBreakpointThemes() {
 export default async function init(el) {
   el.classList.add('con-block');
   let rows = el.querySelectorAll(':scope > div');
-  if (rows.length <= 1) return;
-  const [head, ...tail] = rows;
-  rows = tail;
-  if (!head.textContent.trim() && !head.querySelector('picture', 'video')) {
-    head.remove();
-  } else {
+  if (rows.length > 1 && rows[0].textContent !== '') {
     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();

diff --git a/test/blocks/hero-marquee/mocks/body.html b/test/blocks/hero-marquee/mocks/body.html
@@ -17,12 +17,8 @@
     </div>
   </div>
   <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>con-block-row-lockup (xl-icon-size)</div>
+    <div><picture><img loading="lazy" src="./"></picture> <strong>XL Icon Size</strong></div>
   </div>
   <div>
     <div>
@@ -34,7 +30,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, xl-body)</div>
+    <div data-valign="middle">con-block-row-list (max-width-6-tablet)</div>
     <div>
       <ul>
         <li><span class="icon icon-checkmark"></span>Small</li>
@@ -121,41 +117,3 @@ <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>