From ebec9b403e72dfe5f170ebf895470e934c5f8c09 Mon Sep 17 00:00:00 2001
From: Radoslav Zeman <19418224+radoslavzeman@users.noreply.github.com>
Date: Wed, 27 Mar 2024 16:47:33 +0100
Subject: [PATCH] add Testimonials FE components

---
 next/backend/graphql/index.ts                 | 77 ++++++++++++++++++-
 next/backend/graphql/queries/Sections.graphql | 19 +++++
 next/components/molecules/Sections.tsx        |  4 +
 .../sections/general/TestimonialsSection.tsx  | 76 ++++++++++++++++++
 4 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 next/components/molecules/sections/general/TestimonialsSection.tsx

diff --git a/next/backend/graphql/index.ts b/next/backend/graphql/index.ts
index 77f6d21d6..235b21eec 100644
--- a/next/backend/graphql/index.ts
+++ b/next/backend/graphql/index.ts
@@ -9012,7 +9012,18 @@ export type PageBySlugQuery = {
               text?: string | null
             }
           | { __typename: 'ComponentSectionsSpace' }
-          | { __typename: 'ComponentSectionsTestimonials' }
+          | {
+              __typename: 'ComponentSectionsTestimonials'
+              title?: string | null
+              text?: string | null
+              hasBackground?: boolean | null
+              testimonials: Array<{
+                __typename?: 'ComponentBlocksTestimonialItem'
+                id: string
+                name: string
+                quote: string
+              } | null>
+            }
           | {
               __typename: 'ComponentSectionsTextWithImage'
               hasBackground?: boolean | null
@@ -10151,7 +10162,18 @@ export type PageEntityFragment = {
           text?: string | null
         }
       | { __typename: 'ComponentSectionsSpace' }
-      | { __typename: 'ComponentSectionsTestimonials' }
+      | {
+          __typename: 'ComponentSectionsTestimonials'
+          title?: string | null
+          text?: string | null
+          hasBackground?: boolean | null
+          testimonials: Array<{
+            __typename?: 'ComponentBlocksTestimonialItem'
+            id: string
+            name: string
+            quote: string
+          } | null>
+        }
       | {
           __typename: 'ComponentSectionsTextWithImage'
           hasBackground?: boolean | null
@@ -11363,6 +11385,26 @@ export type GalleryItemBlockFragment = {
   } | null
 }
 
+export type TestimonialItemBlockFragment = {
+  __typename?: 'ComponentBlocksTestimonialItem'
+  id: string
+  name: string
+  quote: string
+}
+
+export type TestimonialsSectionFragment = {
+  __typename?: 'ComponentSectionsTestimonials'
+  title?: string | null
+  text?: string | null
+  hasBackground?: boolean | null
+  testimonials: Array<{
+    __typename?: 'ComponentBlocksTestimonialItem'
+    id: string
+    name: string
+    quote: string
+  } | null>
+}
+
 export type TimelineItemBlockFragment = {
   __typename?: 'ComponentBlocksTimelineItem'
   id: string
@@ -13227,6 +13269,15 @@ type Sections_ComponentSectionsSpace_Fragment = { __typename: 'ComponentSections
 
 type Sections_ComponentSectionsTestimonials_Fragment = {
   __typename: 'ComponentSectionsTestimonials'
+  title?: string | null
+  text?: string | null
+  hasBackground?: boolean | null
+  testimonials: Array<{
+    __typename?: 'ComponentBlocksTestimonialItem'
+    id: string
+    name: string
+    quote: string
+  } | null>
 }
 
 type Sections_ComponentSectionsTextWithImage_Fragment = {
@@ -14229,6 +14280,24 @@ export const RegulationsSectionFragmentDoc = gql`
   }
   ${RegulationEntityFragmentDoc}
 `
+export const TestimonialItemBlockFragmentDoc = gql`
+  fragment TestimonialItemBlock on ComponentBlocksTestimonialItem {
+    id
+    name
+    quote
+  }
+`
+export const TestimonialsSectionFragmentDoc = gql`
+  fragment TestimonialsSection on ComponentSectionsTestimonials {
+    title
+    text
+    hasBackground
+    testimonials {
+      ...TestimonialItemBlock
+    }
+  }
+  ${TestimonialItemBlockFragmentDoc}
+`
 export const SectionsFragmentDoc = gql`
   fragment Sections on PageSectionsDynamicZone {
     __typename
@@ -14319,6 +14388,9 @@ export const SectionsFragmentDoc = gql`
     ... on ComponentSectionsRegulations {
       ...RegulationsSection
     }
+    ... on ComponentSectionsTestimonials {
+      ...TestimonialsSection
+    }
   }
   ${IconTitleDescSectionFragmentDoc}
   ${DocumentListSectionFragmentDoc}
@@ -14349,6 +14421,7 @@ export const SectionsFragmentDoc = gql`
   ${ContactsSectionFragmentDoc}
   ${RegulationsListSectionFragmentDoc}
   ${RegulationsSectionFragmentDoc}
+  ${TestimonialsSectionFragmentDoc}
 `
 export const BlogPostEntityFragmentDoc = gql`
   fragment BlogPostEntity on BlogPostEntity {
diff --git a/next/backend/graphql/queries/Sections.graphql b/next/backend/graphql/queries/Sections.graphql
index 5c4af6f50..f7aec223b 100644
--- a/next/backend/graphql/queries/Sections.graphql
+++ b/next/backend/graphql/queries/Sections.graphql
@@ -69,6 +69,21 @@ fragment GalleryItemBlock on ComponentBlocksGalleryItem {
   }
 }
 
+fragment TestimonialItemBlock on ComponentBlocksTestimonialItem {
+  id
+  name
+  quote
+}
+
+fragment TestimonialsSection on ComponentSectionsTestimonials {
+  title
+  text
+  hasBackground
+  testimonials {
+    ...TestimonialItemBlock
+  }
+}
+
 fragment TimelineItemBlock on ComponentBlocksTimelineItem {
   id
   title
@@ -592,6 +607,10 @@ fragment Sections on PageSectionsDynamicZone {
   ... on ComponentSectionsRegulations {
     ...RegulationsSection
   }
+
+  ... on ComponentSectionsTestimonials {
+    ...TestimonialsSection
+  }
 }
 
 fragment SubpageListPageHeaderSection on ComponentSectionsSubpageList {
diff --git a/next/components/molecules/Sections.tsx b/next/components/molecules/Sections.tsx
index dd28c182e..500eae3a8 100644
--- a/next/components/molecules/Sections.tsx
+++ b/next/components/molecules/Sections.tsx
@@ -8,6 +8,7 @@ import ContactsSection from '@components/molecules/sections/general/ContactsSect
 import FeaturedBlogPostsSection from '@components/molecules/sections/general/FeaturedBlogPostsSection'
 import InbaReleasesSection from '@components/molecules/sections/general/InbaReleasesSection'
 import RegulationsSection from '@components/molecules/sections/general/RegulationsSection'
+import TestimonialsSection from '@components/molecules/sections/general/TestimonialsSection'
 import cx from 'classnames'
 import * as React from 'react'
 
@@ -120,6 +121,9 @@ const SectionContent = ({ section }: { section: SectionsFragment }) => {
     case 'ComponentSectionsRegulations':
       return <RegulationsSection section={section} />
 
+    case 'ComponentSectionsTestimonials':
+      return <TestimonialsSection section={section} />
+
     default:
       return null
   }
diff --git a/next/components/molecules/sections/general/TestimonialsSection.tsx b/next/components/molecules/sections/general/TestimonialsSection.tsx
new file mode 100644
index 000000000..ee4d43b23
--- /dev/null
+++ b/next/components/molecules/sections/general/TestimonialsSection.tsx
@@ -0,0 +1,76 @@
+import { TestimonialItemBlockFragment, TestimonialsSectionFragment } from '@backend/graphql'
+import { Typography } from '@bratislava/component-library'
+import Markdown from '@components/atoms/Markdown'
+import { isDefined } from '@utils/isDefined'
+import cx from 'classnames'
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type TestimonialsSectionProps = {
+  section: TestimonialsSectionFragment
+}
+
+const TestimonialCard = ({
+  testimonial,
+  hasBackground,
+  className,
+}: {
+  testimonial: TestimonialItemBlockFragment
+  hasBackground?: boolean
+  className?: string
+}) => {
+  return (
+    <div
+      className={twMerge(
+        'relative rounded-lg bg-white p-4',
+        hasBackground ? 'bg-white' : 'bg-category-100',
+        className,
+      )}
+    >
+      {/* TODO validate if this html syntax is ok */}
+      <blockquote className="flex flex-col gap-4">
+        <Typography type="p">{testimonial.quote}</Typography>
+        <footer>
+          {/* TODO there probably should not be p inside cite, but cite should be used directly */}
+          <cite>
+            <Typography type="p" fontWeight="semibold">
+              {testimonial.name}
+            </Typography>
+          </cite>
+        </footer>
+      </blockquote>
+    </div>
+  )
+}
+
+const Testimonials = ({ section }: TestimonialsSectionProps) => {
+  return (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-12 md:gap-8">
+      <div className={cx('col-span-1 flex flex-col gap-3', 'md:col-span-5')}>
+        {section.title ? <Typography type="h2">{section.title}</Typography> : null}
+        {section.text ? <Markdown content={section.text} variant="small-no-respo" /> : null}
+      </div>
+      <div className={cx('hidden md:block', 'col-span-1')} />
+      <div className={cx('col-span-1', 'md:col-span-6')}>
+        {/* TODO render as <ul> */}
+        <div className="grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-3">
+          {section.testimonials.filter(isDefined).map((testimonial, index) => (
+            <TestimonialCard
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              className={cx('col-span-1', 'md:col-span-2')}
+              testimonial={testimonial}
+              hasBackground={section.hasBackground ?? false}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const TestimonialsSection = ({ section }: TestimonialsSectionProps) => {
+  return <Testimonials section={section} />
+}
+
+export default TestimonialsSection