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/HotelPointsRow/hotelPointsRow.module.css

@@ -0,0 +1,6 @@
+.poinstRow {
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: baseline;
+  color: var(--Text-Default);
+}

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

@@ -0,0 +1,43 @@
+import { useIntl } from 'react-intl'
+
+import Caption from '@scandic-hotels/design-system/Caption'
+import Subtitle from '@scandic-hotels/design-system/Subtitle'
+
+import styles from './hotelPointsRow.module.css'
+
+export type PointsRowProps = {
+  pointsPerStay: number
+  additionalPricePerStay?: number
+  additionalPriceCurrency?: string
+}
+export function HotelPointsRow({
+  pointsPerStay,
+  additionalPricePerStay,
+  additionalPriceCurrency,
+}: PointsRowProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.poinstRow}>
+      <Subtitle type="two" color="uiTextHighContrast">
+        {pointsPerStay}
+      </Subtitle>
+      <Caption color="uiTextHighContrast">
+        {intl.formatMessage({
+          defaultMessage: 'Points',
+        })}
+      </Caption>
+      {additionalPricePerStay ? (
+        <>
+          {'+'}
+          <Subtitle type="two" color="uiTextHighContrast">
+            {additionalPricePerStay}
+          </Subtitle>
+          <Caption color="uiTextHighContrast">
+            {additionalPriceCurrency}
+          </Caption>
+        </>
+      ) : null}
+    </div>
+  )
+}