feat(SW-828): Added placeholder image

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,8 +164,10 @@ 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 && (
+          {images ? (
             <ImageGallery images={images} title={roomConfiguration.roomType} />
+          ) : (
+            <div className={styles.imagePlaceholder} />
           )}
         </div>
       )}

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

@@ -78,6 +78,23 @@
 }
 
 .imageContainer {
-  min-height: 185px;
+  min-height: 190px;
   position: relative;
 }
+
+.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;
+}