import { DownloadIcon, HeartIcon, SettingsIcon } from '@modrinth/assets'
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import ButtonStyled from '../../components/base/ButtonStyled.vue'
const colors = ['standard', 'brand', 'red', 'orange', 'green', 'blue', 'purple'] as const
const types = [
'standard',
'outlined',
'transparent',
'highlight',
'highlight-colored-text',
'chip',
] as const
const sizes = ['small', 'standard', 'large'] as const
const meta = {
title: 'Base/ButtonStyled',
component: ButtonStyled,
argTypes: {
color: {
control: 'select',
options: [...colors, 'medal-promo'],
},
size: {
control: 'select',
options: [...sizes],
},
type: {
control: 'select',
options: [...types],
},
circular: { control: 'boolean' },
colorFill: {
control: 'select',
options: ['auto', 'background', 'text', 'none'],
},
hoverColorFill: {
control: 'select',
options: ['auto', 'background', 'text', 'none'],
},
highlighted: { control: 'boolean' },
highlightedStyle: {
control: 'select',
options: ['main-nav-primary', 'main-nav-secondary'],
},
},
args: {
color: 'standard',
size: 'standard',
type: 'standard',
circular: false,
colorFill: 'auto',
hoverColorFill: 'auto',
highlighted: false,
highlightedStyle: 'main-nav-primary',
},
render: (args) => ({
components: { ButtonStyled, DownloadIcon },
setup() {
return { args }
},
template: /*html*/ `
`,
}),
} satisfies Meta
export default meta
type Story = StoryObj
export const Default: Story = {
args: {
type: 'standard',
},
}
export const AllVariants: Story = {
render: () => ({
components: { ButtonStyled },
setup() {
return { colors, types }
},
template: /*html*/ `
| Color / Type |
{{ type }} |
| {{ color }} |
|
`,
}),
}
export const AllVariantsHighlighted: Story = {
render: () => ({
components: { ButtonStyled },
setup() {
return { colors, types }
},
template: /*html*/ `
| Color / Type |
{{ type }} |
| {{ color }} |
|
`,
}),
}
export const Sizes: Story = {
render: () => ({
components: { ButtonStyled },
setup() {
return { sizes, types }
},
template: /*html*/ `
| Size / Type |
{{ type }} |
| {{ size }} |
|
`,
}),
}
export const WithIcons: Story = {
render: () => ({
components: { ButtonStyled, DownloadIcon, HeartIcon, SettingsIcon },
setup() {
return { types }
},
template: /*html*/ `
| Variant |
{{ type }} |
| Icon + text |
|
| Icon only |
|
`,
}),
}
export const Disabled: Story = {
render: () => ({
components: { ButtonStyled },
setup() {
return { types }
},
template: /*html*/ `
`,
}),
}