Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Header/header.module.css

@@ -0,0 +1,86 @@
+.header {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.wrapper {
+  position: relative;
+  background: linear-gradient(
+    60deg,
+    rgb(0 0 0 / 25%) 0%,
+    rgb(0 0 0 / 50%) 50%,
+    rgb(0 0 0 / 75%) 100%
+  );
+  width: 100dvw;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: var(--max-width-page);
+  gap: var(--Space-x2);
+  padding: var(--Space-x3) 0 var(--Space-x4);
+  margin: 0 auto;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.mobileTitle {
+  display: -webkit-box;
+}
+
+.mobileTitle,
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.title {
+  display: none;
+}
+
+.address {
+  text-align: center;
+  color: var(--Text-Inverted);
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: var(--Space-x3) 0;
+    gap: var(--Space-x3);
+  }
+  .mobileTitle {
+    display: none;
+  }
+  .titleContainer {
+    gap: var(--Space-x1);
+  }
+  .title {
+    display: -webkit-box;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    padding: var(--Space-x6) 0;
+  }
+}

packages/booking-flow/lib/components/EnterDetails/Header/index.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Image from "@scandic-hotels/design-system/Image"
+import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { HotelDetailsSidePeek } from "../../HotelDetailsSidePeek"
+
+import styles from "./header.module.css"
+
+import type { HotelData } from "@scandic-hotels/trpc/types/hotel"
+
+export type HotelHeaderProps = {
+  hotelData: HotelData & { url: string | null }
+}
+
+export default function HotelHeader({
+  hotelData: { hotel, url, restaurants, additionalData },
+}: HotelHeaderProps) {
+  const image = hotel.hotelContent?.images
+  const intl = useIntl()
+  const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
+
+  return (
+    <header className={styles.header}>
+      <Image
+        className={styles.hero}
+        alt={image.altText || image.altText_En || ""}
+        src={image.src}
+        height={200}
+        width={1196}
+      />
+      <div className={styles.wrapper}>
+        <div className={styles.container}>
+          <div className={styles.titleContainer}>
+            <Title
+              as="h1"
+              level="h1"
+              color="white"
+              textAlign="center"
+              className={styles.title}
+            >
+              {hotel.name}
+            </Title>
+            <Title
+              as="h2"
+              level="h1"
+              color="white"
+              className={styles.mobileTitle}
+              textAlign="center"
+            >
+              {hotel.name}
+            </Title>
+            <Typography variant="Title/Overline/sm">
+              <div className={styles.address}>{addressStr}</div>
+            </Typography>
+          </div>
+
+          <HotelDetailsSidePeek
+            hotel={{ ...hotel, url: url }}
+            restaurants={restaurants}
+            additionalHotelData={additionalData}
+            triggerLabel={intl.formatMessage({
+              defaultMessage: "See hotel details",
+            })}
+            buttonVariant={"secondary"}
+          />
+        </div>
+      </div>
+    </header>
+  )
+}