Merge pull request #761 from hlxsites/760-css-split-testimonial

CSS Split by Block - testimonial

blocks/testimonial/testimonial.js

@@ -6,6 +6,12 @@ import { decorateIcons } from '../../scripts/lib-franklin.js';
 export default async function decorate(block) {
   const buildQuote = div(span({ class: 'icon icon-quote' }));
   block.classList.add('py-6');
+  const divEl = block.querySelector('div');
+  divEl.classList.add(...'flex items-center gap-8 justify-center'.split(' '));
+  const divOfDivEl = block.querySelector(':scope div > div:nth-child(2)');
+  divOfDivEl.classList.add(...'text-2xl leading-9 font-medium text-danahergreyblue-500 relative'.split(' '));
+  const picDivEl = divEl.parentNode.querySelector(':scope div > div:nth-child(1)');
+  picDivEl.classList.add(...'hidden lg:block lg:flex-shrink-0'.split(' '));
   decorateIcons(buildQuote);
   buildQuote.firstChild.classList.add('absolute', 'top-16', 'left-28', 'text-indigo-200', 'w-36', 'h-36', '-translate-x-8', '-translate-y-24', 'transform', 'opacity-50');
   const image = block.querySelector('img');

styles/styles.css

@@ -373,57 +373,6 @@
   padding-bottom: 4rem;
 }
 
-.testimonial>div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-}
-
-.testimonial>div>div {
-  position: relative;
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 2.25rem;
-  --tw-text-opacity: 1;
-  color: rgb(3 93 103 / var(--tw-text-opacity));
-}
-
-.testimonial.has-image>div>div:nth-child(1) {
-  display: none;
-}
-
-@media (min-width: 1024px) {
-
-  .testimonial.has-image>div>div:nth-child(1) {
-    display: block;
-    flex-shrink: 0;
-  }
-}
-
-.testimonial .testimonial-footer img {
-  display: block;
-  height: 4rem;
-  width: 4rem;
-  border-radius: 9999px;
-}
-
-@media (min-width: 1024px) {
-
-  .testimonial .testimonial-footer img {
-    display: none;
-  }
-}
-
-.testimonial .testimonial-footer .flex-col>div:nth-child(2) {
-  margin-top: 0px;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-  --tw-text-opacity: 1;
-  color: rgb(2 105 124 / var(--tw-text-opacity));
-}
-
 .cards .cards-card-body > *:first-child {
   margin-top: 0px;
 }
@@ -1028,15 +977,6 @@ button.suggestion.selected {
   gap: 0.5rem;
 }
 
-.testimonial .testimonial-footer .product-hero .product-hero-content>div:nth-child(2) {
-  margin-top: 0px;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-  --tw-text-opacity: 1;
-  color: rgb(2 105 124 / var(--tw-text-opacity));
-}
-
 @media (min-width: 768px) {
 
   .product-hero .product-hero-content {
@@ -1153,15 +1093,6 @@ button.suggestion.selected {
   background-color: transparent;
 }
 
-.testimonial .testimonial-footer .product-hero .vertical-gallery-container > div>div:nth-child(2) {
-  margin-top: 0px;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-  --tw-text-opacity: 1;
-  color: rgb(2 105 124 / var(--tw-text-opacity));
-}
-
 @media (min-width: 1024px) {
 
   .product-hero .vertical-gallery-container > div {
@@ -1275,15 +1206,6 @@ button.suggestion.selected {
   color: rgb(117 35 255 / var(--tw-text-opacity));
 }
 
-.testimonial .testimonial-footer .product-hero .vertical-gallery-container .view-more>div:nth-child(2) {
-  margin-top: 0px;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-  --tw-text-opacity: 1;
-  color: rgb(2 105 124 / var(--tw-text-opacity));
-}
-
 .product-hero .vertical-gallery-container .view-more:hover {
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -3775,6 +3697,10 @@ main .default-content-wrapper ul {
   gap: 1.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-x-16 {
   -moz-column-gap: 4rem;
        column-gap: 4rem;
@@ -4621,6 +4547,10 @@ main .default-content-wrapper ul {
   line-height: 2rem;
 }
 
+.leading-9 {
+  line-height: 2.25rem;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -4692,6 +4622,11 @@ main .default-content-wrapper ul {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-danahergreyblue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 93 103 / var(--tw-text-opacity));
+}
+
 .text-danaherpurple-500 {
   --tw-text-opacity: 1;
   color: rgb(117 35 255 / var(--tw-text-opacity));

styles/tailwind.css

@@ -15,7 +15,6 @@
 @import '../templates/library/library.css';
 @import '../templates/application/application.css';
 @import '../templates/brandHome/brandHome.css';
-@import '../blocks/testimonial/testimonial.css';
 @import '../blocks/cards/cards.css';
 @import '../blocks/columns/columns.css';
 @import '../blocks/header/header.css';