97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import VBadge from './VBadge.vue';
|
|
import type { Meta, StoryObj } from '@storybook/vue3';
|
|
|
|
const meta: Meta<typeof VBadge> = {
|
|
title: 'Valerie/VBadge',
|
|
component: VBadge,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
text: { control: 'text' },
|
|
variant: {
|
|
control: 'select',
|
|
options: ['secondary', 'accent', 'settled', 'pending'],
|
|
},
|
|
sticky: { control: 'boolean' },
|
|
},
|
|
parameters: {
|
|
// Optional: Add notes about sticky behavior if it requires parent positioning
|
|
notes: 'The `sticky` prop adds a `badge-sticky` class when the variant is `accent`. Actual sticky positioning (e.g., `position: absolute` or `position: sticky`) should be handled by the parent component or additional global styles if needed, as the component itself does not enforce absolute positioning.',
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof VBadge>;
|
|
|
|
export const Secondary: Story = {
|
|
args: {
|
|
text: 'Secondary',
|
|
variant: 'secondary',
|
|
},
|
|
};
|
|
|
|
export const Accent: Story = {
|
|
args: {
|
|
text: 'Accent',
|
|
variant: 'accent',
|
|
},
|
|
};
|
|
|
|
export const Settled: Story = {
|
|
args: {
|
|
text: 'Settled',
|
|
variant: 'settled',
|
|
},
|
|
};
|
|
|
|
export const Pending: Story = {
|
|
args: {
|
|
text: 'Pending',
|
|
variant: 'pending',
|
|
},
|
|
};
|
|
|
|
export const AccentSticky: Story = {
|
|
args: {
|
|
text: 'Sticky',
|
|
variant: 'accent',
|
|
sticky: true,
|
|
},
|
|
// To demonstrate the intended sticky positioning from the design,
|
|
// we can wrap the component in a relatively positioned div for the story.
|
|
decorators: [
|
|
() => ({
|
|
template: `
|
|
<div style="position: relative; width: 100px; height: 30px; border: 1px dashed #ccc; padding: 10px; margin-top: 10px; margin-left:10px;">
|
|
Parent Element
|
|
<story />
|
|
</div>
|
|
`,
|
|
}),
|
|
],
|
|
// parameters: {
|
|
// notes: 'This story demonstrates the sticky badge in a positioned context. The `badge-sticky` class itself only adds a border in this example. The absolute positioning shown (top: -4px, right: -4px relative to parent) needs to be applied by the parent or via styles targeting `.badge-sticky` in context.',
|
|
// }
|
|
// The following is a more direct way to show the absolute positioning if we add it to the component for the sticky case
|
|
// For now, the component itself doesn't add absolute positioning, so this shows how a parent might do it.
|
|
// If VBadge itself were to handle `position:absolute` when `sticky` and `variant=='accent'`, this would be different.
|
|
};
|
|
|
|
// Story to show that `sticky` prop only affects `accent` variant
|
|
export const StickyWithNonAccentVariant: Story = {
|
|
args: {
|
|
text: 'Not Sticky',
|
|
variant: 'secondary', // Not 'accent'
|
|
sticky: true,
|
|
},
|
|
parameters: {
|
|
notes: 'The `sticky` prop only applies the `.badge-sticky` class (and its associated styles like a border) when the variant is `accent`. For other variants, `sticky: true` has no visual effect on the badge itself.',
|
|
}
|
|
};
|
|
|
|
export const LongText: Story = {
|
|
args: {
|
|
text: 'This is a very long badge text',
|
|
variant: 'primary', // Assuming primary is a valid variant or falls back to default
|
|
},
|
|
};
|