feat(SW-281): change requests

components/ContentType/ContentPage/HotelListing/hotelListing.module.css

@@ -7,6 +7,7 @@
 
 .image {
   width: 100%;
+  max-height: 200px;
   object-fit: cover;
 }
 
@@ -29,21 +30,20 @@
 
 .captions {
   display: flex;
-  flex-direction: row;
 }
 
 @media screen and (min-width: 768px) {
   .container {
     display: grid;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: minmax(250px, 350px) auto;
   }
 
   .image {
+    max-height: none;
     height: 100%;
   }
 
   .button {
-    width: 100%;
-    max-width: 200px;
+    width: min(100%, 200px);
   }
 }

components/ContentType/ContentPage/HotelListing/index.tsx

@@ -6,6 +6,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./hotelListing.module.css"
@@ -13,30 +14,31 @@ import styles from "./hotelListing.module.css"
 import type { HotelListingProps } from "@/types/components/contentPage/hotelListing"
 
 export default async function HotelListing({
-  image,
+  imageUrl,
   altText,
   name,
   address,
   distanceToCentre,
   description,
+  link,
 }: HotelListingProps) {
   const intl = await getIntl()
 
   return (
     <article className={styles.container}>
-      <section>
-        <Image
-          src={image}
-          alt={altText}
-          width={300}
-          height={200}
-          className={styles.image}
-        />
-      </section>
+      <Image
+        src={imageUrl}
+        alt={altText}
+        width={300}
+        height={200}
+        className={styles.image}
+      />
       <section className={styles.content}>
         <div className={styles.intro}>
           <ScandicLogoIcon color="red" />
-          <Subtitle>{name}</Subtitle>
+          <Subtitle asChild>
+            <Title as="h3">{name}</Title>
+          </Subtitle>
           <div className={styles.captions}>
             <Caption color="uiTextPlaceholder">{address}</Caption>
             <div className={styles.dividerContainer}>
@@ -58,7 +60,7 @@ export default async function HotelListing({
           className={styles.button}
           asChild
         >
-          <Link href="#" color="white">
+          <Link href={link} color="white">
             {intl.formatMessage({ id: "See hotel details" })}
           </Link>
         </Button>

types/components/contentPage/hotelListing.ts

@@ -1,10 +1,11 @@
 import type { Hotel } from "@/types/hotel"
 
 export type HotelListingProps = {
-  image: Hotel["hotelContent"]["images"]["imageSizes"]["large"]
+  imageUrl: Hotel["hotelContent"]["images"]["imageSizes"]["large"]
   altText: Hotel["hotelContent"]["images"]["metaData"]["altText"]
   name: Hotel["name"]
   address: Hotel["address"]["streetAddress"]
   distanceToCentre: Hotel["location"]["distanceToCentre"]
   description: Hotel["hotelContent"]["texts"]["descriptions"]["medium"]
+  link: string
 }