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
102 lines
2.3 KiB
TypeScript
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',
|
|
},
|
|
}
|