6fa301f8e7
SW-3396 move my saved cards to design system * Move PaymentOption, PaymentOptionsGroup, PaymentIcons and MySavedCards (renamed SelectPaymentMethod) to design-system * Remove unused svg payment icons * cleanu * cleanup * trackUpdatePaymentMethod: remove hotelId argument that was never passed Approved-by: Anton Gunnarsson
82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
|
|
import { PaymentMethodIcon } from './PaymentMethodIcon'
|
|
import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
|
|
import { Typography } from '../Typography'
|
|
import { expect } from 'storybook/test'
|
|
|
|
const methods = Object.values(PaymentMethodEnum).toSorted()
|
|
|
|
const meta: Meta<typeof PaymentMethodIcon> = {
|
|
title: 'Components/Payment/PaymentMethodIcon',
|
|
component: PaymentMethodIcon,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
paymentMethod: {
|
|
control: { type: 'select' },
|
|
options: methods,
|
|
description: 'Payment method to display',
|
|
},
|
|
alt: {
|
|
control: { type: 'text' },
|
|
description: 'Alt text for the icon',
|
|
},
|
|
},
|
|
}
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof PaymentMethodIcon>
|
|
|
|
export const Playground: Story = {
|
|
args: {
|
|
paymentMethod: PaymentMethodEnum.visa,
|
|
alt: 'Visa payment method',
|
|
},
|
|
play: async ({ canvas, args }) => {
|
|
const img = await canvas.findByRole('img')
|
|
|
|
expect(img).toBeInTheDocument()
|
|
expect(img).toHaveAttribute('alt', args.alt)
|
|
},
|
|
}
|
|
|
|
export const All: Story = {
|
|
parameters: {
|
|
layout: 'padded',
|
|
},
|
|
render: (args) => (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',
|
|
gap: 16,
|
|
}}
|
|
>
|
|
{methods.map((m) => (
|
|
<div
|
|
key={m}
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 12,
|
|
padding: 8,
|
|
borderRadius: 8,
|
|
}}
|
|
>
|
|
<PaymentMethodIcon {...args} paymentMethod={m} />
|
|
<Typography variant={'Label/xsRegular'}>
|
|
<p>{m}</p>
|
|
</Typography>
|
|
</div>
|
|
))}
|
|
</div>
|
|
),
|
|
args: {
|
|
paymentMethod: PaymentMethodEnum.visa,
|
|
},
|
|
}
|