Merged in feat/sw-3239-move-imagegallery-to-design-system (pull request #2633)

feat(SW-3239): Move imagegallery to design system

* Inline types

* Move ImageGallery to design-system


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx

@@ -5,10 +5,10 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./hotelListingItem.module.css"

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx

@@ -5,10 +5,10 @@ import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import ImageGallery from "@/components/ImageGallery"
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
 
 import ExperienceList from "../../ExperienceList"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx

@@ -9,12 +9,12 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./hotelListItem.module.css"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx

@@ -3,10 +3,10 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import ImageGallery from "@/components/ImageGallery"
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
 
 import ExperienceList from "../../../ExperienceList"

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx

@@ -11,12 +11,12 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import styles from "./hotelListingItem.module.css"

apps/scandic-web/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -4,9 +4,9 @@ import { useIntl } from "react-intl"
 
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import { getRoomNameAsParam } from "../../utils"

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx

@@ -1,7 +1,7 @@
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ImageGallery from "@/components/ImageGallery"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -20,6 +20,7 @@ import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -27,7 +28,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import BookingCodeChip from "@/components/BookingCodeChip"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import ReadMore from "../ReadMore"

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,11 +1,11 @@
 import TripAdvisorChip from "@scandic-hotels/booking-flow/components/TripAdvisorChip"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import ImageGallery from "@/components/ImageGallery"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx

@@ -1,12 +1,12 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useRatesStore } from "@/stores/select-rate"
 
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
-import ImageGallery from "@/components/ImageGallery"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx

@@ -8,6 +8,7 @@ import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem
 import IconChip from "@scandic-hotels/design-system/IconChip"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
@@ -16,7 +17,6 @@ import PriceType from "@/components/HotelReservation/MyStay/PriceType"
 import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
 import { sumPackages } from "@/components/HotelReservation/utils"
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
-import ImageGallery from "@/components/ImageGallery"
 import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import useLang from "@/hooks/useLang"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { BED_TYPE_ICONS, type BedTypes } from "@/constants/booking"
 
-import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import { FacilityIcon } from "../facilityIcon"

apps/scandic-web/types/components/imageGallery.ts

@@ -4,14 +4,3 @@ export interface GalleryImage {
   caption?: string | null
   smallSrc?: string | null
 }
-
-export type ImageGalleryProps = {
-  images?: GalleryImage[]
-  title: string
-  fill?: boolean
-  width?: number
-  height?: number
-  sizes?: string
-  hideLabel?: boolean
-  imageCountPosition?: "top" | "bottom"
-}

packages/design-system/lib/components/ImageGallery/index.tsx

@@ -1,18 +1,34 @@
-"use client"
+'use client'
 
-import { memo, useState } from "react"
-import { Button as ButtonRAC } from "react-aria-components"
-import { useIntl } from "react-intl"
+import { memo, useState } from 'react'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Image from "@scandic-hotels/design-system/Image"
-import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
-import Lightbox from "@scandic-hotels/design-system/Lightbox"
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import Image from '../Image'
+import ImageFallback from '../ImageFallback'
+import { Typography } from '../Typography'
+import Lightbox from '../Lightbox'
 
-import styles from "./imageGallery.module.css"
+import styles from './imageGallery.module.css'
 
-import type { ImageGalleryProps } from "@/types/components/imageGallery"
+interface GalleryImage {
+  src: string
+  alt: string
+  caption?: string | null
+  smallSrc?: string | null
+}
+
+type ImageGalleryProps = {
+  images?: GalleryImage[]
+  title: string
+  fill?: boolean
+  width?: number
+  height?: number
+  sizes?: string
+  hideLabel?: boolean
+  imageCountPosition?: 'top' | 'bottom'
+}
 
 function ImageGallery({
   images,
@@ -21,7 +37,7 @@ function ImageGallery({
   height = 280,
   sizes,
   hideLabel,
-  imageCountPosition = "bottom",
+  imageCountPosition = 'bottom',
 }: ImageGalleryProps) {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
@@ -44,10 +60,10 @@ function ImageGallery({
           onError={() => setImageError(true)}
           {...imageProps}
         />
-        <Typography variant={"Body/Supporting text (caption)/smRegular"}>
+        <Typography variant={'Body/Supporting text (caption)/smRegular'}>
           <span
             className={`${styles.imageCount} ${
-              imageCountPosition === "top"
+              imageCountPosition === 'top'
                 ? styles.imageCountTop
                 : styles.imageCountBottom
             }`}
@@ -60,7 +76,7 @@ function ImageGallery({
           className={styles.triggerArea}
           onPress={() => setIsOpen(true)}
           aria-label={intl.formatMessage({
-            defaultMessage: "Open image gallery",
+            defaultMessage: 'Open image gallery',
           })}
         />
       </div>

packages/design-system/package.json

@@ -27,6 +27,7 @@
     "./IconChip": "./lib/components/IconChip/index.tsx",
     "./Image": "./lib/components/Image.tsx",
     "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
+    "./ImageGallery": "./lib/components/ImageGallery/index.tsx",
     "./Input": "./lib/components/Input/index.tsx",
     "./Label": "./lib/components/Label/index.tsx",
     "./Lightbox": "./lib/components/Lightbox/index.tsx",