fix(SW-2603): Fixed image sizes on hotel pages and width of main section

Approved-by: Arvid Norlin
Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx

@@ -1,10 +1,9 @@
 import Card from "@/components/TempDesignSystem/Card"
-import CardImage from "@/components/TempDesignSystem/Card/CardImage"
-import Grids from "@/components/TempDesignSystem/Grids"
+
+import CardImage from "./CardImage"
 
 import styles from "./cardGrid.module.css"
 
-import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 import type { ActivityCard } from "@/types/trpc/routers/contentstack/hotelPage"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
@@ -13,7 +12,6 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
 
   const updatedCard: CardProps = {
     ...activitiesCard,
-    id: HotelHashValues.activities,
     theme: hasImage ? "image" : "primaryDark",
     primaryButton: hasImage
       ? {
@@ -33,13 +31,13 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
         },
   }
   return (
-    <section id={updatedCard.id}>
-      <Grids.Stackable className={styles.desktopGrid}>
+    <div>
+      <div className={styles.desktopCards}>
         <Card {...updatedCard} className={styles.spanThree} />
-      </Grids.Stackable>
-      <Grids.Stackable className={styles.mobileGrid}>
+      </div>
+      <div className={styles.mobileCards}>
         <CardImage card={updatedCard} />
-      </Grids.Stackable>
-    </section>
+      </div>
+    </div>
   )
 }

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/cardImage.module.css

@@ -1,22 +1,22 @@
-.image {
-  object-fit: cover;
+.cardImage {
+  display: grid;
+  gap: var(--Space-x025);
+}
+
+.imageWrapper {
+  position: relative;
+  height: 180px; /* Fixed height from Figma */
   overflow: hidden;
-  width: 100%;
-  min-height: 180px; /* Fixed height from Figma */
   border-radius: var(--Corner-radius-md);
 }
 
+.image {
+  object-fit: cover;
+}
+
 .imageContainer {
+  position: relative;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: var(--Spacing-x-quarter);
-}
-
-.card {
-  height: 254px; /* Fixed height from Figma */
-}
-
-.container {
-  display: grid;
-  gap: var(--Spacing-x-quarter);
+  gap: var(--Space-x025);
 }

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/CardImage/index.tsx

@@ -0,0 +1,35 @@
+import Image from "@/components/Image"
+import Card from "@/components/TempDesignSystem/Card"
+
+import styles from "./cardImage.module.css"
+
+import type { CardImageProps } from "@/types/components/cardImage"
+
+export default function CardImage({
+  card,
+  imageCards,
+  className,
+}: CardImageProps) {
+  return (
+    <div className={`${styles.cardImage} ${className}`}>
+      <div className={styles.imageContainer}>
+        {imageCards?.map(
+          ({ backgroundImage }) =>
+            backgroundImage && (
+              <div key={backgroundImage.id} className={styles.imageWrapper}>
+                <Image
+                  src={backgroundImage.url}
+                  className={styles.image}
+                  alt={backgroundImage.title}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 900px"
+                  focalPoint={backgroundImage.focalPoint}
+                />
+              </div>
+            )
+        )}
+      </div>
+      <Card {...card} height="dynamic" className={styles.card} />
+    </div>
+  )
+}

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/cardGrid.module.css

@@ -2,35 +2,44 @@
   scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
-.spanOne {
-  grid-column: span 1;
-}
-
-.spanTwo {
-  grid-column: span 2;
-}
-
-.spanThree {
-  grid-column: span 3;
-}
-
-section .desktopGrid {
-  display: none;
-}
-
-section .mobileGrid {
-  display: grid;
-  gap: var(--Spacing-x-quarter);
+@media screen and (max-width: 767px) {
+  .desktopCards {
+    display: none;
+  }
+  .mobileCards {
+    display: grid;
+    gap: var(--Space-x025);
+  }
 }
 
 @media screen and (min-width: 768px) {
-  section .desktopGrid {
-    display: grid;
-    gap: var(--Spacing-x1);
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  section .mobileGrid {
+  .mobileCards {
     display: none;
   }
+  .desktopCards {
+    display: grid;
+    gap: var(--Space-x1);
+    grid-template-columns: repeat(3, 1fr);
+    height: 320px;
+  }
+  .imageWrapper {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--Corner-radius-md);
+  }
+  .image {
+    object-fit: cover;
+  }
+
+  .spanOne {
+    grid-column: span 1;
+  }
+
+  .spanTwo {
+    grid-column: span 2;
+  }
+
+  .spanThree {
+    grid-column: span 3;
+  }
 }

apps/scandic-web/components/ContentType/HotelPage/Facilities/CardGrid/index.tsx

@@ -1,7 +1,12 @@
+import Image from "@/components/Image"
 import Card from "@/components/TempDesignSystem/Card"
-import CardImage from "@/components/TempDesignSystem/Card/CardImage"
-import Grids from "@/components/TempDesignSystem/Grids"
-import { filterFacilityCards, isFacilityCard } from "@/utils/facilityCards"
+import {
+  filterFacilityCards,
+  isFacilityCard,
+  isFacilityImage,
+} from "@/utils/facilityCards"
+
+import CardImage from "./CardImage"
 
 import styles from "./cardGrid.module.css"
 
@@ -27,14 +32,29 @@ export default function FacilitiesCardGrid({
 
   return (
     <div id={imageCard.card.id} className={styles.cardContainer}>
-      <Grids.Stackable className={styles.desktopGrid}>
-        {facilitiesCardGrid.map((card: FacilityCardType) => (
-          <Card {...card} key={card.id} className={getCardClassName(card)} />
-        ))}
-      </Grids.Stackable>
-      <Grids.Stackable className={styles.mobileGrid}>
+      <div className={styles.desktopCards}>
+        {facilitiesCardGrid.map((card: FacilityCardType) =>
+          isFacilityImage(card) && card.backgroundImage ? (
+            <div
+              key={card.id}
+              className={`${styles.imageWrapper} ${getCardClassName(card)}`}
+            >
+              <Image
+                className={styles.image}
+                src={card.backgroundImage.url}
+                alt={card.backgroundImage.meta.alt || ""}
+                fill
+                sizes="(min-width: 1367px) 700px, 900px"
+              />
+            </div>
+          ) : (
+            <Card {...card} key={card.id} className={getCardClassName(card)} />
+          )
+        )}
+      </div>
+      <div className={styles.mobileCards}>
         <CardImage card={imageCard.card} imageCards={imageCard.images} />
-      </Grids.Stackable>
+      </div>
     </div>
   )
 }

apps/scandic-web/components/ContentType/HotelPage/Facilities/facilities.module.css

@@ -1,9 +1,16 @@
-.grid {
-  gap: var(--Spacing-x2);
+.facilitiesSection,
+.activitiesCards {
+  display: grid;
+  gap: var(--Space-x2);
+}
+
+.activitiesCards {
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
 @media screen and (min-width: 768px) {
-  .grid {
-    gap: var(--Spacing-x7);
+  .facilitiesSection,
+  .activitiesCards {
+    gap: var(--Space-x7);
   }
 }

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

@@ -1,4 +1,3 @@
-import SectionContainer from "@/components/Section/Container"
 import { getIntl } from "@/i18n"
 import { isFacilityCard, setFacilityCardGrids } from "@/utils/facilityCards"
 
@@ -14,6 +13,7 @@ import {
   type FacilityCardType,
   type FacilityGrid,
 } from "@/types/components/hotelPage/facilities"
+import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 
 export default async function Facilities({
   facilities,
@@ -63,19 +63,23 @@ export default async function Facilities({
   }
 
   return (
-    <SectionContainer className={styles.grid}>
+    <section className={styles.facilitiesSection}>
       {translatedFacilityGrids.map((cardGrid: FacilityGrid) => (
         <FacilitiesCardGrid
           key={cardGrid[0].id}
           facilitiesCardGrid={cardGrid}
         />
       ))}
-      {activitiesCards.map((card) => (
-        <ActivitiesCardGrid
-          key={card.upcoming_activities_card.contentPage.href}
-          {...card.upcoming_activities_card}
-        />
-      ))}
-    </SectionContainer>
+      {activitiesCards.length ? (
+        <div id={HotelHashValues.activities} className={styles.activitiesCards}>
+          {activitiesCards.map((card) => (
+            <ActivitiesCardGrid
+              key={card.upcoming_activities_card.contentPage.href}
+              {...card.upcoming_activities_card}
+            />
+          ))}
+        </div>
+      ) : null}
+    </section>
   )
 }

apps/scandic-web/components/ContentType/HotelPage/hotelPage.module.css

@@ -6,7 +6,7 @@
   --hotel-page-navigation-height: 59px;
   --hotel-page-scroll-margin-top: calc(
     var(--hotel-page-navigation-height) + var(--booking-widget-mobile-height) +
-      var(--Spacing-x2)
+      var(--Space-x2)
   );
   --hotel-page-intro-section-width: 607px; /* Max width according to Figma */
 
@@ -27,9 +27,11 @@
 .mainSection {
   grid-area: mainSection;
   display: grid;
-  gap: var(--Spacing-x9);
-  padding: var(--Spacing-x4) 0;
-  max-width: var(--max-width-page);
+  gap: var(
+    --Spacing-x9
+  ); /* var(--Space-x9) does not exist in the design system, hence the "old" variable */
+  padding: var(--Space-x4) 0;
+  width: var(--max-width-page);
   margin: 0 auto;
 }
 
@@ -39,7 +41,7 @@
 
 .overview {
   display: grid;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
   scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
@@ -47,12 +49,12 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  gap: var(--Spacing-x4);
+  gap: var(--Space-x4);
 }
 
 .alertsContainer {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 @media screen and (min-width: 768px) {
@@ -61,8 +63,7 @@
   }
 
   .mainSection {
-    max-width: 100%;
-    padding: var(--Spacing-x6) var(--Layout-Tablet-Margin-Margin-min);
+    padding: var(--Space-x6) var(--Layout-Tablet-Margin-Margin-min);
   }
 }
 
@@ -70,7 +71,7 @@
   .pageContainer {
     --hotel-page-scroll-margin-top: calc(
       var(--hotel-page-navigation-height) +
-        var(--booking-widget-desktop-height) + var(--Spacing-x2)
+        var(--booking-widget-desktop-height) + var(--Space-x2)
     );
     grid-template-areas:
       "header mapContainer"
@@ -80,7 +81,8 @@
   }
   .mainSection {
     grid-area: mainSection;
-    padding: var(--Spacing-x6) var(--max-width-single-spacing);
+    padding: var(--Space-x6) var(--max-width-single-spacing);
+    width: 100%;
   }
   .mapContainer {
     display: flex;
@@ -93,7 +95,7 @@
   }
 
   .pageContainer > nav {
-    padding-left: var(--Spacing-x5);
-    padding-right: var(--Spacing-x5);
+    padding-left: var(--Space-x5);
+    padding-right: var(--Space-x5);
   }
 }

apps/scandic-web/components/TempDesignSystem/Card/CardImage/index.tsx

@@ -1,35 +0,0 @@
-import Image from "@/components/Image"
-
-import Card from ".."
-
-import styles from "./cardImage.module.css"
-
-import type { CardImageProps } from "@/types/components/cardImage"
-
-export default function CardImage({
-  card,
-  imageCards,
-  className,
-}: CardImageProps) {
-  return (
-    <article className={`${styles.container} ${className}`}>
-      <div className={styles.imageContainer}>
-        {imageCards?.map(
-          ({ backgroundImage }) =>
-            backgroundImage && (
-              <Image
-                key={backgroundImage.id}
-                src={backgroundImage.url}
-                className={styles.image}
-                alt={backgroundImage.title}
-                width={180}
-                height={180}
-                focalPoint={backgroundImage.focalPoint}
-              />
-            )
-        )}
-      </div>
-      <Card {...card} className={styles.card} />
-    </article>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Card/card.module.css

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   border-radius: var(--Corner-radius-md);
-  margin-right: var(--Spacing-x2);
+  margin-right: var(--Space-x2);
   text-align: center;
   width: 100%;
   text-wrap: balance;
@@ -49,10 +49,9 @@
 }
 
 .content {
-  margin: var(--Spacing-x0) var(--Spacing-x4);
-  position: absolute;
   display: grid;
-  gap: var(--Spacing-x2);
+  padding: var(--Space-x4) var(--Space-x3);
+  gap: var(--Space-x2);
 }
 
 .themeOne {
@@ -83,25 +82,22 @@
   background: var(--Primary-Strong-Surface-Normal);
 }
 
-.themeImage {
-}
-
 .themeImage .content {
   position: absolute;
 }
 
 .scriptContainer {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .scriptedTitle {
-  padding: var(--Spacing-x1);
+  padding: var(--Space-x1);
   margin: 0;
 }
 
 .buttonContainer {
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   justify-content: center;
 }