Merged in feat/SW-673-galleryicon-hotel-lightbox (pull request #734)

Feat/SW-673 galleryicon hotel lightbox

* feat(SW-673): add galleryChip to trigger lightbox

* feat(SW-673): add updated design galleryIcon

* feat(SW-673): add first image from hotelContent and heroImages

* feat(SW-673): fix import type

* feat(SW-673): fix css variables

* feat(SW-673): change component to include image that trigger lightbox

* feat(SW-673): refactor name to imageGallery


Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css

@@ -12,10 +12,6 @@
   gap: var(--Spacing-x2);
 }
 
-.image {
-  border-radius: var(--Corner-radius-Medium);
-}
-
 .imageWrapper {
   position: relative;
   overflow: hidden;
@@ -24,6 +20,10 @@
   width: 100%;
 }
 
+.imageWrapper img {
+  border-radius: var(--Corner-radius-Medium);
+}
+
 .tripAdvisor {
   display: flex;
   align-items: center;

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -10,6 +10,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ReadMore from "../../ReadMore"
+import ImageGallery from "../ImageGallery"
 
 import styles from "./hotelInfoCard.module.css"
 
@@ -28,12 +29,6 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            <Image
-              src={hotelAttributes.hotelContent.images.imageSizes.medium}
-              alt={hotelAttributes.hotelContent.images.metaData.altText}
-              className={styles.image}
-              fill
-            />
             {hotelAttributes.ratings?.tripAdvisor && (
               <div className={styles.tripAdvisor}>
                 <TripAdvisorIcon color="burgundy" />
@@ -42,7 +37,15 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                 </Caption>
               </div>
             )}
-            {/* TODO: gallery icon and image carousel */}
+            {hotelAttributes.gallery && (
+              <ImageGallery
+                title={hotelAttributes.name}
+                images={[
+                  hotelAttributes.hotelContent.images,
+                  ...hotelAttributes.gallery.heroImages,
+                ]}
+              />
+            )}
           </div>
           <div className={styles.hotelContent}>
             <div className={styles.hotelInformation}>

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

@@ -0,0 +1,17 @@
+.galleryIcon {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  max-height: 32px;
+  width: 48px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-quarter);
+}
+
+.triggerArea {
+  cursor: pointer;
+}

components/HotelReservation/SelectRate/ImageGallery/index.tsx

@@ -0,0 +1,36 @@
+import { GalleryIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Lightbox from "@/components/Lightbox"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./imageGallery.module.css"
+
+import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
+
+export default function ImageGallery({ images, title }: ImageGalleryProps) {
+  return (
+    <Lightbox
+      images={images.map((image) => ({
+        url: image.imageSizes.small,
+        alt: image.metaData.altText,
+        title: image.metaData.title,
+      }))}
+      dialogTitle={title}
+    >
+      <div className={styles.triggerArea} id="lightboxTrigger">
+        <Image
+          src={images[0].imageSizes.medium}
+          alt={images[0].metaData.altText}
+          className={styles.image}
+          fill
+        />
+        <div className={styles.galleryIcon}>
+          <GalleryIcon color="white" />
+          <Footnote color="white" type="label">
+            {images.length}
+          </Footnote>
+        </div>
+      </div>
+    </Lightbox>
+  )
+}

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

@@ -5,18 +5,18 @@ import { useIntl } from "react-intl"
 import { RateDefinition } from "@/server/routers/hotels/output"
 
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
-import { ChevronRightSmallIcon, GalleryIcon } from "@/components/Icons"
-import Image from "@/components/Image"
-import Lightbox from "@/components/Lightbox"
+import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 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"
 
+import ImageGallery from "../../ImageGallery"
+
 import styles from "./roomCard.module.css"
 
-import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
+import type { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
 
 export default function RoomCard({
   rateDefinitions,
@@ -25,7 +25,6 @@ export default function RoomCard({
   handleSelectRate,
 }: RoomCardProps) {
   const intl = useIntl()
-
   const saveRate = rateDefinitions.find(
     // TODO: Update string when API has decided
     (rate) => rate.cancellationRule === "NonCancellable"
@@ -153,26 +152,8 @@ export default function RoomCard({
           )}
           {/*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. */}
-          <Image
-            src={mainImage.imageSizes.small}
-            alt={mainImage.metaData.altText}
-            width={330}
-            height={185}
-          />
           {images && (
-            <Lightbox
-              images={images.map((image) => ({
-                url: image.imageSizes.small,
-                alt: image.metaData.altText,
-                title: image.metaData.title,
-              }))}
-              dialogTitle={roomConfiguration.roomType}
-            >
-              <div className={styles.galleryIcon} id="lightboxTrigger">
-                <GalleryIcon color="white" />
-                <Footnote color="white">{images.length}</Footnote>
-              </div>
-            </Lightbox>
+            <ImageGallery images={images} title={roomConfiguration.roomType} />
           )}
         </div>
       )}

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

@@ -77,17 +77,3 @@
   min-height: 185px;
   position: relative;
 }
-
-.galleryIcon {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  height: 24px;
-  background-color: rgba(64, 57, 55, 0.9);
-  padding: 0 var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Small);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-quarter);
-}