Merge pull request #277 from hlxsites/feat-275-convert

Implement converter part for testimonials

blocks/testimonial/testimonial.css

@@ -0,0 +1,27 @@
+.testimonial .testimonial>div {
+    @apply flex items-center gap-8 justify-center;
+}
+
+.testimonial .testimonial>div>div{
+    @apply text-2xl leading-9 font-medium text-danahergreyblue-500 relative;
+}
+
+.testimonial.has-image .testimonial>div>div:nth-child(1){
+    @apply hidden lg:block lg:flex-shrink-0;
+}
+
+.testimonial .testimonial>div>div img.main-image {
+    @apply h-64 w-64 rounded-full;
+}
+
+.testimonial .testimonial .testimonial-footer{
+    @apply text-base leading-6 font-medium text-danahergray-900 mt-4 items-center gap-4;
+}
+
+.testimonial .testimonial .testimonial-footer img{
+    @apply h-16 w-16 rounded-full block lg:hidden;
+}
+
+.testimonial .testimonial .testimonial-footer .flex-col>div:nth-child(2){
+    @apply text-base leading-6 font-medium text-danaherblack-600 mt-0;
+}

blocks/testimonial/testimonial.js

@@ -0,0 +1,25 @@
+import {
+  div, img, span,
+} from '../../scripts/dom-builder.js';
+import { decorateIcons } from '../../scripts/lib-franklin.js';
+
+export default async function decorate(block) {
+  const buildQuote = div(span({ class: 'icon icon-quote' }));
+  block.querySelector('.testimonial').classList.add('py-6');
+  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');
+  const imagecopy = image ? img({ src: image?.src, class: 'rounded-full h-16 w-16' }) : null;
+  if (image) {
+    block.classList.add('has-image');
+    image.classList.add('main-image');
+  }
+  const divElem = block.querySelector('.testimonial .testimonial > div');
+  const footerElem = div(
+    { class: 'flex testimonial-footer' },
+    imagecopy || '',
+    div({ class: 'flex flex-col' }, divElem?.querySelectorAll('div')[image ? 2 : 1] ? divElem?.querySelectorAll('div')[image ? 2 : 1] : '', divElem?.querySelectorAll('div')[image ? 3 : 2] ? divElem?.querySelectorAll('div')[image ? 3 : 2] : ''),
+  );
+  divElem?.querySelectorAll('div')[image ? 1 : 0]?.append(footerElem);
+  divElem?.querySelectorAll('div')[image ? 1 : 0]?.append(buildQuote);
+}

styles/styles.css

@@ -232,6 +232,74 @@
     list-style-type: disc;
 }
 
+.testimonial .testimonial>div{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.testimonial .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 .testimonial>div>div:nth-child(1){
+    display: none;
+}
+
+@media (min-width: 1024px){
+
+    .testimonial.has-image .testimonial>div>div:nth-child(1){
+        display: block;
+        flex-shrink: 0;
+    }
+}
+
+.testimonial .testimonial>div>div img.main-image{
+    height: 16rem;
+    width: 16rem;
+    border-radius: 9999px;
+}
+
+.testimonial .testimonial .testimonial-footer{
+    margin-top: 1rem;
+    align-items: center;
+    gap: 1rem;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.testimonial .testimonial .testimonial-footer img{
+    display: block;
+    height: 4rem;
+    width: 4rem;
+    border-radius: 9999px;
+}
+
+@media (min-width: 1024px){
+
+    .testimonial .testimonial .testimonial-footer img{
+        display: none;
+    }
+}
+
+.testimonial .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>ul{
     margin: 0px;
     display: grid;
@@ -308,6 +376,15 @@
     justify-content: center;
 }
 
+.testimonial .testimonial .testimonial-footer .cards ul .card-wrapper>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 .card-wrapper .cards-card-image{
     line-height: 1.25rem;
 }
@@ -2101,6 +2178,10 @@ main .section{
     left: 0px;
 }
 
+.left-28{
+    left: 7rem;
+}
+
 .left-4{
     left: 1rem;
 }
@@ -2113,6 +2194,10 @@ main .section{
     top: 0px;
 }
 
+.top-16{
+    top: 4rem;
+}
+
 .top-4{
     top: 1rem;
 }
@@ -2351,6 +2436,10 @@ main .section{
     height: 0.75rem;
 }
 
+.h-36{
+    height: 9rem;
+}
+
 .h-4{
     height: 1rem;
 }
@@ -2424,6 +2513,10 @@ main .section{
     width: 0.75rem;
 }
 
+.w-36{
+    width: 9rem;
+}
+
 .w-4{
     width: 1rem;
 }
@@ -2517,6 +2610,16 @@ main .section{
     flex-basis: 50%;
 }
 
+.-translate-x-8{
+    --tw-translate-x: -2rem;
+    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));
+}
+
+.-translate-y-24{
+    --tw-translate-y: -6rem;
+    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));
+}
+
 .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));
 }
@@ -3152,6 +3255,11 @@ main .section{
     color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-indigo-200{
+    --tw-text-opacity: 1;
+    color: rgb(199 210 254 / var(--tw-text-opacity));
+}
+
 .text-purple-200{
     --tw-text-opacity: 1;
     color: rgb(125 86 164 / var(--tw-text-opacity));
@@ -3162,6 +3270,10 @@ main .section{
     color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.opacity-50{
+    opacity: 0.5;
+}
+
 .opacity-75{
     opacity: 0.75;
 }

styles/tailwind.css

@@ -12,6 +12,7 @@
 
 @import '../blocks/banner/banner.css';
 @import '../templates/blog/blog.css';
+@import '../blocks/testimonial/testimonial.css';
 @import '../blocks/cards/cards.css';
 @import '../blocks/columns/columns.css';
 @import '../blocks/header/header.css';

tools/actions/convert/test/converter.test.js

@@ -62,6 +62,7 @@ describe('Converter Tests', () => {
     await test('blog');
     await test('blog2');
     await test('blog3');
+    await test('blog4');
   });
   it('convert the news html', async () => {
     await test('news');