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]

146
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,81 +35,88 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
return ( return (
<article className={styles.card}> <article className={styles.card}>
{image?.imageSizes.small ? (
<Image <Image
src={image?.imageSizes.small || fallbackImage} src={image?.imageSizes.small}
alt={image?.metaData.altText || image?.metaData.altText_En || ""} alt={image?.metaData.altText || image?.metaData.altText_En || ""}
className={styles.image} className={styles.image}
width={386} width={386}
height={200} height={200}
sizes="(min-width: 768px) 386px, 100vw" 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"
/> />
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.roomDetails}
>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Caption color="uiTextPlaceholder">{room.size} m²</Caption> <span>{room.size} m²</span>
</Typography>
</div> </div>
{maxSeatings ? (
<div className={styles.iconText}> <div className={styles.iconText}>
<MaterialIcon <MaterialIcon
icon="person" icon="person"
color="Icon/Interactive/Placeholder" color="Icon/Interactive/Placeholder"
size={16} size={16}
/> />
<Caption color="uiTextPlaceholder"> <Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.roomDetails}
>
<span>
{intl.formatMessage( {intl.formatMessage(
{ {
defaultMessage: "max {seatings} pers", defaultMessage: "max {seatings} pers",
}, },
{ seatings: maxSeatings } { seatings: maxSeatings }
)} )}
</Caption> </span>
</Typography>
</div> </div>
) : null}
</div> </div>
{room.content.texts.descriptions.medium ? ( {room.content.texts.descriptions.medium ? (
<Body color="uiTextHighContrast"> <Typography>
{room.content.texts.descriptions.medium} <p>{room.content.texts.descriptions.medium}</p>
</Body> </Typography>
) : null} ) : null}
{opened && ( {opened && (
<div className={styles.openedInfo}> <table className={styles.openedInfo}>
<div className={styles.rowItem}> <tbody className={styles.rowItem}>
{room.seatings.map((seating, idx) => ( {room.seatings.map((seating, idx) => (
<div <TableRow
key={seating.type} key={seating.type}
className={styles.capacity}
id={String(seating.capacity) + seating.type + idx} id={String(seating.capacity) + seating.type + idx}
> name={translateSeatingType(seating.type, intl)}
<Caption color="uiTextMediumContrast"> value={intl.formatMessage(
{translateSeatingType(seating.type, intl)}
</Caption>
<Caption color="uiTextHighContrast">
{intl.formatMessage(
{ {
defaultMessage: "{number} people", defaultMessage: "{number} people",
}, },
{ number: seating.capacity } { number: seating.capacity }
)} )}
</Caption> />
</div>
))} ))}
</div> </tbody>
<Divider color="Border/Divider/Subtle" /> <Divider color="Border/Divider/Subtle" />
<div className={styles.rowItem}> <tbody className={styles.rowItem}>
<div className={styles.capacity}> <TableRow
<Caption color="uiTextMediumContrast"> name={intl.formatMessage({
{intl.formatMessage({
defaultMessage: "Location in hotel", defaultMessage: "Location in hotel",
})} })}
</Caption> value={intl.formatMessage(
<Caption color="uiTextHighContrast">
{intl.formatMessage(
{ {
defaultMessage: "Floor {floorNumber}", defaultMessage: "Floor {floorNumber}",
}, },
@@ -119,46 +124,31 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
floorNumber: `${room.floorNumber}`, floorNumber: `${room.floorNumber}`,
} }
)} )}
</Caption> />
</div> <TableRow
<div className={styles.capacity}> name={intl.formatMessage({
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
defaultMessage: "Lighting", defaultMessage: "Lighting",
})} })}
</Caption> value={translateRoomLighting(room.lighting, intl)}
<Caption color="uiTextHighContrast"> />
{translateRoomLighting(room.lighting, intl)}
</Caption>
</div>
{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",
})} })}
</Caption> value={`${room.doorHeight} x ${room.doorWidth} m`}
<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",
})} })}
</Caption> value={`${room.length} x ${room.width} x ${room.height} m`}
<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));