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/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css

@@ -0,0 +1,46 @@
+.imagePlaceholder {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  background-image:
+    linear-gradient(45deg, #000000 25%, transparent 25%),
+    linear-gradient(-45deg, #000000 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #000000 75%),
+    linear-gradient(-45deg, transparent 75%, #000000 75%);
+  background-size: 120px 120px;
+  background-position:
+    0 0,
+    0 60px,
+    60px -60px,
+    -60px 0;
+}
+
+.imageContainer {
+  position: relative;
+  min-width: 177px;
+  border-radius: var(--Corner-radius-md) 0 0 var(--Corner-radius-md);
+  overflow: hidden;
+}
+
+.imageContainer.top {
+  width: 80px;
+  min-width: 80px;
+  height: 90px;
+  border-radius: var(--Corner-radius-md);
+}
+
+.imageContainer img {
+  object-fit: cover;
+}
+
+.imageContainer .tripAdvisor {
+  position: absolute;
+  left: 7px;
+  top: 7px;
+  border-radius: 2px;
+}
+
+.imageContainer.top .tripAdvisor {
+  left: 4px;
+  top: 4px;
+}

packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx

@@ -0,0 +1,51 @@
+import TripadvisorIcon from '@scandic-hotels/design-system/Icons/TripadvisorIcon'
+import Image from '@scandic-hotels/design-system/Image'
+
+import Chip from '@scandic-hotels/design-system/Chip'
+
+import { hotelCardDialogImageVariants } from './variants'
+
+import styles from './hotelCardDialogImage.module.css'
+
+export type HotelCardDialogImageProps = {
+  firstImage?: string
+  altText?: string
+  rating?: { tripAdvisor?: number | null }
+  imageError: boolean
+  setImageError: (error: boolean) => void
+  position: 'top' | 'left'
+}
+
+export function HotelCardDialogImage({
+  firstImage,
+  altText,
+  rating,
+  imageError,
+  setImageError,
+  position,
+}: HotelCardDialogImageProps) {
+  const classNames = hotelCardDialogImageVariants({ position })
+
+  return (
+    <div className={classNames}>
+      {!firstImage || imageError ? (
+        <div className={styles.imagePlaceholder} />
+      ) : (
+        <Image
+          src={firstImage}
+          alt={altText || ''}
+          fill
+          onError={() => setImageError(true)}
+        />
+      )}
+      {rating?.tripAdvisor && (
+        <div className={styles.tripAdvisor}>
+          <Chip className={styles.tripAdvisor}>
+            <TripadvisorIcon color="Icon/Interactive/Default" />
+            {rating.tripAdvisor}
+          </Chip>
+        </div>
+      )}
+    </div>
+  )
+}

packages/design-system/lib/components/HotelCard/HotelCardDialogImage/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './hotelCardDialogImage.module.css'
+
+export const hotelCardDialogImageVariants = cva(styles.imageContainer, {
+  variants: {
+    position: {
+      top: styles.top,
+      left: styles.left,
+    },
+  },
+  defaultVariants: {
+    position: 'top',
+  },
+})