Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

SW-3270 move interactive map to design system or booking flow

* wip

* wip

* merge

* wip

* add support for locales in design-system

* add story for HotelCard

* setup alias

* .

* remove tracking from design-system for hotelcard

* pass isUserLoggedIn

* export design-system-new-deprecated.css from design-system

* Add HotelMarkerByType to Storybook

* Add interactive map to Storybook

* fix reactintl in vitest

* rename env variables

* .

* fix background colors

* add storybook stories for <Link />

* merge

* fix tracking for when clicking 'See rooms' in InteractiveMap

* Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow

* remove deprecated comment


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Map/Markers/PoiMarker/index.tsx

@@ -0,0 +1,41 @@
+import { IconByIconName } from '@scandic-hotels/design-system/Icons/IconByIconName'
+
+import { getIconByPoiGroupAndCategory } from '../utils'
+import { poiVariants } from './variants'
+
+import { VariantProps } from 'class-variance-authority'
+
+export type PointOfInterestGroup =
+  | 'Public transport'
+  | 'Attractions'
+  | 'Business'
+  | 'Location'
+  | 'Parking'
+  | 'Shopping & Dining'
+
+export interface PoiMarkerProps extends VariantProps<typeof poiVariants> {
+  group: PointOfInterestGroup
+  categoryName?: string
+  className?: string
+}
+
+export function PoiMarker({
+  group,
+  categoryName,
+  skipBackground,
+  size = 'small',
+  className = '',
+}: PoiMarkerProps) {
+  const iconName = getIconByPoiGroupAndCategory(group, categoryName)
+  const classNames = poiVariants({ group, skipBackground, size, className })
+
+  return iconName ? (
+    <span className={classNames}>
+      <IconByIconName
+        iconName={iconName}
+        color={skipBackground ? 'Icon/Feedback/Neutral' : 'Icon/Inverted'}
+        size={size === 'small' ? 16 : size === 'large' ? 24 : 20}
+      />
+    </span>
+  ) : null
+}

packages/design-system/lib/components/Map/Markers/PoiMarker/poi.module.css

@@ -0,0 +1,40 @@
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--Corner-radius-rounded);
+  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(--Surface-Accent-3);
+}
+.business {
+  background-color: var(--Surface-Accent-4);
+}
+.location {
+  background-color: var(--Surface-Feedback-Neutral-Accent);
+}
+.parking {
+  background-color: var(--Surface-Accent-5);
+}
+.publicTransport {
+  background-color: var(--Surface-Accent-2);
+}
+.shoppingDining {
+  background-color: var(--Surface-Accent-1);
+}
+
+.icon.transparent {
+  background-color: transparent;
+  padding: 0;
+}

packages/design-system/lib/components/Map/Markers/PoiMarker/variants.ts

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './poi.module.css'
+import { PointOfInterestGroup } from '.'
+
+export const poiVariants = cva(styles.icon, {
+  variants: {
+    group: {
+      ['Attractions']: styles.attractions,
+      ['Business']: styles.business,
+      ['Location']: styles.location,
+      ['Parking']: styles.parking,
+      ['Public transport']: styles.publicTransport,
+      ['Shopping & Dining']: styles.shoppingDining,
+    } satisfies Record<PointOfInterestGroup, string>,
+    skipBackground: {
+      true: styles.transparent,
+      false: '',
+    },
+    size: {
+      small: styles.small,
+      medium: styles.small,
+      large: styles.large,
+    },
+  },
+  defaultVariants: {
+    skipBackground: false,
+    size: 'small',
+  },
+})