Merged in fix/SW-2629-hotelCard-new-design-mobile (pull request #2132)

fix(SW-2629): add new design for mobile * fix(SW-2629): add new design for mobile * fix(SW-2629): remove redundant brackets * fix(SW-2629): pr comments * fix(SW-2629): hydration error Approved-by: Christian Andolf
2025-05-20 13:33:17 +00:00
parent 6634bfa93f
commit a560f49c21
6 changed files with 305 additions and 93 deletions
--- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
@@ -168,7 +168,6 @@ function HotelCard({
              defaultMessage: "See hotel details",
            })}
            hotelId={hotel.operaId}
-            hotel={hotel}
            showCTA={true}
            sidePeekKey={SidePeekEnum.hotelDetails}
          />
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/hotelDescription.module.css
@@ -0,0 +1,75 @@
+.hotelDescription {
+  overflow: hidden;
+}
+
+.descriptionWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.expanded {
+  display: block;
+  max-height: none;
+}
+
+.expandedContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: var(--Space-x2);
+}
+
+.description {
+  display: flex;
+  gap: var(--Space-x025);
+}
+
+.showMoreButton {
+  display: flex;
+  align-items: flex-end;
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+  color: var(--Text-Interactive-Secondary);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--Text-Interactive-Hover-Secondary);
+  }
+}
+
+.facilities {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+  align-items: center;
+}
+
+.facilityList {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--Space-x15);
+  padding-bottom: var(--Space-x2);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .descriptionWrapper {
+    display: none;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import ReadMore from "@/components/HotelReservation/ReadMore"
+import Alert from "@/components/TempDesignSystem/Alert"
+
+import styles from "./hotelDescription.module.css"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import type { Hotel } from "@/types/hotel"
+
+export default function HotelDescription({
+  description,
+  hotel,
+  sortedFacilities,
+}: {
+  description?: string
+  hotel: Hotel
+  sortedFacilities: Hotel["detailedFacilities"]
+}) {
+  const intl = useIntl()
+
+  const [expanded, setExpanded] = useState(false)
+
+  const handleToggle = () => {
+    setExpanded((prev) => !prev)
+  }
+
+  const textShowMore = intl.formatMessage({
+    defaultMessage: "Show more",
+  })
+
+  const textShowLess = intl.formatMessage({
+    defaultMessage: "Show less",
+  })
+
+  return (
+    <div className={styles.descriptionWrapper}>
+      <div className={styles.facilityList}>
+        {sortedFacilities?.map((facility) => (
+          <div className={styles.facilitiesItem} key={facility.id}>
+            <FacilityToIcon id={facility.id} color="Icon/Default" />
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>{facility.name}</p>
+            </Typography>
+          </div>
+        ))}
+      </div>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p
+          className={`${styles.hotelDescription} ${
+            expanded ? styles.expanded : styles.collapsed
+          }`}
+        >
+          {description}
+        </p>
+      </Typography>
+      <Typography variant="Link/md">
+        <ButtonRAC className={styles.showMoreButton} onPress={handleToggle}>
+          {expanded ? textShowLess : textShowMore}
+        </ButtonRAC>
+      </Typography>
+
+      {expanded && (
+        <div className={styles.expandedContent}>
+          <ReadMore
+            label={intl.formatMessage({
+              defaultMessage: "See all amenities",
+            })}
+            hotelId={hotel.operaId}
+            showCTA={false}
+            sidePeekKey={SidePeekEnum.amenities}
+          />
+          {hotel.specialAlerts.map((alert) => (
+            <Alert
+              key={alert.id}
+              type={alert.type}
+              heading={alert.heading}
+              text={alert.text}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
@@ -1,21 +1,29 @@
 .container {
  background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x3) 0;
+  padding: var(--Space-x3) 0;
 }

+.hotelName {
+  color: var(--Text-Heading);
+}
+
+.hotelAddress {
+  color: var(--Text-Tertiary);
+}
 .wrapper {
  display: flex;
  margin: 0 auto;
  max-width: var(--max-width-page);
  position: relative;
  flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
+}
+.hotelDescription {
+  display: none;
 }
-
 .imageWrapper {
  position: relative;
  height: 200px;
-  max-width: 360px;
  width: 100%;
  border-radius: var(--Corner-radius-md);
 }
@@ -23,77 +31,111 @@
 .hotelContent {
  display: flex;
  flex-direction: column;
+  align-items: center;
 }

 .hotelInformation {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x1);
-  width: min(607px, 100%);
+  gap: var(--Space-x1);
+  align-items: center;
+  text-align: center;
 }

 .hotelAddressDescription {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x2);
-}
-
-.facilities {
-  padding: var(--Spacing-x3) 0 var(--Spacing-x-quarter);
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.facilityList {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--Spacing-x-one-and-half);
-  padding-bottom: var(--Spacing-x1);
-}
-
-.facilitiesItem {
-  display: flex;
+  gap: var(--Space-x2);
  align-items: center;
-  gap: var(--Spacing-x1);
+  text-align: center;
 }

 .hotelAlert {
-  max-width: var(--max-width-page);
-  margin: 0 auto;
-  padding-top: var(--Spacing-x-one-and-half);
+  display: none;
+}
+
+.facilities {
+  display: none;
 }

@media screen and (min-width: 768px) {
  .container {
-    padding: var(--Spacing-x4) 0;
+    padding: var(--Space-x4) 0;
  }
 }

@media screen and (min-width: 1367px) {
  .container {
-    padding: var(--Spacing-x4) var(--Spacing-x5);
+    padding: var(--Space-x4) var(--Space-x5);
+  }
+  .hotelDescription {
+    display: block;
+  }
+
+  .hotelAlert {
+    display: block;
+    max-width: var(--max-width-page);
+    margin: 0 auto;
+    padding-top: var(--Space-x15);
+  }
+
+  .facilities {
+    display: flex;
+    flex-direction: column;
+    padding: var(--Space-x3) 0 var(--Space-x025);
+    gap: var(--Space-x15);
+    align-items: center;
+  }
+
+  .facilityList {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: var(--Space-x15);
+    padding-bottom: var(--Space-x1);
+  }
+
+  .facilitiesItem {
+    display: flex;
+    align-items: center;
+    gap: var(--Space-x1);
+  }
+
+  .imageWrapper {
+    max-width: 360px;
  }

  .hotelContent {
-    gap: var(--Spacing-x6);
+    gap: var(--Space-x6);
+    align-items: normal;
  }

  .hotelInformation {
-    padding-right: var(--Spacing-x3);
+    padding-right: var(--Space-x3);
+    width: min(607px, 100%);
+    align-items: normal;
+    text-align: left;
+  }
+
+  .hotelAddressDescription {
+    align-items: normal;
+    text-align: left;
  }

  .wrapper {
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
    flex-direction: row;
  }

  .facilities {
-    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-half);
+    padding: var(--Space-x3) var(--Space-x3) var(--Space-x05);
  }

  .facilityList {
-    gap: var(--Spacing-x1);
-    padding-bottom: var(--Spacing-x-half);
+    gap: var(--Space-x1);
+    padding-bottom: var(--Space-x05);
+    flex-direction: column;
  }
  .facilityTitle {
    display: none;
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -1,17 +1,17 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Alert from "@/components/TempDesignSystem/Alert"
 import Divider from "@/components/TempDesignSystem/Divider"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"

 import ReadMore from "../../ReadMore"
 import TripAdvisorChip from "../../TripAdvisorChip"
+import HotelDescription from "./HotelDescription"

 import styles from "./hotelInfoCard.module.css"

@@ -38,56 +38,56 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
        </div>
        <div className={styles.hotelContent}>
          <div className={styles.hotelInformation}>
-            <Title as="h2" textTransform="uppercase">
-              {hotel.name}
-            </Title>
+            <Typography variant="Title/md">
+              <h1 className={styles.hotelName}>{hotel.name}</h1>
+            </Typography>
            <div className={styles.hotelAddressDescription}>
-              <Caption color="uiTextMediumContrast">
-                {intl.formatMessage(
-                  {
-                    defaultMessage:
-                      "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
-                  },
-                  {
-                    address: hotel.address.streetAddress,
-                    city: hotel.address.city,
-                    distanceToCityCenterInKm: getSingleDecimal(
-                      hotel.location.distanceToCentre / 1000
-                    ),
-                  }
-                )}
-              </Caption>
-              <Body color="uiTextHighContrast">
-                {hotel.hotelContent.texts.descriptions?.medium}
-              </Body>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p className={styles.hotelAddress}>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage:
+                        "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
+                    },
+                    {
+                      address: hotel.address.streetAddress,
+                      city: hotel.address.city,
+                      distanceToCityCenterInKm: getSingleDecimal(
+                        hotel.location.distanceToCentre / 1000
+                      ),
+                    }
+                  )}
+                </p>
+              </Typography>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p className={styles.hotelDescription}>
+                  {hotel.hotelContent.texts.descriptions?.medium}
+                </p>
+              </Typography>
+              <HotelDescription
+                description={hotel.hotelContent.texts.descriptions?.medium}
+                hotel={hotel}
+                sortedFacilities={sortedFacilities}
+              />
            </div>
          </div>
          <Divider color="subtle" variant="vertical" />
          <div className={styles.facilities}>
            <div className={styles.facilityList}>
-              <Body textTransform="bold" className={styles.facilityTitle}>
-                {intl.formatMessage({
-                  defaultMessage: "At the hotel",
-                })}
-              </Body>
-              {sortedFacilities?.map((facility) => {
-                const Icon = (
+              {sortedFacilities?.map((facility) => (
+                <div className={styles.facilitiesItem} key={facility.id}>
                  <FacilityToIcon id={facility.id} color="Icon/Default" />
-                )
-                return (
-                  <div className={styles.facilitiesItem} key={facility.id}>
-                    {Icon && Icon}
-                    <Body color="uiTextHighContrast">{facility.name}</Body>
-                  </div>
-                )
-              })}
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
+                    <p>{facility.name}</p>
+                  </Typography>
+                </div>
+              ))}
            </div>
            <ReadMore
              label={intl.formatMessage({
                defaultMessage: "See all amenities",
              })}
              hotelId={hotel.operaId}
-              hotel={hotel}
              showCTA={false}
              sidePeekKey={SidePeekEnum.amenities}
            />
@@ -113,38 +113,43 @@ export function HotelInfoCardSkeleton() {
    <article className={styles.container}>
      <section className={styles.wrapper}>
        <div className={styles.imageWrapper}>
-          <SkeletonShimmer height={"100%"} width={"100%"} />
+          <SkeletonShimmer height="100%" width="100%" />
        </div>
        <div className={styles.hotelContent}>
          <div className={styles.hotelInformation}>
-            <SkeletonShimmer width={"60ch"} height={"40px"} />
+            <SkeletonShimmer width="60ch" height="40px" />
            <div className={styles.hotelAddressDescription}>
-              <Caption color="uiTextMediumContrast">
-                <SkeletonShimmer width={"40ch"} />
-              </Caption>
-              <Body color="uiTextHighContrast">
-                <SkeletonShimmer width={"60ch"} />
-                <SkeletonShimmer width={"58ch"} />
-                <SkeletonShimmer width={"45ch"} />
-              </Body>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <SkeletonShimmer width="40ch" />
+              </Typography>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p>
+                  <SkeletonShimmer width="60ch" />
+                  <SkeletonShimmer width="58ch" />
+                  <SkeletonShimmer width="45ch" />
+                </p>
+              </Typography>
            </div>
          </div>
          <Divider color="subtle" variant="vertical" />
          <div className={styles.facilities}>
            <div className={styles.facilityList}>
-              <Body textTransform="bold" className={styles.facilityTitle}>
-                <SkeletonShimmer width={"20ch"} />
-              </Body>
+              <Typography
+                variant="Body/Paragraph/mdBold"
+                className={styles.facilityTitle}
+              >
+                <SkeletonShimmer width="20ch" />
+              </Typography>
              {[1, 2, 3, 4, 5]?.map((id) => {
                return (
                  <div className={styles.facilitiesItem} key={id}>
-                    <SkeletonShimmer width={"10ch"} />
+                    <SkeletonShimmer width="10ch" />
                  </div>
                )
              })}
            </div>
            <div className={styles.hotelAlert}>
-              <SkeletonShimmer width={"18ch"} />
+              <SkeletonShimmer width="18ch" />
            </div>
          </div>
        </div>
--- a/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts
@@ -14,7 +14,6 @@ export enum AvailabilityEnum {
 export interface ReadMoreProps {
  label: string
  hotelId: string
-  hotel: Hotel
  showCTA: boolean
  sidePeekKey: SidePeekEnum
 }