JS updates all card versions

Esri · Jan 15, 2025 · d69229b · d69229b
1 parent 77f82ab
commit d69229b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 101 deletions.
diff --git a/eds/blocks/cards/cards.css b/eds/blocks/cards/cards.css
@@ -39,6 +39,10 @@
     h3, p:last-child {
       padding-inline-end: var(--space-5);
     }
+
+    calcite-link {
+      display: block;
+    }
   }
 
   .cards-card-image {

diff --git a/eds/blocks/cards/cards.js b/eds/blocks/cards/cards.js
@@ -36,18 +36,19 @@ function processStandardCard(element) {
       el.classList.add('overlay-text');
     }
   });
-  const pictureEl = element.querySelector('picture')
-    .closest('p');
+  const pictureEl = element.querySelector('picture').closest('p');
   const overlayTextEl = element.querySelector('.overlay-text');
   if (overlayTextEl) pictureEl.append(overlayTextEl);
-  pictureEl.nextElementSibling.classList.add('card-body-title');
-  const cardBodyTitle = element.querySelector('.card-body-title');
+  if(pictureEl) {
+    pictureEl.nextElementSibling.classList.add('card-body-title');
+    const cardBodyTitle = element.querySelector('.card-body-title');
+    if (cardBodyContent.lastChild.classList === '') cardBodyContent.lastChild.classList.add('card-body-description');
 
-  if (cardBodyContent.lastChild.classList === '') cardBodyContent.lastChild.classList.add('card-body-description');
-
-  if (cardBodyTitle.nextElementSibling && !cardBodyTitle.nextElementSibling.classList.contains('card-body-description')) {
-    cardBodyTitle.nextElementSibling.classList.add('card-body-subtitle');
+    if (cardBodyTitle.nextElementSibling && !cardBodyTitle.nextElementSibling.classList.contains('card-body-description')) {
+      cardBodyTitle.nextElementSibling.classList.add('card-body-subtitle');
+    }
   }
+
 }
 
 export default function decorate(block) {
@@ -76,9 +77,18 @@ export default function decorate(block) {
           p.replaceWith(button);
         }
       });
-      if (!block.classList.contains('simple')) {
-        const isLastChildLink = element.lastElementChild?.tagName.toLowerCase() === 'calcite-link';
-        const titleSelector = isLastChildLink ? 'p:nth-last-child(3)' : 'p:nth-last-child(2)';
+
+      const linksCount = element.querySelectorAll('calcite-link').length;
+      let titleSelector;
+      if (block.classList.contains('block-group')) {
+        const pTags = element.querySelectorAll('p');
+        console.log('number of p '+pTags.length);
+        titleSelector = (pTags.length >= 3) ? 'p:nth-last-child(2)' : 'p:nth-last-child(1)';
+      } else if (!block.classList.contains('simple') && !block.classList.contains('standard')) {
+        titleSelector = (linksCount === 1) ? 'p:nth-last-child(3)' :
+            (linksCount === 2) ? 'p:nth-last-child(4)' : 'p:nth-last-child(3)';
+      }
+      if (titleSelector) {
         element.querySelectorAll(titleSelector).forEach((p) => {
           const h3 = document.createElement('h3');
           h3.innerHTML = p.innerHTML;

diff --git a/eds/blocks/tabs/tabs.css b/eds/blocks/tabs/tabs.css
@@ -23,26 +23,6 @@
     margin-block-start: var(--space-5);
   }
 
-  .cards ul {
-    align-items: stretch;
-  }
-
-  .cards li {
-    block-size: 100%;
-    flex: 0 0 100%;
-  }
-
-  .cards a {
-    block-size: 100%;
-    color: var(--calcite-ui-text-1);
-    display: block;
-    text-decoration: none;
-  }
-
-  .cards-card-body :is(picture, img) {
-    aspect-ratio: 342 / 192;
-  }
-
   p:last-child {
     align-items: center;
     display: flex;
@@ -81,38 +61,6 @@
     }
   }
 
-  .cards-card-body {
-    border: solid 1px var(--calcite-ui-border-1);
-    margin: var(--space-2);
-
-    & > p:first-child {
-      margin-block-end: 0;
-    }
-
-    & > p:nth-child(2) {
-      color: var(--calcite-ui-text-1);
-      font-size: var(--font-2);
-      margin-block-end: var(--space-2);
-      margin-inline: var(--space-5);
-    }
-
-    & > p:last-child {
-      color: var(--calcite-ui-text-1);
-      display: block;
-      font-size: var(--font-minus-1);
-      margin-block-end: var(--space-6);
-      margin-inline: var(--space-5);
-      padding: 0;
-    }
-
-    & > p:nth-child(3):not(:last-child) {
-      color: var(--calcite-ui-text-2);
-      font-size: var(--font-minus-1);
-      margin-block-end: var(--space-2);
-      margin-inline: var(--space-5);
-    }
-  }
-
   .tab-component {
     display: flex;
     flex-direction: column;
@@ -231,17 +179,6 @@
       }
     }
   }
-
-  /* .tab-content .text-wrapper, .tab-content .buttons-wrapper {
-    animation-delay: 50ms;
-    animation-duration: 550ms;
-    animation-fill-mode: both;
-    animation-timing-function: ease-in-out;
-  }
-
-  .tab-content[aria-hidden='false'] .text-wrapper, .tab-content[aria-hidden='false'] .buttons-wrapper {
-    animation-name: in-up;
-  } */
 }
 
 @media (width >= 900px) {
@@ -257,10 +194,6 @@
 
 @media (width >= 1024px) {
   .tabs {
-    .cards li {
-      flex: 0 0 33.33%;
-    }
-
     .tab-component {
       position: relative;
     }
@@ -357,10 +290,6 @@
 }
 
 @media (width >= 1440px) {
-  .tabs .cards li {
-    flex: 0 0 25%;
-  }
-
   .tabs .columns {
     margin: auto;
   }

diff --git a/eds/blocks/tabs/tabs.js b/eds/blocks/tabs/tabs.js
@@ -47,25 +47,6 @@ export default async function decorate(block) {
     }, content));
   }
 
-  const isCardsVariant = contents?.every((content) => content.querySelectorAll('.cards').length > 0);
-  if (isCardsVariant) {
-    contents.forEach((content) => {
-      const cards = content.querySelectorAll('.cards-card-body');
-      cards.forEach((card) => {
-        const anchor = card.querySelector('a');
-        anchor.classList.remove('button');
-        anchor.textContent = '';
-
-        const cardParent = card.parentElement;
-        cardParent.removeChild(card);
-
-        anchor.parentElement.parentElement.removeChild(anchor.parentElement);
-        anchor.appendChild(card);
-        cardParent.appendChild(anchor);
-      });
-    });
-  }
-
   if (!tabsContainFragments) {
     tabContents.forEach((content) => {
       const text = [content[1], content[2], content[3]];