Merge pull request #779 from hlxsites/762-ui-download-comp

762 [Solutions] Block/UI download component

blocks/download/download.js

@@ -0,0 +1,36 @@
+import { div, strong } from '../../scripts/dom-builder.js';
+
+export default function decorate(block) {
+  block.classList.add(...'space-y-4 divide-y'.split(' '));
+  [...block.children].forEach((row) => {
+    row.querySelectorAll('picture').forEach((picItem) => {
+      picItem?.parentElement?.parentElement?.classList.add(...'w-full card flex flex-col md:flex-row py-4 gap-x-2 gap-y-4 items-start md:items-center'.split(' '));
+      picItem?.parentElement?.classList.add(...'card-image flex'.split(' '));
+      picItem?.classList.add(...'w-64 h-64 block md:w-52 md:h-36 rounded-md shrink-0 mb-3 md:mb-0 object-cover aspect-video'.split(' '));
+    });
+    const pEl = row.querySelector('p');
+    pEl?.parentElement.classList.add(...'card-body w-full'.split(' '));
+    pEl?.classList.add(...'text-sm break-words text-danaherlightblue-500'.split(' '));
+    const h2El = row.querySelector('h2');
+    h2El?.classList.add(...'text-base tracking-tight text-gray-900 font-semibold'.split(' '));
+    row.querySelectorAll('p > strong').forEach((tagItem) => {
+      const tagsEl = tagItem.innerHTML.split(', ');
+      const tagsParent = tagItem.parentElement;
+      tagsParent.classList.add(...'space-x-2'.split(' '));
+      tagsParent.innerHTML = '';
+      tagsEl.forEach((tagName) => {
+        const strongTag = strong({ class: 'text-xs font-semibold tracking-wide px-3 py-1 bg-darkblue-50 rounded-full font-sans' }, tagName);
+        tagsParent.append(strongTag);
+      });
+    });
+    const allBtns = row.querySelectorAll('p.button-container');
+    if (allBtns.length > 0) {
+      const actions = div({ class: 'flex flex-col md:flex-row gap-5' });
+      allBtns.forEach((btnEl) => {
+        btnEl.querySelector('a')?.classList.add(...'px-6 rounded-full !no-underline'.split(' '));
+        actions.append(btnEl);
+      });
+      row.append(actions);
+    }
+  });
+}

styles/styles.css

@@ -3234,6 +3234,10 @@ main .default-content-wrapper ul {
   display: none;
 }
 
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
 .\!h-14 {
   height: 3.5rem !important;
 }
@@ -3751,6 +3755,12 @@ main .default-content-wrapper ul {
   row-gap: 2rem;
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -4057,6 +4067,11 @@ main .default-content-wrapper ul {
   background-color: rgb(64 0 165 / var(--tw-bg-opacity));
 }
 
+.bg-darkblue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 233 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -4635,6 +4650,11 @@ main .default-content-wrapper ul {
   color: rgb(3 93 103 / var(--tw-text-opacity));
 }
 
+.text-danaherlightblue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 199 229 / var(--tw-text-opacity));
+}
+
 .text-danaherpurple-500 {
   --tw-text-opacity: 1;
   color: rgb(117 35 255 / var(--tw-text-opacity));
@@ -5185,6 +5205,10 @@ main .section.top-border {
     margin-bottom: 1rem;
   }
 
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .md\:ml-14 {
     margin-left: 3.5rem;
   }
@@ -5213,6 +5237,10 @@ main .section.top-border {
     display: none;
   }
 
+  .md\:h-36 {
+    height: 9rem;
+  }
+
   .md\:h-6 {
     height: 1.5rem;
   }
@@ -5253,6 +5281,10 @@ main .section.top-border {
     width: 60%;
   }
 
+  .md\:w-52 {
+    width: 13rem;
+  }
+
   .md\:w-6 {
     width: 1.5rem;
   }
@@ -5277,6 +5309,10 @@ main .section.top-border {
     flex-wrap: wrap;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
   .md\:justify-between {
     justify-content: space-between;
   }