scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1521-image-gallery-lightbox (pull request #1226)

Browse Source 
Feat/SW-1521 image gallery lightbox

* feat(SW-1453): added city listing component

* feat(SW-1521): added more generic types to ImageGallery and Lightbox components

* feat(SW-1521): added lightbox functionality for top images

* feat(SW-1521): added support for setting activeIndex on open inside Lightbox


Approved-by: Fredrik Thorsson
Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Erik Tiekstra
2025-01-30 13:30:58 +00:00
parent 4b39df44bc
commit b9a3e697be
25 changed files with 229 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/ContentType/HotelPage/PreviewImages/index.tsx
View File

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox/"
import Button from "@/components/TempDesignSystem/Button"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import styles from "./previewImages.module.css"
@@ -18,6 +19,8 @@ export default function PreviewImages({
const intl = useIntl()
const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
const lightboxImages = mapApiImagesToGalleryImages(images)
return (
<div className={styles.imageWrapper}>
{images.slice(0, 3).map((image, index) => (
@@ -44,7 +47,7 @@ export default function PreviewImages({
{intl.formatMessage({ id: "See all photos" })}
</Button>
<Lightbox
images={images}
images={lightboxImages}
dialogTitle={intl.formatMessage(
{ id: "{title} - Image gallery" },
{ title: hotelName }

5
components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -8,6 +8,7 @@ import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getRoomNameAsParam } from "../../utils"
@@ -24,11 +25,13 @@ export function RoomCard({ room }: RoomCardProps) {
? `${roomSize.min} m²`
: `${roomSize.min} - ${roomSize.max} m²`
const galleryImages = mapApiImagesToGalleryImages(images)
return (
<article className={styles.roomCard}>
<div className={styles.imageContainer}>
<ImageGallery
images={images}
images={galleryImages}
title={intl.formatMessage(
{ id: "{title} - Image gallery" },
{ title: name }

8
components/ContentType/HotelPage/SidePeeks/Room/index.tsx
View File

@@ -8,6 +8,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getRoomNameAsParam } from "../../utils"
@@ -22,6 +23,7 @@ export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
// TODO: Not defined where this should lead.
const ctaUrl = ""
const galleryImages = mapApiImagesToGalleryImages(images)
return (
<SidePeek contentKey={getRoomNameAsParam(room.name)} title={room.name}>
<div className={styles.content}>
@@ -51,7 +53,11 @@ export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
)}
</Body>
<div className={styles.imageContainer}>
<ImageGallery images={images} title={room.name} height={280} />
<ImageGallery
images={galleryImages}
title={room.name}
height={280}
/>
</div>
<Body color="uiTextHighContrast">{roomDescription}</Body>
</div>