Merged in fix/hotel-card-fixes (pull request #2209)

fix: update typography including missing header element in hotel cards

Approved-by: Tobias Johansson
Approved-by: Erik Tiekstra
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/HotelCard/hotelCard.module.css

@@ -6,6 +6,7 @@
   border-radius: var(--Corner-radius-md);
   width: 100%;
   overflow: hidden;
+  color: var(--Text-Default);
 }
 
 .card.active {
@@ -27,13 +28,13 @@
 }
 
 .hotelInformation {
-  margin-bottom: var(--Spacing-x-half);
+  margin-bottom: var(--Space-x05);
 }
 
 .hotelContent {
   display: flex;
   flex-direction: column;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
 }
 
 .hotelDescription {
@@ -43,14 +44,14 @@
 .titleContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
-  margin-top: var(--Spacing-x-half);
+  gap: var(--Space-x05);
+  margin-top: var(--Space-x05);
 }
 
 .addressContainer {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .address {
@@ -61,26 +62,27 @@
 .facilities {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--Spacing-x1);
-  margin-top: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x1);
+  margin-top: var(--Space-x15);
 }
 
 .facilitiesItem {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
+  color: var(--Text-Secondary);
 }
 
 .specialAlerts {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .prices {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
 }
 
 .link:hover {
@@ -105,7 +107,7 @@
 
 .pointsCard {
   background-color: var(--Base-Surface-Secondary-light-Normal);
-  padding: var(--Spacing-x-one-and-half);
+  padding: var(--Space-x15);
   border-radius: var(--Corner-radius-md);
 }
 
@@ -155,23 +157,23 @@
 
   .pageListing .hotelInformation {
     width: min(422px, 100%);
-    padding-right: var(--Spacing-x2);
+    padding-right: var(--Space-x2);
     margin: 0;
   }
 
   .pageListing .facilities {
-    margin: var(--Spacing-x1) 0;
+    margin: var(--Space-x1) 0;
   }
 
   .pageListing .hotelContent {
     flex-direction: row;
     align-items: center;
-    gap: var(--Spacing-x2);
-    padding-left: var(--Spacing-x3);
+    gap: var(--Space-x2);
+    padding-left: var(--Space-x3);
   }
 
   .pageListing .titleContainer {
-    margin-bottom: var(--Spacing-x-one-and-half);
+    margin-bottom: var(--Space-x15);
   }
 
   .pageListing .fakeButton {

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -17,9 +17,7 @@ import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import Divider from "@/components/TempDesignSystem/Divider"
 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 { Tooltip } from "@/components/TempDesignSystem/Tooltip"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -89,22 +87,27 @@ function HotelCard({
     >
       <div>
         <div className={styles.imageContainer}>
-          <ImageGallery title={hotel.name} images={galleryImages} fill />
+          <ImageGallery
+            title={hotel.name}
+            images={galleryImages}
+            fill
+            sizes="(min-width: 768px) calc(100vw - 340px), (min-width: 1367px) 33vw, 100vw"
+          />
           {hotel.ratings?.tripAdvisor && (
             <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
           )}
         </div>
       </div>
       <div className={styles.hotelContent}>
-        <section className={styles.hotelInformation}>
+        <div className={styles.hotelInformation}>
           <div className={styles.titleContainer}>
             <HotelLogoIcon
               hotelId={hotel.operaId}
               hotelType={hotel.hotelType}
             />
-            <Subtitle textTransform="capitalize" color="uiTextHighContrast">
-              {hotel.name}
-            </Subtitle>
+            <Typography variant="Title/Subtitle/lg">
+              <h2>{hotel.name}</h2>
+            </Typography>
             <div className={styles.addressContainer}>
               <address className={styles.address}>
                 {type == HotelCardListingTypeEnum.MapListing ? (
@@ -133,37 +136,40 @@ function HotelCard({
               <div>
                 <Divider variant="vertical" color="subtle" />
               </div>
-              <Caption color="uiTextPlaceholder">
-                {intl.formatMessage(
-                  {
-                    defaultMessage: "{number} km to city center",
-                  },
-                  {
-                    number: getSingleDecimal(
-                      hotel.location.distanceToCentre / 1000
-                    ),
-                  }
-                )}
-              </Caption>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <span>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: "{number} km to city center",
+                    },
+                    {
+                      number: getSingleDecimal(
+                        hotel.location.distanceToCentre / 1000
+                      ),
+                    }
+                  )}
+                </span>
+              </Typography>
             </div>
           </div>
-          <Body className={styles.hotelDescription}>
-            {hotel.hotelContent.texts.descriptions?.short}
-          </Body>
+
+          {hotel.hotelContent.texts.descriptions ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p className={styles.hotelDescription}>
+                {hotel.hotelContent.texts.descriptions.short}
+              </p>
+            </Typography>
+          ) : null}
+
           <div className={styles.facilities}>
-            {amenities.map((facility) => {
-              const Icon = (
-                <FacilityToIcon id={facility.id} color="Icon/Default" />
-              )
-              return (
-                <div className={styles.facilitiesItem} key={facility.id}>
-                  {Icon && Icon}
-                  <Caption color="uiTextMediumContrast">
-                    {facility.name}
-                  </Caption>
-                </div>
-              )
-            })}
+            {amenities.map((facility) => (
+              <div className={styles.facilitiesItem} key={facility.id}>
+                <FacilityToIcon id={facility.id} color="CurrentColor" />
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <span>{facility.name}</span>
+                </Typography>
+              </div>
+            ))}
           </div>
           <ReadMore
             label={intl.formatMessage({
@@ -173,7 +179,7 @@ function HotelCard({
             showCTA={true}
             sidePeekKey={SidePeekEnum.hotelDetails}
           />
-        </section>
+        </div>
         <PricesWrapper
           href={`${selectRate(lang)}?hotel=${hotel.operaId}`}
           isClickable={availability.productType && !isDisabled}

apps/scandic-web/components/ImageGallery/index.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { cx } from "class-variance-authority"
 import { memo, useState } from "react"
 import { Button } from "react-aria-components"
 import { useIntl } from "react-intl"
@@ -36,7 +35,7 @@ function ImageGallery({
 
   return (
     <>
-      <div className={cx(styles.wrapper, { [styles.fill]: fill })}>
+      <div className={styles.wrapper}>
         <Image
           className={styles.image}
           src={firstImage.src}