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

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

Browse Source 
Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-09-10 08:29:05 +00:00
parent a5790ee454
commit f04fe467da
35 changed files with 182 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
View File

@@ -45,8 +45,11 @@ function CardContent({ stay }: StayCardProps) {
<article className={styles.stay}>
<Image
className={styles.image}
alt={hotelInformation.hotelContent.images.metaData.altText}
src={hotelInformation.hotelContent.images.imageSizes.small}
alt={
hotelInformation.hotelContent.images.altText ||
hotelInformation.hotelContent.images.altText_En
}
src={hotelInformation.hotelContent.images.src}
width={420}
height={240}
/>

4
apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
View File

@@ -41,8 +41,8 @@ export default async function HotelListingItem({
return (
<article className={styles.container}>
<Image
src={image.imageSizes.large}
alt={image.metaData.altText || image.metaData.altText_En}
src={image.src}
alt={image.altText || image.altText_En}
width={400}
height={300}
sizes="(min-width: 768px) 400px, 100vw"

12
apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
View File

@@ -63,10 +63,12 @@ export default function HotelCardCarousel({
}
function getImage({ hotel }: Pick<HotelListingHotelData, "hotel">) {
return {
src: hotel.galleryImages?.[0]?.imageSizes.large,
alt:
hotel.galleryImages?.[0]?.metaData.altText ||
hotel.galleryImages?.[0]?.metaData.altText_En,
if (hotel.galleryImages?.length) {
const image = hotel.galleryImages[0]
return {
src: image.src,
alt: image.altText || image.altText_En,
}
}
return null
}

12
apps/scandic-web/components/ContentType/DestinationPage/Map/utils.ts
View File

@@ -53,10 +53,12 @@ export function getHotelMapMarkers(hotels: HotelListingHotelData[]) {
}
function getImage({ hotel }: Pick<HotelListingHotelData, "hotel">) {
return {
src: hotel.galleryImages?.[0]?.imageSizes.large,
alt:
hotel.galleryImages?.[0]?.metaData.altText ||
hotel.galleryImages?.[0]?.metaData.altText_En,
if (hotel.galleryImages?.length) {
const image = hotel.galleryImages[0]
return {
src: image.src,
alt: image.altText || image.altText_En,
}
}
return null
}

8
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Images/index.tsx
View File

@@ -17,11 +17,11 @@ export default function SidePeekImages({ images }: SidePeekImagesProps) {
return (
<div className={styles.sidePeekImages}>
{images.map(({ metaData, imageSizes }) => (
{images.map(({ src, altText, altText_En }) => (
<Image
key={imageSizes.tiny}
src={imageSizes.tiny}
alt={metaData.altText}
key={src}
src={src}
alt={altText || altText_En}
height={240}
width={imageWidth}
sizes={sizesString}

4
apps/scandic-web/components/ContentType/HotelSubpage/HeroHeader/index.tsx
View File

@@ -26,8 +26,8 @@ export default async function HeroHeader({
{heroImage ? (
<div className={styles.heroWrapper}>
<Hero
src={heroImage.imageSizes.medium}
alt={heroImage.metaData.altText || ""}
src={heroImage.src}
alt={heroImage.altText || heroImage.altText_En}
/>
</div>
) : null}

4
apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
View File

@@ -20,8 +20,8 @@ export default async function HotelHeader({
<header className={styles.header}>
<Image
className={styles.hero}
alt={image.metaData.altText || image.metaData.altText_En || ""}
src={image.imageSizes.large}
alt={image.altText || image.altText_En || ""}
src={image.src}
height={200}
width={1196}
/>

4
apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
View File

@@ -21,8 +21,8 @@ export default function Promo({
<div className={styles.imageContainer}>
<Image
className={styles.image}
src={image.imageSizes.large}
alt={image.metaData.altText}
src={image.src}
alt={image.altText || image.altText_En}
fill
/>
</div>

11
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
View File

@@ -12,6 +12,7 @@ import { IconButton } from "@scandic-hotels/design-system/IconButton"
import IconChip from "@scandic-hotels/design-system/IconChip"
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 Modal from "@scandic-hotels/design-system/Modal"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
@@ -215,11 +216,11 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
</div>
)}
<div className={styles.imageContainer}>
<Image
src={room?.images[0]?.imageSizes.small ?? ""}
alt={roomName}
fill
/>
{room?.images[0]?.src ? (
<Image src={room.images[0].src} alt={roomName} fill />
) : (
<ImageFallback />
)}
</div>
<div className={styles.details}>
<div className={styles.row}>

19
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import Image from "@scandic-hotels/design-system/Image"
import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
import { useMyStayStore } from "@/stores/my-stay"
@@ -19,13 +20,17 @@ export default function Img() {
return (
<div className={styles.imageContainer}>
<Image
alt={roomName}
className={styles.image}
height={960}
src={image?.imageSizes.small ?? ""}
width={640}
/>
{image?.src ? (
<Image
alt={roomName}
className={styles.image}
height={960}
src={image.src}
width={640}
/>
) : (
<ImageFallback height="640px" />
)}
</div>
)
}

6
apps/scandic-web/components/HotelReservation/MyStay/index.tsx
View File

@@ -168,9 +168,9 @@ export default async function MyStay(props: {
}
const imageSrc =
hotel.hotelContent.images.imageSizes.large ??
additionalData.gallery?.heroImages[0]?.imageSizes.large ??
hotel.galleryImages[0]?.imageSizes.large
hotel.hotelContent.images.src ||
additionalData.gallery?.heroImages[0]?.src ||
hotel.galleryImages[0]?.src
const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
const promoUrl = new URL(`${baseUrl}/${lang}/`)

6
apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
View File

@@ -34,10 +34,10 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
return (
<article className={styles.card}>
{image?.imageSizes.small ? (
{image?.src ? (
<Image
src={image?.imageSizes.small}
alt={image?.metaData.altText || image?.metaData.altText_En || ""}
src={image.src}
alt={image.altText || image.altText_En || ""}
className={styles.image}
width={386}
height={200}