Files
web/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx
2025-11-26 07:40:12 +00:00

109 lines
2.2 KiB
TypeScript

import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { HotelCard } from './index'
import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
import { fn } from 'storybook/test'
import { Button } from '../Button'
import { MaterialIcon } from '../Icons/MaterialIcon'
const meta: Meta<typeof HotelCard> = {
title: 'Components/HotelCard',
component: HotelCard,
argTypes: {
state: {
control: {
type: 'select',
options: ['default', 'active'],
},
},
type: {
control: {
type: 'select',
options: ['mapListing', 'pageListing'],
},
},
},
}
export default meta
type Story = StoryObj<typeof HotelCard>
export const Default: Story = {
args: {
hotel: {
id: '1',
name: 'Test Hotel',
address: { streetAddress: '123 Test Street', city: 'Test City' },
description: 'A great place to stay.',
hotelType: 'signature',
detailedFacilities: [],
ratings: {
tripAdvisor: 4,
},
},
prices: {
public: {
rateType: RateTypeEnum.Regular,
localPrice: {
currency: 'SEK',
pricePerNight: 1000,
pricePerStay: 1000,
},
},
member: {
rateType: RateTypeEnum.Regular,
localPrice: {
currency: 'SEK',
pricePerNight: 800,
pricePerStay: 800,
},
},
},
state: 'default',
isAlternative: false,
isPartnerBrand: false,
type: 'pageListing',
isUserLoggedIn: false,
distanceToCityCenter: 0,
bookingCode: 'ABC123',
images: [
{
src: 'img/img2.jpg',
alt: 'Alt text',
caption: 'Caption',
},
],
belowInfoSlot: (
<Button
onPress={() => fn()}
variant="Text"
typography="Body/Paragraph/mdBold"
>
Read more
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
</Button>
),
onAddressClick: fn,
onHover: fn,
onHoverEnd: fn,
onFocusIn: fn,
onFocusOut: fn,
},
}
export const MapListing: Story = {
args: {
...Default.args,
type: 'mapListing',
},
}
export const WithoutImage: Story = {
args: {
...Default.args,
images: [],
},
}