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
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
import { Alert } from './index'
|
|
import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
|
|
import { expect, fn } from 'storybook/test'
|
|
|
|
const meta: Meta<typeof Alert> = {
|
|
title: 'Core Components/Alert',
|
|
component: Alert,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
variant: {
|
|
control: { type: 'select' },
|
|
options: ['banner', 'inline'],
|
|
},
|
|
type: {
|
|
control: { type: 'select' },
|
|
options: Object.values(AlertTypeEnum),
|
|
},
|
|
close: {
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
variant: 'inline',
|
|
type: AlertTypeEnum.Info,
|
|
heading: 'Heading',
|
|
text: 'Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.',
|
|
close: undefined,
|
|
ariaRole: 'alert',
|
|
},
|
|
play: async ({ canvas }) => {
|
|
canvas.findByRole('alert')
|
|
},
|
|
}
|
|
|
|
export const Closable: Story = {
|
|
args: {
|
|
variant: 'inline',
|
|
type: AlertTypeEnum.Info,
|
|
heading: 'Heading',
|
|
text: 'Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.',
|
|
close: fn(),
|
|
},
|
|
play: async ({ canvas, userEvent, args }) => {
|
|
await userEvent.click(await canvas.findByRole('button'))
|
|
expect(args.close).toHaveBeenCalledTimes(1)
|
|
},
|
|
}
|
|
|
|
export const WithPhonenumber: Story = {
|
|
args: {
|
|
variant: 'inline',
|
|
type: AlertTypeEnum.Info,
|
|
heading: 'Heading',
|
|
text: 'Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.',
|
|
close: fn(),
|
|
phoneContact: {
|
|
displayText: 'Call us:',
|
|
phoneNumber: '+4685551234',
|
|
footnote: 'Available 24/7',
|
|
},
|
|
},
|
|
}
|