MWPW-154893 - [editorial-card] bugs (#2656)

* added .support-rtl variant for easier rtl loc support

* moved support-rtl to tablet up selector

* remove right

* removed margin-top bottom tablet styles

* added empty class and updated has-footer to equal-height to expose that as a variant

* s spacing gap default

* action column-gap

* no footer test coverage

* PR feedback

* revert marquee changes

* updated .footer class to .card-footer to prevent naming colision

* updated test ref

* linting whitespace, test label clarity

* revert icon block changes derp

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

@@ -55,7 +55,7 @@
   min-width: initial;
 }
 
-.editorial-card.has-footer {
+.editorial-card.equal-height {
   height: 100%;
 }
 
@@ -79,27 +79,29 @@
 }
 
 .editorial-card .foreground,
-.editorial-card .footer {
+.editorial-card .card-footer {
   padding: var(--spacing-xs);
 }
 
 .editorial-card .extra-row {
   padding: 0 var(--spacing-xs);
 }
 
-.editorial-card .footer {
+.editorial-card .card-footer {
   padding-top: 0;
   margin-top: auto;
 }
 
-.editorial-card .footer > div {
+.editorial-card .card-footer > div {
   display: flex;
   flex-direction: column;
   text-align: end;
   justify-content: end;
   row-gap: var(--spacing-xxs);
 }
 
+.editorial-card .card-footer.empty { padding: 0; }
+
 .editorial-card.no-bg.no-border .foreground {
   padding: var(--spacing-s) 0;
 }
@@ -109,7 +111,7 @@
 }
 
 .editorial-card.no-bg.no-border .static,
-.editorial-card.no-bg.no-border .footer {
+.editorial-card.no-bg.no-border .card-footer {
   padding-inline: 0;
 }
 
@@ -127,8 +129,8 @@
   line-height: 0;
 }
 
-.editorial-card.footer-align-left .footer > div { text-align: start; }
-.editorial-card.footer-align-center .footer > div { text-align: center; }
+.editorial-card.footer-align-left .card-footer > div { text-align: start; }
+.editorial-card.footer-align-center .card-footer > div { text-align: center; }
 
 .editorial-card.no-bg.no-border .foreground > div { 
   row-gap: var(--spacing-xs);
@@ -154,11 +156,11 @@
 }
 
 .editorial-card .action-area, 
-.editorial-card .footer > .action-area {
+.editorial-card .card-footer > .action-area {
   display: flex;
   align-items: center;
   justify-content: right;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs) var(--spacing-s);
   flex-flow: wrap;
   flex-direction: row;
 }
@@ -171,16 +173,13 @@
   justify-content: center;
 }
 
-.editorial-card.right .action-area {
-  justify-content: right;
-}
 
 .editorial-card hr {
   background-color: currentcolor;
   border: none;
   height: 1px;
   width: 100%;
-  margin: var(--spacing-xs) 0;
+  margin: var(--spacing-xxs) 0;
 }
 
 .editorial-card .background {
@@ -204,6 +203,11 @@
   position: relative;
 }
 
+.editorial-card:is(.media-square, .media-wide, .media-standard, .media-tall) .media-area .milo-video {
+  height: auto;
+  padding: 0;
+}
+
 /* Aspect Ratio */
 .editorial-card.media-square .media-area img,
 .editorial-card.media-square .media-area video {
@@ -224,7 +228,8 @@
 }
 
 .editorial-card.media-tall .media-area img,
-.editorial-card.media-tall .media-area video {
+.editorial-card.media-tall .media-area video,
+.editorial-card.media-tall .media-area .milo-video {
   aspect-ratio: var(--aspect-ratio-tall);
   max-height: unset;
 }
@@ -241,10 +246,5 @@
   justify-items: center; 
 }
 
-.editorial-card.right { 
-  text-align: end; 
-  justify-items: end; 
-}
-
 .editorial-card.footer-align-left .action-area { justify-content: start; }
 .editorial-card.footer-align-center .action-area { justify-content: center; }

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

@@ -46,7 +46,8 @@ const decorateForeground = async (el, rows) => {
       row.classList.add('foreground');
       await decorateLockupFromContent(row);
     } else if (i === (rows.length - 1)) {
-      row.classList.add('footer');
+      row.classList.add('card-footer');
+      if (!row.textContent.trim()) row.classList.add('empty');
     } else {
       row.classList.add('extra-row');
     }
@@ -86,12 +87,12 @@ const init = async (el) => {
   if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup');
   let rows = el.querySelectorAll(':scope > div');
   const [head, middle, ...tail] = rows;
-  if (rows.length === 4) el.classList.add('has-footer');
+  if (rows.length === 4) el.classList.add('equal-height');
   if (rows.length >= 1) {
     const count = rows.length >= 3 ? 'three-plus' : rows.length;
     switch (count) {
       case 'three-plus':
-        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:footer)
+        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
         decorateBgRow(el, head);
         rows = tail;
         await decorateForeground(el, rows);

libs/styles/styles.css

@@ -874,10 +874,6 @@ a.static:hover {
   .con-block.xl-spacing-static-bottom-tablet { padding-bottom: var(--spacing-xl-static); }
   .con-block.xxl-spacing-static-bottom-tablet { padding-bottom: var(--spacing-xxl-static); }
   .con-block.xxxl-spacing-static-bottom-tablet { padding-bottom: var(--spacing-xxxl-static); }
-
-  /* margin */
-  .con-block.margin-top-tablet { margin-top: var(--spacing-s); }
-  .con-block.margin-bottom-tablet { margin-bottom: var(--spacing-s); }
 }
 
 /* tablet large up */

test/blocks/editorial-card/editorial-card.test.js

@@ -34,7 +34,7 @@ describe('editorial-card', () => {
   });
 
   it('w/ 4 rows has a footer', () => {
-    const footer = editorialCards[3].querySelector('.footer');
+    const footer = editorialCards[3].querySelector('.card-footer');
     expect(footer).to.exist;
   });
 

test/blocks/editorial-card/mocks/body.html

@@ -117,7 +117,7 @@ <h3 id="open-key-variant-per-breakpoint-media-has-footer-row">Open key-variant,
       </div>
     </div>
   </div>
-  <h2>extra static row</h2>
+  <h2>Empty footer row and extra static row</h2>
     <div class="editorial-card click">
       <div>
         <div></div>
@@ -141,7 +141,7 @@ <h3>Healine</h3>
         </div>
       </div>
       <div>
-        <div data-align="justify"><strong><a href="http://adobe.com/learn" target="_blank">Learn More</a></strong> <em><a href="">Watch the Video</a></em> <a href="">another link</a></div>
+        <div></div>
       </div>
     </div>
   </div>