Merged in feature/SW-3327-move-hotel-info-card-to-design-system (pull request #2730)

Feature/SW-3327 move hotel info card to design system

* wip

* wip

* wip

* wip moving hotelinfocard

* add controls for HotelInfoCard in storybook

* merge


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/HotelInfoCard/HotelDescription/hotelDescription.module.css

@@ -0,0 +1,74 @@
+.hotelDescription {
+  overflow: hidden;
+  text-align: left;
+}
+
+.descriptionWrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: var(--Space-x15) 0;
+}
+
+.expanded {
+  display: block;
+  max-height: none;
+  margin: var(--Space-x15) 0;
+}
+
+.expandedContent {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--Space-x2);
+}
+
+.description {
+  display: flex;
+  gap: var(--Space-x025);
+}
+
+.showMoreButton {
+  display: flex;
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+  color: var(--Text-Interactive-Secondary);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--Text-Interactive-Secondary-Hover);
+  }
+}
+
+.facilities {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+  align-items: center;
+}
+
+.facilityList {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--Space-x15);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .descriptionWrapper {
+    display: none;
+  }
+}

packages/design-system/lib/components/HotelInfoCard/HotelDescription/index.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useState } from 'react'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'
+
+import { FacilityToIcon } from '../..//FacilityToIcon'
+import { Typography } from '../../Typography'
+
+import styles from './hotelDescription.module.css'
+import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
+
+export default function HotelDescription({
+  description,
+  facilities,
+}: {
+  description?: string
+  facilities: {
+    id: FacilityEnum
+    name: string
+  }[]
+}) {
+  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}>
+        {facilities?.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>
+    </div>
+  )
+}