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

Merged in fix/SW-3007-meeting-image-max-seatings (pull request #2528)

Browse Source 
fix(SW-3007): Added fallback image and check if maxSeatings exists

* fix(SW-3007): Added fallback image and check if maxSeatings exists

* fix(SW-3007): use image fallback component

* fix(SW-3007):  change to new tokens

* fix(SW-3007): change to table structure


Approved-by: Hrishikesh Vaipurkar
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-07-08 12:53:06 +00:00
committed by Matilda Landström
parent 19b58be654
commit 899439ead8
6 changed files with 173 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/scandic-web/components/ImageFallback/imageFallback.module.css Normal file
View File

@@ -0,0 +1,8 @@
.imageFallback {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 100%;
background-color: var(--Surface-Feedback-Neutral);
}

23
apps/scandic-web/components/ImageFallback/index.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import styles from "./imageFallback.module.css"
interface ImageFallbackProps {
width?: string
height?: string
}
export default function ImageFallback({
width = "100%",
height = "200px",
}: ImageFallbackProps) {
return (
<div className={styles.imageFallback} style={{ width, height }}>
<MaterialIcon
icon="imagesmode"
size={32}
color="Icon/Interactive/Disabled"
/>
</div>
)
}

12
apps/scandic-web/components/ImageGallery/imageGallery.module.css
View File

@@ -45,15 +45,3 @@
object-fit: cover; object-fit: cover;
border-radius: inherit; border-radius: inherit;
} }
.imagePlaceholder {
height: 100%;
min-height: 190px;
width: 100%;
background-color: var(--Surface-Feedback-Neutral);
border-radius: inherit;
color: var(--Icon-Interactive-Disabled);
display: flex;
align-items: center;
justify-content: center;
}

8
apps/scandic-web/components/ImageGallery/index.tsx
View File

@@ -10,6 +10,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image" import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox" import Lightbox from "@/components/Lightbox"
import ImageFallback from "../ImageFallback"
import styles from "./imageGallery.module.css" import styles from "./imageGallery.module.css"
import type { ImageGalleryProps } from "@/types/components/imageGallery" import type { ImageGalleryProps } from "@/types/components/imageGallery"
@@ -29,11 +31,7 @@ function ImageGallery({
const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 } const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
if (!images || images.length === 0 || imageError) { if (!images || images.length === 0 || imageError) {
return ( return <ImageFallback />
<div className={styles.imagePlaceholder}>
<MaterialIcon icon="imagesmode" size={32} color="CurrentColor" />
</div>
)
} }
const firstImage = images[0] const firstImage = images[0]

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

@@ -2,13 +2,12 @@
import { useState } from "react" import { useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider" import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Subtitle from "@scandic-hotels/design-system/Subtitle" import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image" import Image from "@/components/Image"
import ImageFallback from "@/components/ImageFallback"
import ShowMoreButton from "../ShowMoreButton" import ShowMoreButton from "../ShowMoreButton"
import { translateRoomLighting, translateSeatingType } from "./utils" import { translateRoomLighting, translateSeatingType } from "./utils"
@@ -24,11 +23,10 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
const intl = useIntl() const intl = useIntl()
const [opened, setOpened] = useState(false) const [opened, setOpened] = useState(false)
const roomSeatings = room.seatings.map((seating) => { const roomSeatings = room.seatings
return seating.capacity .filter(({ capacity }) => !!capacity)
}) .map(({ capacity }) => capacity)
const maxSeatings = roomSeatings.length ? Math.max(...roomSeatings) : null
const maxSeatings = Math.max(...roomSeatings)
const image = room.content.images.at(0) const image = room.content.images.at(0)
function handleShowMore() { function handleShowMore() {
@@ -37,128 +35,120 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
return ( return (
<article className={styles.card}> <article className={styles.card}>
<Image {image?.imageSizes.small ? (
src={image?.imageSizes.small || fallbackImage} <Image
alt={image?.metaData.altText || image?.metaData.altText_En || ""} src={image?.imageSizes.small}
className={styles.image} alt={image?.metaData.altText || image?.metaData.altText_En || ""}
width={386} className={styles.image}
height={200} width={386}
sizes="(min-width: 768px) 386px, 100vw" height={200}
/> sizes="(min-width: 768px) 386px, 100vw"
/>
) : (
<ImageFallback />
)}
<div className={styles.content}> <div className={styles.content}>
<Subtitle textAlign="left" type="two" color="black"> <Typography variant="Title/Subtitle/lg">
{room.name} <h3>{room.name}</h3>
</Subtitle> </Typography>
<div className={styles.capacity}> <div className={styles.capacity}>
<div className={styles.iconText}> <div className={styles.iconText}>
<MaterialIcon <MaterialIcon
icon="straighten" icon="straighten"
color="Icon/Interactive/Placeholder" color="Icon/Interactive/Placeholder"
/> />
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} <Typography
<Caption color="uiTextPlaceholder">{room.size} m²</Caption> variant="Body/Supporting text (caption)/smRegular"
className={styles.roomDetails}
>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>{room.size} m²</span>
</Typography>
</div> </div>
<div className={styles.iconText}> {maxSeatings ? (
<MaterialIcon <div className={styles.iconText}>
icon="person" <MaterialIcon
color="Icon/Interactive/Placeholder" icon="person"
size={16} color="Icon/Interactive/Placeholder"
/> size={16}
<Caption color="uiTextPlaceholder"> />
{intl.formatMessage( <Typography
{ variant="Body/Supporting text (caption)/smRegular"
defaultMessage: "max {seatings} pers", className={styles.roomDetails}
}, >
{ seatings: maxSeatings } <span>
)}
</Caption>
</div>
</div>
{room.content.texts.descriptions.medium ? (
<Body color="uiTextHighContrast">
{room.content.texts.descriptions.medium}
</Body>
) : null}
{opened && (
<div className={styles.openedInfo}>
<div className={styles.rowItem}>
{room.seatings.map((seating, idx) => (
<div
key={seating.type}
className={styles.capacity}
id={String(seating.capacity) + seating.type + idx}
>
<Caption color="uiTextMediumContrast">
{translateSeatingType(seating.type, intl)}
</Caption>
<Caption color="uiTextHighContrast">
{intl.formatMessage(
{
defaultMessage: "{number} people",
},
{ number: seating.capacity }
)}
</Caption>
</div>
))}
</div>
<Divider color="Border/Divider/Subtle" />
<div className={styles.rowItem}>
<div className={styles.capacity}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
defaultMessage: "Location in hotel",
})}
</Caption>
<Caption color="uiTextHighContrast">
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: "Floor {floorNumber}", defaultMessage: "max {seatings} pers",
}, },
{ { seatings: maxSeatings }
floorNumber: `${room.floorNumber}`,
}
)} )}
</Caption> </span>
</div> </Typography>
<div className={styles.capacity}> </div>
<Caption color="uiTextMediumContrast"> ) : null}
{intl.formatMessage({ </div>
defaultMessage: "Lighting", {room.content.texts.descriptions.medium ? (
})} <Typography>
</Caption> <p>{room.content.texts.descriptions.medium}</p>
<Caption color="uiTextHighContrast"> </Typography>
{translateRoomLighting(room.lighting, intl)} ) : null}
</Caption> {opened && (
</div> <table className={styles.openedInfo}>
<tbody className={styles.rowItem}>
{room.seatings.map((seating, idx) => (
<TableRow
key={seating.type}
id={String(seating.capacity) + seating.type + idx}
name={translateSeatingType(seating.type, intl)}
value={intl.formatMessage(
{
defaultMessage: "{number} people",
},
{ number: seating.capacity }
)}
/>
))}
</tbody>
<Divider color="Border/Divider/Subtle" />
<tbody className={styles.rowItem}>
<TableRow
name={intl.formatMessage({
defaultMessage: "Location in hotel",
})}
value={intl.formatMessage(
{
defaultMessage: "Floor {floorNumber}",
},
{
floorNumber: `${room.floorNumber}`,
}
)}
/>
<TableRow
name={intl.formatMessage({
defaultMessage: "Lighting",
})}
value={translateRoomLighting(room.lighting, intl)}
/>
{room.doorHeight && room.doorWidth ? ( {room.doorHeight && room.doorWidth ? (
<div className={styles.capacity}> <TableRow
<Caption color="uiTextMediumContrast"> name={intl.formatMessage({
{intl.formatMessage({ defaultMessage: "Access size",
defaultMessage: "Access size", })}
})} value={`${room.doorHeight} x ${room.doorWidth} m`}
</Caption> />
<Caption color="uiTextHighContrast">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{room.doorHeight} x {room.doorWidth} m
</Caption>
</div>
) : null} ) : null}
{room.length && room.width && room.height ? ( {room.length && room.width && room.height ? (
<div className={styles.capacity}> <TableRow
<Caption color="uiTextMediumContrast"> name={intl.formatMessage({
{intl.formatMessage({ defaultMessage: "Dimensions",
defaultMessage: "Dimensions", })}
})} value={`${room.length} x ${room.width} x ${room.height} m`}
</Caption> />
<Caption color="uiTextHighContrast">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{room.length} x {room.width} x {room.height} m
</Caption>
</div>
) : null} ) : null}
</div> </tbody>
</div> </table>
)} )}
<ShowMoreButton <ShowMoreButton
intent="secondary" intent="secondary"
@@ -170,5 +160,21 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
) )
} }
const fallbackImage = function TableRow({
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" name,
value,
id,
}: {
name: string
value: string
id?: string
}) {
return (
<Typography variant="Body/Supporting text (caption)/smRegular">
<tr className={styles.capacity} id={id}>
<th className={styles.leftColumn}>{name}</th>
<td>{value}</td>
</tr>
</Typography>
)
}

24
apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/meetingRoomCard.module.css
View File

@@ -10,26 +10,27 @@
.capacity { .capacity {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x1); gap: var(--Space-x1);
text-align: left;
} }
.iconText { .iconText {
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
align-items: center; align-items: center;
} }
.rowItem { .rowItem {
display: grid; display: grid;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
} }
.openedInfo { .openedInfo {
background-color: var(--Base-Surface-Secondary-light-Normal); background-color: var(--Base-Surface-Secondary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x2); padding: var(--Space-x2);
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Space-x2);
} }
.image { .image {
@@ -40,12 +41,21 @@
.content { .content {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Space-x2);
padding: var(--Spacing-x2); padding: var(--Space-x2);
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
flex-grow: 1; flex-grow: 1;
} }
.roomDetails {
color: var(--Text-Tertiary);
}
.leftColumn {
color: var(--Text-Secondary);
font-weight: inherit;
}
@media (min-width: 1367px) { @media (min-width: 1367px) {
.card:not(.alwaysStack) .ctaContainer { .card:not(.alwaysStack) .ctaContainer {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-columns: repeat(auto-fit, minmax(0, 1fr));