wehub-resource-sync
adf0d17497
publish / version_or_publish (push) Has been cancelled
storybook-build / changes (push) Has been cancelled
storybook-build / :storybook-build (push) Has been cancelled
Sync Gradio Skills to Hugging Face / sync-skills (push) Has been cancelled
functional / changes (push) Has been cancelled
functional / build-frontend (push) Has been cancelled
functional / functional-test-SSR=false (push) Has been cancelled
functional / functional-reload (push) Has been cancelled
js / changes (push) Has been cancelled
js / js-test (push) Has been cancelled
docs-build / changes (push) Has been cancelled
docs-build / docs-build (push) Has been cancelled
docs-build / website-build (push) Has been cancelled
functional / functional-test-SSR=true (push) Has been cancelled
hygiene / hygiene-test (push) Has been cancelled
python / changes (push) Has been cancelled
python / build (push) Has been cancelled
python / test-ubuntu-latest-flaky (push) Has been cancelled
python / test-ubuntu-latest-not-flaky (push) Has been cancelled
python / test-windows-latest-flaky (push) Has been cancelled
python / test-windows-latest-not-flaky (push) Has been cancelled
79 lines
1.7 KiB
Svelte
79 lines
1.7 KiB
Svelte
<script module>
|
|
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
import Button from "./shared/Button.svelte";
|
|
|
|
const { Story } = defineMeta({
|
|
title: "Components/Button",
|
|
component: Button,
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
value: {
|
|
control: "text",
|
|
description: "The text to display on the button"
|
|
},
|
|
variant: {
|
|
options: ["primary", "secondary", "stop", "huggingface"],
|
|
description: "The variant of the button",
|
|
control: { type: "select" }
|
|
},
|
|
size: {
|
|
options: ["sm", "md", "lg"],
|
|
description: "The size of the button",
|
|
control: { type: "select" }
|
|
},
|
|
visible: {
|
|
description: "Sets the visibility of the button",
|
|
control: { type: "boolean" }
|
|
},
|
|
disabled: {
|
|
description: "If true, the button will be in a disabled state",
|
|
control: { type: "boolean" }
|
|
},
|
|
scale: {
|
|
options: [null, 0.5, 1, 2],
|
|
description: "Relative size compared to adjacent components",
|
|
control: { type: "select" }
|
|
},
|
|
link: {
|
|
control: "text",
|
|
description: "URL to navigate to when clicked"
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#snippet template(args)}
|
|
<Button {...args}>{args.value}</Button>
|
|
{/snippet}
|
|
|
|
<Story
|
|
name="Primary"
|
|
args={{ variant: "primary", size: "lg", value: "Primary Button" }}
|
|
{template}
|
|
/>
|
|
<Story
|
|
name="Secondary"
|
|
args={{ variant: "secondary", size: "lg", value: "Secondary Button" }}
|
|
{template}
|
|
/>
|
|
<Story
|
|
name="Stop"
|
|
args={{ variant: "stop", size: "lg", value: "Stop Button" }}
|
|
{template}
|
|
/>
|
|
<Story
|
|
name="Disabled"
|
|
args={{
|
|
variant: "primary",
|
|
size: "lg",
|
|
disabled: true,
|
|
value: "Disabled Button"
|
|
}}
|
|
{template}
|
|
/>
|
|
<Story
|
|
name="Huggingface variant"
|
|
args={{ variant: "huggingface", size: "lg", value: "Huggingface Button" }}
|
|
{template}
|
|
/>
|