Merged in feature/SW-3327-move-hotel-info-card-to-design-system (pull request #2730)

Feature/SW-3327 move hotel info card to design system * wip * wip * wip * wip moving hotelinfocard * add controls for HotelInfoCard in storybook * merge Approved-by: Anton Gunnarsson
2025-08-29 10:09:48 +00:00
parent a0580de52f
commit 2a9313362f
14 changed files with 388 additions and 211 deletions
--- a/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx
+++ b/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx
@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { HotelInfoCard } from './index'
+import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
+import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
+import { Button } from '../Button'
+import { fn } from 'storybook/test'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+const meta: Meta<typeof HotelInfoCard> = {
+  title: 'Components/HotelInfoCard',
+  component: HotelInfoCard,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof HotelInfoCard>
+
+export const Default: Story = {
+  argTypes: {
+    alerts: {
+      control: 'select',
+      options: ['none', 'info', 'warning', 'alarm', 'success'],
+      mapping: {
+        none: [],
+        info: [
+          {
+            id: '1',
+            heading: 'Hot dog alert',
+            text: `They are handing out free hot dogs available in the square outside the hotel.`,
+            type: AlertTypeEnum.Info,
+          },
+        ],
+        warning: [
+          {
+            id: '1',
+            heading: 'Construction work',
+            text: `There is construction work going on outside the hotel. Expect some noise during daytime.`,
+            type: AlertTypeEnum.Warning,
+          },
+        ],
+        success: [
+          {
+            id: '1',
+            heading: 'Free breakfast',
+            text: `We are now serving free breakfast in the lobby between 7-10am.`,
+            type: AlertTypeEnum.Success,
+          },
+        ],
+        alarm: [
+          {
+            id: '1',
+            heading: 'Fire alarm',
+            text: `The fire alarm is activated. Please evacuate the building immediately using the nearest exit.`,
+            type: AlertTypeEnum.Alarm,
+          },
+        ],
+      },
+    },
+
+    slot: {
+      control: 'select',
+      description: 'A slot where you can inject components',
+      options: ['none', 'button'],
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+      mapping: {
+        none: null,
+        button: (
+          <Button
+            variant={'Text'}
+            typography={'Body/Supporting text (caption)/smBold'}
+            onPress={() => fn()}
+          >
+            Read more <MaterialIcon icon="chevron_right" />
+          </Button>
+        ),
+      },
+    },
+  },
+  args: {
+    hotel: {
+      id: '1',
+      name: 'Grand Hotel Budapest',
+      url: 'https://www.scandichotels.com/en/hello',
+      ratings: {
+        tripAdvisor: { rating: 4.5 },
+      },
+    },
+    address: {
+      city: 'Budapest',
+      kilometersToCentre: 0.5,
+      streetAddress: '1 Main St',
+    },
+    description:
+      "Escape to the crown jewel of the Republic of Zubrowka, where timeless luxury awaits atop our breathtaking mountain sanctuary. The Grand Budapest Hotel stands as Europe's most distinguished retreat, a rose-colored palace that has welcomed discerning guests since the golden age of travel.",
+    facilities: [
+      { id: FacilityEnum.AirConAirCooling, name: 'Air Conditioning' },
+      { id: FacilityEnum.FoodDrinks247, name: 'Food & Drinks 24/7' },
+      { id: FacilityEnum.KayaksForLoan, name: 'Kayaks for Loan' },
+    ],
+    galleryImages: [
+      {
+        src: './img/GrandHotelBudapest.png',
+        alt: 'Grand Hotel Budapest',
+        smallSrc: './img/GrandHotelBudapest.png',
+        caption: 'Grand Hotel Budapest',
+      },
+      {
+        src: './img/img1.png',
+        alt: 'Image 1',
+        smallSrc: './img/img1.png',
+        caption: 'Image 1',
+      },
+      {
+        src: './img/img2.png',
+        alt: 'Image 2',
+        smallSrc: './img/img2.png',
+        caption: 'Image 2',
+      },
+    ],
+    alerts: [],
+  },
+}
+
+export const WithSlot: Story = {
+  argTypes: {},
+  args: {
+    ...Default.args,
+    slot: Default.argTypes?.slot?.mapping?.button,
+  },
+}
+
+export const WithAlert: Story = {
+  argTypes: {},
+  args: {
+    ...Default.args,
+    alerts: Default.argTypes?.alerts?.mapping?.info,
+  },
+}