Merge pull request #39 from hlxsites/main

Release 20240701

blocks/breadcrumb/breadcrumb.css

@@ -11,6 +11,10 @@
   margin-top: 0.875rem
 }
 
+.breadcrumb-wrapper :is(.\!block) {
+  display: block !important
+}
+
 .breadcrumb-wrapper :is(.block) {
   display: block
 }
@@ -111,6 +115,10 @@
   color: rgb(107 114 128 / var(--tw-text-opacity))
 }
 
+.breadcrumb-wrapper :is(.filter) {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
 .breadcrumb-wrapper :is(.hover\:text-gray-700:hover) {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity))

blocks/breadcrumb/breadcrumb.js

@@ -1,6 +1,49 @@
+import {
+  a, div, li, ul,
+} from '../../scripts/dom-builder.js';
+import ffetch from '../../scripts/ffetch.js';
+
 const TEMPLATE_PATH_PATTERN = /\/us\/en\/[^/]+\/topics-template/;
 
-export default function decorate(block) {
+async function getItems() {
+  // get the breadcrumb items from the page path, only after '/us/en'
+  const path = window.location.pathname;
+  const pathParts = path.split('/');
+  const itemPaths = pathParts.length > 2 ? pathParts.slice(3).map((_, i) => pathParts.slice(0, i + 4).join('/')) : [];
+  const articles = await ffetch('/us/en/article-index.json')
+    .filter((article) => itemPaths.includes(article.path))
+    .all();
+
+  // map over itemPaths to create items
+  return itemPaths.map((itemPath) => {
+    // get the title from the article, based on its path
+    const article = articles.find((entry) => entry.path === itemPath);
+    const title = (article && article.navTitle !== '') ? article.navTitle : itemPath.split('/').pop();
+    return {
+      title,
+      href: `${itemPath}.html`,
+    };
+  });
+}
+
+export default async function decorate(block) {
+  if (!block.querySelector('div > ul')) {
+    const items = await getItems();
+    const listItems = items.map((item) => li({}, a({ href: item.href }, item.title)));
+    block.innerHTML = '';
+    block.append(
+      div(
+        {},
+        div(
+          {},
+          ul(
+            {},
+            ...listItems,
+          ),
+        ),
+      ),
+    );
+  }
   const entries = block.querySelector('div > ul');
   entries.className = 'max-w-screen-xl w-full mx-auto px-4 flex gap-4 sm:px-6 lg:px-7 mt-3.5 md:mt-0 overflow-x-auto';
   entries.setAttribute('role', 'list');

blocks/card-list/card-list.css

@@ -222,6 +222,10 @@
   gap: 1.5rem
 }
 
+.card-list-wrapper :is(.gap-y-0) {
+  row-gap: 0px
+}
+
 .card-list-wrapper :is(.overflow-hidden) {
   overflow: hidden
 }
@@ -294,9 +298,14 @@
   padding-right: 1.5rem
 }
 
-.card-list-wrapper :is(.py-1) {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem
+.card-list-wrapper :is(.py-0) {
+  padding-top: 0px;
+  padding-bottom: 0px
+}
+
+.card-list-wrapper :is(.py-0\.5) {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem
 }
 
 .card-list-wrapper :is(.py-4) {

blocks/card-list/card-list.js

@@ -95,16 +95,16 @@ export function createFilters(articles, viewAll = false) {
     newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.indexOf('/topics/'));
   }
   const tags = viewAll ? div(
-    { class: 'flex flex-wrap gap-2 mb-4' },
+    { class: 'flex flex-wrap gap-2 gap-y-0 mb-4' },
     a(
       {
         class:
-          'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
+          'text-center my-2 inline-block rounded-full px-4 py-0.5 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
         href: makePublicUrl(newUrl.toString()),
       },
       'View All',
     ),
-  ) : div({ class: 'flex flex-wrap gap-2 mb-4' });
+  ) : div({ class: 'flex flex-wrap gap-2 gap-y-0 mb-4' });
 
   [...keywords].sort().forEach((keyword) => {
     let currentUrl;
@@ -119,7 +119,7 @@ export function createFilters(articles, viewAll = false) {
     const tagAnchor = a(
       {
         class:
-          'text-center my-2 inline-block rounded-full px-4 py-1 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
+          'text-center my-2 inline-block rounded-full px-4 py-0.5 font-semibold text-danaherpurple-500 bg-danaherpurple-50 hover:text-white hover:bg-danaherpurple-500',
         href: makePublicUrl(newUrl.toString()),
       },
       keyword,
@@ -153,6 +153,7 @@ export default async function decorate(block) {
   const articles = await ffetch('/us/en/article-index.json')
     .chunks(500)
     .filter(({ type }) => type.toLowerCase() === articleType)
+    .filter((article) => !article.path.includes('/topics-template'))
     .all();
   let filteredArticles = articles;
   const activeTagFilter = block.classList.contains('url-filtered') ? getSelectionFromUrl() : '';

blocks/carousel/carousel.css

@@ -239,6 +239,23 @@
   border-radius: 0.375rem;
 }
 
+.carousel-wrapper :is(.border-b) {
+  border-bottom-width: 1px;
+}
+
+.carousel-wrapper :is(.border-t) {
+  border-top-width: 1px;
+}
+
+.carousel-wrapper :is(.border-solid) {
+  border-style: solid;
+}
+
+.carousel-wrapper :is(.border-black) {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .carousel-wrapper :is(.bg-danaherlightblue-50) {
   --tw-bg-opacity: 1;
   background-color: rgb(239 251 253 / var(--tw-bg-opacity));

blocks/carousel/carousel.js

@@ -111,6 +111,7 @@ export default function decorate(block) {
       configureNavigation(carouselControls);
       block.parentElement.append(div({ class: 'carousel-controls relative max-w-7xl mx-auto' }, carouselControls));
     }
+    if (block.classList.contains('add-border')) block.classList.add(...'border-t border-b border-solid border-black'.split(' '));
     setTimeout(() => {
       /* eslint-disable no-new */
       new Carousel({

blocks/columns/columns.css

@@ -303,10 +303,6 @@
   padding-left: 2.5rem;
 }
 
-.columns-wrapper :is(.pr-16) {
-  padding-right: 4rem;
-}
-
 .columns-wrapper :is(.align-text-top) {
   vertical-align: text-top;
 }
@@ -432,6 +428,10 @@
   .columns-wrapper :is(.md\:h-\[27rem\]) {
     height: 27rem;
   }
+
+  .columns-wrapper :is(.md\:pr-16) {
+    padding-right: 4rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -453,8 +453,8 @@
     margin-bottom: 1rem;
   }
 
-  .columns-wrapper :is(.lg\:mt-72) {
-    margin-top: 18rem;
+  .columns-wrapper :is(.lg\:mt-56) {
+    margin-top: 14rem;
   }
 
   .columns-wrapper :is(.lg\:w-1\/2) {

blocks/columns/columns.js

@@ -57,7 +57,7 @@ export default function decorate(block) {
         };
       } else if (!block.className.includes('itemscenter')) {
         if (window.location.pathname.includes('/us/en/blog/') || window.location.pathname.includes('/us/en/news/')) {
-          row.classList.add('h-full', 'lg:w-1/2', 'pr-16');
+          row.classList.add('h-full', 'lg:w-1/2', 'md:pr-16');
           row.querySelectorAll('h1').forEach((ele) => {
             ele.classList.add('pb-4');
           });
@@ -130,7 +130,7 @@ export default function decorate(block) {
         if (picWrapper && picWrapper.children.length === 1) {
           // picture is only content in column
           if (window.location.pathname.includes('/us/en/blog/') || window.location.pathname.includes('/us/en/news/')) {
-            picWrapper.classList.add(...'columns-img-col order-none relative h-48 md:h-[27rem] block lg:absolute md:inset-y-0 lg:inset-y-0 lg:right-2 lg:w-1/2 lg:mt-72'.split(' '));
+            picWrapper.classList.add(...'columns-img-col order-none relative h-48 md:h-[27rem] block lg:absolute md:inset-y-0 lg:inset-y-0 lg:right-2 lg:w-1/2 lg:mt-56'.split(' '));
             pic.querySelector('img').classList.add(...'absolute bottom-0 h-full w-full object-cover'.split(' '));
           } else {
             picWrapper.classList.add('columns-img-col', 'order-none');

blocks/header/header.css

@@ -192,6 +192,10 @@
   height: 2rem
 }
 
+.header-wrapper :is(.h-\[75vh\]) {
+  height: 75vh
+}
+
 .header-wrapper :is(.h-full) {
   height: 100%
 }

blocks/header/header.js

@@ -583,7 +583,7 @@ function buildFlyoutMenus(headerBlock) {
   decorateIcons(backFlyout);
   decorateIcons(exploreFlyout);
 
-  const menuWrapper = ul({ class: 'h-full flex flex-col gap-y-2 mt-3 overflow-auto [&>li.active]:bg-danaherpurple-50 [&>li.active]:font-bold' });
+  const menuWrapper = ul({ class: 'h-[75vh] flex flex-col gap-y-2 mt-3 overflow-auto [&>li.active]:bg-danaherpurple-50 [&>li.active]:font-bold' });
   [...allFlyout].forEach((flyMenu) => {
     const contentText = flyMenu.children[0]?.textContent;
     const anchorHref = flyMenu.children[0].querySelector('a')?.href;

blocks/mini-teasers/mini-teasers.css

@@ -34,10 +34,6 @@
   -webkit-line-clamp: 3
 }
 
-.mini-teasers-wrapper :is(.\!block) {
-  display: block !important
-}
-
 .mini-teasers-wrapper :is(.block) {
   display: block
 }

blocks/mini-teasers/mini-teasers.js

@@ -26,6 +26,6 @@ export default function decorate(block) {
       if (link.href.endsWith('#RequestAQuote')) link.classList.add('show-modal-btn');
     }
   });
-  if (!block.classList.contains('no-border')) block.classList.add(...'border-t border-b border-solid border-black'.split(' '));
+  if (block.classList.contains('add-border')) block.classList.add(...'border-t border-b border-solid border-black'.split(' '));
   decorateModals(block);
 }