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

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}
           />

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;
+  }
+}

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

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);
+  gap: var(--Space-x1);
-  width: min(607px, 100%);
+  align-items: center;
+  text-align: center;
 }
 
 .hotelAddressDescription {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-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;
   align-items: center;
-  gap: var(--Spacing-x1);
+  text-align: center;
 }
 
 .hotelAlert {
-  max-width: var(--max-width-page);
+  display: none;
-  margin: 0 auto;
+}
-  padding-top: var(--Spacing-x-one-and-half);
+
+.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);
+    gap: var(--Space-x1);
-    padding-bottom: var(--Spacing-x-half);
+    padding-bottom: var(--Space-x05);
+    flex-direction: column;
   }
   .facilityTitle {
     display: none;

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">
+            <Typography variant="Title/md">
-              {hotel.name}
+              <h1 className={styles.hotelName}>{hotel.name}</h1>
-            </Title>
+            </Typography>
             <div className={styles.hotelAddressDescription}>
-              <Caption color="uiTextMediumContrast">
+              <Typography variant="Body/Supporting text (caption)/smRegular">
-                {intl.formatMessage(
+                <p className={styles.hotelAddress}>
-                  {
+                  {intl.formatMessage(
-                    defaultMessage:
+                    {
-                      "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
+                      defaultMessage:
-                  },
+                        "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
-                  {
+                    },
-                    address: hotel.address.streetAddress,
+                    {
-                    city: hotel.address.city,
+                      address: hotel.address.streetAddress,
-                    distanceToCityCenterInKm: getSingleDecimal(
+                      city: hotel.address.city,
-                      hotel.location.distanceToCentre / 1000
+                      distanceToCityCenterInKm: getSingleDecimal(
-                    ),
+                        hotel.location.distanceToCentre / 1000
-                  }
+                      ),
-                )}
+                    }
-              </Caption>
+                  )}
-              <Body color="uiTextHighContrast">
+                </p>
-                {hotel.hotelContent.texts.descriptions?.medium}
+              </Typography>
-              </Body>
+              <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}>
+              {sortedFacilities?.map((facility) => (
-                {intl.formatMessage({
+                <div className={styles.facilitiesItem} key={facility.id}>
-                  defaultMessage: "At the hotel",
-                })}
-              </Body>
-              {sortedFacilities?.map((facility) => {
-                const Icon = (
                   <FacilityToIcon id={facility.id} color="Icon/Default" />
-                )
+                  <Typography variant="Body/Supporting text (caption)/smRegular">
-                return (
+                    <p>{facility.name}</p>
-                  <div className={styles.facilitiesItem} key={facility.id}>
+                  </Typography>
-                    {Icon && Icon}
+                </div>
-                    <Body color="uiTextHighContrast">{facility.name}</Body>
+              ))}
-                  </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">
+              <Typography variant="Body/Supporting text (caption)/smRegular">
-                <SkeletonShimmer width={"40ch"} />
+                <SkeletonShimmer width="40ch" />
-              </Caption>
+              </Typography>
-              <Body color="uiTextHighContrast">
+              <Typography variant="Body/Paragraph/mdRegular">
-                <SkeletonShimmer width={"60ch"} />
+                <p>
-                <SkeletonShimmer width={"58ch"} />
+                  <SkeletonShimmer width="60ch" />
-                <SkeletonShimmer width={"45ch"} />
+                  <SkeletonShimmer width="58ch" />
-              </Body>
+                  <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}>
+              <Typography
-                <SkeletonShimmer width={"20ch"} />
+                variant="Body/Paragraph/mdBold"
-              </Body>
+                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>

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
 }