Skip to content

Commit

Permalink
feat: update button stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@gravitano
gravitano committed Dec 3, 2021
1 parent df04b7a commit d7a7449
Showing 1 changed file with 83 additions and 78 deletions.
161 changes: 83 additions & 78 deletions src/components/VBtn/VBtn.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Meta, Story } from '@storybook/vue3';
import {Meta, Story} from '@storybook/vue3';
import Button from './VBtn.vue';
import { VBtnProps } from './VBtn';
import {VBtnProps} from './VBtn';
import {HomeIcon} from '@heroicons/vue/outline';

const themeColors = [
'default',
Expand Down Expand Up @@ -50,11 +51,17 @@ export default {

//👇 We create a “template” of how args map to rendering
const Template: Story<VBtnProps> = (args) => ({
components: { Button },
components: {Button, HomeIcon},
setup() {
return { args };
return {args, colors: themeColors};
},
template: `<Button v-bind="args">${args.label || 'Button'}</Button>`,
template: `<div class="space-x-2">
<Button v-for="color in colors" :key="color" v-bind="args" :color="color">
<HomeIcon v-if="args.icon" class="w-6 h-6"/>
<span v-else>{{ args.label || color }}</span>
</Button>
</div>
`,
});

export const Default = Template.bind({});
Expand All @@ -67,68 +74,68 @@ Default.parameters = {
},
};

export const Primary = Template.bind({});
Primary.args = { color: 'primary' };
Primary.parameters = {
docs: {
source: {
code: '<v-btn color="primary">Button</v-btn>',
},
},
};
// export const Primary = Template.bind({});
// Primary.args = {color: 'primary'};
// Primary.parameters = {
// docs: {
// source: {
// code: '<v-btn color="primary">Button</v-btn>',
// },
// },
// };

export const Secondary = Template.bind({});
Secondary.args = { color: 'secondary' };
Secondary.parameters = {
docs: {
source: {
code: '<v-btn color="secondary">Button</v-btn>',
},
},
};
// export const Secondary = Template.bind({});
// Secondary.args = {color: 'secondary'};
// Secondary.parameters = {
// docs: {
// source: {
// code: '<v-btn color="secondary">Button</v-btn>',
// },
// },
// };

export const Info = Template.bind({});
Info.args = { color: 'info' };
Info.parameters = {
docs: {
source: {
code: '<v-btn color="info">Button</v-btn>',
},
},
};
// export const Info = Template.bind({});
// Info.args = {color: 'info'};
// Info.parameters = {
// docs: {
// source: {
// code: '<v-btn color="info">Button</v-btn>',
// },
// },
// };

export const Success = Template.bind({});
Success.args = { color: 'success' };
Success.parameters = {
docs: {
source: {
code: '<v-btn color="success">Button</v-btn>',
},
},
};
// export const Success = Template.bind({});
// Success.args = {color: 'success'};
// Success.parameters = {
// docs: {
// source: {
// code: '<v-btn color="success">Button</v-btn>',
// },
// },
// };

export const Error = Template.bind({});
Error.args = { color: 'error' };
Error.parameters = {
docs: {
source: {
code: '<v-btn color="error">Button</v-btn>',
},
},
};
// export const Error = Template.bind({});
// Error.args = {color: 'error'};
// Error.parameters = {
// docs: {
// source: {
// code: '<v-btn color="error">Button</v-btn>',
// },
// },
// };

export const Warning = Template.bind({});
Warning.args = { color: 'warning' };
Warning.parameters = {
docs: {
source: {
code: '<v-btn color="warning">Button</v-btn>',
},
},
};
// export const Warning = Template.bind({});
// Warning.args = {color: 'warning'};
// Warning.parameters = {
// docs: {
// source: {
// code: '<v-btn color="warning">Button</v-btn>',
// },
// },
// };

export const Outlined = Template.bind({});
Outlined.args = { color: 'primary', outlined: true };
Outlined.args = {color: 'primary', outlined: true};
Outlined.parameters = {
docs: {
source: {
Expand All @@ -138,7 +145,7 @@ Outlined.parameters = {
};

export const Text = Template.bind({});
Text.args = { color: 'primary', text: true };
Text.args = {color: 'primary', text: true};
Text.parameters = {
docs: {
source: {
Expand All @@ -148,7 +155,7 @@ Text.parameters = {
};

export const Rounded = Template.bind({});
Rounded.args = { color: 'primary', rounded: true };
Rounded.args = {color: 'primary', rounded: true};
Rounded.parameters = {
docs: {
source: {
Expand All @@ -158,7 +165,7 @@ Rounded.parameters = {
};

export const Tile = Template.bind({});
Tile.args = { color: 'primary', tile: true };
Tile.args = {color: 'primary', tile: true};
Tile.parameters = {
docs: {
source: {
Expand All @@ -168,7 +175,7 @@ Tile.parameters = {
};

export const ExtraSmall = Template.bind({});
ExtraSmall.args = { color: 'primary', size: 'xs' };
ExtraSmall.args = {color: 'primary', size: 'xs'};
ExtraSmall.parameters = {
docs: {
source: {
Expand All @@ -178,7 +185,7 @@ ExtraSmall.parameters = {
};

export const Small = Template.bind({});
Small.args = { color: 'primary', size: 'sm' };
Small.args = {color: 'primary', size: 'sm'};
Small.parameters = {
docs: {
source: {
Expand All @@ -188,7 +195,7 @@ Small.parameters = {
};

export const Large = Template.bind({});
Large.args = { color: 'primary', size: 'lg' };
Large.args = {color: 'primary', size: 'lg'};
Large.parameters = {
docs: {
source: {
Expand All @@ -198,7 +205,7 @@ Large.parameters = {
};

export const ExtraLarge = Template.bind({});
ExtraLarge.args = { color: 'primary', size: 'xl' };
ExtraLarge.args = {color: 'primary', size: 'xl'};
ExtraLarge.parameters = {
docs: {
source: {
Expand All @@ -208,7 +215,7 @@ ExtraLarge.parameters = {
};

export const Disabled = Template.bind({});
Disabled.args = { color: 'primary', disabled: true };
Disabled.args = {color: 'primary', disabled: true};
Disabled.parameters = {
docs: {
source: {
Expand All @@ -218,7 +225,7 @@ Disabled.parameters = {
};

export const Loading = Template.bind({});
Loading.args = { color: 'primary', loading: true };
Loading.args = {color: 'primary', loading: true};
Loading.parameters = {
docs: {
source: {
Expand All @@ -232,30 +239,28 @@ Icon.args = {
color: 'primary',
icon: true,
rounded: true,
label: `<svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>`,
};
Icon.parameters = {
docs: {
source: {
code: '<v-btn color="primary" icon rounded><IconComponent/></v-btn>',
code: '<v-btn color="primary" icon rounded><HomeIcon class="w-6 h-6"/></v-btn>',
},
},
};


export const Sizes: Story<VBtnProps> = (args) => ({
components: { Button },
components: {Button},
setup() {
return { args, sizes, themeColors };
return {args, sizes, themeColors};
},
template: `<div v-for="color in themeColors" :key="color" class="mb-6">
<div>
<div class="font-bold text-xl mb-2">{{color}}</div>
<div class="flex items-end">
<Button v-for="size in sizes" :key="size" v-bind="args" :color="color" class="mr-2" :size="size">${args.label || 'Button'}</Button>
<Button v-for="size in sizes" :key="size" v-bind="args" :color="color" class="mr-2" :size="size">${
args.label || 'Button'
}</Button>
</div>
</div>
</div>`,
});
});

0 comments on commit d7a7449

Please sign in to comment.