alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Card from "./Card.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Card",
7 component: Card,
8 tags: ["autodocs"],
9 argTypes: {
10 border: { control: "boolean" },
11 shadow: { control: "boolean" },
12 background: { control: "boolean" },
13 padding: { control: { type: "select" }, options: ["default", "sm", "none"] }
14 },
15 args: {
16 border: true,
17 shadow: false,
18 background: true,
19 padding: "default"
20 }
21 });
22</script>
23
24<!-- Card content comes through its `children` snippet, provided here as Story slot content. -->
25<Story name="Default">Card content</Story>
26<Story name="Elevated" args={{ shadow: true }}>Bordered card with shadow</Story>
27<Story name="Plain" args={{ border: false, background: false, shadow: false, padding: "none" }}>
28 Borderless, shadowless, background-less
29</Story>
30
31<Story name="Variants">
32 <div class="flex flex-col gap-4">
33 <Card border shadow={false} background>Bordered, no shadow (profile / settings)</Card>
34 <Card border shadow background>Bordered + shadow (elevated)</Card>
35 <Card border={false} shadow={false} background={false} padding="none"
36 >Plain (timeline)</Card
37 >
38 </div>
39</Story>