60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import Sponsor from "./Sponsor.vue";
|
|
import type { Meta, StoryFn } from "@storybook/vue3";
|
|
|
|
export default {
|
|
title: "Savings/Sponsor",
|
|
component: Sponsor,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
argTypes: {
|
|
name: {
|
|
control: "text",
|
|
description: "Sponsor name (use 'trial' or 'victron' for special states)",
|
|
},
|
|
expiresAt: {
|
|
control: "text",
|
|
description: "When the sponsorship expires (ISO date string)",
|
|
},
|
|
expiresSoon: {
|
|
control: "boolean",
|
|
description: "Whether the sponsorship is expiring soon",
|
|
},
|
|
},
|
|
} as Meta<typeof Sponsor>;
|
|
|
|
// Template for rendering the component
|
|
const Template: StoryFn<typeof Sponsor> = (args) => ({
|
|
components: { Sponsor },
|
|
setup() {
|
|
return { args };
|
|
},
|
|
template: '<Sponsor v-bind="args" />',
|
|
});
|
|
|
|
// Create stories for each variant
|
|
export const NoSponsor = Template.bind({});
|
|
NoSponsor.args = {};
|
|
|
|
export const Trial = Template.bind({});
|
|
Trial.args = {
|
|
name: "trial",
|
|
};
|
|
|
|
export const IndividualSponsor = Template.bind({});
|
|
IndividualSponsor.args = {
|
|
name: "naltatis",
|
|
};
|
|
|
|
export const VictronDevice = Template.bind({});
|
|
VictronDevice.args = {
|
|
name: "victron",
|
|
};
|
|
|
|
// Add an extra story showing the expiring state
|
|
export const ExpiringSponsor = Template.bind({});
|
|
ExpiringSponsor.args = {
|
|
name: "naltatis",
|
|
expiresSoon: true,
|
|
expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(), // 7 days from now
|
|
};
|