86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
|
|
import { Message as NychMessage } from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/Message',
|
|
component: NychMessage,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
severity: {
|
|
control: { type: 'select' },
|
|
options: ['info', 'success', 'warn', 'error', 'secondary'],
|
|
description: 'Message severity',
|
|
},
|
|
closable: {
|
|
control: { type: 'boolean' },
|
|
description: 'Show a close button',
|
|
},
|
|
},
|
|
} satisfies Meta<typeof NychMessage>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Info: Story = {
|
|
args: { severity: 'info' },
|
|
render: (args) => ({
|
|
components: { NychMessage },
|
|
setup: () => ({ args }),
|
|
template: `<NychMessage v-bind="args" style="width: 24rem;">The Oracle has spoken.</NychMessage>`,
|
|
}),
|
|
}
|
|
|
|
export const Success: Story = {
|
|
args: { severity: 'success' },
|
|
render: (args) => ({
|
|
components: { NychMessage },
|
|
setup: () => ({ args }),
|
|
template: `<NychMessage v-bind="args" style="width: 24rem;">The offering was accepted.</NychMessage>`,
|
|
}),
|
|
}
|
|
|
|
export const Warn: Story = {
|
|
args: { severity: 'warn' },
|
|
render: (args) => ({
|
|
components: { NychMessage },
|
|
setup: () => ({ args }),
|
|
template: `<NychMessage v-bind="args" style="width: 24rem;">The ferryman grows impatient.</NychMessage>`,
|
|
}),
|
|
}
|
|
|
|
export const Error: Story = {
|
|
args: { severity: 'error' },
|
|
render: (args) => ({
|
|
components: { NychMessage },
|
|
setup: () => ({ args }),
|
|
template: `<NychMessage v-bind="args" style="width: 24rem;">The gods have refused your plea.</NychMessage>`,
|
|
}),
|
|
}
|
|
|
|
export const Closable: Story = {
|
|
args: { severity: 'info', closable: true },
|
|
render: (args) => ({
|
|
components: { NychMessage },
|
|
setup: () => ({ args }),
|
|
template: `<NychMessage v-bind="args" style="width: 24rem;">This omen may be dismissed.</NychMessage>`,
|
|
}),
|
|
}
|
|
|
|
export const AllSeverities: Story = {
|
|
render: () => ({
|
|
components: { NychMessage },
|
|
template: `
|
|
<div style="display: flex; flex-direction: column; gap: 0.75rem; width: 24rem;">
|
|
<NychMessage severity="info">The Oracle has spoken.</NychMessage>
|
|
<NychMessage severity="success">The offering was accepted.</NychMessage>
|
|
<NychMessage severity="warn">The ferryman grows impatient.</NychMessage>
|
|
<NychMessage severity="error">The gods have refused your plea.</NychMessage>
|
|
<NychMessage severity="secondary">A neutral notice from the keeper.</NychMessage>
|
|
</div>
|
|
`,
|
|
}),
|
|
}
|