feat(SW-3151): Added original to imageSchema and added transform to a more generic image type

Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström

packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { HotelCard } from './index'
 
-import { fn } from 'storybook/test'
 import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
+import { fn } from 'storybook/test'
 import { Button } from '../Button'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 
@@ -70,7 +70,6 @@ export const Default: Story = {
       {
         src: 'img/img2.jpg',
         alt: 'Alt text',
-        smallSrc: 'img/img2.jpg',
         caption: 'Caption',
       },
     ],
@@ -97,3 +96,10 @@ export const MapListing: Story = {
     type: 'mapListing',
   },
 }
+
+export const WithoutImage: Story = {
+  args: {
+    ...Default.args,
+    images: [],
+  },
+}

packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx

@@ -1,12 +1,12 @@
 import Image from '../../Image'
 
-import { hotelCardDialogImageVariants } from './variants'
 import { TripAdvisorChip } from '../../TripAdvisorChip'
+import { hotelCardDialogImageVariants } from './variants'
 
-import styles from './hotelCardDialogImage.module.css'
+import ImageFallback from '../../ImageFallback'
 
 export type HotelCardDialogImageProps = {
-  firstImage?: string
+  imageSrc?: string
   altText?: string
   rating?: { tripAdvisor?: number | null }
   imageError: boolean
@@ -15,7 +15,7 @@ export type HotelCardDialogImageProps = {
 }
 
 export function HotelCardDialogImage({
-  firstImage,
+  imageSrc,
   altText,
   rating,
   imageError,
@@ -26,11 +26,11 @@ export function HotelCardDialogImage({
 
   return (
     <div className={classNames}>
-      {!firstImage || imageError ? (
-        <div className={styles.imagePlaceholder} />
+      {!imageSrc || imageError ? (
+        <ImageFallback />
       ) : (
         <Image
-          src={firstImage}
+          src={imageSrc}
           alt={altText || ''}
           fill
           onError={() => setImageError(true)}

packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx

@@ -14,14 +14,14 @@ import { OldDSButton as Button } from '../../../OldDSButton'
 import Subtitle from '../../../Subtitle'
 import { Typography } from '../../../Typography'
 
-import { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
 import { HotelCardDialogImage } from '../../HotelCardDialogImage'
+import { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
 
-import styles from './standaloneHotelCardDialog.module.css'
 import { Lang } from '@scandic-hotels/common/constants/language'
-import { HotelPin } from '../../../Map/types'
 import { FacilityToIcon } from '../../../FacilityToIcon'
+import { HotelPin } from '../../../Map/types'
 import { HotelPointsRow } from '../../HotelPointsRow'
+import styles from './standaloneHotelCardDialog.module.css'
 
 interface StandaloneHotelCardProps {
   data: HotelPin
@@ -75,7 +75,7 @@ export function StandaloneHotelCardDialog({
         <MaterialIcon icon="close" size={22} color="CurrentColor" />
       </IconButton>
       <HotelCardDialogImage
-        firstImage={image?.url}
+        imageSrc={image?.url}
         altText={image?.alt}
         rating={{ tripAdvisor: ratings?.tripAdvisor ?? null }}
         imageError={imageError}

packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
-import { HotelInfoCard } from './index'
-import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
 import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
-import { Button } from '../Button'
+import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
 import { fn } from 'storybook/test'
+import { Button } from '../Button'
 import { MaterialIcon } from '../Icons/MaterialIcon'
+import { HotelInfoCard } from './index'
 const meta: Meta<typeof HotelInfoCard> = {
   title: 'Components/HotelInfoCard',
   component: HotelInfoCard,
@@ -104,19 +104,16 @@ export const Default: Story = {
       {
         src: './img/GrandHotelBudapest.png',
         alt: 'Grand Hotel Budapest',
-        smallSrc: './img/GrandHotelBudapest.png',
         caption: 'Grand Hotel Budapest',
       },
       {
         src: './img/img1.png',
         alt: 'Image 1',
-        smallSrc: './img/img1.png',
         caption: 'Image 1',
       },
       {
         src: './img/img2.png',
         alt: 'Image 2',
-        smallSrc: './img/img2.png',
         caption: 'Image 2',
       },
     ],

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

@@ -7,8 +7,8 @@ import { useIntl } from 'react-intl'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import Image from '../Image'
 import ImageFallback from '../ImageFallback'
-import { Typography } from '../Typography'
 import Lightbox from '../Lightbox'
+import { Typography } from '../Typography'
 
 import styles from './imageGallery.module.css'
 
@@ -16,7 +16,6 @@ export interface GalleryImage {
   src: string
   alt: string
   caption?: string | null
-  smallSrc?: string | null
 }
 
 type ImageGalleryProps = {
@@ -50,7 +49,7 @@ function ImageGallery({
       }
     : { height, width: height * 1.5 }
 
-  if (!images || images.length === 0 || imageError) {
+  if (!images?.length || imageError) {
     return <ImageFallback />
   }
 

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -10,8 +10,8 @@ import { Typography } from '../../Typography'
 
 import Image from '../../Image'
 
-import styles from './gallery.module.css'
 import { LightboxImage } from '..'
+import styles from './gallery.module.css'
 
 type GalleryProps = {
   images: LightboxImage[]
@@ -164,7 +164,7 @@ export default function Gallery({
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div
-                key={image.smallSrc || image.src}
+                key={image.src}
                 className={styles.thumbnailContainer}
                 initial={{ opacity: 0, x: 50 }}
                 animate={{ opacity: 1, x: 0 }}
@@ -179,7 +179,7 @@ export default function Gallery({
                   })}
                 >
                   <Image
-                    src={image.smallSrc || image.src}
+                    src={image.src}
                     alt={image.alt}
                     fill
                     sizes="200px"
@@ -196,7 +196,7 @@ export default function Gallery({
       <div className={styles.mobileGallery}>
         {images.map((image, index) => (
           <motion.div
-            key={image.smallSrc || image.src}
+            key={image.src}
             className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ''}`}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -211,7 +211,7 @@ export default function Gallery({
               }}
             >
               <Image
-                src={image.smallSrc || image.src}
+                src={image.src}
                 alt={image.alt}
                 fill
                 sizes="100vw"

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

@@ -12,7 +12,6 @@ export type LightboxImage = {
   src: string
   alt: string
   caption?: string | null
-  smallSrc?: string | null
 }
 
 type LightboxProps = {