refactor(SW-194): break out button to separate component

components/ContentType/HotelPage/Rooms/index.tsx

@@ -3,18 +3,17 @@
 import { useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { ChevronDownIcon } from "@/components/Icons"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
-import Button from "@/components/TempDesignSystem/Button"
 import Grids from "@/components/TempDesignSystem/Grids"
 
+import { ShowMoreButton } from "../ShowMoreButton"
 import { RoomCard } from "./RoomCard"
 
 import styles from "./rooms.module.css"
 
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
-import { RoomsProps } from "@/types/components/hotelPage/room"
+import type { RoomsProps } from "@/types/components/hotelPage/room"
 
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
@@ -82,20 +81,14 @@ export function Rooms({ rooms }: RoomsProps) {
         )}
       </Grids.Stackable>
 
-      <div className={styles.ctaContainer}>
+      {mappedRooms.length > 5 ? (
-        <Button
+        <ShowMoreButton
-          onClick={handleToggleShowMore}
+          textShowMore="Show more rooms"
-          theme="base"
+          textShowLess="Show less rooms"
-          intent="text"
+          allItemsVisible={allRoomsVisible}
-          variant="icon"
+          handleToggleShowMore={handleToggleShowMore}
-          className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
+        />
-        >
+      ) : null}
-          <ChevronDownIcon className={styles.chevron} />
-          {intl.formatMessage({
-            id: allRoomsVisible ? "Show less" : "Show more",
-          })}
-        </Button>
-      </div>
     </SectionContainer>
   )
 }

components/ContentType/HotelPage/ShowMoreButton/button.module.css

@@ -0,0 +1,10 @@
+.ctaContainer {
+  display: flex;
+  justify-content: center;
+}
+.showMoreButton {
+  border: none;
+}
+.showMoreButton.showLess .chevron {
+  transform: rotate(180deg);
+}

components/ContentType/HotelPage/ShowMoreButton/index.tsx

@@ -0,0 +1,34 @@
+import { useIntl } from "react-intl"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./button.module.css"
+
+import type { ShowMoreButtonProps } from "@/types/components/hotelPage/button"
+
+export function ShowMoreButton({
+  textShowMore,
+  textShowLess,
+  allItemsVisible,
+  handleToggleShowMore,
+}: ShowMoreButtonProps) {
+  const intl = useIntl()
+  return (
+    <div className={styles.ctaContainer}>
+      <Button
+        onClick={handleToggleShowMore}
+        intent="text"
+        variant="icon"
+        className={`${styles.showMoreButton} ${allItemsVisible ? styles.showLess : ""}`}
+        type="button"
+        theme="base"
+      >
+        <ChevronDownIcon className={styles.chevron} />
+        {intl.formatMessage({
+          id: allItemsVisible ? textShowLess : textShowMore,
+        })}
+      </Button>
+    </div>
+  )
+}

types/components/hotelPage/button.ts

@@ -0,0 +1,6 @@
+export type ShowMoreButtonProps = {
+  textShowMore: string
+  textShowLess: string
+  allItemsVisible: boolean
+  handleToggleShowMore: () => void
+}