fix(SW-995): Made the room cards to have the same height as its neighbors

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -66,8 +66,10 @@ export function RoomCard({ room }: RoomCardProps) {
         <ButtonLink
           href={`?s=room-${getRoomNameAsParam(name)}`}
           variant="Text"
+          size="Medium"
           typography="Body/Paragraph/mdBold"
           scroll={false}
+          className={styles.buttonLink}
         >
           {intl.formatMessage({
             defaultMessage: "See room details",

apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css

@@ -3,20 +3,21 @@
   background-color: var(--Surface-Primary-Default);
   border: 1px solid var(--Border-Default);
   display: grid;
+  grid-template-rows: auto 1fr;
   overflow: hidden;
   color: var(--Text-Default);
+  height: 100%;
 }
 
 .content {
   display: grid;
-  justify-items: center;
   gap: var(--Space-x05);
   padding: var(--Space-x2);
 }
 
 .innerContent {
   display: grid;
-  justify-items: center;
+  text-align: center;
   gap: var(--Space-x1);
 }
 
@@ -28,3 +29,7 @@
 .roomSize {
   color: var(--Text-Tertiary);
 }
+
+.buttonLink {
+  align-self: end;
+}

apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { useRef, useState } from "react"
+import { cx } from "class-variance-authority"
+import { useMemo, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import SectionContainer from "@/components/Section/Container"
-import Grids from "@/components/TempDesignSystem/Grids"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import { RoomCard } from "./RoomCard"
@@ -20,6 +20,9 @@ export function Rooms({ rooms, preamble }: RoomsProps) {
   const intl = useIntl()
   const showToggleButton = rooms.length > 3
   const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
+  const sortedRooms = useMemo(() => {
+    return rooms.sort((a, b) => a.sortOrder - b.sortOrder)
+  }, [rooms])
 
   const scrollRef = useRef<HTMLDivElement>(null)
 
@@ -50,17 +53,17 @@ export function Rooms({ rooms, preamble }: RoomsProps) {
           </Typography>
         )}
       </header>
-      <Grids.Stackable
+      <ul
-        className={`${styles.grid} ${allRoomsVisible ? styles.allVisible : ""}`}
+        className={cx(styles.roomsList, {
+          [styles.allVisible]: allRoomsVisible,
+        })}
       >
-        {rooms
+        {sortedRooms.map((room) => (
-          .sort((a, b) => a.sortOrder - b.sortOrder)
+          <li className={styles.roomsItem} key={room.id}>
-          .map((room) => (
+            <RoomCard room={room} />
-            <div key={room.id}>
+          </li>
-              <RoomCard room={room} />
+        ))}
-            </div>
+      </ul>
-          ))}
-      </Grids.Stackable>
 
       {showToggleButton ? (
         <ShowMoreButton

apps/scandic-web/components/ContentType/HotelPage/Rooms/rooms.module.css

@@ -1,6 +1,17 @@
 .roomsContainer {
   position: relative;
   scroll-margin-top: var(--hotel-page-scroll-margin-top);
+  color: var(--Text-Default);
+}
+
+.sectionHeader {
+  display: grid;
+  gap: var(--Space-x15);
+  max-width: var(--hotel-page-intro-section-width);
+}
+
+.heading {
+  color: var(--Text-Heading);
 }
 
 .scrollRef {
@@ -8,25 +19,25 @@
   top: calc(-1 * var(--hotel-page-scroll-margin-top));
 }
 
-.ctaContainer {
+.roomsList {
-  display: flex;
-  justify-content: center;
-}
-
-.showMoreButton.showLess .chevron {
-  transform: rotate(180deg);
-}
-
-.grid:not(.allVisible) > :nth-child(n + 4) {
-  display: none;
-}
-
-.sectionHeader {
   display: grid;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x2);
-  max-width: var(--hotel-page-intro-section-width);
+  grid-template-columns: 1fr;
+  list-style: none;
+
+  &:not(.allVisible) > :nth-child(n + 4) {
+    display: none;
+  }
 }
 
-.heading {
+@media screen and (min-width: 768px) {
-  color: var(--Text-Heading);
+  .roomsList {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .roomsList {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/index.tsx

@@ -68,7 +68,10 @@ export default function RoomFacilities({
         })}
       >
         {mappedFacilities.map((facility) => (
-          <li className={styles.item} key={facility.name}>
+          <li
+            className={styles.item}
+            key={`${facility.name}_${facility.sortOrder}`}
+          >
             <FacilityIcon
               name={facility.icon}
               size={24}