feat(SW-914): add accordion components

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx

@@ -0,0 +1,3 @@
+export default function AccessibilityAmenity() {
+  return <div>AccessibilityAmenity</div>
+}

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx

@@ -0,0 +1,3 @@
+export default function BreakfastAmenity() {
+  return <div>BreakfastAmenity</div>
+}

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default function CheckInCheckOutAmenity() {
+  return <div>CheckInAmenity</div>
+}

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx

@@ -0,0 +1,3 @@
+export default function MeetingsAmenity() {
+  return <div>MeetingsAmenity</div>
+}

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx

@@ -0,0 +1,3 @@
+export default function ParkingAmenity() {
+  return <div>ParkingAmenity</div>
+}

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts

@@ -0,0 +1,5 @@
+export { default as AccessibilityAmenity } from "./Accessibility"
+export { default as BreakfastAmenity } from "./Breakfast"
+export { default as CheckInCheckOutAmenity } from "./CheckInCheckOut"
+export { default as MeetingsAmenity } from "./Meetings"
+export { default as ParkingAmenity } from "./Parking"

components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css

@@ -0,0 +1,10 @@
+.wrapper {
+  padding: var(--Spacing-x1);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.amenity {
+  display: flex;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+}

components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx

@@ -1,13 +1,23 @@
 import { amenities } from "@/constants/routes/hotelPageParams"
 
+import { HeartIcon } from "@/components/Icons"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { mapFacilityToIconName } from "../../data"
-import Amenity from "./Amenity"
+import { mapFacilityToIcon } from "../../data"
+import {
+  AccessibilityAmenity,
+  BreakfastAmenity,
+  CheckInCheckOutAmenity,
+  MeetingsAmenity,
+  ParkingAmenity,
+} from "./AccordionAmenities"
+
+import styles from "./amenities.module.css"
 
 import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities"
 import { IconName } from "@/types/components/icon"
@@ -17,22 +27,61 @@ export default async function AmenitiesSidePeek({
 }: AmenitiesSidePeekProps) {
   const lang = getLang()
   const intl = await getIntl()
+
+  const filterdList = amenitiesList
+    .filter((filter) => !filter.name.startsWith("Parking"))
+    .filter((filter) => !filter.name.startsWith("Meeting"))
+    .filter((filter) => filter.name !== "Late check-out until 14:00 guaranteed")
+
   return (
     <SidePeek
       contentKey={amenities[lang]}
       title={intl.formatMessage({ id: "Amenities" })}
     >
       <Accordion>
-        {amenitiesList.map((amenity) => {
-          const name = mapFacilityToIconName(amenity.id)
+        <AccordionItem
+          title={intl.formatMessage({ id: "Parking" })}
+          icon={IconName.Parking}
+        >
+          <ParkingAmenity />
+        </AccordionItem>
+        <AccordionItem
+          title={intl.formatMessage({ id: "Breakfast" })}
+          icon={IconName.CoffeeAlt}
+        >
+          <BreakfastAmenity />
+        </AccordionItem>
+        <AccordionItem
+          title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`}
+          icon={IconName.Business}
+        >
+          <CheckInCheckOutAmenity />
+        </AccordionItem>
+        <AccordionItem
+          title={intl.formatMessage({ id: "Accessibility" })}
+          icon={IconName.Accessibility}
+        >
+          <AccessibilityAmenity />
+        </AccordionItem>
+        <AccordionItem
+          title={intl.formatMessage({ id: "Meetings & Conferences" })}
+          icon={IconName.Business}
+        >
+          <MeetingsAmenity />
+        </AccordionItem>
+        {filterdList.map((amenity) => {
+          const Icon = mapFacilityToIcon(amenity.id)
           return (
-            <AccordionItem
-              key={amenity.name}
-              title={amenity.name}
-              icon={IconName[name]}
-            >
-              <Amenity name={amenity.name} />
-            </AccordionItem>
+            <div key={amenity.name} className={styles.wrapper}>
+              <div className={styles.amenity}>
+                {Icon ? (
+                  <Icon color="burgundy" width={24} height={24} />
+                ) : (
+                  <HeartIcon color="burgundy" width={24} height={24} />
+                )}
+                <Body color="burgundy">{amenity.name}</Body>
+              </div>
+            </div>
           )
         })}
       </Accordion>