From a691a22be4ebf8464be93d6d54e038522e31c8e7 Mon Sep 17 00:00:00 2001
From: wz914876 <sharanagouda_patil@pall.com>
Date: Wed, 7 Feb 2024 13:10:44 +0530
Subject: [PATCH] CSS Split by Block - testimonial

---
 blocks/testimonial/testimonial.css | 19 -------
 blocks/testimonial/testimonial.js  |  6 ++
 styles/styles.css                  | 91 +++++-------------------------
 styles/tailwind.css                |  1 -
 4 files changed, 19 insertions(+), 98 deletions(-)
 delete mode 100644 blocks/testimonial/testimonial.css

diff --git a/blocks/testimonial/testimonial.css b/blocks/testimonial/testimonial.css
deleted file mode 100644
index 60de04b93..000000000
--- a/blocks/testimonial/testimonial.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.testimonial>div {
-    @apply flex items-center gap-8 justify-center;
-}
-
-.testimonial>div>div{
-    @apply text-2xl leading-9 font-medium text-danahergreyblue-500 relative;
-}
-
-.testimonial.has-image>div>div:nth-child(1){
-    @apply hidden lg:block lg:flex-shrink-0;
-}
-
-.testimonial .testimonial-footer img{
-    @apply h-16 w-16 rounded-full block lg:hidden;
-}
-
-.testimonial .testimonial-footer .flex-col>div:nth-child(2){
-    @apply text-base leading-6 font-medium text-danaherblack-600 mt-0;
-}
diff --git a/blocks/testimonial/testimonial.js b/blocks/testimonial/testimonial.js
index 298002a2f..20a93ecbf 100644
--- a/blocks/testimonial/testimonial.js
+++ b/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');
diff --git a/styles/styles.css b/styles/styles.css
index 2b59da2cf..bceb1ac52 100644
--- a/styles/styles.css
+++ b/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));
diff --git a/styles/tailwind.css b/styles/tailwind.css
index f410f65e2..6a399710b 100644
--- a/styles/tailwind.css
+++ b/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';