feat: add Testimonials section to About page (#266)

Co-authored-by: Klaudia <[email protected]>
non-profit-dev · May 6, 2024 · 2d2c0dc · 2d2c0dc
1 parent 5d00206
commit 2d2c0dc
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 7 deletions.
diff --git a/packages/design-system/patterns/testimonialCard/TestimonialCard.jsx b/packages/design-system/patterns/testimonialCard/TestimonialCard.jsx
@@ -7,7 +7,7 @@ import Typography from "design-system/components/typography"
 import { string } from "prop-types"
 import * as Styled from "./TestimonialCard.styled"
 
-const TestimonialCard = ({ title, excerpt, author, authorDetails }) => {
+const TestimonialCard = ({ title, excerpt, author, authorDetails, as }) => {
   const theme = useTheme()
 
   return (
@@ -17,7 +17,7 @@ const TestimonialCard = ({ title, excerpt, author, authorDetails }) => {
           <Icon name="quote" />
         </Styled.Icon>
         <Styled.Title>
-          <Title variant="h6" text={title} line={false}>
+          <Title variant="h6" text={title} line={false} as={as}>
             {title}
           </Title>
         </Styled.Title>
@@ -26,7 +26,9 @@ const TestimonialCard = ({ title, excerpt, author, authorDetails }) => {
         {excerpt}
       </Styled.Description>
       <div>
-        <Typography variant="h6">{author}</Typography>
+        <Typography variant="h6" as={as}>
+          {author}
+        </Typography>
         <Typography variant="bodyTiny" color={theme.colors.gray[500]}>
           {authorDetails}
         </Typography>
@@ -40,8 +42,9 @@ TestimonialCard.propTypes = {
   excerpt: string.isRequired,
   author: string.isRequired,
   authorDetails: string.isRequired,
+  as: string,
 }
 
-TestimonialCard.defaultProps = {}
+TestimonialCard.defaultProps = { as: "h6" }
 
 export default TestimonialCard
diff --git a/packages/frontend/app/lib/queries.js b/packages/frontend/app/lib/queries.js
@@ -133,3 +133,15 @@ export const GET_FINANCIAL_STATEMENTS = gql`
     }
   }
 `
+export const GET_TESTIMONIALS = gql`
+  query GetTestimonials {
+    testimonialCollection(limit: 8) {
+      items {
+        author
+        authorDescription
+        description
+        title
+      }
+    }
+  }
+`
diff --git a/packages/frontend/app/lib/types.js b/packages/frontend/app/lib/types.js
@@ -51,3 +51,16 @@ export const financialStatementsType = shape({
     })
   ),
 })
+
+export const testimonialItemsType = arrayOf(
+  shape({
+    author: string,
+    authorDescription: string,
+    description: string,
+    title: string,
+  })
+)
+
+export const testimonialType = shape({
+  items: testimonialItemsType,
+})
diff --git a/packages/frontend/app/pages/fundacja.jsx b/packages/frontend/app/pages/fundacja.jsx
@@ -1,19 +1,26 @@
 import AboutPage from "../templates/About"
 
-import { supportingType, animalsType, adoptedAnimalsType } from "../lib/types"
+import {
+  supportingType,
+  animalsType,
+  adoptedAnimalsType,
+  testimonialType,
+} from "../lib/types"
 
 import client from "../lib/api"
 import {
   GET_ADOPTED_ANIMALS,
   GET_ANIMALS,
   GET_SUPPORTING,
+  GET_TESTIMONIALS,
 } from "../lib/queries"
 
-const About = ({ animals, supporting, adoptedAnimals }) => (
+const About = ({ animals, supporting, adoptedAnimals, testimonials }) => (
   <AboutPage
     animals={animals}
     supporting={supporting}
     adoptedAnimals={adoptedAnimals}
+    testimonials={testimonials}
   />
 )
 
@@ -30,11 +37,16 @@ export async function getStaticProps() {
     query: GET_ADOPTED_ANIMALS,
   })
 
+  const { data: testimonials } = await client.query({
+    query: GET_TESTIMONIALS,
+  })
+
   return {
     props: {
       animals: animals.animalCollection,
       adoptedAnimals: adoptedAnimals.animalCollection,
       supporting: supporting.supportingCollection,
+      testimonials: testimonials.testimonialCollection,
       fallback: true,
     },
   }
@@ -44,6 +56,7 @@ About.propTypes = {
   animals: animalsType.isRequired,
   supporting: supportingType.isRequired,
   adoptedAnimals: adoptedAnimalsType.isRequired,
+  testimonials: testimonialType.isRequired,
 }
 
 export default About
diff --git a/packages/frontend/app/templates/About/About.jsx b/packages/frontend/app/templates/About/About.jsx
@@ -15,11 +15,13 @@ import {
   supportingType,
   animalsType,
   adoptedAnimalsType,
+  testimonialType,
 } from "../../lib/types"
 
 import * as Styled from "./About.styled"
+import Testimonials from "./components/Testimonials"
 
-const About = ({ animals, supporting, adoptedAnimals }) => (
+const About = ({ animals, supporting, adoptedAnimals, testimonials }) => (
   <Page title="O nas">
     <SupportBanner />
     <Navigation />
@@ -41,6 +43,7 @@ const About = ({ animals, supporting, adoptedAnimals }) => (
           adoptedAnimalsNumber={adoptedAnimals.total}
         />
       </Container>
+      <Testimonials data={testimonials.items} />
     </Styled.Main>
     <Footer />
   </Page>
@@ -50,6 +53,7 @@ About.propTypes = {
   animals: animalsType.isRequired,
   supporting: supportingType.isRequired,
   adoptedAnimals: adoptedAnimalsType.isRequired,
+  testimonials: testimonialType.isRequired,
 }
 
 export default About
diff --git a/packages/frontend/app/templates/About/components/Testimonials/Testimonials.jsx b/packages/frontend/app/templates/About/components/Testimonials/Testimonials.jsx
@@ -0,0 +1,50 @@
+import Typography from "design-system/components/typography"
+import Slider from "design-system/components/slider"
+import Container from "design-system/components/container"
+import TextBanner from "design-system/patterns/textBanner"
+
+import TestimonialCard from "design-system/patterns/testimonialCard"
+
+import * as Styled from "./Testimonials.styled"
+import { testimonialItemsType } from "../../../../lib/types"
+
+const Testimonials = ({ data }) => (
+  <Styled.Wrapper>
+    <Container>
+      <TextBanner
+        heading="Co o nas mówią?"
+        subtitle="Fundacja w opinii rodzin adopcyjnych"
+        tabletLayout="left"
+        mobileLayout="left"
+      >
+        <Styled.Description>
+          <Typography variant="bodyTitle">
+            Poniżej przeczytasz wybrane opinie napisane przez rodziny adopcyjne,
+            które szcześliwie odnalazły swoich przyjaciół w Fundacji Sterczące
+            Uszy. Zadowolonych rodzin jest znacznie więcej i stale ich przybywa.
+          </Typography>
+        </Styled.Description>
+      </TextBanner>
+      <Styled.Slider>
+        <Slider pagination navigation slidesPerViewDesktop={2}>
+          {data.map((item) => (
+            <TestimonialCard
+              key={item.description}
+              title={item.title}
+              excerpt={item.description}
+              author={item.author}
+              authorDetails={item.authorDescription}
+              as="h3"
+            />
+          ))}
+        </Slider>
+      </Styled.Slider>
+    </Container>
+  </Styled.Wrapper>
+)
+
+Testimonials.propTypes = {
+  data: testimonialItemsType.isRequired,
+}
+
+export default Testimonials
diff --git a/packages/frontend/app/templates/About/components/Testimonials/Testimonials.styled.js b/packages/frontend/app/templates/About/components/Testimonials/Testimonials.styled.js
@@ -0,0 +1,37 @@
+import styled from "@emotion/styled"
+
+export const Wrapper = styled.div`
+  padding: 120px 0;
+  ${({ theme }) => theme.breakpoints.tabletLg} {
+    padding: 100px 0;
+  }
+
+  ${({ theme }) => theme.breakpoints.mobileLg} {
+    padding: 60px 0;
+    background: none;
+  }
+`
+
+export const Slider = styled.div`
+  margin-top: 40px;
+
+  ${({ theme }) => theme.breakpoints.tabletLg} {
+    margin-top: 20px;
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`
+
+export const Description = styled.div`
+  margin: 0 auto;
+  width: 606px;
+  ${({ theme }) => theme.breakpoints.tabletLg} {
+    width: 566px;
+    text-align: left;
+  }
+  ${({ theme }) => theme.breakpoints.mobileLg} {
+    width: 100%;
+  }
+`
diff --git a/packages/frontend/app/templates/About/components/Testimonials/index.js b/packages/frontend/app/templates/About/components/Testimonials/index.js
@@ -0,0 +1,3 @@
+import Testimonials from "./Testimonials"
+
+export default Testimonials