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>
+  )
+}

components/Blocks/UspGrid/renderOptions.tsx

@@ -1,9 +1,7 @@
 import Link from "@/components/TempDesignSystem/Link"
-import { removeMultipleSlashes } from "@/utils/url"
 
 import styles from "./uspgrid.module.css"
 
-import { EmbedEnum } from "@/types/requests/utils/embeds"
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
 import type {

components/Blocks/index.tsx

@@ -6,6 +6,7 @@ import UspGrid from "@/components/Blocks/UspGrid"
 import JsonToHtml from "@/components/JsonToHtml"
 
 import Table from "./Table"
+import AccordionSection from "./Accordion"
 
 import type { BlocksProps } from "@/types/components/blocks"
 import { BlocksEnums } from "@/types/enums/blocks"
@@ -65,6 +66,15 @@ export default function Blocks({ blocks }: BlocksProps) {
         )
       case BlocksEnums.block.UspGrid:
         return <UspGrid usp_grid={block.usp_grid} />
+      case BlocksEnums.block.Accordion:
+        console.log("Bub", block.accordion.faq)
+        return (
+          <AccordionSection
+            accordion={block.accordion.faq}
+            title={block.title}
+            key={`${block.typename}-${idx}`}
+          />
+        )
       default:
         return null
     }

components/ContentType/HotelPage/index.tsx

@@ -2,6 +2,7 @@ import hotelPageParams from "@/constants/routes/hotelPageParams"
 import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
+import AccordionSection from "@/components/Blocks/Accordion"
 import SidePeekProvider from "@/components/SidePeekProvider"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
@@ -47,6 +48,7 @@ export default async function HotelPage() {
     activitiesCard,
     pointsOfInterest,
     facilities,
+    //accordion,
   } = hotelData
 
   const topThreePois = pointsOfInterest.slice(0, 3)
@@ -80,6 +82,7 @@ export default async function HotelPage() {
         </div>
         <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} activitiesCard={activitiesCard} />
+        {/*accordion && <AccordionSection accordion={accordion} />*/}
       </main>
       {googleMapsApiKey ? (
         <>