Merged in fix/SW-2292-new-hotel-header (pull request #2253)

fix(SW-2292): new design for hotel header on enter details

* fix(SW-2292): new design for hotel header on enter details


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx

@@ -18,7 +18,7 @@ export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
     <Button
       onPress={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
       size="Small"
-      variant="Text"
+      variant="Secondary"
       color="Inverted"
       wrapping
       typography="Body/Paragraph/mdBold"

apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css

@@ -28,10 +28,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
   max-width: var(--max-width-page);
-  gap: var(--Space-x05);
+  gap: var(--Space-x2);
-  padding: var(--Space-x3) 0;
+  padding: var(--Space-x3) 0 var(--Space-x4);
   margin: 0 auto;
 }
 
@@ -59,22 +59,21 @@
 }
 
 .address {
-  display: none;
+  text-align: center;
-  flex-wrap: wrap;
+  color: var(--Text-Inverted);
-  column-gap: var(--Space-x15);
-  font-style: normal;
 }
 
 @media (min-width: 768px) {
-  .address {
-    display: flex;
-  }
   .container {
     padding: var(--Space-x3) 0;
+    gap: var(--Space-x3);
   }
   .mobileTitle {
     display: none;
   }
+  .titleContainer {
+    gap: var(--Space-x1);
+  }
   .title {
     display: -webkit-box;
   }

apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx

@@ -1,8 +1,7 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Image from "@/components/Image"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import ToggleSidePeek from "./ToggleSidePeek"
 
@@ -13,7 +12,6 @@ import type { HotelHeaderProps } from "@/types/components/hotelReservation/enter
 export default async function HotelHeader({
   hotelData: { hotel },
 }: HotelHeaderProps) {
-  const intl = await getIntl()
   const image = hotel.hotelContent?.images
 
   const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
@@ -30,7 +28,13 @@ export default async function HotelHeader({
       <div className={styles.wrapper}>
         <div className={styles.container}>
           <div className={styles.titleContainer}>
-            <Title as="h1" level="h1" color="white" className={styles.title}>
+            <Title
+              as="h1"
+              level="h1"
+              color="white"
+              textAlign="center"
+              className={styles.title}
+            >
               {hotel.name}
             </Title>
             <Title
@@ -38,26 +42,13 @@ export default async function HotelHeader({
               level="h1"
               color="white"
               className={styles.mobileTitle}
+              textAlign="center"
             >
               {hotel.name}
             </Title>
-            <div className={styles.address}>
+            <Typography variant="Title/Overline/sm">
-              <Caption color="white">{addressStr}</Caption>
+              <div className={styles.address}>{addressStr}</div>
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            </Typography>
-              <Caption color="white">∙</Caption>
-              <Caption color="white">
-                {intl.formatMessage(
-                  {
-                    defaultMessage: "{number} km to city center",
-                  },
-                  {
-                    number: getSingleDecimal(
-                      hotel.location.distanceToCentre / 1000
-                    ),
-                  }
-                )}
-              </Caption>
-            </div>
           </div>
           <ToggleSidePeek hotelId={hotel.operaId} />
         </div>