512 Updated converter to get card on application page

blocks/cards/cards.js

@@ -6,10 +6,12 @@ import { makePublicUrl } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
   /* change to ul, li */
-  const ulElement = ul({ class: 'list-none m-0 p-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6' });
+  const ulElement = ul({ class: 'list-none m-0 p-0 grid grid-cols-1 sm:grid-cols-2 gap-6' });
+  if (block.classList.contains('articlecard-4')) ulElement.classList.add('lg:grid-cols-4');
+  else ulElement.classList.add('lg:grid-cols-3');
 
   [...block.children].forEach((row) => {
-    const heading = row.querySelector('h2');
+    const heading = row.querySelector('h3');
     heading.className = 'card-title text-gray-900 my-2 font-extrabold text-3xl py-2';
     let readMoreLink = row.querySelector('a');
     const cardWrapper = readMoreLink
@@ -30,7 +32,6 @@ export default function decorate(block) {
       readMoreLink.className = 'card-link inline-flex w-full pt-5 text-base text-danaherblue-600 font-semibold';
       card.querySelector('div.cards-card-body').append(readMoreLink);
     }
-
     ulElement.append(card);
   });
   ulElement.querySelectorAll('img').forEach((img) => {

tools/actions/convert/test/fixtures/application-detail1-converted.html

@@ -36,6 +36,17 @@ <h1>Synthetic Biology</h1>
       <hr>
       <h1>Synthetic Biology Solutions</h1>
       <p>To learn more about how Danaher Life Sciences companies facilitate synthetic biology workflows visit:</p>
+      <div class="cards articlecard-4">
+        <div>
+          <div>
+            <img src="https://s7d9.scene7.com/is/image/danaherstage/plasmid-dna-hero" alt="Danaher Corporation">
+          </div>
+          <div>
+            <h3>Plasmid DNA Development and Manufacturing</h3>
+            <p>High quality plasmid vectors are the essential building blocks of life-saving biologics like mRNA drugs, monoclonal antibodies and immunotherapies. <a href="/us/en/solutions/pdna-synthesis.html">View Solution</a></p>
+          </div>
+        </div>
+      </div>
       <div class="section-metadata">
         <div>
           <div>style</div>

tools/importer/transformers/cards.js

@@ -1,48 +1,63 @@
 /* global WebImporter */
+const card = (tmp, cards, document) => {
+  const h2 = tmp.content.querySelector('h2');
+  const articleCard = tmp.content.querySelector('articlecard');
+  if (articleCard) {
+    const cardImg = articleCard.getAttribute('cardimg');
+    const altText = articleCard.getAttribute('imagealttext');
+    const cardTitle = articleCard.getAttribute('cardtitle');
+    const cardDescription = articleCard.getAttribute('carddescription');
+    const cardHref = articleCard.getAttribute('cardhref');
+    const cardLinkText = articleCard.getAttribute('linktext');
+
+    const leftDiv = document.createElement('div');
+    if (h2) {
+      leftDiv.append(h2);
+    }
+    const img = document.createElement('img');
+    img.setAttribute('src', cardImg);
+    if (altText) {
+      img.setAttribute('alt', altText);
+    } else {
+      img.setAttribute('alt', 'Danaher Corporation');
+    }
+    leftDiv.append(img);
+    const rightDiv = document.createElement('div');
+    const h3 = document.createElement('h3');
+    h3.textContent = cardTitle;
+    rightDiv.append(h3);
+    const p = document.createElement('p');
+    p.textContent = cardDescription;
+    const a = document.createElement('a');
+    a.setAttribute('href', cardHref);
+    a.textContent = cardLinkText;
+    p.append(a);
+    rightDiv.append(p);
+    cards.push([leftDiv, rightDiv]);
+  }
+};
+
 const createCards = (main, document) => {
   main.querySelectorAll('fulllayout').forEach((fl) => {
     const cards = [];
-    fl.querySelectorAll('grid[columns="3"] > template').forEach((tmp) => {
-      const h2 = tmp.content.querySelector('h2');
-      const articleCard = tmp.content.querySelector('articlecard');
-      if (articleCard) {
-        const cardImg = articleCard.getAttribute('cardimg');
-        const altText = articleCard.getAttribute('imagealttext');
-        const cardTitle = articleCard.getAttribute('cardtitle');
-        const cardDescription = articleCard.getAttribute('carddescription');
-        const cardHref = articleCard.getAttribute('cardhref');
-        const cardLinkText = articleCard.getAttribute('linktext');
+    const cells = [];
+    const threeColumn = fl.querySelectorAll('grid[columns="3"] > template');
+    const fourColumn = fl.querySelectorAll('grid[columns="4"] > template');
+    if (threeColumn.length > 0) {
+      threeColumn.forEach((tmp) => {
+        card(tmp, cards, document);
+      });
+      cells.push(['Cards (articlecard) ']);
+    }
+
+    if (fourColumn.length > 0) {
+      fourColumn.forEach((tmp) => {
+        card(tmp, cards, document);
+      });
+      cells.push(['Cards (articlecard-4) ']);
+    }
 
-        const leftDiv = document.createElement('div');
-        if (h2) {
-          leftDiv.append(h2);
-        }
-        const img = document.createElement('img');
-        img.setAttribute('src', cardImg);
-        if (altText) {
-          img.setAttribute('alt', altText);
-        } else {
-          img.setAttribute('alt', 'Danaher Corporation');
-        }
-        leftDiv.append(img);
-        const rightDiv = document.createElement('div');
-        const h3 = document.createElement('h3');
-        h3.textContent = cardTitle;
-        rightDiv.append(h3);
-        const p = document.createElement('p');
-        p.textContent = cardDescription;
-        const a = document.createElement('a');
-        a.setAttribute('href', cardHref);
-        a.textContent = cardLinkText;
-        p.append(a);
-        rightDiv.append(p);
-        cards.push([leftDiv, rightDiv]);
-      }
-    });
-    const cells = [
-      ['Cards (articlecard)'],
-      ...cards,
-    ];
+    cells.push(...cards);
 
     if (cards.length > 0) {
       fl.before(document.createElement('hr'));

tools/importer/transformers/fullLayoutSection.js

@@ -10,8 +10,6 @@ const createFullLayoutSection = (main, document) => {
       if (i < arr.length - 1 && !arr[arr.length - 1].querySelector('div.bg-danaherlightblue-50')?.querySelector('div.cta-section')) {
         table.after(document.createElement('hr'));
       }
-    } else if (i < arr.length - 1 && !arr[i + 1].querySelector('div.bg-danaherlightblue-50')?.querySelector('div.cta-section')) {
-      e.after(document.createElement('hr'));
     }
   });
 };