added empty class and updated has-footer to equal-height to expose th…

…at as a variant
adobecom · Jul 29, 2024 · b073e7f · b073e7f
1 parent c21a38a
commit b073e7f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/libs/blocks/editorial-card/editorial-card.css b/libs/blocks/editorial-card/editorial-card.css
@@ -55,7 +55,7 @@
   min-width: initial;
 }
 
-.editorial-card.has-footer {
+.editorial-card.equal-height {
   height: 100%;
 }
 
@@ -100,6 +100,8 @@
   row-gap: var(--spacing-xxs);
 }
 
+.editorial-card .footer.empty { padding: 0; }
+
 .editorial-card.no-bg.no-border .foreground {
   padding: var(--spacing-s) 0;
 }
@@ -158,7 +160,7 @@
   display: flex;
   align-items: center;
   justify-content: right;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
   flex-flow: wrap;
   flex-direction: row;
 }
@@ -177,7 +179,7 @@
   border: none;
   height: 1px;
   width: 100%;
-  margin: var(--spacing-xs) 0;
+  margin: var(--spacing-xxs) 0;
 }
 
 .editorial-card .background {

diff --git a/libs/blocks/editorial-card/editorial-card.js b/libs/blocks/editorial-card/editorial-card.js
@@ -47,6 +47,7 @@ const decorateForeground = async (el, rows) => {
       await decorateLockupFromContent(row);
     } else if (i === (rows.length - 1)) {
       row.classList.add('footer');
+      if (row.textContent.trim() === '') row.classList.add('empty');
     } else {
       row.classList.add('extra-row');
     }
@@ -86,7 +87,7 @@ 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) {