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