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/ImageGallery/imageGallery.module.css

@@ -1,47 +0,0 @@
-.wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-}
-
-.imageCount {
-  position: absolute;
-  bottom: var(--Space-x2);
-  right: var(--Space-x2);
-  background-color: var(--Overlay-90);
-  padding: var(--Space-x025) var(--Space-x05);
-  border-radius: var(--Corner-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--Space-x025);
-  color: var(--Text-Inverted);
-}
-
-.imageCountBottom {
-  bottom: var(--Space-x2);
-  top: auto;
-}
-
-.imageCountTop {
-  top: var(--Space-x2);
-  bottom: auto;
-}
-
-.triggerArea {
-  background-color: transparent;
-  border-width: 0;
-  padding: 0;
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-  border-radius: inherit;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: inherit;
-}

apps/scandic-web/components/ImageGallery/index.tsx

@@ -1,79 +0,0 @@
-"use client"
-
-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 styles from "./imageGallery.module.css"
-
-import type { ImageGalleryProps } from "@/types/components/imageGallery"
-
-function ImageGallery({
-  images,
-  title,
-  fill,
-  height = 280,
-  sizes,
-  hideLabel,
-  imageCountPosition = "bottom",
-}: ImageGalleryProps) {
-  const intl = useIntl()
-  const [isOpen, setIsOpen] = useState(false)
-  const [imageError, setImageError] = useState(false)
-  const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
-
-  if (!images || images.length === 0 || imageError) {
-    return <ImageFallback />
-  }
-
-  const firstImage = images[0]
-
-  return (
-    <>
-      <div className={styles.wrapper}>
-        <Image
-          className={styles.image}
-          src={firstImage.src}
-          alt={firstImage.alt}
-          onError={() => setImageError(true)}
-          {...imageProps}
-        />
-        <Typography variant={"Body/Supporting text (caption)/smRegular"}>
-          <span
-            className={`${styles.imageCount} ${
-              imageCountPosition === "top"
-                ? styles.imageCountTop
-                : styles.imageCountBottom
-            }`}
-          >
-            <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
-            <span>{images.length}</span>
-          </span>
-        </Typography>
-        <ButtonRAC
-          className={styles.triggerArea}
-          onPress={() => setIsOpen(true)}
-          aria-label={intl.formatMessage({
-            defaultMessage: "Open image gallery",
-          })}
-        />
-      </div>
-      {isOpen ? (
-        <Lightbox
-          images={images}
-          dialogTitle={title}
-          onClose={() => setIsOpen(false)}
-          hideLabel={hideLabel}
-        />
-      ) : null}
-    </>
-  )
-}
-
-export default memo(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"
-}