MWPW-156135 - [editorial-card] bugs (#2771)

* Fixed decBg func. was incorrectly removing bg row

* allow className in decorateBG and support vp-media on card row display. Fixes naming collision w background rounded corners. ;)

* remove device js set type classes and put direct in .display styles

* Fix text-block bg zIndex

* fh on bg vids

* no await, decorate

* Support 'open' and three rows authoring for flat doc examples.

* 3 rows default = media, copy, foot

* equal w/ 3 not 4

* Revert extra changes w/ row-order defatult for diff branch

* linting and no z-index needed

libs/blocks/editorial-card/editorial-card.css

@@ -92,6 +92,11 @@
   margin-top: auto;
 }
 
+.editorial-card .vp-media .tablet-only,
+.editorial-card .vp-media .desktop-only {
+  display: none;
+}
+
 .editorial-card .card-footer > div {
   display: flex;
   flex-direction: column;
@@ -142,11 +147,22 @@
   height: 100%;
 }
 
+.editorial-card .background .milo-video, 
+.editorial-card .background .milo-iframe {
+  height: 100%;
+  padding-bottom: 0;
+}
+
 .editorial-card .lockup-area,
 .editorial-card .device {
   margin: 0;
 }
 
+.editorial-card .device {
+  font-size: var(--type-body-xxs-size);
+  line-height: var(--type-body-xxs-lh);
+}
+
 .editorial-card .lockup-area {
   row-gap: var(--spacing-xxs);
 }
@@ -173,7 +189,6 @@
   justify-content: center;
 }
 
-
 .editorial-card hr {
   background-color: currentcolor;
   border: none;
@@ -248,3 +263,24 @@
 
 .editorial-card.footer-align-left .action-area { justify-content: start; }
 .editorial-card.footer-align-center .action-area { justify-content: center; }
+
+
+/* Tablet up */
+@media screen and (min-width: 600px) {
+  .editorial-card .vp-media .mobile-only,
+  .editorial-card .vp-media .desktop-only {
+    display: none;
+  }
+
+  .editorial-card .vp-media .tablet-only { display: block; }
+}
+
+/* desktop up */
+@media screen and (min-width: 1200px) {
+  .editorial-card .vp-media .mobile-only,
+  .editorial-card .vp-media .tablet-only {
+    display: none;
+  }
+
+  .editorial-card .vp-media .desktop-only { display: block; }
+}

libs/blocks/editorial-card/editorial-card.js

@@ -25,9 +25,10 @@ async function decorateLockupFromContent(el) {
 const extendDeviceContent = (el) => {
   const detail = el.querySelector('[class^="detail-"]');
   const prevElem = detail?.previousElementSibling;
-  if (!prevElem || ![...prevElem.classList].some((c) => c.startsWith('body-'))) return;
-  prevElem.classList.remove('body-m');
-  prevElem.classList.add('body-xxs', 'device');
+  if (!prevElem) return;
+  const elBodyClass = [...prevElem.classList].find((c) => c.startsWith('body-'));
+  prevElem.classList.remove(elBodyClass);
+  prevElem.classList.add('device');
 };
 
 const decorateMedia = (el, media) => {
@@ -37,14 +38,14 @@ const decorateMedia = (el, media) => {
   if (mediaVideo) {
     applyHoverPlay(mediaVideo);
   }
-  if (media.children.length > 1) decorateBlockBg(el, media);
+  if (media.children.length > 1) decorateBlockBg(el, media, { className: 'vp-media' });
 };
 
 const decorateForeground = async (el, rows) => {
-  rows.forEach(async (row, i) => {
+  rows.forEach((row, i) => {
     if (i === 0) {
       row.classList.add('foreground');
-      await decorateLockupFromContent(row);
+      decorateLockupFromContent(row);
     } else if (i === (rows.length - 1)) {
       row.classList.add('card-footer');
       if (!row.textContent.trim()) row.classList.add('empty');
@@ -57,12 +58,13 @@ const decorateForeground = async (el, rows) => {
 };
 
 const decorateBgRow = (el, background) => {
-  if (background.textContent.trim() === '') {
+  decorateBlockBg(el, background);
+  const rows = background.querySelectorAll(':scope > div');
+  const bgRowsEmpty = [...rows].every((row) => row.innerHTML.trim() === '');
+  if (bgRowsEmpty) {
     el.classList.add('no-bg');
     background.remove();
-    return;
   }
-  decorateBlockBg(el, background);
 };
 
 function handleClickableCard(el) {

libs/blocks/text/text.css

@@ -31,7 +31,6 @@
   position: absolute;
   right: 0;
   top: 0;
-  z-index: -1;
   overflow: hidden;
 }
 

libs/styles/styles.css

@@ -211,7 +211,8 @@
 .detail-xl,
 .detail-l,
 .detail-m,
-.detail-s {
+.detail-s,
+.detail-xs {
   margin: 0;
 }
 

libs/utils/decorate.js

@@ -104,10 +104,10 @@ export function handleFocalpoint(pic, child, removeChild) {
   image.style.objectPosition = `${x} ${y}`;
 }
 
-export async function decorateBlockBg(block, node, { useHandleFocalpoint = false } = {}) {
+export async function decorateBlockBg(block, node, { useHandleFocalpoint = false, className = 'background' } = {}) {
   const childCount = node.childElementCount;
   if (node.querySelector('img, video, a[href*=".mp4"]') || childCount > 1) {
-    node.classList.add('background');
+    node.classList.add(className);
     const binaryVP = [['mobile-only'], ['tablet-only', 'desktop-only']];
     const allVP = [['mobile-only'], ['tablet-only'], ['desktop-only']];
     const viewports = childCount === 2 ? binaryVP : allVP;