Files
web/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx
Joakim Jäderberg c54c1ec540 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

102 lines
2.3 KiB
TypeScript

import type { Meta, StoryObj } from '@storybook/react-vite'
import { HotelCard } from './index'
import { fn } from 'storybook/test'
import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
import { HotelTypeEnum } from '@scandic-hotels/trpc/enums/hotelType'
import { Button } from '@scandic-hotels/design-system/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: HotelTypeEnum.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,
type: 'pageListing',
isUserLoggedIn: false,
distanceToCityCenter: 0,
bookingCode: 'ABC123',
images: [
{
src: 'img/img2.jpg',
alt: 'Alt text',
smallSrc: 'img/img2.jpg',
caption: 'Caption',
},
],
belowInfoSlot: (
<Button
onPress={() => fn()}
variant="Text"
typography="Body/Paragraph/mdBold"
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
>
Read more
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
</Button>
),
onAddressClick: fn,
onHover: fn,
onHoverEnd: fn,
},
}
export const MapListing: Story = {
args: {
...Default.args,
type: 'mapListing',
},
}