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/.storybook/preview.tsx

@@ -1,9 +1,11 @@
 import { withThemeByClassName } from '@storybook/addon-themes'
-
+import { IntlProvider } from 'react-intl'
 import type { Preview, ReactRenderer } from '@storybook/nextjs-vite'
+import { reactIntl } from './reactIntl'
 
 import '../lib/fonts.css'
 import '../lib/style.css'
+import '../lib/design-system-new-deprecated.css'
 
 export const themes = {
   themes: {
@@ -19,8 +21,33 @@ export const themes = {
 }
 
 const preview: Preview = {
-  decorators: [withThemeByClassName<ReactRenderer>(themes)],
+  decorators: [
+    // Theme decorator
+    withThemeByClassName<ReactRenderer>(themes),
+    (Story) => (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <IntlProvider locale="en" {...(reactIntl as any)}>
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+  initialGlobals: {
+    locale: reactIntl.defaultLocale,
+    locales: {
+      en: { icon: '🇬🇧', title: 'English', right: 'EN' },
+      sv: { icon: '🇸🇪', title: 'Svenska', right: 'SV' },
+      da: { icon: '🇩🇰', title: 'Dansk', right: 'DA' },
+      no: { icon: '🇳🇴', title: 'Norsk', right: 'NO' },
+      fi: { icon: '🇫🇮', title: 'Suomi', right: 'FI' },
+      de: { icon: '🇩🇪', title: 'Deutsch', right: 'DE' },
+    },
+    backgrounds: { value: 'scandicSubtle' },
+  },
   parameters: {
+    reactIntl,
+    nextjs: {
+      appDirectory: true,
+    },
     docs: {
       toc: true,
     },
@@ -31,18 +58,18 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      values: [
+      options: {
         // 👇 Scandic
-        { name: 'Scandic Primary', value: '#FAF6F2' },
-        { name: 'Scandic Subtle', value: '#F2ECE6' },
-        { name: 'Scandic Primary Dark', value: '#4D001B' },
+        scandicPrimary: { name: 'Scandic Primary', value: '#FAF6F2' },
+        scandicSubtle: { name: 'Scandic Subtle', value: '#F2ECE6' },
+        scandicPrimaryDark: { name: 'Scandic Primary Dark', value: '#4D001B' },
         // 👇 Default values
-        { name: 'Storybook Dark', value: '#333' },
-        { name: 'Storybook Light', value: '#F7F9F2' },
-      ],
-      default: 'Scandic Primary',
+        storybookDark: { name: 'Storybook Dark', value: '#333' },
+        storybookLight: { name: 'Storybook Light', value: '#F7F9F2' },
+      },
     },
   },
+
   tags: ['autodocs'],
 }