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
2025-08-25 11:26:16 +00:00
parent 4f8c51298f
commit c54c1ec540
139 changed files with 2511 additions and 1557 deletions
--- a/packages/design-system/lib/components/FacilityToIcon/FacilityToIcon.stories.tsx
+++ b/packages/design-system/lib/components/FacilityToIcon/FacilityToIcon.stories.tsx
@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
+
+import { FacilityToIcon } from '.'
+import { iconVariantConfig } from '../Icons/variants'
+
+const facilityMapping: Record<string, FacilityEnum> = Object.fromEntries(
+  Object.entries(FacilityEnum).filter(([k]) => isNaN(Number(k)))
+) as Record<string, FacilityEnum>
+
+const colorOptions = Object.keys(iconVariantConfig.variants.color)
+
+const meta: Meta<typeof FacilityToIcon> = {
+  title: 'Components/Facility To Icon',
+  component: FacilityToIcon,
+  argTypes: {
+    id: {
+      control: 'select',
+      options: Object.keys(FacilityEnum)
+        .map((key) => FacilityEnum[key as keyof typeof FacilityEnum])
+        .filter((x) => typeof x === 'string')
+        .toSorted(),
+      mapping: facilityMapping,
+      description: 'Facility identifier (mapped to the corresponding icon)',
+    },
+    color: {
+      control: 'select',
+      options: colorOptions,
+      description: 'Icon color variant',
+    },
+    size: {
+      control: 'number',
+      description: 'Icon pixel size',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof FacilityToIcon>
+
+export const Playground: Story = {
+  args: {
+    id: FacilityEnum.Bar,
+    size: 24,
+    color: 'Icon/Default',
+  },
+}
+
+const exampleFacilities = [
+  FacilityEnum.AirConAirCooling,
+  FacilityEnum.AirportMaxDistance8Km,
+  FacilityEnum.Bar,
+  FacilityEnum.CashFreeHotel,
+  FacilityEnum.ChildrenWelcome,
+  FacilityEnum.Elevator,
+  FacilityEnum.Gym,
+  FacilityEnum.ParkingGarage,
+  FacilityEnum.ParkingOutdoor,
+  FacilityEnum.Pool,
+  FacilityEnum.Tennis1,
+]
+
+export const Examples: Story = {
+  args: {
+    size: 24,
+    color: 'Icon/Default',
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+        gap: 16,
+      }}
+    >
+      {exampleFacilities.map((key) => (
+        <div
+          key={key}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            padding: 8,
+            borderRadius: 8,
+            background: 'var(--ds-color-surface-subtle, #F2ECE6)',
+          }}
+        >
+          <FacilityToIcon id={key} size={args.size} color={args.color} />
+          <span style={{ fontSize: 12 }}>{FacilityEnum[key]}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}