ca6cc5ab6c
feat(SW-3636): Storybook structure * New sections in Storybook sidebar * Group Storybook content files and add token files for spacing, border radius and shadows Approved-by: Joakim Jäderberg
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
|
|
// import { expect, fn } from 'storybook/test'
|
|
import { Lang } from '@scandic-hotels/common/constants/language'
|
|
import { APIProvider } from '@vis.gl/react-google-maps'
|
|
import { useState } from 'react'
|
|
import { InteractiveMap } from '.'
|
|
import { hotelPins } from './storybookData'
|
|
|
|
const meta: Meta<typeof InteractiveMap> = {
|
|
title: 'Patterns/Map/Interactive Map',
|
|
component: InteractiveMap,
|
|
argTypes: {},
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof InteractiveMap>
|
|
|
|
export const PrimaryDefault: Story = {
|
|
args: {
|
|
lang: Lang.en,
|
|
hotelPins,
|
|
isUserLoggedIn: false,
|
|
coordinates: {
|
|
lat: 59.32644916839965,
|
|
lng: 18.067759400301135,
|
|
},
|
|
},
|
|
render: (args) => {
|
|
const mapKey = import.meta.env.VITE_GOOGLE_STATIC_MAP_KEY
|
|
const mapId = import.meta.env.VITE_GOOGLE_DYNAMIC_MAP_ID
|
|
if (!mapKey || !mapId) {
|
|
throw new Error(
|
|
'VITE_GOOGLE_STATIC_MAP_KEY or VITE_GOOGLE_DYNAMIC_MAP_ID is not defined in your .env file. Please add it to run this story.'
|
|
)
|
|
}
|
|
|
|
const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>()
|
|
const [activeHotelPin, setActiveHotelPin] = useState<string | null>()
|
|
|
|
return (
|
|
<APIProvider apiKey={mapKey}>
|
|
<div
|
|
style={
|
|
{
|
|
'--hotel-map-height': '300px',
|
|
height: 'max(500px, 90vh)',
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<InteractiveMap
|
|
{...args}
|
|
mapId={mapId}
|
|
hoveredHotelPin={hoveredHotelPin}
|
|
onHoverHotelPin={(args) => {
|
|
setHoveredHotelPin(args?.hotelName ?? null)
|
|
}}
|
|
activeHotelPin={activeHotelPin}
|
|
onSetActiveHotelPin={(args) => {
|
|
setActiveHotelPin(args?.hotelName ?? null)
|
|
}}
|
|
/>
|
|
</div>
|
|
</APIProvider>
|
|
)
|
|
},
|
|
}
|