import type { StoryFn } from '@storybook/vue3-vite';
import N8nIcon from './Icon.vue';
export default {
title: 'Atoms/Icon',
component: N8nIcon,
argTypes: {
icon: {
control: 'text',
},
size: {
control: {
type: 'select',
},
options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
},
spin: {
control: {
type: 'boolean',
},
},
color: {
control: {
type: 'select',
},
options: [
'primary',
'secondary',
'text-dark',
'text-base',
'text-light',
'text-xlight',
'danger',
'success',
'warning',
'foreground-dark',
'foreground-xdark',
],
},
strokeWidth: {
control: {
type: 'number',
},
},
},
};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nIcon,
},
template: '',
});
export const Clock = Template.bind({});
Clock.args = {
icon: 'clock',
};
export const Plus = Template.bind({});
Plus.args = {
icon: 'plus',
};
export const Stop = Template.bind({});
Stop.args = {
icon: 'stop',
};
export const WithColor = Template.bind({});
WithColor.args = {
icon: 'check',
color: 'success',
};
export const WithDangerColor = Template.bind({});
WithDangerColor.args = {
icon: 'times',
color: 'danger',
};
export const WithSize = Template.bind({});
WithSize.args = {
icon: 'info',
size: 'xlarge',
};
export const WithCustomSize = Template.bind({});
WithCustomSize.args = {
icon: 'info',
size: 32,
};
export const WithSpin = Template.bind({});
WithSpin.args = {
icon: 'spinner',
spin: true,
};
export const WithStrokeWidth = Template.bind({});
WithStrokeWidth.args = {
icon: 'circle',
strokeWidth: 3,
};
export const AllSizes: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nIcon,
},
template: `
xsmall
small
medium
large
xlarge
`,
});
export const AllColors: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nIcon,
},
template: `
primary
secondary
text-dark
text-base
text-light
text-xlight
danger
success
warning
foreground-dark
foreground-xdark
`,
});
export const CommonIcons: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nIcon,
},
template: `
check
times
plus
minus
search
trash
edit
cog
chevron-down
chevron-up
info-circle
exclamation-triangle
`,
});