Merged in feat/SW-475-enter-details-header (pull request #630)

Feat/SW-475 enter details header

* feat(SW-475): updated hotel mock data to reflect api

* feat(SW-475): Added hotel selection header with sidepeek buttons

* fix(SW-475): fixes from PR

* fix(SW-475): changed intl string


Approved-by: Arvid Norlin

components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/hotelDetailSidePeek.module.css

@@ -0,0 +1,4 @@
+.buttons {
+  display: flex;
+  gap: var(--Spacing-x3);
+}

components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/index.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
+import Button from "@/components/TempDesignSystem/Button"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+
+import styles from "./hotelDetailSidePeek.module.css"
+
+export default function HotelDetailSidePeek() {
+  const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+
+  function toggleSidePeek() {
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <>
+      <div className={styles.buttons}>
+        <Button
+          variant="icon"
+          theme="base"
+          intent="text"
+          wrapping
+          onClick={toggleSidePeek}
+        >
+          {intl.formatMessage({
+            id: "See hotel details",
+          })}
+          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
+        </Button>
+        <Button
+          variant="icon"
+          theme="base"
+          intent="text"
+          wrapping
+          onClick={toggleSidePeek}
+        >
+          {intl.formatMessage({
+            id: "Show all amenities",
+          })}
+          <ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
+        </Button>
+      </div>
+      <SidePeek
+        contentKey="hotel-detail-side-peek"
+        title="Hotel Details"
+        isOpen={isOpen}
+        handleClose={() => setIsOpen(false)}
+      >
+        <div>TBD</div>
+      </SidePeek>
+    </>
+  )
+}

components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css

@@ -0,0 +1,52 @@
+.hotelSelectionHeader {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  justify-content: center;
+  gap: var(--Spacing-x3);
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--Spacing-x1);
+}
+
+.descriptionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.address {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  font-style: normal;
+}
+
+.dividerContainer {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .hotelSelectionHeader {
+    flex-direction: row;
+    padding: var(--Spacing-x4) var(--Spacing-x5);
+    gap: var(--Spacing-x6);
+  }
+
+  .titleContainer > h1 {
+    white-space: nowrap;
+  }
+
+  .dividerContainer {
+    display: block;
+  }
+
+  .address {
+    gap: var(--Spacing-x3);
+  }
+}

components/HotelReservation/HotelSelectionHeader/index.tsx

@@ -0,0 +1,52 @@
+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 HotelDetailSidePeek from "./HotelDetailSidePeek"
+
+import styles from "./hotelSelectionHeader.module.css"
+
+import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
+
+export default async function HotelSelectionHeader({
+  hotel,
+}: HotelSelectionHeaderProps) {
+  const intl = await getIntl()
+
+  return (
+    <header className={styles.hotelSelectionHeader}>
+      <div className={styles.titleContainer}>
+        <Title as="h3" level="h1">
+          {hotel.name}
+        </Title>
+        <address className={styles.address}>
+          <Caption color="textMediumContrast">
+            {hotel.address.streetAddress}, {hotel.address.city}
+          </Caption>
+          <div>
+            <Divider variant="vertical" color="subtle" />
+          </div>
+          <Caption color="textMediumContrast">
+            {intl.formatMessage(
+              {
+                id: "Distance to city centre",
+              },
+              { number: hotel.location.distanceToCentre }
+            )}
+          </Caption>
+        </address>
+      </div>
+      <div className={styles.dividerContainer}>
+        <Divider variant="vertical" color="subtle" />
+      </div>
+      <div className={styles.descriptionContainer}>
+        <Body color="textHighContrast">
+          {hotel.hotelContent.texts.descriptions.short}
+        </Body>
+        <HotelDetailSidePeek />
+      </div>
+    </header>
+  )
+}