From 85aded18b493a0a3aeb557cb3a72e1ca9c8beb5b Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 12 Jul 2024 11:30:57 +0200
Subject: [PATCH] refactor: reorganize component organization

---
 .../HotelPage/AmenitiesList/index.tsx         |  3 +-
 .../SidePeek/Container/index.tsx}             |  0
 .../SidePeek/Content/content.module.css       | 25 +++++++++++++++
 .../{Content.tsx => Content/index.tsx}        | 12 ++++---
 .../SidePeek/sidePeek.module.css              | 31 -------------------
 5 files changed, 34 insertions(+), 37 deletions(-)
 rename components/{ContentType/HotelPage/SidePeekContainer.tsx => TempDesignSystem/SidePeek/Container/index.tsx} (100%)
 create mode 100644 components/TempDesignSystem/SidePeek/Content/content.module.css
 rename components/TempDesignSystem/SidePeek/{Content.tsx => Content/index.tsx} (75%)

diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx
index 970485e52..42129d281 100644
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -1,13 +1,12 @@
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
+import SidePeekContainer from "@/components/TempDesignSystem/SidePeek/Container"
 import SidePeekContent from "@/components/TempDesignSystem/SidePeek/Content"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
-import SidePeekContainer from "../SidePeekContainer"
-
 import styles from "./amenitiesList.module.css"
 
 import { HotelData } from "@/types/hotel"
diff --git a/components/ContentType/HotelPage/SidePeekContainer.tsx b/components/TempDesignSystem/SidePeek/Container/index.tsx
similarity index 100%
rename from components/ContentType/HotelPage/SidePeekContainer.tsx
rename to components/TempDesignSystem/SidePeek/Container/index.tsx
diff --git a/components/TempDesignSystem/SidePeek/Content/content.module.css b/components/TempDesignSystem/SidePeek/Content/content.module.css
new file mode 100644
index 000000000..3bfc6d235
--- /dev/null
+++ b/components/TempDesignSystem/SidePeek/Content/content.module.css
@@ -0,0 +1,25 @@
+.content {
+  display: grid;
+  grid-template-rows: min-content auto;
+  gap: var(--Spacing-x4);
+  height: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x5);
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.closeBtn {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+}
diff --git a/components/TempDesignSystem/SidePeek/Content.tsx b/components/TempDesignSystem/SidePeek/Content/index.tsx
similarity index 75%
rename from components/TempDesignSystem/SidePeek/Content.tsx
rename to components/TempDesignSystem/SidePeek/Content/index.tsx
index 996fab702..fd6aad425 100644
--- a/components/TempDesignSystem/SidePeek/Content.tsx
+++ b/components/TempDesignSystem/SidePeek/Content/index.tsx
@@ -3,10 +3,9 @@
 import { Children, PropsWithChildren } from "react"
 
 import { CloseIcon } from "@/components/Icons"
+import Title from "@/components/TempDesignSystem/Text/Title"
 
-import Title from "../Text/Title"
-
-import styles from "./sidePeek.module.css"
+import styles from "./content.module.css"
 
 export default function Content({
   title,
@@ -24,7 +23,12 @@ export default function Content({
     <aside className={styles.content}>
       <header className={styles.header}>
         {title && (
-          <Title level={"h2"} as={"h3"}>
+          <Title
+            color="burgundy"
+            textTransform="uppercase"
+            level={"h2"}
+            as={"h3"}
+          >
             {title}
           </Title>
         )}
diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css
index c1c41ff5f..92d4ea7e9 100644
--- a/components/TempDesignSystem/SidePeek/sidePeek.module.css
+++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css
@@ -18,41 +18,10 @@
   animation: slide-up 300ms reverse;
 }
 
-.header {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.header:has(> h2) {
-  justify-content: space-between;
-}
-
-.title {
-  text-transform: uppercase;
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.closeBtn {
-  border: none;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  cursor: pointer;
-}
-
 .dialog {
   height: 100%;
 }
 
-.content {
-  display: grid;
-  grid-template-rows: min-content auto;
-  gap: var(--Spacing-x4);
-  height: 100%;
-  padding: var(--Spacing-x4) var(--Spacing-x5);
-}
-
 @keyframes slide-in {
   from {
     right: -600px;