38 lines
1 KiB
TypeScript
38 lines
1 KiB
TypeScript
import Tile from "./Tile.vue";
|
|
import type { Meta, StoryFn } from "@storybook/vue3";
|
|
|
|
export default {
|
|
title: "Savings/Tile",
|
|
component: Tile,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
argTypes: {
|
|
icon: { control: "text", description: "Icon name to display" },
|
|
title: { control: "text", description: "Title of the tile" },
|
|
value: { control: "text", description: "Primary value to display" },
|
|
unit: { control: "text", description: "Unit for the value" },
|
|
sub1: { control: "text", description: "First subtitle" },
|
|
sub2: { control: "text", description: "Second subtitle" },
|
|
},
|
|
} as Meta<typeof Tile>;
|
|
|
|
// Template for rendering the component
|
|
const Template: StoryFn<typeof Tile> = (args) => ({
|
|
components: { Tile },
|
|
setup() {
|
|
return { args };
|
|
},
|
|
template: '<Tile v-bind="args" />',
|
|
});
|
|
|
|
// Create default story with the example props
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
icon: "coinjar",
|
|
title: "Ersparnis",
|
|
value: "14,2",
|
|
unit: "€",
|
|
sub1: "gegenüber Netzbezug",
|
|
sub2: "seit Dezember 2022",
|
|
};
|