73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
|
|
import { Card as NychCard, Button as NychButton, Tag as NychTag } 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 },
|
|
template: `
|
|
<NychCard style="width: 22rem;">
|
|
<template #title>Elysium</template>
|
|
<template #subtitle>The blessed fields</template>
|
|
<template #content>
|
|
A resting place reserved for the heroic and the virtuous, where the
|
|
air is mild and the laurel never wilts.
|
|
</template>
|
|
</NychCard>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const WithFooter: Story = {
|
|
render: () => ({
|
|
components: { NychCard, NychButton },
|
|
template: `
|
|
<NychCard style="width: 22rem;">
|
|
<template #title>Passage of the Styx</template>
|
|
<template #subtitle>One obol required</template>
|
|
<template #content>
|
|
Charon ferries the souls of the dead across the river that divides
|
|
the world of the living from the world of the dead.
|
|
</template>
|
|
<template #footer>
|
|
<NychButton label="Pay the toll" />
|
|
<NychButton label="Turn back" severity="secondary" />
|
|
</template>
|
|
</NychCard>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const WithHeaderAndTag: Story = {
|
|
render: () => ({
|
|
components: { NychCard, NychTag },
|
|
template: `
|
|
<NychCard style="width: 22rem;">
|
|
<template #header>
|
|
<div style="height: 120px; background: linear-gradient(135deg, var(--surface-2), var(--surface-3));"></div>
|
|
</template>
|
|
<template #title>
|
|
<span style="display: flex; align-items: center; gap: 0.5rem;">
|
|
Oracle of Delphi <NychTag value="Sacred" severity="info" />
|
|
</span>
|
|
</template>
|
|
<template #content>
|
|
Seekers travelled from across the Aegean to hear the Pythia speak the
|
|
will of Apollo in riddling verse.
|
|
</template>
|
|
</NychCard>
|
|
`,
|
|
}),
|
|
}
|