Merge branch 'hlxsites:main' into main

.gitignore

@@ -7,3 +7,4 @@ logs/*
 helix-importer-ui
 .DS_Store
 *.bak
+.env

blocks/accordion/accordion.js

@@ -12,43 +12,51 @@ function toggleAccordion(activeButton) {
 
 function createAccordionBlock(question, answer) {
   const uuid = generateUUID();
-  const divEl = div();
+  const divEl = dl();
   const btn = dt(
-    { class: 'button peer', 'aria-expanded': false, 'aria-controls': `${uuid}` },
+    { class: 'button peer py-4', 'aria-expanded': false, 'aria-controls': `${uuid}` },
     button(
       { type: 'button', class: 'flex w-full items-start justify-between text-left text-gray-900' },
-      h3({ class: 'text-base font-semibold leading-7' }, question),
-      span({ class: 'ml-6 flex h-14 items-center pr-2' }),
+      h3({ class: 'text-base font-semibold leading-7 my-0' }, question),
+      span({ class: 'ml-6 flex items-center pr-2 my-auto' }),
     ),
   );
   btn.querySelector('span').innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="ml-2 h-5 w-5 transition"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z"></path></svg>';
 
   const panel = dd(
-    { id: `${uuid}`, class: 'panal mt-2 pr-12 pb-4 peer-[.show]:block hidden' },
+    { id: `${uuid}`, class: 'panel pr-12 pb-4 peer-[.show]:block hidden' },
     div({ class: 'accordion-answer text-base leading-7 text-gray-600 href-text' }),
   );
-  panel.querySelector('.accordion-answer').innerHTML = answer;
+
+  answer.forEach((element) => {
+    panel.querySelector('.accordion-answer').innerHTML += element;
+  });
 
   btn.addEventListener('click', () => toggleAccordion(btn));
-  divEl.append(document.createElement('hr'), btn, panel);
+  divEl.append(btn, panel);
   return divEl;
 }
 
 export default function decorate(block) {
-  const questions = [...block.children].map((element) => ({
-    question: element.querySelector(':scope > div').children[0]?.textContent,
-    answer: element.querySelector(':scope > div').children[1]?.outerHTML,
-  }));
+  const questions = [...block.children].map((element) => {
+    const questionElement = element.querySelector(':scope > div > h3');
+    const answerElements = Array.from(element.querySelector(':scope > div').children).slice(1);
+    return {
+      question: questionElement?.textContent,
+      answer: answerElements.map((elem) => elem.outerHTML),
+    };
+  });
 
-  const accordionItems = questions
+  const filteredQuestions = questions.filter((item) => item.question !== undefined);
+  const accordionItems = filteredQuestions
     .map((question, index) => createAccordionBlock(question.question, question.answer, index));
-  const accordion = dl(
-    { class: 'space-y-4 divide-y divide-gray-900/10' },
-    div({ class: 'pt-6' }),
+  const accordion = div(
+    { class: 'divide-y divide-gray-900/10' },
+    ...accordionItems,
   );
-  accordionItems.map((items) => accordion.querySelector('div.pt-6').append(items));
 
+  const title = [...block.children][0].querySelector(':scope > div > h2');
   block.innerHTML = '';
-  block.className = 'divide-y divide-gray-900/10';
+  if (title && title.textContent) block.append(title, document.createElement('hr'));
   block.append(accordion);
 }

blocks/banner/banner.js

@@ -1,4 +1,4 @@
 export default function decorate(block) {
   const main = document.querySelector('main');
-  main.prepend(block);
+  main.parentNode.insertBefore(block, main);
 }

blocks/blog-hero/blog-hero.js

@@ -4,8 +4,9 @@ import {
 import { getMetadata } from '../../scripts/lib-franklin.js';
 
 export default function decorate(block) {
-  if (block.querySelector('h1')) block.querySelector('h1').className = 'px-2 text-gray-900 my-2 font-extrabold text-4xl';
-  if (block.querySelector('img')) block.querySelector('img').className = 'px-2 mt-8';
+  if (block.querySelector('h1')) block.querySelector('h1').classList.add(...'px-2 text-gray-900 my-2 font-extrabold text-4xl'.split(' '));
+  if (block.querySelector('h1 + p')) block.querySelector('h1 + p').classList.add(...'px-2 text-xl text-gray-500 leading-8'.split(' '));
+  if (block.querySelector('img')) block.querySelector('img').classList.add(...'px-2 mt-8'.split(' '));
 
   const authorName = getMetadata('authorname');
   const authorJobTitle = getMetadata('authortitle');

blocks/breadcrumb/breadcrumb.js

@@ -1,26 +1,27 @@
 export default function decorate(block) {
-  const clonedBlock = block.cloneNode(true);
-  const listsClone = clonedBlock.querySelector('div > ul').cloneNode(true);
-  listsClone.className = 'max-w-screen-xl w-full mx-auto px-4 flex gap-4 sm:px-6 lg:px-7 overflow-x-auto';
-  listsClone.setAttribute('role', 'list');
+  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 overflow-x-auto';
+  entries.setAttribute('role', 'list');
   const homeIconLi = document.createElement('li');
   homeIconLi.className = 'flex items-center gap-x-3 text-sm font-medium text-gray-500 whitespace-nowrap hover:text-gray-700';
   homeIconLi.innerHTML = '<a href="/" title="Home"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="flex-shrink-0 h-5 w-5" data-di-rand="1697430026535"><path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z"></path><path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z"></path></svg></a>';
-  listsClone.prepend(homeIconLi);
-  Array.from(listsClone.children).forEach((element, index) => {
+  entries.prepend(homeIconLi);
+  Array.from(entries.children).forEach((element, index) => {
     element.classList.add(...'flex items-center gap-x-3 text-sm font-medium text-gray-500 whitespace-nowrap hover:text-gray-700'.split(' '));
     element.setAttribute('aria-hidden', 'true');
     element.setAttribute('data-acsb-hidden', 'true');
     element.setAttribute('data-acsb-force-hidden', 'true');
     const anchor = element.children[0];
     anchor.setAttribute('tabindex', '-1');
-    if ((listsClone.children.length - 1) !== index) element.innerHTML = "<svg class='w-6 h-5/6 flex-shrink-0 text-gray-300' viewBox='0 0 24 44' preserveAspectRatio='none' fill='currentColor' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-acsb-hidden='true' data-acsb-force-hidden='true' data-di-rand='1697196048881'><path d='M.293 0l22 22-22 22h1.414l22-22-22-22H.293z'></path></svg>";
+    if ((entries.children.length - 1) !== index) element.innerHTML = "<svg class='w-6 h-5/6 flex-shrink-0 text-gray-300' viewBox='0 0 24 44' preserveAspectRatio='none' fill='currentColor' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-acsb-hidden='true' data-acsb-force-hidden='true' data-di-rand='1697196048881'><path d='M.293 0l22 22-22 22h1.414l22-22-22-22H.293z'></path></svg>";
     element.prepend(anchor);
   });
-  const breadcrumbWrapper = document.getElementsByClassName('breadcrumb-wrapper')[0];
+  const breadcrumbWrapper = block.parentElement;
   breadcrumbWrapper.classList.add(...'flex bg-white border-b border-gray-200'.split(' '));
   breadcrumbWrapper.innerHTML = '';
-  breadcrumbWrapper.append(listsClone);
+  breadcrumbWrapper.append(entries);
+  const breadcrumbSection = breadcrumbWrapper.parentElement;
   const mainElement = document.querySelector('main');
   mainElement.parentNode.insertBefore(breadcrumbWrapper, mainElement);
+  breadcrumbSection.remove();
 }

blocks/call-to-action/call-to-action.js

@@ -1,9 +1,15 @@
 import { decorateModals } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
-  block.classList.add(...'ctasection mx-auto max-w-7xl lg:py-8'.split(' '));
+  block.classList.add(...'ctasection mx-auto max-w-7xl pt-6 lg:py-8'.split(' '));
   block.querySelector(':scope div > div').classList.add(...'md:flex space-y-8 md:space-y-0 md:flex-row w-full py-8 md:py-16 md:px-12 px-6 items-center md:justify-between bg-danaherpurple-800'.split(' '));
-  block.querySelector('h2').classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' '));
-  block.querySelector('p').classList.add(...'show-modal-btn btn btn-outline-trending-brand text-lg rounded-full px-6 py-3'.split(' '));
+  block.querySelector('h2')?.classList.add(...'text-2xl p-0 m-0 tracking-tight sm:text-3xl text-white font-normal tracking-wide'.split(' '));
+  block.querySelectorAll('p > a').forEach((a) => {
+    a.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-6 py-3 !no-underline'.split(' '));
+    if (a.href.includes('#request-quote')) {
+      block.querySelector('p')?.classList.add(...'show-modal-btn'.split(' '));
+      a.classList.remove(...'btn btn-outline-primary'.split(' '));
+    }
+  });
   decorateModals(block);
 }

blocks/card-list/applicationCard.js

@@ -0,0 +1,40 @@
+import { makePublicUrl } from '../../scripts/scripts.js';
+import {
+  li, a, p, div, h2,
+} from '../../scripts/dom-builder.js';
+
+export default function createCard(article) {
+  const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1
+    ? article.title.split('| Danaher Life Sciences')[0]
+    : article.title;
+
+  const cardWrapper = a(
+    { href: makePublicUrl(article.path), title: article.title },
+    h2(
+      {
+        class:
+          '!px-6 !text-lg !font-semibold !text-danahergray-900 !mb-4 !line-clamp-3 !h-20 !break-words',
+      },
+      cardTitle,
+    ),
+    p(
+      { class: 'px-6 text-sm text-gray-500 pb-0 pt-0 pb-4 line-clamp-4 h-20 break-words' },
+      article.description,
+    ),
+    div(
+      {
+        class:
+          'inline-flex w-full px-6 py-5 text-base text-danaherblue-600 font-semibold',
+      },
+      'View Application →',
+    ),
+  );
+
+  return li(
+    {
+      class:
+        'w-full flex flex-col col-span-1 relative mx-auto justify-center transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden bg-white max-w-xl',
+    },
+    cardWrapper,
+  );
+}

blocks/card-list/articleCard.js

@@ -0,0 +1,49 @@
+import { formatDateUTCSeconds, imageHelper, makePublicUrl } from '../../scripts/scripts.js';
+import {
+  li, a, p, div, time, span, h2,
+} from '../../scripts/dom-builder.js';
+
+export default function createCard(article, firstCard = false) {
+  const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1
+    ? article.title.split('| Danaher Life Sciences')[0]
+    : article.title;
+
+  const cardWrapper = a(
+    { href: makePublicUrl(article.path), title: article.title },
+    imageHelper(article.image, article.title, firstCard),
+    p(
+      { class: 'cards !px-6 !py-1 !pt-4 !text-sm !text-danaherpurple-500' },
+      article.brand || 'Danaher Corporation',
+    ),
+    p(
+      { class: '!px-6 !pb-3 !text-gray-500 !text-sm' },
+      time(
+        { datetime: formatDateUTCSeconds(article.publishDate) },
+        formatDateUTCSeconds(article.publishDate, { month: 'long' }),
+      ),
+      span({ class: 'pl-2' }, `${article.readingTime} min read`),
+    ),
+    h2(
+      {
+        class:
+          '!px-6 !text-lg !font-semibold !text-danahergray-900 !mb-4 !line-clamp-3 !h-20 !break-words',
+      },
+      cardTitle,
+    ),
+    div(
+      {
+        class:
+          'mt-auto inline-flex w-full px-6 py-5 text-base text-danaherpurple-500 font-semibold',
+      },
+      'Read Article →',
+    ),
+  );
+
+  return li(
+    {
+      class:
+        'w-full flex flex-col col-span-1 relative mx-auto justify-center transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg overflow-hidden bg-white max-w-xl',
+    },
+    cardWrapper,
+  );
+}