Merge pull request #566 from hlxsites/508

feat: implement product opco cards

blocks/cards/cards.css

@@ -13,3 +13,29 @@
 .cards-card-body > p {
   @apply text-sm text-gray-500 pt-0 pb-4 line-clamp-4 h-20 break-words;
 }
+
+/* Opco cards */
+
+.cards.opco ul {
+  @apply gap-x-8 gap-y-16;
+}
+
+.cards.opco li {
+  @apply pl-8 pr-2 border-l-[0.5px] border-black;
+}
+
+.cards.opco .cards-card-body {
+  @apply px-0 py-2;
+}
+
+.cards.opco .cards-card-body > h3 {
+  @apply h-16;
+}
+
+.cards.opco .cards-card-body > p {
+  @apply h-48 text-danahergray-900;
+}
+
+.cards.opco .cards-card-body > a {
+  @apply text-danaherpurple-500;
+}

blocks/cards/cards.js

@@ -11,19 +11,30 @@ export default function decorate(block) {
   else ulElement.classList.add('lg:grid-cols-3');
 
   [...block.children].forEach((row) => {
+    let type = '';
     const heading = row.querySelector('h2');
     if (heading) heading.className = 'card-title text-gray-900 my-2 font-extrabold text-3xl py-2';
+    const h3Heading = row.querySelector('h3');
+    const typeP = h3Heading?.previousElementSibling;
+    if (typeP) {
+      type = typeP.textContent;
+      typeP.remove();
+      block.classList.add(type.toLowerCase());
+    }
     let readMoreLink = row.querySelector('a');
-    const cardWrapper = readMoreLink
+    const cardWrapper = (readMoreLink && !type)
       ? a({ href: makePublicUrl(readMoreLink.href), title: readMoreLink.title })
       : div();
-    cardWrapper.className = 'card-wrapper flex flex-col col-span-1 mx-auto justify-center max-w-xl cursor-pointer relative transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden';
+    cardWrapper.className = 'card-wrapper flex flex-col col-span-1 mx-auto justify-center max-w-xl overflow-hidden';
+    if (!type) {
+      cardWrapper.classList.add('cursor-pointer relative transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg'.split(' '));
+    }
     const card = li((heading) || '', cardWrapper);
     cardWrapper.innerHTML = row.innerHTML;
 
-    [...cardWrapper.children].forEach((e) => {
-      if (e.querySelector('picture, img')) e.className = 'cards-card-image leading-5';
-      else e.className = 'cards-card-body p-4 bg-white rounded-b';
+    [...cardWrapper.children].forEach((elem) => {
+      if (elem.querySelector('picture, img')) elem.className = 'cards-card-image leading-5';
+      else elem.className = 'cards-card-body p-4 bg-white rounded-b';
     });
 
     readMoreLink = cardWrapper.querySelector('a');

styles/styles.css

@@ -480,6 +480,44 @@
     color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+/* Opco cards */
+
+.cards.opco ul {
+    -moz-column-gap: 2rem;
+         column-gap: 2rem;
+    row-gap: 4rem;
+}
+
+.cards.opco li {
+    border-left-width: 0.5px;
+    --tw-border-opacity: 1;
+    border-color: rgb(0 0 0 / var(--tw-border-opacity));
+    padding-left: 2rem;
+    padding-right: 0.5rem;
+}
+
+.cards.opco .cards-card-body {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.cards.opco .cards-card-body > h3 {
+    height: 4rem;
+}
+
+.cards.opco .cards-card-body > p {
+    height: 12rem;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.cards.opco .cards-card-body > a {
+    --tw-text-opacity: 1;
+    color: rgb(117 35 255 / var(--tw-text-opacity));
+}
+
 .columns-2-cols > div {
     width: 100%;
 }

tools/actions/convert/test/fixtures/product1-converted.html

@@ -16,9 +16,7 @@
       <div class="carousel">
         <div>
           <div>
-            <h2>We see a way to save over 14,000 hours.</h2>
-            <p>Manual data handling time per year in a Cell Line Development Department.</p>
-            <p><a href="/us/en/expert.html">Talk to an Expert</a></p>
+            <h2>Just One Heading</h2>
           </div>
           <div>
             <img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/closeup-scientist-marking.jpg" alt="closeup">
@@ -43,7 +41,23 @@ <h2>We see a way to access multidimensional data in minutes instead of weeks</h2
             <img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/group-of-people-problemsolving-together.jpg" alt="group-of-people">
           </div>
         </div>
+        <div>
+          <div>
+            <h2>This is a tab with just the hero image</h2>
+            <p><a href="/us/en/blog.html">Button to Blogs</a></p>
+          </div>
+          <div>
+            <img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/products/sciex/zenotof-7600/sciex-zenotof-7600-external-product-hero.jpg" alt="hero">
+          </div>
+        </div>
+        <div>
+          <div>Square image without title</div>
+          <div>
+            <img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/products/sciex/zenotof-7600/sciex-zenotof-7600-product-image1.jpg" alt="dave">
+          </div>
+        </div>
       </div>
+      <h2>Categories</h2>
       <div class="product-category-list">
         <div>
           <div></div>
@@ -83,28 +97,28 @@ <h3>View our workflow solutions</h3>
           <div>
             <h2>Discover products across the life science companies of Danaher</h2>
           </div>
-          <div>
-            <h3>We bridge the gap between research and practical application, enabling the development of revolutionary innovations such as biopharmaceuticals and enhanced synthetic biologics—helping people live longer, healthier lives.</h3>
-          </div>
+          <div>We bridge the gap between research and practical application, enabling the development of revolutionary innovations such as biopharmaceuticals and enhanced synthetic biologics—helping people live longer, healthier lives.</div>
         </div>
       </div>
       <hr>
-      <div class="cards articlecard">
+      <div class="cards articlecard cols-4">
         <div>
           <div>
             <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="Sciex">
           </div>
           <div>
+            <p>opco</p>
             <h3>Sciex</h3>
             <p>SCIEX has led the field of mass spectrometry and capillary electrophoresis for over 50 years, pioneering innovative solutions for the precision detection of quantification of molecules. Our products and services have supported thousands of scientists and influenced life-changing research that has positively impacted the lives of people around the world.<a href="#">Browse Products</a></p>
           </div>
         </div>
         <div>
           <div>
-            <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="Sciex">
+            <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="IDBS">
           </div>
           <div>
-            <h3>Sciex</h3>
+            <p>opco</p>
+            <h3>IDBS</h3>
             <p>SCIEX has led the field of mass spectrometry and capillary electrophoresis for over 50 years, pioneering innovative solutions for the precision detection of quantification of molecules. Our products and services have supported thousands of scientists and influenced life-changing research that has positively impacted the lives of people around the world.<a href="#">Browse Products</a></p>
           </div>
         </div>
@@ -113,6 +127,7 @@ <h3>Sciex</h3>
             <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="Sciex">
           </div>
           <div>
+            <p>opco</p>
             <h3>Sciex</h3>
             <p>SCIEX has led the field of mass spectrometry and capillary electrophoresis for over 50 years, pioneering innovative solutions for the precision detection of quantification of molecules. Our products and services have supported thousands of scientists and influenced life-changing research that has positively impacted the lives of people around the world.<a href="#">Browse Products</a></p>
           </div>
@@ -122,16 +137,18 @@ <h3>Sciex</h3>
             <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="Sciex">
           </div>
           <div>
+            <p>opco</p>
             <h3>Sciex</h3>
             <p>SCIEX has led the field of mass spectrometry and capillary electrophoresis for over 50 years, pioneering innovative solutions for the precision detection of quantification of molecules. Our products and services have supported thousands of scientists and influenced life-changing research that has positively impacted the lives of people around the world.<a href="#">Browse Products</a></p>
           </div>
         </div>
         <div>
           <div>
-            <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="Sciex">
+            <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="Phenomenex">
           </div>
           <div>
-            <h3>Sciex</h3>
+            <p>opco</p>
+            <h3>Phenomenex</h3>
             <p>SCIEX has led the field of mass spectrometry and capillary electrophoresis for over 50 years, pioneering innovative solutions for the precision detection of quantification of molecules. Our products and services have supported thousands of scientists and influenced life-changing research that has positively impacted the lives of people around the world.<a href="#">Browse Products</a></p>
           </div>
         </div>
@@ -140,12 +157,13 @@ <h3>Sciex</h3>
             <img src="https://s7d9.scene7.com/is/image/danaherstage/sciex-pa-800-charge-hetro-white-product-image10" alt="Sciex">
           </div>
           <div>
+            <p>opco</p>
             <h3>Sciex</h3>
             <p>SCIEX has led the field of mass spectrometry and capillary electrophoresis for over 50 years, pioneering innovative solutions for the precision detection of quantification of molecules. Our products and services have supported thousands of scientists and influenced life-changing research that has positively impacted the lives of people around the world.<a href="#">Browse Products</a></p>
           </div>
         </div>
       </div>
-      <div class="columns">
+      <div class="columns itemscenter">
         <div>
           <div>
             <p><strong>PRODUCT SPOTLIGHT</strong></p>
@@ -169,11 +187,11 @@ <h2>Intabio ZT System</h2>
         </div>
         <div>
           <div>creationDate</div>
-          <div>Fri, 24 Nov 2023 05:48:17 GMT</div>
+          <div>Fri, 24 Nov 2023 06:27:32 GMT</div>
         </div>
         <div>
           <div>updateDate</div>
-          <div>Mon, 27 Nov 2023 10:19:39 GMT</div>
+          <div>Fri, 08 Dec 2023 10:37:45 GMT</div>
         </div>
       </div>
     </div>