#1323 Add Faqs as content type (#1346)

* #1323 Add Faq and Faq Category content types to Strapi

* #1323 Implement FE sections for Faqs and Faq Categories

* #1323 Fix PR comments

next/components/common/FaqsGroup/FaqsGroup.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Accordion from '@/components/common/Accordion/Accordion'
+import Markdown from '@/components/formatting/Markdown/Markdown'
+import { FaqEntityFragment } from '@/services/graphql'
+import { isDefined } from '@/utils/isDefined'
+
+export type FaqsGroupProps = {
+  faqs: FaqEntityFragment[]
+}
+
+const FaqsGroup = ({ faqs }: FaqsGroupProps) => {
+  return (
+    <div className="flex flex-col gap-4">
+      {faqs
+        .map((faq, index) => {
+          if (!faq.attributes) return null
+
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <Accordion key={index} title={faq.attributes.title}>
+              <Markdown content={faq.attributes.body} variant="small-no-respo" />
+            </Accordion>
+          )
+        })
+        .filter(isDefined)}
+    </div>
+  )
+}
+
+export default FaqsGroup

next/components/layouts/Sections.tsx

@@ -13,6 +13,8 @@ import ColumnedTextSection from '@/components/sections/ColumnedTextSection'
 import ComparisonSection from '@/components/sections/ComparisonSection'
 import ContactsSection from '@/components/sections/ContactsSection'
 import DividerSection from '@/components/sections/DividerSection'
+import FaqCategoriesSection from '@/components/sections/FaqCategoriesSection'
+import FaqsSection from '@/components/sections/FaqsSection'
 import FeaturedBlogPostsSection from '@/components/sections/FeaturedBlogPostsSection'
 import FileListSection from '@/components/sections/FileListSection'
 import GallerySection from '@/components/sections/GallerySection'
@@ -120,6 +122,12 @@ const SectionContent = ({ section }: { section: SectionsFragment }) => {
     case 'ComponentSectionsTestimonials':
       return <TestimonialsSection section={section} />
 
+    case 'ComponentSectionsFaqs':
+      return <FaqsSection section={section} />
+
+    case 'ComponentSectionsFaqCategories':
+      return <FaqCategoriesSection section={section} />
+
     default:
       return null
   }

next/components/sections/FaqCategoriesSection.tsx

@@ -0,0 +1,44 @@
+import { Typography } from '@bratislava/component-library'
+import React from 'react'
+
+import FaqsGroup from '@/components/common/FaqsGroup/FaqsGroup'
+import { FaqCategoriesSectionFragment } from '@/services/graphql'
+import { isDefined } from '@/utils/isDefined'
+
+type Props = {
+  section: FaqCategoriesSectionFragment
+}
+
+const FaqCategoriesSection = ({ section }: Props) => {
+  const { title, text, faqCategories } = section ?? {}
+
+  const filteredFaqCategories = faqCategories?.data.filter(isDefined) ?? []
+
+  return (
+    <div className="flex flex-col gap-6 lg:gap-12">
+      {title || text ? (
+        <div className="col-span-1 flex flex-col gap-3 md:col-span-5">
+          {title ? <Typography type="h2">{title}</Typography> : null}
+          {text ? <Typography type="p">{text}</Typography> : null}
+        </div>
+      ) : null}
+      {filteredFaqCategories
+        .map((faqCategory) => {
+          if (!faqCategory.attributes) return null
+
+          const { title: categoryTitle, faqs, slug } = faqCategory.attributes
+          const filteredFaqs = faqs?.data.filter(isDefined) ?? []
+
+          return (
+            <div key={slug} className="flex flex-col gap-8 lg:gap-10">
+              <Typography type="h3">{categoryTitle}</Typography>
+              <FaqsGroup faqs={filteredFaqs} />
+            </div>
+          )
+        })
+        .filter(isDefined)}
+    </div>
+  )
+}
+
+export default FaqCategoriesSection

next/components/sections/FaqsSection.tsx

@@ -0,0 +1,31 @@
+import { Typography } from '@bratislava/component-library'
+import React from 'react'
+
+import FaqsGroup from '@/components/common/FaqsGroup/FaqsGroup'
+import { FaqsSectionFragment } from '@/services/graphql'
+import { isDefined } from '@/utils/isDefined'
+
+type Props = {
+  section: FaqsSectionFragment
+}
+
+const FaqsSection = ({ section }: Props) => {
+  const { title, text, faqs } = section ?? {}
+
+  const filteredFaqs = faqs?.data.filter(isDefined) ?? []
+
+  return (
+    <div className="flex flex-col gap-6 lg:gap-12">
+      {title || text ? (
+        <div className="col-span-1 flex flex-col gap-3 md:col-span-5">
+          {title ? <Typography type="h2">{title}</Typography> : null}
+          {text ? <Typography type="p">{text}</Typography> : null}
+        </div>
+      ) : null}
+
+      <FaqsGroup faqs={filteredFaqs} />
+    </div>
+  )
+}
+
+export default FaqsSection