From 38a1f556cfe1f89de3c8a2a57566fddda8c42924 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Mon, 25 Nov 2024 14:12:01 +0100
Subject: [PATCH] feat(SW-914): add accordion components

---
 .../Accessibility/accessibility.module.css    |  0
 .../Accessibility/index.tsx                   |  3 +
 .../Breakfast/breakfast.module.css            |  0
 .../AccordionAmenities/Breakfast/index.tsx    |  3 +
 .../checkInCheckOut.module.css                |  0
 .../CheckInCheckOut/index.tsx                 |  5 ++
 .../AccordionAmenities/Meetings/index.tsx     |  3 +
 .../Meetings/meetings.module.css              |  0
 .../AccordionAmenities/Parking/index.tsx      |  3 +
 .../Parking/parking.module.css                |  0
 .../Amenities/AccordionAmenities/index.ts     |  5 ++
 .../SidePeeks/Amenities/amenities.module.css  | 10 +++
 .../HotelPage/SidePeeks/Amenities/index.tsx   | 71 ++++++++++++++++---
 13 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/checkInCheckOut.module.css
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/meetings.module.css
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.module.css
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts
 create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css

diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
new file mode 100644
index 000000000..a06224077
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
@@ -0,0 +1,3 @@
+export default function AccessibilityAmenity() {
+  return <div>AccessibilityAmenity</div>
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
new file mode 100644
index 000000000..d3a24f585
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
@@ -0,0 +1,3 @@
+export default function BreakfastAmenity() {
+  return <div>BreakfastAmenity</div>
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/checkInCheckOut.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/checkInCheckOut.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckInCheckOut/index.tsx
new file mode 100644
index 000000000..94990fd1f
--- /dev/null
+++ b/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>
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx
new file mode 100644
index 000000000..9d8a174eb
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/index.tsx
@@ -0,0 +1,3 @@
+export default function MeetingsAmenity() {
+  return <div>MeetingsAmenity</div>
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/meetings.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Meetings/meetings.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
new file mode 100644
index 000000000..9f685d1a1
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
@@ -0,0 +1,3 @@
+export default function ParkingAmenity() {
+  return <div>ParkingAmenity</div>
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts
new file mode 100644
index 000000000..65e50750e
--- /dev/null
+++ b/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"
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/amenities.module.css
new file mode 100644
index 000000000..b6d3ba651
--- /dev/null
+++ b/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);
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
index ba527e549..2dbbaf80c 100644
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
+++ b/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>