Merged in feat/SW-828-placeholder-image (pull request #885)

Feat/SW-828 placeholder image

Approved-by: Bianca Widstam
Approved-by: Niclas Edenvin

components/HotelReservation/HotelCard/index.tsx

@@ -62,12 +62,7 @@ export default function HotelCard({
       onMouseLeave={handleMouseLeave}
     >
       <section className={styles.imageContainer}>
-        {hotelData?.galleryImages && (
-          <ImageGallery
-            title={hotelData.name}
-            images={hotelData.galleryImages}
-          />
-        )}
+        <ImageGallery title={hotelData.name} images={hotelData.galleryImages} />
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -29,12 +29,10 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            {hotelAttributes?.galleryImages && (
-              <ImageGallery
-                title={hotelAttributes.name}
-                images={hotelAttributes.galleryImages}
-              />
-            )}
+            <ImageGallery
+              title={hotelAttributes.name}
+              images={hotelAttributes.galleryImages}
+            />
             {hotelAttributes.ratings?.tripAdvisor && (
               <div className={styles.tripAdvisor}>
                 <TripAdvisorIcon color="burgundy" />

components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css

@@ -15,3 +15,20 @@
 .triggerArea {
   cursor: pointer;
 }
+
+.imagePlaceholder {
+  height: 100%;
+  min-height: 190px;
+  width: 100%;
+  background-color: #fff;
+  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
+    linear-gradient(-45deg, #000000 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #000000 75%),
+    linear-gradient(-45deg, transparent 75%, #000000 75%);
+  background-size: 160px 160px;
+  background-position:
+    0 0,
+    0 80px,
+    80px -80px,
+    -80px 0;
+}

components/HotelReservation/SelectRate/ImageGallery/index.tsx

@@ -8,6 +8,9 @@ import styles from "./imageGallery.module.css"
 import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
 
 export default function ImageGallery({ images, title }: ImageGalleryProps) {
+  if (!images || images.length === 0)
+    return <div className={styles.imagePlaceholder} />
+
   return (
     <Lightbox images={images} dialogTitle={title}>
       <div className={styles.triggerArea} id="lightboxTrigger">

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css

@@ -6,7 +6,6 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  padding: var(--Spacing-x-quarter) 0;
 }
 
 .priceTable {

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -7,7 +7,6 @@ import { RateDefinition } from "@/server/routers/hotels/output"
 
 import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -165,9 +164,7 @@ export default function RoomCard({
           </div>
           {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
          which can't be accessed unless on Scandic's Wifi or using Citrix. */}
-          {images && (
-            <ImageGallery images={images} title={roomConfiguration.roomType} />
-          )}
+          <ImageGallery images={images} title={roomConfiguration.roomType} />
         </div>
       )}
     </div>

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -78,6 +78,6 @@
 }
 
 .imageContainer {
-  min-height: 185px;
+  min-height: 190px;
   position: relative;
 }

components/SidePeeks/RoomSidePeek/index.tsx

@@ -43,11 +43,9 @@ export default function RoomSidePeek({
               { nrOfGuests: occupancy }
             )}
           </Body>
-          {images && (
-            <div className={styles.imageContainer}>
-              <ImageGallery images={images} title={room.name} />
-            </div>
-          )}
+          <div className={styles.imageContainer}>
+            <ImageGallery images={images} title={room.name} />
+          </div>
           <Body color="uiTextHighContrast">{roomDescription}</Body>
         </div>
         <div className={styles.listContainer}>

types/components/hotelReservation/selectRate/imageGallery.ts

@@ -1,3 +1,3 @@
 import type { GalleryImage } from "@/types/hotel"
 
-export type ImageGalleryProps = { images: GalleryImage[]; title: string }
+export type ImageGalleryProps = { images?: GalleryImage[]; title: string }