Merged in feat/SW-2038-static-map-button (pull request #2715)

feat(SW-2038): refactor and create wrapper for static map and button

* feat(SW-2038): refactor and create wrapper for static map and button

* feature: use button from design-system over creating a new one

* remove unused fragment

* fix(SW-2038): add removed css

* fix(SW-2038): update fake button component

* fix(SW-2038): move FakeButton to design system


Approved-by: Erik Tiekstra
Approved-by: Joakim Jäderberg

apps/scandic-web/components/HotelReservation/SelectHotel/HotelCount/index.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Preamble from "@scandic-hotels/design-system/Preamble"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
@@ -11,13 +11,15 @@ export default function HotelCount() {
   const resultCount = useHotelFilterStore((state) => state.resultCount)
 
   return (
-    <Preamble>
-      {intl.formatMessage(
-        {
-          defaultMessage: "{amount, plural, one {# hotel} other {# hotels}}",
-        },
-        { amount: resultCount }
-      )}
-    </Preamble>
+    <Typography variant="Title/Subtitle/md">
+      <span>
+        {intl.formatMessage(
+          {
+            defaultMessage: "{amount, plural, one {# hotel} other {# hotels}}",
+          },
+          { amount: resultCount }
+        )}
+      </span>
+    </Typography>
   )
 }

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -1,7 +1,5 @@
 import BookingCodeFilter from "@scandic-hotels/booking-flow/BookingCodeFilter"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
@@ -10,8 +8,8 @@ import HotelCount from "@/components/HotelReservation/SelectHotel/HotelCount"
 import HotelSorter from "@/components/HotelReservation/SelectHotel/HotelSorter"
 import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
 import NoAvailabilityAlert from "@/components/HotelReservation/SelectHotel/NoAvailabilityAlert"
+import { MapWithButtonWrapper } from "@/components/Maps/MapWithButtonWrapper"
 import StaticMap from "@/components/Maps/StaticMap"
-import { getIntl } from "@/i18n"
 
 import { getFiltersFromHotels, type HotelResponse } from "./helpers"
 
@@ -38,8 +36,6 @@ export default async function SelectHotel({
   mapHref,
   title,
 }: SelectHotelProps) {
-  const intl = await getIntl()
-
   const isAllUnavailable = hotels.every(
     (hotel) => hotel.availability.status !== "Available"
   )
@@ -63,7 +59,9 @@ export default async function SelectHotel({
         <div className={styles.headerContent}>
           <div className={styles.title}>
             <div className={styles.cityInformation}>
-              <Subtitle>{title}</Subtitle>
+              <Typography variant="Title/Subtitle/lg">
+                <p>{title}</p>
+              </Typography>
               <HotelCount />
             </div>
             <div className={styles.sorter}>
@@ -78,7 +76,7 @@ export default async function SelectHotel({
         <div className={styles.sideBar}>
           {hotels.length ? (
             <Link className={styles.link} href={mapHref} keepSearchParams>
-              <div className={styles.mapContainer}>
+              <MapWithButtonWrapper>
                 <StaticMap
                   city={city.name}
                   country={isCityWithCountry(city) ? city.country : undefined}
@@ -88,15 +86,7 @@ export default async function SelectHotel({
                   mapType="roadmap"
                   altText={`Map of ${city.name} city center`}
                 />
-                <Typography variant="Body/Supporting text (caption)/smBold">
-                  <span className={styles.mapButton}>
-                    <MaterialIcon icon="map" color="CurrentColor" size={20} />
-                    {intl.formatMessage({
-                      defaultMessage: "See on map",
-                    })}
-                  </span>
-                </Typography>
-              </div>
+              </MapWithButtonWrapper>
             </Link>
           ) : (
             <div className={styles.mapContainer}>

apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css

@@ -8,7 +8,7 @@
 }
 
 .header {
-  padding: var(--Spacing-x3) 0 var(--Spacing-x2);
+  padding: var(--Space-x3) 0 var(--Space-x2);
 }
 
 .headerContent {
@@ -16,13 +16,13 @@
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .cityInformation {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   align-items: baseline;
 }
 
@@ -43,21 +43,11 @@
   display: none;
 }
 
-.buttonContainer {
-  display: flex;
-  gap: var(--Spacing-x2);
-  margin-bottom: var(--Spacing-x3);
-}
-
-.button {
-  flex: 1;
-}
-
 .hotelList {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x3);
 }
 
 .filter {
@@ -65,25 +55,14 @@
 }
 
 .skeletonContainer .title {
-  margin-bottom: var(--Spacing-x3);
-}
-
-.mapButton {
-  display: flex;
-  padding: 10px var(--Space-x2);
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--Corner-radius-rounded);
-  background: var(--Component-Button-Inverted-Fill-Default);
-  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
-  gap: var(--Space-x05);
+  margin-bottom: var(--Space-x3);
 }
 
 @media (min-width: 768px) {
   .main {
-    padding: var(--Spacing-x5) 0;
+    padding: var(--Space-x5) 0;
     flex-direction: row;
-    gap: var(--Spacing-x5);
+    gap: var(--Space-x5);
     flex-wrap: wrap;
   }
 
@@ -93,7 +72,7 @@
 
   .header {
     background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Spacing-x4) 0 var(--Spacing-x3);
+    padding: var(--Space-x4) 0 var(--Space-x3);
   }
 
   .sorter {
@@ -126,35 +105,11 @@
     margin-bottom: var(--Space-x6);
   }
 
-  .mapContainer {
-    display: flex;
-    flex-direction: column;
-    background: var(--Base-Surface-Primary-light-Normal);
-    border-radius: var(--Corner-radius-md);
-    border: 1px solid var(--Base-Border-Subtle);
-    position: relative;
-  }
-
-  .mapButton {
-    position: absolute;
-    bottom: var(--Space-x2);
-    right: var(--Space-x2);
-  }
-
-  .mapButton:hover {
-    background-color: var(--Base-Button-Inverted-Fill-Hover);
-    color: var(--Base-Button-Inverted-On-Fill-Hover);
-  }
-
-  .buttonContainer {
-    display: none;
-  }
-
   .skeletonContainer .title {
     margin-bottom: 0;
   }
 
   .skeletonContainer .sideBar {
-    gap: var(--Spacing-x3);
+    gap: var(--Space-x3);
   }
 }