chore(SW-194): ContentPage Accordion

components/Blocks/Accordion/accordion.module.css

@@ -0,0 +1,7 @@
+.hiddenItem {
+  display: none;
+}
+
+.lastItem {
+  border: none;
+}

components/Blocks/Accordion/index.tsx

@@ -0,0 +1,59 @@
+"use client"
+import { useState } from "react"
+
+import JsonToHtml from "@/components/JsonToHtml"
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import Accordion from "@/components/TempDesignSystem/Accordion"
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+
+import { ShowMoreButton } from "../../ContentType/HotelPage/ShowMoreButton"
+
+import styles from "./accordion.module.css"
+
+import type { AccordionProps } from "../../../types/components/hotelPage/accordion"
+
+export default function AccordionSection({ accordion, title }: AccordionProps) {
+  const [allItemsVisible, setAllItemsVisible] = useState(false)
+  function handleToggleShowMore() {
+    setAllItemsVisible((previousState) => !previousState)
+  }
+  console.log("PUP", accordion)
+
+  function getClassName(idx: number): string {
+    if (!allItemsVisible && idx > 4) {
+      return styles.hiddenItem
+    } else if (!allItemsVisible && idx == 4) {
+      return styles.lastItem
+    }
+    return ""
+  }
+  return (
+    <SectionContainer id="faq">
+      {title && <SectionHeader textTransform="uppercase" title={title} />}
+      <Accordion theme={"light"} variant={"card"}>
+        {accordion.map((acc, idx) => (
+          <AccordionItem
+            key={acc.question + idx}
+            title={acc.question}
+            className={getClassName(idx)}
+          >
+            {/*<JsonToHtml
+              embeds={acc.answer.embedded_itemsConnection.edges}
+              nodes={acc.answer.json?.children}
+            />*/}
+          </AccordionItem>
+        ))}
+      </Accordion>
+
+      {accordion.length > 5 ? (
+        <ShowMoreButton
+          textShowMore="See all FAQ"
+          textShowLess="See less FAQ"
+          allItemsVisible={allItemsVisible}
+          handleToggleShowMore={handleToggleShowMore}
+        />
+      ) : null}
+    </SectionContainer>
+  )
+}