Merged in feat/SW-2511-hotel-page-map (pull request #2582)

feat(SW-2511): hotel page map and marker improvements

* feat(SW-2511): update hotel page map

* fix(SW-2511): fix issue with identical id's for POIs


Approved-by: Anton Gunnarsson

apps/scandic-web/components/Maps/Markers/Poi/index.tsx

@@ -9,18 +9,18 @@ export default function PoiMarker({
   group,
   categoryName,
   skipBackground,
-  size = 16,
+  size = "small",
   className = "",
 }: PoiMarkerProps) {
   const iconName = getIconByPoiGroupAndCategory(group, categoryName)
-  const classNames = poiVariants({ group, skipBackground, className })
+  const classNames = poiVariants({ group, skipBackground, size, className })
 
   return iconName ? (
     <span className={classNames}>
       <IconByIconName
         iconName={iconName}
         color={skipBackground ? "Icon/Feedback/Neutral" : "Icon/Inverted"}
-        size={size}
+        size={size === "small" ? 16 : size === "large" ? 24 : 20}
       />
     </span>
   ) : null

apps/scandic-web/components/Maps/Markers/Poi/poi.module.css

@@ -1,30 +1,37 @@
 .icon {
-  width: 24px;
-  height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: var(--Corner-radius-rounded);
-  background-color: var(--UI-Text-Placeholder);
+  background-color: var(--Surface-UI-Fill-Default);
+}
+
+.small {
+  width: var(--Space-x3);
+  height: var(--Space-x3);
+}
+.large {
+  width: var(--Space-x4);
+  height: var(--Space-x4);
 }
 
 .attractions {
-  background-color: var(--Base-Interactive-Surface-Secondary-normal);
+  background-color: var(--Surface-Accent-3);
 }
 .business {
-  background-color: var(--Scandic-Yellow-50);
+  background-color: var(--Surface-Accent-4);
 }
 .location {
-  background-color: var(--UI-Text-Placeholder);
+  background-color: var(--Surface-Feedback-Neutral-Accent);
 }
 .parking {
-  background-color: var(--UI-Text-Active);
+  background-color: var(--Surface-Accent-5);
 }
 .publicTransport {
-  background-color: var(--Base-Interactive-Surface-Tertiary-normal);
+  background-color: var(--Surface-Accent-2);
 }
 .shoppingDining {
-  background-color: var(--Base-Interactive-Surface-Primary-normal);
+  background-color: var(--Surface-Accent-1);
 }
 
 .icon.transparent {

apps/scandic-web/components/Maps/Markers/Poi/variants.ts

@@ -18,8 +18,14 @@ export const poiVariants = cva(styles.icon, {
       true: styles.transparent,
       false: "",
     },
+    size: {
+      small: styles.small,
+      medium: styles.small,
+      large: styles.large,
+    },
   },
   defaultVariants: {
     skipBackground: false,
+    size: "small",
   },
 })