128 lines
1.9 KiB
JavaScript
128 lines
1.9 KiB
JavaScript
import Button from '$lib/components/admin/Button.svelte'
|
|
import ButtonShowcase from './ButtonShowcase.svelte'
|
|
|
|
export default {
|
|
title: 'Admin/Button',
|
|
component: Button,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
variant: {
|
|
control: { type: 'select' },
|
|
options: ['primary', 'secondary', 'danger', 'ghost', 'text', 'overlay']
|
|
},
|
|
size: {
|
|
control: { type: 'select' },
|
|
options: ['small', 'medium', 'large', 'icon']
|
|
},
|
|
iconPosition: {
|
|
control: { type: 'select' },
|
|
options: ['left', 'right']
|
|
},
|
|
iconOnly: {
|
|
control: 'boolean'
|
|
},
|
|
pill: {
|
|
control: 'boolean'
|
|
},
|
|
fullWidth: {
|
|
control: 'boolean'
|
|
},
|
|
loading: {
|
|
control: 'boolean'
|
|
},
|
|
active: {
|
|
control: 'boolean'
|
|
},
|
|
disabled: {
|
|
control: 'boolean'
|
|
},
|
|
onclick: { action: 'clicked' }
|
|
}
|
|
}
|
|
|
|
// Interactive Playground (this will be the default story for the controls)
|
|
export const Playground = {
|
|
args: {
|
|
variant: 'primary',
|
|
size: 'medium',
|
|
pill: true,
|
|
iconOnly: false,
|
|
fullWidth: false,
|
|
loading: false,
|
|
active: false,
|
|
disabled: false
|
|
}
|
|
}
|
|
|
|
// Primary story
|
|
export const Primary = {
|
|
args: {
|
|
variant: 'primary'
|
|
}
|
|
}
|
|
|
|
// Secondary story
|
|
export const Secondary = {
|
|
args: {
|
|
variant: 'secondary'
|
|
}
|
|
}
|
|
|
|
// Danger story
|
|
export const Danger = {
|
|
args: {
|
|
variant: 'danger'
|
|
}
|
|
}
|
|
|
|
// Ghost story
|
|
export const Ghost = {
|
|
args: {
|
|
variant: 'ghost'
|
|
}
|
|
}
|
|
|
|
// Text story
|
|
export const Text = {
|
|
args: {
|
|
variant: 'text'
|
|
}
|
|
}
|
|
|
|
// Overlay story
|
|
export const Overlay = {
|
|
args: {
|
|
variant: 'overlay'
|
|
}
|
|
}
|
|
|
|
// Loading State
|
|
export const Loading = {
|
|
args: {
|
|
variant: 'primary',
|
|
loading: true
|
|
}
|
|
}
|
|
|
|
// Disabled State
|
|
export const Disabled = {
|
|
args: {
|
|
variant: 'primary',
|
|
disabled: true
|
|
}
|
|
}
|
|
|
|
// Full Width
|
|
export const FullWidth = {
|
|
args: {
|
|
variant: 'primary',
|
|
fullWidth: true
|
|
}
|
|
}
|
|
|
|
// All variants showcase
|
|
export const AllVariants = {
|
|
render: () => ({
|
|
Component: ButtonShowcase
|
|
})
|
|
}
|