web/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx

import type { Meta, StoryObj } from '@storybook/nextjs-vite'

import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
import { fn } from 'storybook/test'
import { Button } from '../Button'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { HotelInfoCard } from './index'

const meta: Meta<typeof HotelInfoCard> = {
  title: 'Product 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',
        caption: 'Grand Hotel Budapest',
      },
      {
        src: './img/img1.png',
        alt: 'Image 1',
        caption: 'Image 1',
      },
      {
        src: './img/img2.png',
        alt: 'Image 2',
        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,
  },
}