Merge pull request #50 from hlxsites/main

Release 20241217

.github/workflows/deploy-converter.yaml

@@ -46,6 +46,7 @@ jobs:
           ${{ runner.os }}-build-
           ${{ runner.os }}-
     - run: npm ci
+    - run: npm run converter:test
     - run: npm run converter:build:prod
     - run: npm run converter:deploy -- convert/${ACTION_NAME}
       env:

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/articleCard.js

@@ -2,6 +2,10 @@ import { formatDateUTCSeconds, imageHelper, makePublicUrl } from '../../scripts/
 import {
   li, a, p, div, time, span, h3,
 } from '../../scripts/dom-builder.js';
+import { getMetadata } from '../../scripts/lib-franklin.js';
+
+const template = getMetadata('template');
+const linkText = template === 'wsaw' ? 'Learn More →' : 'Read Article →';
 
 export default function createCard(article, firstCard = false) {
   const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1
@@ -17,14 +21,7 @@ export default function createCard(article, firstCard = false) {
         { class: 'eyebrow-sm' },
         article.brand || 'Danaher Corporation',
       ),
-      p(
-        { class: 'text-base text-gray-500 font-extralight' },
-        time(
-          { datetime: formatDateUTCSeconds(article.publishDate) },
-          formatDateUTCSeconds(article.publishDate, { month: 'long' }),
-        ),
-        span({ class: 'pl-2' }, `${article.readingTime} min read`),
-      ),
+
       h3(
         {
           class:
@@ -37,10 +34,19 @@ export default function createCard(article, firstCard = false) {
           class:
             'mt-auto inline-flex w-full py-5 text-base text-danaherpurple-500 font-semibold',
         },
-        'Read Article →',
+        linkText,
       ),
     ),
   );
+  const showDateTime = p(
+    { class: 'text-base text-gray-500 font-extralight' },
+    time(
+      { datetime: formatDateUTCSeconds(article.publishDate) },
+      formatDateUTCSeconds(article.publishDate, { month: 'long' }),
+    ),
+    span({ class: 'pl-2' }, `${article.readingTime} min read`),
+  );
+  if (template !== 'wsaw') cardWrapper.querySelector('.eyebrow-sm')?.after(showDateTime);
 
   return li(
     {

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/card-list/card-list.js

@@ -2,22 +2,23 @@ import ffetch from '../../scripts/ffetch.js';
 import {
   ul, a, div, span,
 } from '../../scripts/dom-builder.js';
-
 import { getMetadata, toClassName } from '../../scripts/lib-franklin.js';
 import createArticleCard from './articleCard.js';
 import createLibraryCard from './libraryCard.js';
 import createApplicationCard from './applicationCard.js';
 import { makePublicUrl } from '../../scripts/scripts.js';
 import { buildItemListSchema } from '../../scripts/schema.js';
 
-const getSelectionFromUrl = () => (window.location.pathname.indexOf('topics') > -1 ? toClassName(window.location.pathname.replace('.html', '').split('/').pop()) : '');
+const tagName = getMetadata('template') === 'wsaw' ? 'solutions' : 'topics';
+
+const getSelectionFromUrl = () => (window.location.pathname.indexOf(tagName) > -1 ? toClassName(window.location.pathname.replace('.html', '').split('/').pop()) : '');
 const getPageFromUrl = () => toClassName(new URLSearchParams(window.location.search).get('page')) || '';
 
 const createTopicUrl = (currentUrl, keyword = '') => {
-  if (currentUrl.indexOf('topics') > -1) {
+  if (currentUrl.indexOf(tagName) > -1) {
     return currentUrl.substring(0, currentUrl.lastIndexOf('/') + 1) + toClassName(keyword).toLowerCase();
   }
-  return `${currentUrl.replace('.html', '')}/topics/${toClassName(keyword).toLowerCase()}`;
+  return `${currentUrl.replace('.html', '')}/${tagName}/${toClassName(keyword).toLowerCase()}`;
 };
 
 const patchBannerHeading = () => {
@@ -83,7 +84,7 @@ const createPagination = (entries, page, limit) => {
 
 export function createFilters(articles, viewAll = false) {
   // collect tag filters
-  const allKeywords = articles.map((item) => item.topics.replace(/,\s*/g, ',').split(','));
+  const allKeywords = articles.map((item) => item[tagName].replace(/,\s*/g, ',').split(','));
   const keywords = new Set([].concat(...allKeywords));
   keywords.delete('');
   keywords.delete('Blog'); // filter out generic blog tag
@@ -92,8 +93,8 @@ export function createFilters(articles, viewAll = false) {
   // render tag cloud
   const newUrl = new URL(window.location);
   newUrl.searchParams.delete('page');
-  if (window.location.pathname.indexOf('topics') > -1) {
-    newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.indexOf('/topics/'));
+  if (window.location.pathname.indexOf(tagName) > -1) {
+    newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.indexOf(`/${tagName}/`));
   }
   const tags = viewAll ? div(
     { class: 'flex flex-wrap gap-2 gap-y-0 mb-4' },
@@ -138,20 +139,22 @@ export function createFilters(articles, viewAll = false) {
   });
 
   // patch banner heading with selected tag only on topics pages
-  if (getMetadata('heading') && window.location.pathname.indexOf('topics') > -1) {
+  if (getMetadata('heading') && window.location.pathname.indexOf(tagName) > -1) {
     patchBannerHeading();
   }
 
   return tags;
 }
 
 export default async function decorate(block) {
+  block.setAttribute('id', 'card-list');
   const articleType = block.classList.length > 2 ? block.classList[1] : '';
   if (articleType) block.classList.remove(articleType);
   block.textContent = '';
+  const indexType = getMetadata('template') === 'wsaw' ? 'wsaw' : 'article';
 
   // fetch and sort all articles
-  const articles = await ffetch('/us/en/article-index.json')
+  const articles = await ffetch(`/us/en/${indexType}-index.json`)
     .chunks(500)
     .filter(({ type }) => type.toLowerCase() === articleType)
     .filter((article) => !article.path.includes('/topics-template'))
@@ -160,7 +163,7 @@ export default async function decorate(block) {
   const activeTagFilter = block.classList.contains('url-filtered') ? getSelectionFromUrl() : '';
   if (activeTagFilter) {
     filteredArticles = articles.filter(
-      (item) => toClassName(item.topics).toLowerCase().indexOf(activeTagFilter) > -1,
+      (item) => toClassName(item[tagName]).toLowerCase().indexOf(activeTagFilter) > -1,
     );
   }
   buildItemListSchema(filteredArticles, 'resources');

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% !important;
+}
+
 .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
 }