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

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

apps/scandic-web/components/ImageFallback/imageFallback.module.css

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

apps/scandic-web/components/ImageFallback/index.tsx

@@ -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>
+  )
+}

apps/scandic-web/components/ImageGallery/imageGallery.module.css

@@ -45,15 +45,3 @@
   object-fit: cover;
   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;
-}

apps/scandic-web/components/ImageGallery/index.tsx

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

apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx

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

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

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