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}