Merge pull request #1308 from hlxsites/1299-wsaw-2-column

1299 wsaw 2 column

blocks/accordion/accordion.css

@@ -119,6 +119,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.accordion-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .accordion-wrapper :is(.fill-current) {
   fill: currentColor
 }

blocks/article-info/article-info.css

@@ -88,6 +88,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.article-info-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .article-info-wrapper :is(.pl-1) {
   padding-left: 0.25rem
 }

blocks/articles-list/articles-list.css

@@ -171,6 +171,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.articles-list-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .articles-list-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))

blocks/banner/banner.css

@@ -45,6 +45,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.banner :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .banner :is(.p-4) {
   padding: 1rem
 }

blocks/blog-hero/blog-hero.css

@@ -16,6 +16,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.blog-hero-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .blog-hero-wrapper :is(.px-2) {
   padding-left: 0.5rem;
   padding-right: 0.5rem

blocks/breadcrumb/breadcrumb.css

@@ -86,6 +86,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.breadcrumb-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .breadcrumb-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))

blocks/card-list/card-list.css

@@ -278,6 +278,11 @@
   background-color: rgb(117 35 255 / var(--tw-bg-opacity))
 }
 
+.card-list-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .card-list-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))

blocks/cards/cards.css

@@ -166,6 +166,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.cards-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .cards-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))

blocks/carousel/carousel.css

@@ -262,6 +262,11 @@
   background-color: rgb(234 222 255 / var(--tw-bg-opacity));
 }
 
+.carousel-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity));
+}
+
 .carousel-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));

blocks/columns/columns.css

@@ -136,6 +136,10 @@
   height: 100%;
 }
 
+.columns-wrapper :is(.w-1\/2) {
+  width: 50%;
+}
+
 .columns-wrapper :is(.w-12) {
   width: 3rem;
 }
@@ -164,6 +168,10 @@
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.columns-wrapper :is(.flex-col) {
+  flex-direction: column;
+}
+
 .columns-wrapper :is(.flex-col-reverse) {
   flex-direction: column-reverse;
 }
@@ -244,6 +252,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity));
 }
 
+.columns-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity));
+}
+
 .columns-wrapper :is(.bg-danaherred-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(122 25 127 / var(--tw-bg-opacity));
@@ -461,14 +474,22 @@
     width: 50%;
   }
 
-  .columns-wrapper :is(.lg\:grid-cols-2) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .columns-wrapper :is(.lg\:w-1\/3) {
+    width: 33.333333%;
+  }
+
+  .columns-wrapper :is(.lg\:w-2\/3) {
+    width: 66.666667%;
   }
 
   .columns-wrapper :is(.lg\:grid-cols-3) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .columns-wrapper :is(.lg\:flex-row) {
+    flex-direction: row;
+  }
+
   .columns-wrapper :is(.lg\:flex-col-reverse) {
     flex-direction: column-reverse;
   }

blocks/columns/columns.js

@@ -3,6 +3,7 @@ import {
 } from '../../scripts/dom-builder.js';
 
 export default function decorate(block) {
+  const sectionDiv = block.closest('.section');
   const cols = [...block.firstElementChild.children];
   block.classList.add(`columns-${cols.length}-cols`);
   const imageAspectRatio = 1.7778;
@@ -12,11 +13,25 @@ export default function decorate(block) {
         ele.classList.add(...'align-text-center w-full h-full'.split(' '));
       } else {
         ele.classList.add(...'align-text-top pb-7 py-0 my-0'.split(' '));
+        const firstDiv = ele.querySelector('div:nth-child(1)');
+        const secondDiv = ele.querySelector('div:nth-child(2)');
+        if (sectionDiv.className.includes('thirtyseventy')) {
+          firstDiv.classList.add('lg:w-1/3');
+          secondDiv.classList.add('lg:w-2/3');
+        } else if (sectionDiv.className.includes('seventythirty')) {
+          firstDiv.classList.add('lg:w-2/3');
+          secondDiv.classList.add('lg:w-1/3');
+        } else {
+          firstDiv.classList.add('lg:w-1/2');
+          secondDiv.classList.add('lg:w-1/2');
+        }
       }
     }
   });
   block.querySelectorAll('h2').forEach((ele) => {
-    ele.classList.add(...'my-0 lg:my-4 font-medium text-4xl2 inline-flex leading-10 text-danahergray-900'.split(' '));
+    ele.classList.add(...'my-0 lg:my-4 font-medium text-4xl2 inline-flex leading-10'.split(' '));
+    if (sectionDiv.className.includes('text-white')) ele.classList.add('text-white');
+    else ele.classList.add('text-danahergray-900');
   });
   block.querySelectorAll('.button-container > a').forEach((ele) => {
     ele.classList.add(...'bg-transparent no-underline text-lg px-5 py-3 text-danaherpurple-500 border border-danaherpurple-500 leading-5 rounded-full font-medium mt-6 ease-in-out duration-150 transition-all hover:bg-danaherpurple-500 hover:text-white'.split(' '));
@@ -99,7 +114,7 @@ export default function decorate(block) {
         if (window.location.pathname.includes('/us/en/blog/') || window.location.pathname.includes('/us/en/news/')) {
           block.firstElementChild?.classList.add(...'container max-w-7xl mx-auto flex flex-col-reverse gap-x-12 lg:flex-col-reverse justify-items-center'.split(' '));
         } else {
-          block.firstElementChild?.classList.add(...'container max-w-7xl mx-auto grid grid-cols-1 gap-x-12 gap-y-4 lg:grid-cols-2 justify-items-center'.split(' '));
+          block.firstElementChild?.classList.add(...'container max-w-7xl mx-auto flex flex-col gap-x-12 gap-y-4 lg:flex-row justify-items-center'.split(' '));
         }
         const pTags = row.querySelectorAll('p');
         pTags.forEach((element) => {
@@ -119,7 +134,9 @@ export default function decorate(block) {
           if (item.title === 'link') {
             item.parentElement.classList.add('link', 'pb-8');
             item.textContent += ' ->';
-            item.classList.add(...'text-sm font-bold text-danaherpurple-500'.split(' '));
+            item.classList.add(...'text-sm font-bold'.split(' '));
+            if (sectionDiv.className.includes('text-white')) item.classList.add('text-white');
+            else item.classList.add('text-danaherpurple-500');
           }
         });
       }
@@ -134,7 +151,13 @@ export default function decorate(block) {
             pic.querySelector('img').classList.add(...'absolute bottom-0 h-full w-full object-cover'.split(' '));
           } else {
             picWrapper.classList.add('columns-img-col', 'order-none');
-            pic.querySelector('img').classList.add('block');
+            const seventythirtyEl = picWrapper.parentElement
+              ?.parentElement?.parentElement?.parentElement;
+            if (seventythirtyEl.querySelector('img')) {
+              pic.querySelector('img').classList.add('block', 'w-1/2');
+            } else {
+              pic.querySelector('img').classList.add('block');
+            }
           }
         }
       }

blocks/download/download.css

@@ -86,6 +86,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.download-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .download-wrapper :is(.object-cover) {
   -o-object-fit: cover;
      object-fit: cover

blocks/embed/embed.css

@@ -45,6 +45,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.embed-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .embed-wrapper :is(.text-center) {
   text-align: center
 }

blocks/footer/footer.css

@@ -183,6 +183,11 @@
   background-color: rgb(234 222 255 / var(--tw-bg-opacity));
 }
 
+.footer-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity));
+}
+
 .footer-wrapper :is(.fill-transparent) {
   fill: transparent;
 }

blocks/hero/hero.css

@@ -137,6 +137,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.hero-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .hero-wrapper :is(.bg-transparent) {
   background-color: transparent
 }

blocks/logo-clouds/logo-clouds.css

@@ -130,6 +130,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity));
 }
 
+.logo-clouds-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity));
+}
+
 .logo-clouds-wrapper :is(.bg-gray-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));

blocks/marketo-form/marketo-form.css

@@ -76,6 +76,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.marketo-form-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .marketo-form-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))

blocks/mini-teasers/mini-teasers.css

@@ -85,6 +85,10 @@
   border-bottom-width: 1px
 }
 
+.mini-teasers-wrapper :is(.border-l) {
+  border-left-width: 1px
+}
+
 .mini-teasers-wrapper :is(.border-t) {
   border-top-width: 1px
 }
@@ -98,11 +102,21 @@
   border-color: rgb(0 0 0 / var(--tw-border-opacity))
 }
 
+.mini-teasers-wrapper :is(.border-danahergray-300) {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity))
+}
+
 .mini-teasers-wrapper :is(.bg-danaherlightblue-50) {
   --tw-bg-opacity: 1;
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.mini-teasers-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .mini-teasers-wrapper :is(.stroke-current) {
   stroke: currentColor
 }
@@ -112,6 +126,10 @@
   padding-right: 0.5rem
 }
 
+.mini-teasers-wrapper :is(.pl-6) {
+  padding-left: 1.5rem
+}
+
 .mini-teasers-wrapper :is(.pt-4) {
   padding-top: 1rem
 }

blocks/mini-teasers/mini-teasers.js

@@ -5,7 +5,7 @@ export default function decorate(block) {
   [...block.children].forEach((element) => {
     if ([...block.children].length === 4) block.classList.add('lg:grid-cols-4');
     else block.classList.add('lg:grid-cols-3');
-    element.classList.add(...'items-center mt-2'.split(' '));
+    element.classList.add(...'items-center mt-2 border-l border-danahergray-300 pl-6'.split(' '));
     element.querySelector('span')?.classList.add(...'w-16 h-16 stroke-current'.split(' '));
     const h3El = element.querySelector('h3');
     if (h3El) {

blocks/page-jump-menu/page-jump-menu.css

@@ -52,6 +52,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.page-jump-menu-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .page-jump-menu-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))

blocks/page-tabs/page-tabs.css

@@ -48,6 +48,11 @@
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
 }
 
+.page-tabs-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
 .page-tabs-wrapper :is(.bg-white) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))

blocks/popular-articles/popular-articles.css

@@ -1,4 +1,9 @@
 .popular-articles-wrapper :is(.bg-danaherlightblue-50) {
   --tw-bg-opacity: 1;
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
+}
+
+.popular-articles-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
 }