refactor(SW-194): move css to parent

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
-        {accordion.map((acc) => (
+        className={`${styles.accordion}${allAccordionsVisible ? styles.allVisible : ""}`}
-          <AccordionItem
+        theme="light"
-            key={acc.question}
+        variant="card"
-            title={acc.question}
-            className={`${allAccordionsVisible ? styles.allVisible : ""}`}
       >
+        {accordion.map((acc) => (
+          <AccordionItem key={acc.question} title={acc.question}>
             <JsonToHtml
               embeds={acc.answer.embedded_itemsConnection.edges}
               nodes={acc.answer.json?.children[0].children}

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
-        {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
+        className={`${styles.grid}${allRoomsVisible ? styles.allVisible : ""}`}
-          <div
-            key={id}
-            className={`${allRoomsVisible ? styles.allVisible : ""}`}
       >
+        {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
+          <div key={id}>
             <RoomCard
               id={id}
               images={images}