From fa142cbbdb2d3f952ec68aa110a28bc9ab779b41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 13:17:26 +0200
Subject: [PATCH] refactor(SW-194): move css to parent

---
 components/Blocks/Accordion/accordion.module.css     |  4 ++--
 components/Blocks/Accordion/index.tsx                | 12 ++++++------
 components/ContentType/HotelPage/Rooms/index.tsx     | 11 +++++------
 .../ContentType/HotelPage/Rooms/rooms.module.css     |  2 +-
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/components/Blocks/Accordion/accordion.module.css b/components/Blocks/Accordion/accordion.module.css
index feabed988..0dd49a0b7 100644
--- a/components/Blocks/Accordion/accordion.module.css
+++ b/components/Blocks/Accordion/accordion.module.css
@@ -1,7 +1,7 @@
-.accordion :not(.allVisible):nth-child(n + 6) {
+.accordion:not(.allVisible) :nth-child(n + 6) {
   display: none;
 }
 
-.accordion :not(.allVisible):nth-child(5) {
+.accordion:not(.allVisible) :nth-child(5) {
   border: none;
 }
diff --git a/components/Blocks/Accordion/index.tsx b/components/Blocks/Accordion/index.tsx
index baff7435a..16f2ea0dd 100644
--- a/components/Blocks/Accordion/index.tsx
+++ b/components/Blocks/Accordion/index.tsx
@@ -25,13 +25,13 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
   return (
     <SectionContainer id={HotelHashValues.faq}>
       {title && <SectionHeader textTransform="uppercase" title={title} />}
-      <Accordion className={styles.accordion} theme="light" variant="card">
+      <Accordion
+        className={`${styles.accordion}${allAccordionsVisible ? styles.allVisible : ""}`}
+        theme="light"
+        variant="card"
+      >
         {accordion.map((acc) => (
-          <AccordionItem
-            key={acc.question}
-            title={acc.question}
-            className={`${allAccordionsVisible ? styles.allVisible : ""}`}
-          >
+          <AccordionItem key={acc.question} title={acc.question}>
             <JsonToHtml
               embeds={acc.answer.embedded_itemsConnection.edges}
               nodes={acc.answer.json?.children[0].children}
diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index e75d578fb..72714c1ec 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -17,7 +17,7 @@ import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
-  const showToggleButton = rooms.length > 6
+  const showToggleButton = rooms.length > 4
   const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
 
   const scrollRef = useRef<HTMLDivElement>(null)
@@ -61,12 +61,11 @@ export function Rooms({ rooms }: RoomsProps) {
         title={intl.formatMessage({ id: "Rooms" })}
         preamble={null}
       />
-      <Grids.Stackable className={styles.grid}>
+      <Grids.Stackable
+        className={`${styles.grid}${allRoomsVisible ? styles.allVisible : ""}`}
+      >
         {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
-          <div
-            key={id}
-            className={`${allRoomsVisible ? styles.allVisible : ""}`}
-          >
+          <div key={id}>
             <RoomCard
               id={id}
               images={images}
diff --git a/components/ContentType/HotelPage/Rooms/rooms.module.css b/components/ContentType/HotelPage/Rooms/rooms.module.css
index 1d79309c0..7e9ad6ac5 100644
--- a/components/ContentType/HotelPage/Rooms/rooms.module.css
+++ b/components/ContentType/HotelPage/Rooms/rooms.module.css
@@ -17,6 +17,6 @@
   transform: rotate(180deg);
 }
 
-.grid :not(.allVisible):nth-child(n + 4) {
+.grid:not(.allVisible) :nth-child(n + 4) {
   display: none;
 }