Merge pull request #34 from hlxsites/main

Release 20240520

blocks/accordion/accordion.css

@@ -0,0 +1,274 @@
+.eyebrow {
+  color: #4000A5;
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.75rem
+}
+
+.accordion-wrapper :is(.absolute) {
+  position: absolute
+}
+
+.accordion-wrapper :is(.relative) {
+  position: relative
+}
+
+.accordion-wrapper :is(.right-0) {
+  right: 0px
+}
+
+.accordion-wrapper :is(.mx-auto) {
+  margin-left: auto;
+  margin-right: auto
+}
+
+.accordion-wrapper :is(.my-0) {
+  margin-top: 0px;
+  margin-bottom: 0px
+}
+
+.accordion-wrapper :is(.mr-12) {
+  margin-right: 3rem
+}
+
+.accordion-wrapper :is(.block) {
+  display: block
+}
+
+.accordion-wrapper :is(.flex) {
+  display: flex
+}
+
+.accordion-wrapper :is(.grid) {
+  display: grid
+}
+
+.accordion-wrapper :is(.hidden) {
+  display: none
+}
+
+.accordion-wrapper :is(.h-6) {
+  height: 1.5rem
+}
+
+.accordion-wrapper :is(.h-full) {
+  height: 100%
+}
+
+.accordion-wrapper :is(.w-6) {
+  width: 1.5rem
+}
+
+.accordion-wrapper :is(.w-full) {
+  width: 100%
+}
+
+.accordion-wrapper :is(.max-w-7xl) {
+  max-width: 80rem
+}
+
+.accordion-wrapper :is(.rotate-0) {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.accordion-wrapper :is(.transform) {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.accordion-wrapper :is(.cursor-pointer) {
+  cursor: pointer
+}
+
+.accordion-wrapper :is(.grid-cols-1) {
+  grid-template-columns: repeat(1, minmax(0, 1fr))
+}
+
+.accordion-wrapper :is(.grid-rows-\[0fr\]) {
+  grid-template-rows: 0fr
+}
+
+.accordion-wrapper :is(.items-center) {
+  align-items: center
+}
+
+.accordion-wrapper :is(.justify-between) {
+  justify-content: space-between
+}
+
+.accordion-wrapper :is(.gap-16) {
+  gap: 4rem
+}
+
+.accordion-wrapper :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
+}
+
+.accordion-wrapper :is(.divide-gray-900\/10 > :not([hidden]) ~ :not([hidden])) {
+  border-color: rgb(17 24 39 / 0.1)
+}
+
+.accordion-wrapper :is(.overflow-hidden) {
+  overflow: hidden
+}
+
+.accordion-wrapper :is(.bg-danaherlightblue-50) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 251 253 / var(--tw-bg-opacity))
+}
+
+.accordion-wrapper :is(.fill-current) {
+  fill: currentColor
+}
+
+.accordion-wrapper :is(.py-2) {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem
+}
+
+.accordion-wrapper :is(.pt-4) {
+  padding-top: 1rem
+}
+
+.accordion-wrapper :is(.text-left) {
+  text-align: left
+}
+
+.accordion-wrapper :is(.align-middle) {
+  vertical-align: middle
+}
+
+.accordion-wrapper :is(.\!text-xl) {
+  font-size: 1.25rem !important;
+  line-height: 1.75rem !important
+}
+
+.accordion-wrapper :is(.text-base) {
+  font-size: 1rem;
+  line-height: 1.5rem
+}
+
+.accordion-wrapper :is(.text-sm) {
+  font-size: 0.875rem;
+  line-height: 1.25rem
+}
+
+.accordion-wrapper :is(.font-bold) {
+  font-weight: 700
+}
+
+.accordion-wrapper :is(.font-medium) {
+  font-weight: 500
+}
+
+.accordion-wrapper :is(.font-semibold) {
+  font-weight: 700
+}
+
+.accordion-wrapper :is(.leading-7) {
+  line-height: 1.75rem
+}
+
+.accordion-wrapper :is(.text-danaherpurple-500) {
+  --tw-text-opacity: 1;
+  color: rgb(117 35 255 / var(--tw-text-opacity))
+}
+
+.accordion-wrapper :is(.text-gray-400) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+
+.accordion-wrapper :is(.\!no-underline) {
+  text-decoration-line: none !important
+}
+
+.accordion-wrapper :is(.opacity-0) {
+  opacity: 0
+}
+
+.accordion-wrapper :is(.filter) {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+
+.accordion-wrapper :is(.transition-all) {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
+}
+
+.accordion-wrapper :is(.duration-300) {
+  transition-duration: 300ms
+}
+
+.accordion-wrapper :is(.ease-in-out) {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+}
+
+.accordion-wrapper :is(.peer:checked ~ .peer-checked\:grid-rows-\[1fr\]) {
+  grid-template-rows: 1fr
+}
+
+.accordion-wrapper :is(.peer:checked ~ .peer-checked\:py-2) {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem
+}
+
+.accordion-wrapper :is(.peer:checked ~ .peer-checked\:opacity-100) {
+  opacity: 1
+}
+
+.accordion-wrapper :is(.peer ~ .peer-\[\&_span\.minus\]\:rotate-90 span.minus) {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.accordion-wrapper :is(.peer ~ .peer-\[\&_span\.minus\]\:opacity-0 span.minus) {
+  opacity: 0
+}
+
+.accordion-wrapper :is(.peer ~ .peer-\[\&_span\.plus\]\:opacity-100 span.plus) {
+  opacity: 1
+}
+
+@media (min-width: 1024px) {
+  .accordion-wrapper :is(.lg\:block) {
+    display: block
+  }
+
+  .accordion-wrapper :is(.lg\:grid-cols-2) {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+  }
+
+  .accordion-wrapper :is(.lg\:pl-44) {
+    padding-left: 11rem
+  }
+
+  .accordion-wrapper :is(.lg\:text-center) {
+    text-align: center
+  }
+}
+
+.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:rotate-180 span.minus) {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.minus\]\:opacity-100 span.minus) {
+  opacity: 1
+}
+
+.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:rotate-45 span.plus) {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+
+.accordion-wrapper :is(.peer:checked ~ .peer-checked\:\[\&_span\.plus\]\:opacity-0 span.plus) {
+  opacity: 0
+}
+
+.accordion-wrapper :is(.\[\&_svg\>use\]\:stroke-black svg>use) {
+  stroke: #000
+}

blocks/accordion/accordion.js

@@ -38,7 +38,7 @@ function createAccordionBlock(question, answer, image, uuid, index, customUUID)
       'aria-controls': `accordion-${uuid}-${index}`,
       class: 'flex items-center justify-between w-full text-left font-semibold py-2 cursor-pointer peer-[&_span.plus]:opacity-100 peer-checked:[&_span.plus]:opacity-0 peer-checked:[&_span.plus]:rotate-45 peer-[&_span.minus]:opacity-0 peer-[&_span.minus]:rotate-90 peer-checked:[&_span.minus]:rotate-180 peer-checked:[&_span.minus]:opacity-100 peer-checked:[&_span.minus]:opacity-100',
     },
-    h3({ class: 'text-xl font-medium leading-7 my-0 mr-12', title: question }, question),
+    h3({ class: '!text-xl font-medium leading-7 my-0 mr-12', title: question }, question),
     span({ class: 'icon icon-dam-Plus w-6 h-6 absolute right-0 fill-current text-gray-400 rotate-0 transform transition-all ease-in-out plus [&_svg>use]:stroke-black' }),
     span({ class: 'icon icon-dam-Minus w-6 h-6 absolute right-0 fill-current text-gray-400 rotate-0 transform transition-all ease-in-out minus [&_svg>use]:stroke-black' }),
   );