feat(SW-252): wrap image for layout

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -12,26 +12,27 @@
   width: 307px;
 }
 
-.header {
+.imageContainer {
-  grid-area: header;
+  grid-area: image;
+}
+
+.tripAdvisor {
+  display: none;
 }
 
 .image {
   height: 100%;
-  max-height: 95px;
   width: 116px;
   object-fit: cover;
-  grid-area: image;
 }
 
-.logo {
+.header {
-  margin-bottom: var(--Spacing-x-half);
+  grid-area: header;
 }
 
 .hotel {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
   grid-area: hotel;
 }
 
@@ -49,7 +50,7 @@
 
 .link {
   display: flex;
-  padding: var(--Spacing-x1) var(--Spacing-x0);
+  padding: var(--Spacing-x2) var(--Spacing-x0);
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
@@ -67,7 +68,7 @@
 }
 
 .button {
-  display: none;
+  justify-content: center;
 }
 
 @media screen and (min-width: 1367px) {
@@ -81,8 +82,18 @@
     padding: 0;
   }
 
+  .imageContainer {
+    position: relative;
+  }
+
+  .tripAdvisor {
+    display: block;
+    position: absolute;
+    left: 7px;
+    top: 7px;
+  }
+
   .image {
-    max-height: 100%;
     width: 518px;
   }
 
@@ -92,11 +103,14 @@
   }
 
   .hotel {
+    gap: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
   .prices {
     flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     padding-right: var(--Spacing-x2);
     padding-bottom: var(--Spacing-x2);
   }
@@ -106,8 +120,6 @@
   }
 
   .button {
-    display: flex;
     width: 160px;
-    justify-content: center;
   }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -4,6 +4,7 @@ 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"
@@ -26,20 +27,32 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
 
   return (
     <article className={styles.card}>
-      <Image
+      <div className={styles.imageContainer}>
-        src={hotel.hotelContent.images.imageSizes.large}
+        <Image
-        alt={hotel.hotelContent.images.metaData.altText}
+          src={hotel.hotelContent.images.imageSizes.large}
-        width={300}
+          alt={hotel.hotelContent.images.metaData.altText}
-        height={200}
+          width={300}
-        className={styles.image}
+          height={200}
-      />
+          className={styles.image}
+        />
+        <div className={styles.tripAdvisor}>
+          <Chip intent="primary" className={styles.tripAdvisor}>
+            <TripAdvisorIcon color="white" />
+            {hotel.ratings?.tripAdvisor.rating}
+          </Chip>
+        </div>
+      </div>
       <header className={styles.header}>
-        <ScandicLogoIcon color="red" className={styles.logo} />
+        <ScandicLogoIcon color="red" />
         <Title as="h4" textTransform="capitalize">
           {hotel.name}
         </Title>
-        <Footnote color="textMediumContrast">{`${hotel.address.streetAddress}, ${hotel.address.city}`}</Footnote>
+        <Footnote color="textMediumContrast" className={styles.adress}>
-        <Footnote color="textMediumContrast">{`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}</Footnote>
+          {`${hotel.address.streetAddress}, ${hotel.address.city}`}
+        </Footnote>
+        <Footnote color="textMediumContrast">
+          {`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+        </Footnote>
       </header>
       <section className={styles.hotel}>
         <div className={styles.facilities}>
@@ -60,28 +73,31 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
       </section>
       <section className={styles.prices}>
         <div>
-          <Chip intent="sublte" className={styles.public}>
+          <Chip intent="primary" className={styles.public}>
-            <PriceTagIcon width={15} height={15} />
+            <PriceTagIcon color="white" width={15} height={15} />
             {intl.formatMessage({ id: "Public price from" })}
           </Chip>
           <Caption color="textMediumContrast">2820 SEK / night</Caption>
           <Footnote color="textMediumContrast">approx 280 eur</Footnote>
         </div>
         <div>
-          <Chip intent="pale" className={styles.member}>
+          <Chip intent="primary" className={styles.member}>
-            <PriceTagIcon width={15} height={15} />
+            <PriceTagIcon color="white" width={15} height={15} />
             {intl.formatMessage({ id: "Member price from" })}
           </Chip>
           <Caption color="textMediumContrast">2820 SEK / night</Caption>
           <Footnote color="textMediumContrast">approx 280 eur</Footnote>
         </div>
         <Button
+          asChild
           theme="base"
           intent="tertiary"
           size="small"
           className={styles.button}
         >
-          {intl.formatMessage({ id: "See rooms" })}
+          <Link href="#" color="none">
+            {intl.formatMessage({ id: "See rooms" })}
+          </Link>
         </Button>
       </section>
     </article>

components/TempDesignSystem/Chip/chip.module.css

@@ -12,11 +12,3 @@ div.chip {
   background-color: var(--Scandic-Red-90);
   color: var(--Primary-Dark-On-Surface-Accent);
 }
-
-.subtle {
-  background-color: var(--Base-Surface-Subtle-Normal);
-}
-
-.pale {
-  background-color: var(--Scandic-Brand-Pale-Peach);
-}

components/TempDesignSystem/Chip/variants.ts

@@ -6,8 +6,6 @@ export const chipVariants = cva(styles.chip, {
   variants: {
     intent: {
       primary: styles.primary,
-      sublte: styles.subtle,
-      pale: styles.pale,
     },
     variant: {
       default: styles.default,