Merge pull request #41 from hlxsites/main

Release 20240726

authHeaders.json

@@ -0,0 +1,3 @@
+{
+    "Authorization" : "Basic Y3Jvc3N3YWxrLXJlYWRlcjpENzk4NTEwOS1CQkNFLTRGQjUtQkM2NS1EMzRDNEFDNjVGRjI="
+}

blocks/accordion/accordion.js

@@ -21,8 +21,11 @@ function toggleAccordion(blockUUID, activeAccordion) {
   });
 }
 
-function createAccordionBlock(question, answer, image, uuid, index, customUUID) {
-  const divEl = div({ id: `accordion-item-${index}`, class: 'accordion-item relative py-2' });
+function createAccordionBlock(question, answer, image, uuid, parentElement, index, customUUID) {
+  parentElement.innerHTML = '';
+  parentElement.classList.add('accordion-item', 'relative', 'py-2');
+  parentElement.id = `accordion-item-${index}`;
+
   const summaryInput = input({
     type: 'checkbox',
     class: 'peer hidden absolute',
@@ -63,7 +66,7 @@ function createAccordionBlock(question, answer, image, uuid, index, customUUID)
   });
 
   summaryContent.addEventListener('click', () => {
-    toggleAccordion(customUUID, divEl);
+    toggleAccordion(customUUID, parentElement);
     if (image) {
       const selectedImage = document.querySelector(`div[data-id="${uuid}"]`);
       selectedImage.parentElement.childNodes.forEach((imageEl) => {
@@ -78,8 +81,8 @@ function createAccordionBlock(question, answer, image, uuid, index, customUUID)
       });
     }
   });
-  divEl.append(summaryInput, summaryContent, panel);
-  return divEl;
+  parentElement.append(summaryInput, summaryContent, panel);
+  return parentElement;
 }
 
 export default function decorate(block) {
@@ -94,6 +97,7 @@ export default function decorate(block) {
       image: imageElements?.parentElement,
       answer: answerElements.map((elem) => elem.outerHTML),
       uuid: generateUUID(),
+      parentElement: element,
     };
   });
 
@@ -104,6 +108,7 @@ export default function decorate(block) {
       question.answer,
       question.image,
       question.uuid,
+      question.parentElement,
       index,
       customUUID,
     ));
@@ -120,11 +125,11 @@ export default function decorate(block) {
     ...accordionImages,
   );
 
-  const title = [...block.children][0].querySelector(':scope > div > h2');
-  block.innerHTML = '';
-  if (title && title.textContent) {
+  const titleEl = [...block.children][0];
+  const title = titleEl.querySelector(':scope > div > h2');
+  if (titleEl && title) {
     title.classList.add(...'lg:text-center align-middle lg:pl-44 eyebrow'.split(' '));
-    block.parentElement.prepend(title);
+    block.parentElement.prepend(titleEl);
   }
   if (block.classList.contains('image')) {
     block.classList.add(...'grid max-w-7xl w-full mx-auto grid-cols-1 lg:grid-cols-2 gap-16 pt-4'.split(' '));

blocks/cards/cards.js

@@ -1,16 +1,16 @@
 import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
 import {
-  a, div, li, ul,
+  a, div,
 } from '../../scripts/dom-builder.js';
 import { makePublicUrl } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
   if (block.parentElement.parentElement.classList.contains('cards-container')) {
     block.parentElement.parentElement.classList.remove(...'bg-danaherlightblue-50'.split(' '));
   }
-  const ulElement = ul({ class: 'list-none m-0 p-0 grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-16' });
-  if (block.classList.contains('cols-4')) ulElement.classList.add('lg:grid-cols-4');
-  else ulElement.classList.add('lg:grid-cols-3');
+  block.classList.add(...'list-none m-0 p-0 grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-16'.split(' '));
+  if (block.classList.contains('cols-4')) block.classList.add('lg:grid-cols-4');
+  else block.classList.add('lg:grid-cols-3');
 
   [...block.children].forEach((row) => {
     let type = '';
@@ -23,16 +23,16 @@ export default function decorate(block) {
       typeP.remove();
       block.classList.add(type.toLowerCase());
     }
-    let readMoreLink = row.querySelector('a');
+    const readMoreLink = row.querySelector('a');
     const cardWrapper = (readMoreLink)
       ? a({ href: makePublicUrl(readMoreLink.href), title: readMoreLink.title })
       : div();
     cardWrapper.className = 'card-wrapper flex flex-col col-span-1 mx-auto justify-center max-w-xl overflow-hidden pl-8 pr-2 border-l-[0.5px] border-gray-300 transform transition duration-500 hover:scale-105';
     if (!block.classList.contains('opco')) cardWrapper.classList.remove(...'border-l-[0.5px] border-gray-300 pl-8 pr-2 transform transition duration-500 hover:scale-105'.split(' '));
     if (!type) cardWrapper.classList.add('...cursor-pointer relative transform transition duration-500 border hover:scale-105 shadow-lg rounded-lg'.split(' '));
-    const card = li((heading) || '', cardWrapper);
-    cardWrapper.innerHTML = row.innerHTML;
-    [...cardWrapper.children].forEach((elem) => {
+    row.append((heading) || '');
+    [...row.children].forEach((elem) => {
+      cardWrapper.append(elem);
       if (elem.querySelector('picture, img')) {
         elem.className = 'cards-card-image h-52 leading-5';
       } else {
@@ -42,22 +42,18 @@ export default function decorate(block) {
       if (elem?.querySelector('h3') && !block.classList.contains('opco')) elem.querySelector('h3').className = 'pl-2 text-lg font-semibold text-danahergray-900 !line-clamp-3 !break-words !h-24';
       if (elem?.querySelector('p')) elem.querySelector('p').className = 'mb-4 text-sm !h-20 !line-clamp-4 !break-words';
       if (elem?.querySelector('p') && !block.classList.contains('opco')) elem.querySelector('p').className = 'pl-2 mb-4 text-sm !h-20 !line-clamp-4 !break-words';
+      row.append(cardWrapper);
     });
-
-    readMoreLink = cardWrapper.querySelector('a');
     if (readMoreLink) {
       readMoreLink.innerHTML += ' →';
       if (block.classList.contains('opco')) { readMoreLink.className = 'card-link inline-flex w-full pt-5 text-base text-danaherpurple-500 font-semibold'; } else readMoreLink.className = 'pl-2 card-link inline-flex w-full pt-5 text-base text-danaherpurple-500 font-semibold';
-      card.querySelector('div.cards-card-body').append(readMoreLink);
+      row.querySelector('div.cards-card-body').append(readMoreLink);
     }
-    ulElement.append(card);
   });
-  ulElement.querySelectorAll('img').forEach((img) => {
+  block.querySelectorAll('img').forEach((img) => {
     const picture = img.closest('picture');
     const cardImage = createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]);
     if (block.classList.contains('opco')) { cardImage.querySelector('img').className = 'h-48 w-full rounded-t !object-contain'; }
     if (picture) picture.replaceWith(cardImage);
   });
-  block.textContent = '';
-  block.append(ulElement);
 }

blocks/carousel/carousel.js

@@ -44,10 +44,9 @@ export default function decorate(block) {
   block.style = 'grid-auto-columns: 100%';
   block.classList.remove('block');
   block.classList.add(...'grid grid-flow-col overflow-x-auto space-x-2 snap-x snap-mandatory gap-6 rounded-md scroll-smooth'.split(' '));
-  const clonedBlock = [...block.children];
-  block.innerHTML = '';
-  const slides = clonedBlock.map((ele, eleIndex) => {
-    const carouselSlider = div({ class: `card carousel-slider flex snap-start list-none bg-white flex-col rounded-md duration-${SLIDE_TRANSITION} ease-in-out inset-0 transition-transform transform`, 'data-carousel-item': (eleIndex + 1) });
+  const slides = [...block.children].map((ele, eleIndex) => {
+    ele.classList.add(...`card carousel-slider flex snap-start list-none bg-white flex-col rounded-md duration-${SLIDE_TRANSITION} ease-in-out inset-0 transition-transform transform`.split(' '));
+    ele.setAttribute('data-carousel-item', (eleIndex + 1));
     const contentEl = ele.querySelector('h2, p');
     const picture = ele.querySelector('picture');
     let changedBtn = 0;
@@ -89,28 +88,24 @@ export default function decorate(block) {
         });
         content.append(actions);
       }
-      carouselSlider.append(div({ class: 'lg:m-auto w-full h-auto max-w-7xl py-8 lg:py-0 overflow-hidden' }, content));
+      ele.append(div({ class: 'lg:m-auto w-full h-auto max-w-7xl py-8 lg:py-0 overflow-hidden' }, content));
     }
     if (picture) {
       picture.querySelector('img').classList.add(...'absolute bottom-0 h-full w-full object-cover'.split(' '));
-      carouselSlider.append(div({ class: 'relative h-48 w-full md:h-[35rem] block lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2' }, picture));
+      ele.append(div({ class: 'relative h-48 w-full md:h-[35rem] block lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2' }, picture));
     }
     changedBtn = 0;
-    decorateModals(carouselSlider);
-    block.append(carouselSlider);
-    return { position: parseInt(eleIndex, 10), el: carouselSlider };
+    decorateModals(ele);
+    return { position: parseInt(eleIndex, 10), el: ele };
   }).filter((item) => item);
-  if (block.parentElement.className.includes('carousel-wrapper')) {
-    let carouselControls;
+  if (block.children.length > 2 && block.parentElement.className.includes('carousel-wrapper')) {
     block.parentElement.classList.add(...'relative w-full'.split(' '));
     block.parentElement.setAttribute('data-carousel', 'slide');
     block.parentElement.setAttribute('id', uuid);
-    if (block.children.length > 1) {
-      carouselControls = div({ class: 'relative md:absolute md:bottom-16 flex gap-x-4 items-center space-x-3 z-10 px-4 lg:px-8 xl:pr-10' });
-      configurePagination(carouselControls, slides.length);
-      configureNavigation(carouselControls);
-      block.parentElement.append(div({ class: 'carousel-controls relative max-w-7xl mx-auto' }, carouselControls));
-    }
+    const carouselControls = div({ class: 'relative md:absolute md:bottom-16 flex gap-x-4 items-center space-x-3 z-10 px-4 lg:px-8 xl:pr-10' });
+    configurePagination(carouselControls, slides.length);
+    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 */

blocks/columns/columns.css

@@ -40,7 +40,7 @@
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
   text-decoration-style: solid;
-  word-break: break-all;
+  word-break: break-words;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;

blocks/embed/embed.css

@@ -24,6 +24,10 @@
   display: flex
 }
 
+.embed-wrapper :is(.w-full) {
+  width: 100%
+}
+
 .embed-wrapper :is(.max-w-3xl) {
   max-width: 48rem
 }

blocks/embed/embed.js

@@ -114,6 +114,7 @@ const loadEmbed = (block, link, autoplay) => {
   if (config) {
     block.innerHTML = config.embed(block, url, autoplay);
     block.classList = `block embed embed-${toClassName(config.match[0])} my-8 mx-auto text-center max-w-3xl`;
+    block.parentNode.classList.add('w-full');
   } else {
     block.innerHTML = getDefaultEmbed(url);
     block.classList = 'block embed my-8 mx-auto text-center max-w-3xl';

blocks/logo-clouds/logo-clouds.css

@@ -6,7 +6,7 @@
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
   text-decoration-style: solid;
-  word-break: break-all;
+  word-break: break-words;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;

blocks/product-overview/product-overview.css

@@ -6,7 +6,7 @@
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
   text-decoration-style: solid;
-  word-break: break-all;
+  word-break: break-words;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;