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