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/TripAdvisorChip/TripdAdvisorChip.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { TripAdvisorChip } from './index'
+
+const meta: Meta<typeof TripAdvisorChip> = {
+  title: 'Components/TripAdvisorChip',
+  component: TripAdvisorChip,
+  argTypes: {
+    rating: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 5,
+        step: 0.1,
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TripAdvisorChip>
+
+export const PrimaryDefault: Story = {
+  args: {
+    rating: 4.5,
+  },
+}

packages/design-system/lib/components/TripAdvisorChip/index.tsx

@@ -0,0 +1,20 @@
+import Caption from '@scandic-hotels/design-system/Caption'
+import TripadvisorIcon from '@scandic-hotels/design-system/Icons/TripadvisorIcon'
+
+import styles from './tripAdvisorChip.module.css'
+
+type TripAdvisorProps = {
+  rating: number
+}
+
+export function TripAdvisorChip({ rating }: TripAdvisorProps) {
+  return (
+    // Wrapping the chip in a transparent container with some padding to increase the touch target
+    <div className={styles.container}>
+      <div className={styles.tripAdvisor}>
+        <TripadvisorIcon color="Icon/Interactive/Default" />
+        <Caption color="burgundy">{rating}</Caption>
+      </div>
+    </div>
+  )
+}

packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css

@@ -0,0 +1,15 @@
+.container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: var(--Spacing-x2);
+}
+
+.tripAdvisor {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  padding: var(--Spacing-x-quarter) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-sm);
+}