Merged in feat/SW-1549-map-improvements (pull request #1783)

Feat/SW-1549 map improvements * fix: imported new icon * refactor: rename component and set map handling to 'greedy' * fix: show cards for 3s after hover * refactor: update styles and added HotelPin component * fix: change from close to back icon * refactor: update to only use 1 state value for active pin and card * fix: add click handler when dialog is opened * fix: performance fixes for the dialog carousel * fix: added border * fix: clear timeout on mouseenter * fix: changed to absolute import * fix: moved hover state into the store * fix: renamed store actions Approved-by: Michael Zetterberg
2025-04-15 13:23:23 +00:00
parent 57cd2f6a7f
commit 9a9789e736
27 changed files with 288 additions and 261 deletions
@@ -0,0 +1,32 @@
+.pin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Spacing-x-half) var(--Spacing-x1) var(--Spacing-x-half)
+    var(--Spacing-x-half);
+  border: 2px solid var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  gap: var(--Spacing-x1);
+  width: max-content;
+}
+
+.pin.active {
+  background-color: var(--Primary-Dark-Surface-Normal);
+  color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.pinIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--Surface-Brand-Primary-2-Default);
+}
+
+.pin.active .pinIcon {
+  background: var(--Base-Surface-Primary-light-Normal);
+}
@@ -0,0 +1,46 @@
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import HotelMarker from "@/components/Maps/Markers/HotelMarker"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./hotelPin.module.css"
+
+interface HotelPinProps {
+  isActive: boolean
+  hotelPrice: number | null
+  currency: string
+}
+
+export default function HotelPin({
+  isActive,
+  hotelPrice,
+  currency,
+}: HotelPinProps) {
+  const intl = useIntl()
+  const isNotAvailable = !hotelPrice
+
+  return (
+    <div
+      className={`${styles.pin} ${isActive ? styles.active : ""}`}
+      data-hotelpin
+    >
+      <span className={styles.pinIcon}>
+        {isNotAvailable ? (
+          <MaterialIcon
+            icon="calendar_clock"
+            size={16}
+            color={isActive ? "Icon/Interactive/Default" : "Icon/Inverted"}
+          />
+        ) : (
+          <HotelMarker width={16} color={isActive ? "burgundy" : "white"} />
+        )}
+      </span>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>{isNotAvailable ? "—" : formatPrice(intl, hotelPrice, currency)}</p>
+      </Typography>
+    </div>
+  )
+}