MWPW-159651 && MWPW-160196 - [Hero marquee] bug fixes (#3046)

* fixed style for .empty-asset:empty to still take up dom space split w/ copy * set default lockup size for if no lockup variant gets authored * moved block lockup styled to main-copy and adjusted row-lockup to check icon and lockup suffix * large default * added support for breakpoint fill button styles * removed bg-tablet selectors in wrong media query * added extra `con-button.button-xxl` to support blocks w/ element level classes. * block button class target main-copy and removed so rows dont inherit * added .no-min-height * Test coverage for lockup size in row variant
adobecom · Oct 28, 2024 · acb3046 · acb3046
1 parent 56ed952
commit acb3046
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 13 deletions.
diff --git a/libs/blocks/hero-marquee/hero-marquee.css b/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,10 @@ html[dir="rtl"] .hero-marquee .foreground {
   display: none;
 }
 
+.hero-marquee .foreground div.empty-asset:empty {
+  display: block;
+}
+
 /* Row Types */
 .hero-marquee .row-list {
   text-align: left;
@@ -268,8 +273,8 @@ html[dir="rtl"] .hero-marquee li.icon-item span.icon {
   }
 
   /* con-vars support */
-  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile, .bg-top-tablet, .bg-bottom-tablet) .background,
-  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile, .bg-top-tablet, .bg-bottom-tablet) .background video {
+  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile) .background,
+  .hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile) .background video {
       position: relative;
       width: 100%;
   }

diff --git a/libs/blocks/hero-marquee/hero-marquee.js b/libs/blocks/hero-marquee/hero-marquee.js
@@ -76,8 +76,12 @@ async function decorateLockupRow(el, classes) {
   await loadIconography();
   child?.classList.add('lockup-area');
   const iconSizeClass = classes?.find((c) => c.endsWith('-icon'));
-  if (iconSizeClass) el.classList.remove(iconSizeClass);
-  el.classList.add(`${iconSizeClass?.split('-')[0] || 'l'}-lockup`);
+  const lockupSizeClass = classes?.find((c) => c.endsWith('-lockup'));
+  const usedLockupClass = iconSizeClass || lockupSizeClass;
+  if (usedLockupClass) {
+    el.classList.remove(usedLockupClass);
+  }
+  el.classList.add(`${usedLockupClass?.split('-')[0] || 'l'}-lockup`);
 }
 
 function decorateBg(el) {
@@ -219,7 +223,12 @@ export default async function init(el) {
 
   const assetRow = allRows[0].classList.contains('asset');
   if (assetRow) el.classList.add('asset-left');
-  const mainCopy = createTag('div', { class: 'main-copy' });
+  const lockupClass = [...el.classList].find((c) => c.endsWith('-lockup'));
+  if (lockupClass) el.classList.remove(lockupClass);
+  const buttonClass = [...el.classList].find((c) => c.endsWith('-button'));
+  if (buttonClass) el.classList.remove(buttonClass);
+  const classes = `main-copy ${lockupClass || 'l-lockup'} ${buttonClass || 'l-button'}`;
+  const mainCopy = createTag('div', { class: classes });
   while (copy.childNodes.length > 0) {
     mainCopy.appendChild(copy.childNodes[0]);
   }
@@ -237,7 +246,6 @@ export default async function init(el) {
       copy.append(row);
     }
   });
-
   const promiseArr = [];
   [...rows].forEach(async (row) => {
     const cols = row.querySelectorAll(':scope > div');

diff --git a/libs/styles/breakpoint-theme.css b/libs/styles/breakpoint-theme.css
@@ -45,6 +45,28 @@
     color: var(--color-black);
     text-decoration: none;
   }
+
+  .con-block.light-mobile-only a.con-button.fill {
+    border-color: var(--text-color);
+    background-color: var(--text-color);
+    color: var(--color-white);
+  }
+
+  .con-block.dark-mobile-only a.con-button.fill {
+    border-color: var(--color-white);
+    background-color: var(--color-white);
+    color: var(--text-color);
+  }
+
+  .con-block.light-mobile-only a.con-button.fill:is(:hover, :focus, :active) {
+    border-color: var(--color-black);
+    background-color: var(--color-black);
+  }
+
+  .con-block.dark-mobile-only a.con-button.fill:is(:hover, :focus, :active) {
+    color: var(--color-black);
+  }
+
 }
 
 /* Tablet ONLY */
@@ -81,6 +103,27 @@
     color: var(--color-black);
     text-decoration: none;
   }
+
+  .con-block.light-tablet-only a.con-button.fill {
+    border-color: var(--text-color);
+    background-color: var(--text-color);
+    color: var(--color-white);
+  }
+
+  .con-block.dark-tablet-only a.con-button.fill {
+    border-color: var(--color-white);
+    background-color: var(--color-white);
+    color: var(--text-color);
+  }
+
+  .con-block.light-tablet-only a.con-button.fill:is(:hover, :focus, :active) {
+    border-color: var(--color-black);
+    background-color: var(--color-black);
+  }
+
+  .con-block.dark-tablet-only a.con-button.fill:is(:hover, :focus, :active) {
+    color: var(--color-black);
+  }
 }
 
 /* Tablet UP */
@@ -117,6 +160,27 @@
     color: var(--color-black);
     text-decoration: none;
   }
+
+  .con-block.light-tablet a.con-button.fill {
+    border-color: var(--text-color);
+    background-color: var(--text-color);
+    color: var(--color-white);
+  }
+
+  .con-block.dark-tablet a.con-button.fill {
+    border-color: var(--color-white);
+    background-color: var(--color-white);
+    color: var(--text-color);
+  }
+
+  .con-block.light-tablet a.con-button.fill:is(:hover, :focus, :active) {
+    border-color: var(--color-black);
+    background-color: var(--color-black);
+  }
+
+  .con-block.dark-tablet a.con-button.fill:is(:hover, :focus, :active) {
+    color: var(--color-black);
+  }
 }
 
 /* desktop up */
@@ -154,4 +218,25 @@
     color: var(--color-black);
     text-decoration: none;
   }
+
+  .con-block.light-desktop a.con-button.fill {
+    border-color: var(--text-color);
+    background-color: var(--text-color);
+    color: var(--color-white);
+  }
+
+  .con-block.dark-desktop a.con-button.fill {
+    border-color: var(--color-white);
+    background-color: var(--color-white);
+    color: var(--text-color);
+  }
+
+  .con-block.light-desktop a.con-button.fill:is(:hover, :focus, :active) {
+    border-color: var(--color-black);
+    background-color: var(--color-black);
+  }
+
+  .con-block.dark-desktop a.con-button.fill:is(:hover, :focus, :active) {
+    color: var(--color-black);
+  }
 }
diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -360,20 +360,21 @@
   padding: 10px 24px 8px;
 }
 
-.con-button.button-justified {
-  display: block;
-  text-align: center;
-  width: 100%;
-}
-
-.xxl-button .con-button {
+.xxl-button .con-button,
+.con-button.button-xxl {
   border-radius: 30px;
   font-size: 22px;
   line-height: 27px;
   min-height: 27px;
   padding: 14px 30px 15px;
 }
 
+.con-button.button-justified {
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+
 .dark .con-button {
   border-color: var(--color-white);
   color: var(--color-white);

diff --git a/test/blocks/hero-marquee/mocks/body.html b/test/blocks/hero-marquee/mocks/body.html
@@ -20,6 +20,10 @@
     <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>con-block-row-lockup (xl-lockup)</div>
+    <div><picture><img loading="lazy" src="./"></picture> <strong>XL Icon Size</strong></div>
+  </div>
   <div>
     <div>
       <p><picture><img loading="lazy" src="./"></picture> After Effects</p>