Release into Prod 20240129

404.html

@@ -36,8 +36,8 @@
                         <div class="relative sm:pt-8 lg:pt-14 pt-12 md:pb-24 lg:pb-80 xl:col-start-1">
                             <h2 class="text-sm font-semibold text-indigo-300 tracking-wide uppercase"></h2>
                             <p class="text-sm font-semibold text-danaherblue-600 uppercase tracking-wide">404 error</p>
-                            <h1 class="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">Page not found</h1>
-                            <p class="mt-2 text-base text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
+                            <h1 class="heading-text mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">Page not found</h1>
+                            <p class="description-text mt-2 text-base text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
                             <div class="mt-6">
                                 <a href="https://lifesciences.danaher.com" title="Go back" class="group inline-flex items-center font-medium text-danaherblue-600 hover:text-danaherblue-500">Go back home
                                     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-2 group-hover:translate-x-1 group-hover:tracking-wide group-hover:font-semibold transition" fill="currentColor" viewBox="0 0 16 16">
@@ -58,4 +58,10 @@ <h1 class="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl
         </main>
         <footer></footer>
     </body>
+    <script type="text/javascript">
+        if(window.location.pathname === '/us/en/products/product-not-found'){
+            document.querySelector("h1.heading-text").innerHTML = 'Product not found';
+            document.querySelector("p.description-text").innerHTML = 'Sorry, we couldn’t find the product you’re looking for.';
+        }
+    </script>
 </html>

blocks/card-list/card-list.js

@@ -84,7 +84,7 @@ const createFilters = (articles, activeTag) => {
     a(
       {
         class:
-          'text-center my-2 inline-block rounded-full px-4 py-2 font-semibold bg-d text-danaherpurple-500 bg-danaherpurple-50 hover:bg-gray-100 hover:text-gray-500',
+          'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold bg-d text-danaherpurple-500 bg-danaherpurple-50 hover:bg-white hover:text-danaherpurple-500 border hover:border-danaherpurple-500',
         href: newUrl.toString(),
       },
       'View All',
@@ -95,7 +95,7 @@ const createFilters = (articles, activeTag) => {
     const tagAnchor = a(
       {
         class:
-          'text-center my-2 inline-block rounded-full px-4 py-2 font-semibold bg-d hover:bg-gray-100 hover:text-gray-500',
+          'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold bg-d hover:bg-white hover:text-danaherpurple-500 border hover:border-danaherpurple-500',
         href: newUrl.toString(),
       },
       keyword,

blocks/carousel/carousel.js

@@ -1,4 +1,5 @@
 import { button, div, span } from '../../scripts/dom-builder.js';
+import { decorateModals } from '../../scripts/scripts.js';
 
 /* eslint no-underscore-dangle: 0 */
 const DEFAULT = {
@@ -259,7 +260,7 @@ export default function decorate(block) {
       content.classList.add(...'lg:w-1/2 px-4 lg:px-8 xl:pr-10 pb-10 pt-6 md:pt-4 lg:py-20'.split(' '));
       const heading = content.querySelector('h2');
       const paragraphs = content.querySelectorAll('p:not(.button-container)');
-      const allBtns = content.querySelectorAll('p.button-container .btn, a[title="link"]');
+      const allBtns = content.querySelectorAll('p.button-container');
       if (heading) heading.classList.add(...'text-2xl md:text-4xl tracking-wide md:tracking-tight m-0 font-medium md:font-normal leading-8 md:leading-[55px]'.split(' '));
       paragraphs.forEach((paragraph) => {
         if (!paragraph.querySelector('a[title="link"]')) {
@@ -275,7 +276,14 @@ export default function decorate(block) {
             elBtn.innerHTML += `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 transition group-hover:translate-x-1" viewBox="0 0 16 16">
               <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/>
             </svg>`;
-          } else elBtn.className = `btn btn-lg ${(changedBtn === 0) ? 'btn-primary-purple' : 'btn-outline-trending-brand'} rounded-full px-6`;
+          } else {
+            elBtn.querySelector('a')?.classList.remove(...'btn btn-outline-primary'.split(' '));
+            elBtn.className = `btn btn-lg ${(changedBtn === 0) ? 'btn-primary-purple' : 'btn-outline-trending-brand'} rounded-full px-6`;
+            if (elBtn.querySelector('a[href="#request-quote"]')) {
+              const anc = elBtn.querySelector('a[href="#request-quote"]');
+              anc.parentElement.classList.add('show-modal-btn');
+            }
+          }
           actions.append(elBtn);
           elBtn.parentElement.remove();
           changedBtn = 1;
@@ -289,6 +297,7 @@ export default function decorate(block) {
       carouselSlider.append(picture);
     }
     changedBtn = 0;
+    decorateModals(carouselSlider);
     block.append(carouselSlider);
     return { position: parseInt(eleIndex, 10), el: carouselSlider };
   }).filter((item) => item);

blocks/category-family/category-family.js

@@ -159,7 +159,7 @@ export default async function decorate(block) {
   block.innerHTML = categoryFamily;
   await import('https://static.cloud.coveo.com/atomic/v2/atomic.esm.js');
   await customElements.whenDefined('atomic-search-interface');
-  loadScript('/blocks/category-family/image-component.js');
+  loadScript('/../../scripts/image-component.js');
 
   const categorySearchInterface = document.querySelector('atomic-search-interface.category-search');
 

blocks/columns/columns.css

@@ -22,7 +22,7 @@
   @apply my-0 lg:my-4 font-medium text-4xl2 inline-flex leading-10 text-danahergray-900;
 }
 
-.columns > div div > p:not(.button-container) {
+.columns:not(.columns-2-cols) > div div > p:not(.button-container) {
   @apply text-lg block leading-5;
 }
 
@@ -72,6 +72,51 @@ main .top-border > div.columns-wrapper:first-child {
   @apply py-2 px-6 !text-white;
 }
 
+/* productdetail changes from here */
+
+.productdetail main .columns p.embed-vimeo {
+  @apply my-2;
+}
+
+.productdetail main .columns.columns-2-cols .picdiv p:not(picture) + p:last-child, 
+.productdetail main .columns p.embed-vimeo~p {
+  @apply text-sm leading-5 text-gray-300;
+}
+
+.productdetail main .columns p > strong{
+  @apply !font-medium !text-lg !leading-5 !text-gray-900;
+}
+
+.productdetail main .columns p {
+  @apply pt-2 !text-base text-danahergray-700;
+}
+
+.productdetail main .columns.columns-2-cols .h-full {
+  @apply text-base text-danahergray-700 py-2;
+}
+
+.productdetail main .columns.columns-3-cols {
+  @apply text-center mb-3;
+}
+
+.productdetail main .default-content-wrapper > p {
+  @apply w-3/4;
+}
+
+.productdetail main .default-content-wrapper > h2:only-child {
+  @apply text-center;
+}
+
+.columns.features-card-left > div > div.h-full > .card {
+  @apply flex flex-row pb-6;
+}
+
+.columns.features-card-left > div > div.h-full > div.card > .left-content {
+  @apply pr-3;
+}
+
+/* productdetail changes till here */
+
 .blog main .section.default-content-wrapper > p {
   @apply mt-3 leading-7 text-base text-danahergray-700;
 }

blocks/columns/columns.js

@@ -1,3 +1,7 @@
+import {
+  div,
+} from '../../scripts/dom-builder.js';
+
 export default function decorate(block) {
   if (block.parentElement.parentElement.className.includes('columns-container')) {
     block.parentElement.parentElement.classList.add(...'px-0 lg:px-8 !py-4 md:!py-10'.split(' '));
@@ -25,6 +29,43 @@ export default function decorate(block) {
         row.classList.add('h-full');
       }
 
+      const ulEle = row.querySelectorAll('div > ul, p > ul');
+      ulEle.forEach((ele) => {
+        ele.classList.add(...'text-base list-disc pl-10 space-y-2 text-danahergray-700'.split(' '));
+      });
+
+      const spanEl = row.querySelectorAll('p > span.icon');
+      spanEl.forEach((element) => {
+        element.classList.add(...'w-12 h-12 relative rounded-md bg-danaherblue-900 text-white shrink-0'.split(' '));
+        const svg = element.querySelector('svg');
+        svg.classList.add(...'w-4 h-4 rounded shadow invert brightness-0'.split(' '));
+      });
+
+      if (block.className.includes('features-card-left')) {
+        const pTags = row.querySelectorAll('p');
+        let cardDiv;
+        let leftDiv;
+        let rightDiv;
+        pTags.forEach((element) => {
+          if (element.firstElementChild?.nodeName.toLowerCase() === 'span') {
+            cardDiv = div({ class: 'card' });
+            leftDiv = div({ class: 'left-content' });
+            rightDiv = div({ class: 'right-content' });
+            leftDiv.append(element);
+            cardDiv.append(leftDiv);
+            cardDiv.append(rightDiv);
+            row.append(cardDiv);
+          } else if (rightDiv) rightDiv.append(element);
+        });
+      } else if (block.className.includes('columns-2-cols')) {
+        const pTags = row.querySelectorAll('p');
+        pTags.forEach((element) => {
+          if (element?.firstElementChild?.nodeName?.toLowerCase() === 'picture') {
+            element.parentElement.classList.add('picdiv');
+          }
+        });
+      }
+
       const anc = row.querySelectorAll('p > a');
       if (anc) {
         [...anc].forEach((item) => {

blocks/header/header.js

@@ -643,11 +643,11 @@ function buildFlyoutMenus(headerBlock) {
 }
 
 function handleScroll() {
-  if (window.pageYOffset >= 95) {
-    document.getElementById('sticky-header').classList.add('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-md');
+  if (window.scrollY >= 95) {
+    document.getElementById('sticky-header').classList.add('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-lg');
     document.getElementById('sticky-header').firstElementChild.classList.add('bg-white');
-  } else if (window.pageYOffset < 95) {
-    document.getElementById('sticky-header').classList.remove('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-md');
+  } else if (window.scrollY < 95) {
+    document.getElementById('sticky-header').classList.remove('remove-descedents', 'fixed', 'inset-x-0', 'top-0', 'w-full', 'lg:!pb-4', 'shadow-lg');
     document.getElementById('sticky-header').firstElementChild.classList.remove('bg-danaherblue-600');
   }
 }

blocks/page-tabs/page-tabs.css

@@ -0,0 +1,76 @@
+svg symbol path {
+  stroke: inherit;
+}
+
+.page-tabs-container {
+  @apply z-10;
+}
+
+.page-tab {
+  @apply min-h-[24rem];
+}
+
+.page-tabs a .icon svg > use {
+  @apply stroke-slate-400;
+}
+
+.page-tabs li:hover > a,
+.page-tabs li[aria-selected="true"] > a {
+  @apply text-white bg-danaherpurple-500;
+}
+
+.page-tabs li:hover > a .icon svg > use,
+.page-tabs li[aria-selected="true"] > a .icon svg > use { 
+  @apply stroke-white;
+}
+
+.page-tabs li:hover > a .icon-view svg,
+.page-tabs li[aria-selected="true"] > a .icon-view svg {
+  @apply text-white;
+}
+
+.page-tabs-container.fixed {
+  @apply mt-0 bg-danaherpurple-500 shadow-lg;
+}
+
+.page-tabs-container.fixed .page-tabs-wrapper {
+  @apply pt-4;
+}
+
+.page-tabs-container.fixed nav > div {
+  @apply justify-start;
+}
+
+.page-tabs-container.fixed ul {
+  @apply shadow-none rounded-none;
+}
+
+.page-tabs-container.fixed li {
+  @apply w-36 h-10 bg-danaherpurple-500 text-white;
+}
+
+.page-tabs-container.fixed li > a {
+  @apply flex-row bg-danaherpurple-500 text-white;
+}
+
+.page-tabs-container.fixed li:hover > a,
+.page-tabs-container.fixed li[aria-selected="true"] > a {
+  @apply rounded-full text-danaherpurple-500 bg-white border-2 border-danaherpurple-500;
+}
+
+.page-tabs-container.fixed li a .icon svg > use {
+  @apply stroke-white;
+}
+
+.page-tabs-container.fixed li:hover > a .icon svg > use,
+.page-tabs-container.fixed li[aria-selected="true"] > a .icon svg > use {
+  @apply stroke-danaherpurple-500;
+}
+
+.page-tabs-container.fixed .icon {
+  @apply mr-2;
+}
+
+.page-tabs-container.fixed .icon-view {
+  @apply hidden;
+}