Merged in feat/SW-827-Room-sidepeak (pull request #893)

feat/SW-827-Room-sidepeak

Approved-by: Niclas Edenvin

components/Icons/BedSingle.tsx

@@ -0,0 +1,29 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function BedSingleIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classNames}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.0427 14.0548H4.95718V14.9742C4.95718 15.2154 4.87884 15.4189 4.72214 15.5847C4.56545 15.7505 4.37314 15.8334 4.14522 15.8334C3.9173 15.8334 3.72499 15.7505 3.56829 15.5847C3.4116 15.4189 3.33325 15.2154 3.33325 14.9742V10.9484C3.33325 10.3564 3.48757 9.83679 3.79621 9.38962C4.10486 8.94244 4.51084 8.61837 5.01416 8.41739V6.48802C5.01416 5.83485 5.22546 5.28468 5.64807 4.83751C6.07067 4.39033 6.58947 4.16675 7.20448 4.16675H12.7954C13.4104 4.16675 13.9292 4.39033 14.3518 4.83751C14.7744 5.28468 14.9857 5.83485 14.9857 6.48802V8.41739C15.489 8.61837 15.895 8.94244 16.2036 9.38962C16.5123 9.83679 16.6666 10.3564 16.6666 10.9484V14.9742C16.6666 15.2154 16.5882 15.4189 16.4315 15.5847C16.2748 15.7505 16.0825 15.8334 15.8546 15.8334C15.6267 15.8334 15.4344 15.7505 15.2777 15.5847C15.121 15.4189 15.0427 15.2154 15.0427 14.9742V14.0548ZM6.6381 8.23652V5.85495H13.3617V8.23652H6.6381ZM4.95718 10.9497V12.3364H15.0427V10.9497C15.0427 10.6683 14.9524 10.4322 14.772 10.2413C14.5916 10.0503 14.37 9.95486 14.1075 9.95486H5.89237C5.62979 9.95486 5.40828 10.0503 5.22784 10.2413C5.0474 10.4322 4.95718 10.6683 4.95718 10.9497Z"
+        fill="#57514E"
+      />
+    </svg>
+  )
+}

components/Icons/KingBedSmall.tsx

@@ -0,0 +1,29 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function KingBedSmallIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.04175 10.0104C1.04175 9.57819 1.19474 9.21146 1.50073 8.91021C1.80671 8.60896 2.17455 8.45833 2.60425 8.45833H2.68758V6C2.68758 5.57031 2.84057 5.20247 3.14656 4.89648C3.45255 4.59049 3.82039 4.4375 4.25008 4.4375H15.7501C16.1798 4.4375 16.5476 4.59049 16.8536 4.89648C17.1596 5.20247 17.3126 5.57031 17.3126 6V8.45833H17.3959C17.8256 8.45833 18.1934 8.61133 18.4994 8.91731C18.8054 9.2233 18.9584 9.59114 18.9584 10.0208V12.9688C18.9584 13.2674 18.8542 13.5208 18.6459 13.7292C18.4376 13.9375 18.1843 14.0417 17.8862 14.0417H17.6459V14.9063C17.6459 15.1215 17.5695 15.3056 17.4167 15.4583C17.264 15.6111 17.0799 15.6875 16.8647 15.6875C16.6494 15.6875 16.4654 15.6111 16.3126 15.4583C16.1598 15.3056 16.0834 15.1215 16.0834 14.9063V14.0417H3.91675V14.9063C3.91675 15.1215 3.84036 15.3056 3.68758 15.4583C3.5348 15.6111 3.35078 15.6875 3.1355 15.6875C2.92022 15.6875 2.73619 15.6111 2.58341 15.4583C2.43064 15.3056 2.35425 15.1215 2.35425 14.9063V14.0417H2.11398C1.81582 14.0417 1.56258 13.9375 1.35425 13.7292C1.14591 13.5208 1.04175 13.2674 1.04175 12.9688V10.0104ZM15.7501 8.45833H10.7813V6H15.7501V8.45833ZM9.21883 8.45833H4.25008V6H9.21883V8.45833ZM17.3959 12.4792H2.60425V10.0208H17.3959V12.4792Z"
+        fill="#57514E"
+      />
+    </svg>
+  )
+}

components/Icons/index.tsx

@@ -9,6 +9,7 @@ export { default as ArrowRightIcon } from "./ArrowRight"
 export { default as BarIcon } from "./Bar"
 export { default as BathtubIcon } from "./Bathtub"
 export { default as BedDoubleIcon } from "./BedDouble"
+export { default as BedSingleIcon } from "./BedSingle"
 export { default as BikingIcon } from "./Biking"
 export { default as BreakfastIcon } from "./Breakfast"
 export { default as BusinessIcon } from "./Business"
@@ -77,6 +78,7 @@ export { default as IronIcon } from "./Iron"
 export { default as KayakingIcon } from "./Kayaking"
 export { default as KettleIcon } from "./Kettle"
 export { default as KingBedIcon } from "./KingBed"
+export { default as KingBedSmallIcon } from "./KingBedSmall"
 export { default as LampIcon } from "./Lamp"
 export { default as LaundryMachineIcon } from "./LaundryMachine"
 export { default as LocalBarIcon } from "./LocalBar"

components/ImageGallery/imageGallery.module.css

@@ -27,16 +27,17 @@
 .imagePlaceholder {
   height: 100%;
   min-height: 190px;
+  aspect-ratio: 16/9;
   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-size: 180px 180px;
   background-position:
     0 0,
-    0 80px,
-    80px -80px,
-    -80px 0;
+    0 90px,
+    90px -90px,
+    -90px 0;
 }

components/ImageGallery/index.tsx

@@ -20,9 +20,10 @@ export default function ImageGallery({
 }: ImageGalleryProps) {
   const intl = useIntl()
   const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+  const [imageError, setImageError] = useState(false)
   const imageProps = fill ? { fill } : { height, width: height * 1.5 }
 
-  if (!images || images.length === 0) {
+  if (!images || images.length === 0 || imageError) {
     return <div className={styles.imagePlaceholder} />
   }
 
@@ -38,6 +39,7 @@ export default function ImageGallery({
           className={styles.image}
           src={images[0].imageSizes.medium}
           alt={images[0].metaData.altText}
+          onError={() => setImageError(true)}
           {...imageProps}
         />
         <div className={styles.imageCount}>

components/SidePeeks/RoomSidePeek/bedIcon.ts

@@ -0,0 +1,37 @@
+import { FC } from "react"
+
+import {
+  BedDoubleIcon,
+  BedSingleIcon,
+  KingBedSmallIcon,
+} from "@/components/Icons"
+
+import type { IconProps } from "@/types/components/icon"
+
+export function getBedIcon(name: string): FC<IconProps> | null {
+  const iconMappings = [
+    {
+      icon: BedDoubleIcon,
+      texts: ["Queen"],
+    },
+    {
+      icon: KingBedSmallIcon,
+      texts: ["King"],
+    },
+    {
+      icon: KingBedSmallIcon,
+      texts: ["CustomOccupancy"],
+    },
+    {
+      icon: BedSingleIcon,
+      texts: ["Twin"],
+    },
+    {
+      icon: BedSingleIcon,
+      texts: ["Single"],
+    },
+  ]
+
+  const icon = iconMappings.find((icon) => icon.texts.includes(name))
+  return icon ? icon.icon : BedSingleIcon
+}

components/SidePeeks/RoomSidePeek/index.tsx

@@ -1,11 +1,11 @@
 import { useIntl } from "react-intl"
 
 import ImageGallery from "@/components/ImageGallery"
-import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
+import { getBedIcon } from "./bedIcon"
 import { getFacilityIcon } from "./facilityIcon"
 
 import styles from "./roomSidePeek.module.css"
@@ -79,15 +79,27 @@ export default function RoomSidePeek({
           <Body color="grey">
             {intl.formatMessage({ id: "booking.basedOnAvailability" })}
           </Body>
-          {/* TODO: Get data for bed options */}
+          <ul className={styles.bedOptions}>
+            {room.roomTypes.map((roomType) => {
+              const BedIcon = getBedIcon(roomType.mainBed.type)
+              return (
+                <li key={roomType.code}>
+                  {BedIcon && (
+                    <BedIcon
+                      color="uiTextMediumContrast"
+                      width={24}
+                      height={24}
+                    />
+                  )}
+                  <Body color="uiTextMediumContrast" asChild>
+                    <span>{roomType.mainBed.description}</span>
+                  </Body>
+                </li>
+              )
+            })}
+          </ul>
         </div>
       </div>
-      <div className={styles.buttonContainer}>
-        <Button fullWidth theme="base" intent="primary">
-          {intl.formatMessage({ id: "booking.selectRoom" })}
-          {/* TODO: Implement logic for select room */}
-        </Button>
-      </div>
     </SidePeek>
   )
 }

components/SidePeeks/RoomSidePeek/roomSidePeek.module.css

@@ -44,6 +44,12 @@
   margin-bottom: var(--Spacing-x-half);
 }
 
+.bedOptions li {
+  display: flex;
+  gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x-half);
+}
+
 .noIcon {
   margin-left: var(--Spacing-x4);
 }

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -1,5 +1,5 @@
 .modal {
-  --sidepeek-desktop-width: 600px;
+  --sidepeek-desktop-width: 560px;
 }
 @keyframes slide-in {
   from {