Update doc composant button
This commit is contained in:
1 parent
7eaae67655
commit
4e40bba0b7
1 file changed
+29
-8
@@ -2,25 +2,38 @@ import { fn } from 'storybook/test';
|
|||||||
|
|
||||||
import Button from '../components/ui/button/button.jsx';
|
import Button from '../components/ui/button/button.jsx';
|
||||||
|
|
||||||
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
||||||
export default {
|
export default {
|
||||||
title: 'UI/Button',
|
title: 'UI/Button',
|
||||||
component: Button,
|
component: Button,
|
||||||
parameters: {
|
parameters: {
|
||||||
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
||||||
layout: 'centered',
|
layout: 'centered',
|
||||||
},
|
},
|
||||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs'],
|
||||||
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
||||||
argTypes: {
|
argTypes: {
|
||||||
backgroundColor: { control: 'color' },
|
children: {
|
||||||
|
control: "text",
|
||||||
|
description: "Texte/Composant à afficher dans le bouton",
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
control: { type: 'select' },
|
||||||
|
options: ["primary", "default", "danger", "transparent"],
|
||||||
|
description: "Style du bouton"
|
||||||
|
},
|
||||||
|
onClick: {
|
||||||
|
control: "function",
|
||||||
|
description: "Fonction appelée lors du clique du bouton",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
args: {
|
||||||
|
children: "Button",
|
||||||
|
variant: "Primary",
|
||||||
|
onClick: fn()
|
||||||
|
|
||||||
},
|
},
|
||||||
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
|
|
||||||
args: { onClick: fn() },
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
||||||
export const Primary = {
|
export const Primary = {
|
||||||
args: {
|
args: {
|
||||||
children: "Button",
|
children: "Button",
|
||||||
@@ -52,3 +65,11 @@ export const Danger = {
|
|||||||
onClick: fn(),
|
onClick: fn(),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const Icon = {
|
||||||
|
args: {
|
||||||
|
children: <img src={"/src/assets/person.svg"} alt="icon" />,
|
||||||
|
variant: 'transparent',
|
||||||
|
onClick: fn(),
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in new issue
Block a user