92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
|
|
import {
|
|
Card as NychCard,
|
|
CardHeader as NychCardHeader,
|
|
CardTitle as NychCardTitle,
|
|
CardDescription as NychCardDescription,
|
|
CardContent as NychCardContent,
|
|
CardFooter as NychCardFooter,
|
|
Button as NychButton,
|
|
Badge as NychBadge,
|
|
} from '@nychthemeron/library'
|
|
|
|
const meta = {
|
|
title: 'Components/Card',
|
|
component: NychCard,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof NychCard>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: () => ({
|
|
components: { NychCard, NychCardHeader, NychCardTitle, NychCardDescription, NychCardContent },
|
|
template: `
|
|
<NychCard style="width: 22rem;">
|
|
<NychCardHeader>
|
|
<NychCardTitle>Elysium</NychCardTitle>
|
|
<NychCardDescription>The blessed fields</NychCardDescription>
|
|
</NychCardHeader>
|
|
<NychCardContent>
|
|
A resting place reserved for the heroic and the virtuous, where the
|
|
air is mild and the laurel never wilts.
|
|
</NychCardContent>
|
|
</NychCard>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const WithFooter: Story = {
|
|
render: () => ({
|
|
components: {
|
|
NychCard,
|
|
NychCardHeader,
|
|
NychCardTitle,
|
|
NychCardDescription,
|
|
NychCardContent,
|
|
NychCardFooter,
|
|
NychButton,
|
|
},
|
|
template: `
|
|
<NychCard style="width: 22rem;">
|
|
<NychCardHeader>
|
|
<NychCardTitle>Passage of the Styx</NychCardTitle>
|
|
<NychCardDescription>One obol required</NychCardDescription>
|
|
</NychCardHeader>
|
|
<NychCardContent>
|
|
Charon ferries the souls of the dead across the river that divides
|
|
the world of the living from the world of the dead.
|
|
</NychCardContent>
|
|
<NychCardFooter>
|
|
<NychButton>Pay the toll</NychButton>
|
|
<NychButton variant="secondary">Turn back</NychButton>
|
|
</NychCardFooter>
|
|
</NychCard>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const WithHeaderAndTag: Story = {
|
|
render: () => ({
|
|
components: { NychCard, NychCardHeader, NychCardTitle, NychCardContent, NychBadge },
|
|
template: `
|
|
<NychCard style="width: 22rem;">
|
|
<div style="height: 120px; background: linear-gradient(135deg, var(--surface-2), var(--surface-3));"></div>
|
|
<NychCardHeader>
|
|
<NychCardTitle style="display: flex; align-items: center; gap: 0.5rem;">
|
|
Oracle of Delphi <NychBadge variant="info">Sacred</NychBadge>
|
|
</NychCardTitle>
|
|
</NychCardHeader>
|
|
<NychCardContent>
|
|
Seekers travelled from across the Aegean to hear the Pythia speak the
|
|
will of Apollo in riddling verse.
|
|
</NychCardContent>
|
|
</NychCard>
|
|
`,
|
|
}),
|
|
}
|