diff --git a/blocks/product-overview/product-overview.css b/blocks/product-overview/product-overview.css new file mode 100644 index 000000000..fa6f07804 --- /dev/null +++ b/blocks/product-overview/product-overview.css @@ -0,0 +1,11 @@ +.product-overview h3 { + @apply text-2xl; +} + +.product-overview h4, .product-overview p, .product-overview li { + @apply pt-2.5; +} + +.product-overview ul { + @apply list-disc pl-12; +} \ No newline at end of file diff --git a/blocks/product-overview/product-overview.js b/blocks/product-overview/product-overview.js new file mode 100644 index 000000000..0bc31897a --- /dev/null +++ b/blocks/product-overview/product-overview.js @@ -0,0 +1,9 @@ +import { getProductResponse } from '../../scripts/scripts.js'; + +export default async function decorate(block) { + const response = getProductResponse(); + block.classList.add(...'text-lg leading-7 overview xl:w-3/4 href-text v-html text-danahergray-700'.split(' ')); + if (response?.length > 0) { + block.innerHTML = response[0].raw?.richlongdescription ? response[0].raw.richlongdescription : ''; + } +} diff --git a/styles/styles.css b/styles/styles.css index 124cd987e..9d6155f4f 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1640,6 +1640,20 @@ svg symbol path { display: none; } +.product-overview h3 { + font-size: 1.5rem; + line-height: 2rem; +} + +.product-overview h4, .product-overview p, .product-overview li { + padding-top: 0.625rem; +} + +.product-overview ul { + list-style-type: disc; + padding-left: 3rem; +} + dialog::backdrop { inset: 0px; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); diff --git a/styles/tailwind.css b/styles/tailwind.css index a31616f80..972eeb433 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -24,6 +24,7 @@ @import '../blocks/takeway/takeway.css'; @import '../blocks/product-hero/product-hero.css'; @import '../blocks/page-tabs/page-tabs.css'; +@import '../blocks/product-overview/product-overview.css'; @import '../styles/modal/modal.css'; @import '../styles/coveo-atomic.css';