d0546926a9
fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
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: "Product 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,
|
|
},
|
|
}
|