Release 20240619

blocks/article-info/article-info.css

@@ -0,0 +1,126 @@
+.article-info-wrapper :is(.col-span-1) {
+  grid-column: span 1 / span 1
+}
+
+.article-info-wrapper :is(.col-span-2) {
+  grid-column: span 2 / span 2
+}
+
+.article-info-wrapper :is(.mx-auto) {
+  margin-left: auto;
+  margin-right: auto
+}
+
+.article-info-wrapper :is(.my-4) {
+  margin-top: 1rem;
+  margin-bottom: 1rem
+}
+
+.article-info-wrapper :is(.mr-4) {
+  margin-right: 1rem
+}
+
+.article-info-wrapper :is(.mr-7) {
+  margin-right: 1.75rem
+}
+
+.article-info-wrapper :is(.mt-4) {
+  margin-top: 1rem
+}
+
+.article-info-wrapper :is(.block) {
+  display: block
+}
+
+.article-info-wrapper :is(.flex) {
+  display: flex
+}
+
+.article-info-wrapper :is(.hidden) {
+  display: none
+}
+
+.article-info-wrapper :is(.h-16) {
+  height: 4rem
+}
+
+.article-info-wrapper :is(.w-16) {
+  width: 4rem
+}
+
+.article-info-wrapper :is(.w-full) {
+  width: 100%
+}
+
+.article-info-wrapper :is(.w-max) {
+  width: -moz-max-content;
+  width: max-content
+}
+
+.article-info-wrapper :is(.max-w-4xl) {
+  max-width: 56rem
+}
+
+.article-info-wrapper :is(.items-center) {
+  align-items: center
+}
+
+.article-info-wrapper :is(.justify-start) {
+  justify-content: flex-start
+}
+
+.article-info-wrapper :is(.justify-end) {
+  justify-content: flex-end
+}
+
+.article-info-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
+}
+
+.article-info-wrapper :is(.rounded-full) {
+  border-radius: 9999px
+}
+
+.article-info-wrapper :is(.bg-danaherlightblue-50) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 251 253 / var(--tw-bg-opacity))
+}
+
+.article-info-wrapper :is(.pl-1) {
+  padding-left: 0.25rem
+}
+
+.article-info-wrapper :is(.text-lg) {
+  font-size: 1.125rem;
+  line-height: 1.75rem
+}
+
+.article-info-wrapper :is(.text-sm) {
+  font-size: 0.875rem;
+  line-height: 1.25rem
+}
+
+.article-info-wrapper :is(.font-medium) {
+  font-weight: 500
+}
+
+.article-info-wrapper :is(.leading-6) {
+  line-height: 1.5rem
+}
+
+.article-info-wrapper :is(.text-danaherblack-500) {
+  --tw-text-opacity: 1;
+  color: rgb(51 51 51 / var(--tw-text-opacity))
+}
+
+@media (min-width: 1024px) {
+  .article-info-wrapper :is(.lg\:h-20) {
+    height: 5rem
+  }
+
+  .article-info-wrapper :is(.lg\:w-20) {
+    width: 5rem
+  }
+}

blocks/article-info/article-info.js

@@ -0,0 +1,75 @@
+import {
+  div, input, span, img,
+} from '../../scripts/dom-builder.js';
+import { getMetadata } from '../../scripts/lib-franklin.js';
+
+export default function decorate(block) {
+  block.innerHTML = '';
+  const authorName = getMetadata('authorname');
+  const authorJobTitle = getMetadata('authortitle');
+  const publishDate = getMetadata('publishdate');
+  const readingTime = getMetadata('readingtime');
+  const authorImage = getMetadata('authorimage');
+  const expectedPublishFormat = new Date(publishDate);
+
+  block.append(
+    div(
+      { class: 'articleinfo' },
+      div(
+        { class: 'max-w-4xl mx-auto' },
+        div(
+          { class: 'items-center flex justify-start my-4 w-full col-span-2' },
+          div(
+            { class: 'space-y-1 text-lg leading-6' },
+            div({ class: 'text-danaherblack-500 font-medium' }, authorName),
+            div({ class: 'text-sm text-danaherblack-500 w-full' }, authorJobTitle),
+          ),
+        ),
+        div(
+          { class: 'w-max items-center flex justify-end col-span-1 text-sm mr-4 my-4 text-danaherblack-500' },
+          `${expectedPublishFormat.getDate()} ${expectedPublishFormat.toLocaleString('default', { month: 'long' })}, ${expectedPublishFormat.getFullYear()}`,
+          input({ id: 'publishdate', class: 'hidden', value: publishDate }),
+        ),
+        div(
+          { class: 'items-center flex justify-start col-span-1 my-4' },
+          div({ class: 'reading-icon' }),
+          div(
+            { class: 'text-sm text-danaherblack-500 pl-1' },
+            span({ id: 'timetoread' }, `${readingTime} Mins`),
+          ),
+        ),
+      ),
+    ),
+  );
+
+  if (authorImage) {
+    const items = block.querySelector('.items-center');
+    items.insertBefore(img({ class: 'h-16 w-16 rounded-full lg:h-20 lg:w-20 mr-7', src: authorImage, alt: authorName }), items.firstChild);
+    const imageEl = block.querySelector('.articleinfo')?.querySelector('.items-center')?.querySelector('img');
+    imageEl.remove();
+    block.querySelector('.articleinfo')?.firstChild?.prepend(imageEl);
+  }
+
+  block.querySelector('.reading-icon').innerHTML = `
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9.01172 5.66667V9L11.5117 11.5M16.5117 9C16.5117 13.1421 13.1539 16.5 9.01172 16.5C4.86958 16.5 1.51172 13.1421 1.51172 9C1.51172 4.85786 4.86958 1.5 9.01172 1.5C13.1539 1.5 16.5117 4.85786 16.5117 9Z" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  `;
+
+  const toBeRemoved = ['social-media-wrapper', 'columns-wrapper', 'article-info-wrapper', 'tags-list-wrapper', 'related-articles-wrapper'];
+  const sectionEl = document.querySelector('main > div:nth-child(1)');
+  sectionEl.classList.remove('article-info-container');
+  const leftSideElements = div({ class: 'mt-4' });
+  Array.from(sectionEl.children).forEach((element) => {
+    if (!toBeRemoved.includes(element.classList[0])) {
+      leftSideElements.append(element);
+    }
+  });
+
+  const divEl = div(
+    { class: 'article-info-container' },
+    sectionEl.querySelector('.article-info-wrapper'),
+    leftSideElements,
+  );
+  sectionEl.querySelector('.columns-wrapper')?.after(divEl);
+}

blocks/blog-hero/blog-hero.css

@@ -1,50 +1,8 @@
-.blog-hero-wrapper :is(.col-span-1) {
-  grid-column: span 1 / span 1
-}
-
-.blog-hero-wrapper :is(.col-span-2) {
-  grid-column: span 2 / span 2
-}
-
-.blog-hero-wrapper :is(.mx-auto) {
-  margin-left: auto;
-  margin-right: auto
-}
-
 .blog-hero-wrapper :is(.my-2) {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem
 }
 
-.blog-hero-wrapper :is(.my-4) {
-  margin-top: 1rem;
-  margin-bottom: 1rem
-}
-
-.blog-hero-wrapper :is(.mb-2) {
-  margin-bottom: 0.5rem
-}
-
-.blog-hero-wrapper :is(.ml-2) {
-  margin-left: 0.5rem
-}
-
-.blog-hero-wrapper :is(.ml-4) {
-  margin-left: 1rem
-}
-
-.blog-hero-wrapper :is(.mr-4) {
-  margin-right: 1rem
-}
-
-.blog-hero-wrapper :is(.mr-7) {
-  margin-right: 1.75rem
-}
-
-.blog-hero-wrapper :is(.mt-4) {
-  margin-top: 1rem
-}
-
 .blog-hero-wrapper :is(.mt-8) {
   margin-top: 2rem
 }
@@ -53,70 +11,6 @@
   display: block
 }
 
-.blog-hero-wrapper :is(.flex) {
-  display: flex
-}
-
-.blog-hero-wrapper :is(.grid) {
-  display: grid
-}
-
-.blog-hero-wrapper :is(.hidden) {
-  display: none
-}
-
-.blog-hero-wrapper :is(.h-16) {
-  height: 4rem
-}
-
-.blog-hero-wrapper :is(.w-16) {
-  width: 4rem
-}
-
-.blog-hero-wrapper :is(.w-full) {
-  width: 100%
-}
-
-.blog-hero-wrapper :is(.w-max) {
-  width: -moz-max-content;
-  width: max-content
-}
-
-.blog-hero-wrapper :is(.max-w-7xl) {
-  max-width: 80rem
-}
-
-.blog-hero-wrapper :is(.grid-cols-2) {
-  grid-template-columns: repeat(2, minmax(0, 1fr))
-}
-
-.blog-hero-wrapper :is(.items-center) {
-  align-items: center
-}
-
-.blog-hero-wrapper :is(.justify-start) {
-  justify-content: flex-start
-}
-
-.blog-hero-wrapper :is(.justify-end) {
-  justify-content: flex-end
-}
-
-.blog-hero-wrapper :is(.gap-x-20) {
-  -moz-column-gap: 5rem;
-       column-gap: 5rem
-}
-
-.blog-hero-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
-}
-
-.blog-hero-wrapper :is(.rounded-full) {
-  border-radius: 9999px
-}
-
 .blog-hero-wrapper :is(.bg-danaherlightblue-50) {
   --tw-bg-opacity: 1;
   background-color: rgb(239 251 253 / var(--tw-bg-opacity))
@@ -127,52 +21,15 @@
   padding-right: 0.5rem
 }
 
-.blog-hero-wrapper :is(.pl-1) {
-  padding-left: 0.25rem
-}
-
-.blog-hero-wrapper :is(.text-lg) {
-  font-size: 1.125rem;
-  line-height: 1.75rem
-}
-
-.blog-hero-wrapper :is(.text-sm) {
-  font-size: 0.875rem;
-  line-height: 1.25rem
-}
-
 .blog-hero-wrapper :is(.text-xl) {
   font-size: 1.25rem;
   line-height: 1.75rem
 }
 
-.blog-hero-wrapper :is(.font-medium) {
-  font-weight: 500
-}
-
-.blog-hero-wrapper :is(.leading-6) {
-  line-height: 1.5rem
-}
-
 .blog-hero-wrapper :is(.leading-8) {
   line-height: 2rem
 }
 
-.blog-hero-wrapper :is(.text-danaherblack-500) {
-  --tw-text-opacity: 1;
-  color: rgb(51 51 51 / var(--tw-text-opacity))
-}
-
-.blog-hero-wrapper :is(.text-danahergray-500) {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity))
-}
-
-.blog-hero-wrapper :is(.text-danaherpurple-800) {
-  --tw-text-opacity: 1;
-  color: rgb(64 0 165 / var(--tw-text-opacity))
-}
-
 .blog-hero-wrapper :is(.text-gray-500) {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity))
@@ -181,18 +38,4 @@
 .blog-hero-wrapper :is(.text-gray-900) {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))
-}
-
-@media (min-width: 1024px) {
-  .blog-hero-wrapper :is(.lg\:h-20) {
-    height: 5rem
-  }
-
-  .blog-hero-wrapper :is(.lg\:w-20) {
-    width: 5rem
-  }
-
-  .blog-hero-wrapper :is(.lg\:grid-cols-4) {
-    grid-template-columns: repeat(4, minmax(0, 1fr))
-  }
 }