Merge pull request #533 from hlxsites/507-product-category-list-block

507 product category list block

blocks/columns/columns.js

@@ -3,7 +3,7 @@ export default function decorate(block) {
     block.parentElement.parentElement.classList.add(...'px-0 lg:px-8 !py-4 md:!py-10'.split(' '));
   }
   if (block.parentElement.className.includes('columns-wrapper')) {
-    block.parentElement.classList.add(...'max-w-7xl w-full mx-auto bg-danaherlightblue-50'.split(' '));
+    block.parentElement.classList.add(...'max-w-7xl w-full mx-auto'.split(' '));
   }
   const cols = [...block.firstElementChild.children];
   block.classList.add(`columns-${cols.length}-cols`);

blocks/mini-teasers/mini-teasers.js

@@ -1,10 +1,13 @@
 import { decorateModals } from '../../scripts/scripts.js';
+import {
+  div,
+} from '../../scripts/dom-builder.js';
 
 export default function decorate(block) {
-  block.parentNode.prepend(document.createElement('hr'));
+  block.parentNode.prepend(div({ class: 'border-t-0-5 border-solid border-black' }));
   block.classList.add(...'grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 px-4 sm:px-0 my-16'.split(' '));
   [...block.children].forEach((element) => {
-    element.classList.add(...'items-start mr-20 lg:mr-40'.split(' '));
+    element.classList.add(...'items-start pl-8 lg:pl-0 mr-20 lg:mr-40'.split(' '));
     element.querySelector('img')?.classList.add('py-1');
     element.querySelector('h3')?.classList.add(...'text-lg p-0 my-1 sm:text-lg font-medium'.split(' '));
     const link = element.querySelector('a');
@@ -14,7 +17,7 @@ export default function decorate(block) {
       if (link.href.endsWith('#RequestAQuote')) link.classList.add('show-modal-btn');
     }
   });
-  block.parentNode.append(document.createElement('hr'));
+  block.parentNode.append(div({ class: 'border-t-0-5 border-solid border-black' }));
   block.parentNode.classList.add('py-6');
   decorateModals(block);
 }

blocks/product-category-list/filter.js

@@ -0,0 +1,48 @@
+import {
+  a, div,
+} from '../../scripts/dom-builder.js';
+import { toClassName } from '../../scripts/lib-franklin.js';
+
+const createFilters = (items, activeTag, tagName) => {
+  // collect tag filters
+  const allTags = items.map((item) => item[tagName].replace(/,\s*/g, ',').split(','));
+  const filterTags = new Set([].concat(...allTags));
+  filterTags.delete('');
+  filterTags.delete('Blog'); // filter out generic blog tag
+  filterTags.delete('News'); // filter out generic news tag
+  // render tag cloud
+  const newUrl = new URL(window.location);
+  newUrl.searchParams.delete('tag');
+  newUrl.searchParams.delete('page');
+  const tags = div(
+    { class: 'flex flex-wrap gap-2 mt-10 mb-4' },
+    a(
+      {
+        class:
+            'text-center my-2 inline-block rounded-full px-4 py-1 text-sm font-bold bg-d text-danaherpurple-500 bg-danaherpurple-50 hover:bg-gray-100 hover:text-gray-500',
+        href: newUrl.toString(),
+      },
+      'View All',
+    ),
+  );
+  [...filterTags].sort().forEach((tag) => {
+    newUrl.searchParams.set('tag', toClassName(tag).toLowerCase());
+    const tagAnchor = a(
+      {
+        class:
+            'text-center my-2 inline-block rounded-full px-4 py-1 text-sm font-bold bg-d hover:bg-gray-100 hover:text-gray-500',
+        href: newUrl.toString(),
+      },
+      tag,
+    );
+    if (toClassName(tag).toLowerCase() === activeTag) {
+      tagAnchor.classList.add('bg-danaherpurple-500', 'text-white');
+      tagAnchor.setAttribute('aria-current', 'tag');
+    } else {
+      tagAnchor.classList.add('text-danaherpurple-500', 'bg-danaherpurple-50');
+    }
+    tags.append(tagAnchor);
+  });
+  return tags;
+};
+export default createFilters;

blocks/product-category-list/product-category-list.js

@@ -0,0 +1,62 @@
+import ffetch from '../../scripts/ffetch.js';
+import {
+  ul, li, a, h4, span,
+} from '../../scripts/dom-builder.js';
+import { makePublicUrl, imageHelper } from '../../scripts/scripts.js';
+import { toClassName } from '../../scripts/lib-franklin.js';
+import createFilters from './filter.js';
+
+const getSelectionFromUrl = (field) => toClassName(new URLSearchParams(window.location.search).get(field)) || '';
+
+function createCard(product, firstCard = false) {
+  const cardWrapper = a(
+    { href: makePublicUrl(product.path), title: product.title },
+    imageHelper(product.image, product.title, firstCard),
+    h4(
+      {
+        class: '!text-sm !font-normal !text-danahergray-900 !break-words !h-16',
+      },
+      product.title,
+      span({ class: 'text-lg font-semibold text-danaherpurple-500' }, ' →'),
+    ),
+  );
+  const card = li({
+    class:
+        'w-52 lg:w-40 h-52 flex flex-col col-span-1 relative mx-auto justify-center transform transition duration-500 border-l-0-5 border-black hover:scale-105 overflow-hidden bg-white max-w-xl pl-6 pr-6 lg:pr-0',
+  }, cardWrapper);
+  card.querySelector('img').className = 'mb-2 h-24 w-full object-cover';
+  return card;
+}
+
+export default async function decorate(block) {
+  block.parentElement.parentElement.classList.add('!pb-0');
+
+  let products = await ffetch('/us/en/products-index.json')
+    .filter(({ fullCategory }) => fullCategory.split('|').length === 1)
+    .filter(({ fullCategory }) => fullCategory !== '')
+    .filter(({ path }) => !path.includes('/topics'))
+    .filter(({ path }) => !path.includes('/product-coveo'))
+    .filter(({ path }) => !path.includes('/brands'))
+    .all();
+
+  const activeTagFilter = getSelectionFromUrl('tag');
+  let filteredProducts = products;
+  products = products.sort((item1, item2) => item1.title.localeCompare(item2.title));
+  if (activeTagFilter) {
+    filteredProducts = products.filter(
+      (item) => toClassName(item.brand).toLowerCase().indexOf(activeTagFilter) > -1,
+    );
+  }
+
+  const cardList = ul({
+    class:
+          'container grid max-w-7xl w-full mx-auto gap-6 grid-cols-1 sm:grid-cols-3 lg:grid-cols-6 px-4 py-4 sm:px-0 justify-items-center mt-3 mb-3',
+  });
+
+  filteredProducts.forEach((product, index) => {
+    cardList.append(createCard(product, index === 0));
+  });
+  const filterTags = createFilters(products, activeTagFilter, 'brand');
+  block.textContent = '';
+  block.append(filterTags, cardList);
+}

styles/styles.css

@@ -1749,6 +1749,14 @@ main .section {
     border-bottom-right-radius: 0.25rem;
 }
 
+.border-l-0-5 {
+    border-left-width: 0.5px;
+  }
+
+.border-t-0-5 {
+    border-top-width: 0.5px;
+  }
+
 /* START OF CORE STYLES */
 
 .btn-primary-purple {
@@ -2454,6 +2462,10 @@ main .default-content-wrapper ul {
     margin-top: 0px;
 }
 
+.mt-10 {
+    margin-top: 2.5rem;
+}
+
 .mt-2 {
     margin-top: 0.5rem;
 }
@@ -2535,6 +2547,10 @@ main .default-content-wrapper ul {
     height: 3.5rem !important;
 }
 
+.\!h-16 {
+    height: 4rem !important;
+}
+
 .\!h-20 {
     height: 5rem !important;
 }
@@ -2595,6 +2611,10 @@ main .default-content-wrapper ul {
     height: 83.333333%;
 }
 
+.h-52 {
+    height: 13rem;
+}
+
 .h-6 {
     height: 1.5rem;
 }
@@ -2680,6 +2700,10 @@ main .default-content-wrapper ul {
     width: 1.25rem;
 }
 
+.w-52 {
+    width: 13rem;
+}
+
 .w-6 {
     width: 1.5rem;
 }
@@ -3120,6 +3144,15 @@ main .default-content-wrapper ul {
     border-top-width: 8px;
 }
 
+.border-solid {
+    border-style: solid;
+}
+
+.border-black {
+    --tw-border-opacity: 1;
+    border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .border-danaherpurple-500 {
     --tw-border-opacity: 1;
     border-color: rgb(117 35 255 / var(--tw-border-opacity));
@@ -3474,6 +3507,10 @@ main .default-content-wrapper ul {
     padding-left: 1.25rem;
 }
 
+.pl-6 {
+    padding-left: 1.5rem;
+}
+
 .pl-8 {
     padding-left: 2rem;
 }
@@ -3490,6 +3527,10 @@ main .default-content-wrapper ul {
     padding-right: 0.75rem;
 }
 
+.pr-6 {
+    padding-right: 1.5rem;
+}
+
 .pt-0 {
     padding-top: 0px;
 }
@@ -4078,6 +4119,10 @@ main .default-content-wrapper ul {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    .sm\:grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
     .sm\:flex-row {
         flex-direction: row;
     }
@@ -4337,6 +4382,10 @@ main .default-content-wrapper ul {
         width: 5rem;
     }
 
+    .lg\:w-40 {
+        width: 10rem;
+    }
+
     .lg\:w-44 {
         width: 11rem;
     }
@@ -4365,6 +4414,10 @@ main .default-content-wrapper ul {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-6 {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
     .lg\:grid-rows-2 {
         grid-template-rows: repeat(2, minmax(0, 1fr));
     }
@@ -4414,10 +4467,18 @@ main .default-content-wrapper ul {
         padding-bottom: 0.25rem;
     }
 
+    .lg\:pl-0 {
+        padding-left: 0px;
+    }
+
     .lg\:pl-2 {
         padding-left: 0.5rem;
     }
 
+    .lg\:pr-0 {
+        padding-right: 0px;
+    }
+
     .lg\:pt-4 {
         padding-top: 1rem;
     }

styles/tailwind.css

@@ -135,6 +135,14 @@
     @apply rounded-tr rounded-br;
   }
 
+  .border-l-0-5 {
+    border-left-width: 0.5px;
+  }
+
+  .border-t-0-5 {
+    border-top-width: 0.5px;
+  }
+
   /* START OF CORE STYLES */
   .btn-primary-purple {
     @apply text-white bg-danaherpurple-500 hover:bg-danaherpurple-800 border-danaherpurple-500 hover:border-danaherpurple-800;