feat(SW-340): Added Hotel Card Listing on map

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -67,7 +67,7 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .card {
+  .card.listing {
     grid-template-areas:
       "image header"
       "image hotel"
@@ -76,30 +76,30 @@
     padding: 0;
   }
 
-  .imageContainer {
+  .listing .imageContainer {
     position: relative;
     min-height: 200px;
     width: 518px;
   }
 
-  .tripAdvisor {
+  .listing .tripAdvisor {
     position: absolute;
     display: block;
     left: 7px;
     top: 7px;
   }
 
-  .hotelInformation {
+  .listing .hotelInformation {
     padding-top: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
-  .hotel {
+  .listing .hotel {
     gap: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
-  .prices {
+  .listing .prices {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -107,11 +107,11 @@
     padding-bottom: var(--Spacing-x2);
   }
 
-  .detailsButton {
+  .listing .detailsButton {
     border-bottom: none;
   }
 
-  .button {
+  .listing .button {
     width: 160px;
   }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -4,23 +4,22 @@ import { useIntl } from "react-intl"
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
-import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import ReadMore from "../ReadMore"
 import ImageGallery from "../SelectRate/ImageGallery"
+import { hotelCardVariants } from "./variants"
 
 import styles from "./hotelCard.module.css"
 
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default function HotelCard({ hotel }: HotelCardProps) {
+export default function HotelCard({ hotel, type = "listing" }: HotelCardProps) {
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -28,8 +27,12 @@ export default function HotelCard({ hotel }: HotelCardProps) {
 
   const amenities = hotelData.detailedFacilities.slice(0, 5)
 
+  const classNames = hotelCardVariants({
+    type,
+  })
+
   return (
-    <article className={styles.card}>
+    <article className={classNames}>
       <section className={styles.imageContainer}>
         {hotelData.gallery && (
           <ImageGallery

components/HotelReservation/HotelCard/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./hotelCard.module.css"
+
+export const hotelCardVariants = cva(styles.card, {
+  variants: {
+    type: {
+      listing: styles.listing,
+      map: styles.map,
+    },
+  },
+  defaultVariants: {
+    type: "listing",
+  },
+})