mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 03:11:49 +08:00
40 lines
799 B
Plaintext
40 lines
799 B
Plaintext
```ts
|
|
// Button.stories.ts
|
|
|
|
import { Button } from './button.component';
|
|
|
|
export default {
|
|
component: Button,
|
|
//👇 Creates specific argTypes
|
|
argTypes: {
|
|
backgroundColor: { control: 'color' },
|
|
},
|
|
};
|
|
|
|
//👇 Some function to demonstrate the behavior
|
|
const someFunction = (someValue: string) => {
|
|
return `i am a ${someValue}`;
|
|
};
|
|
|
|
export const ExampleStory = {
|
|
args: {
|
|
primary: true,
|
|
size: 'small',
|
|
label: 'button',
|
|
},
|
|
render: (args) => {
|
|
//👇 Destructure the label from the args object
|
|
const { label } = args;
|
|
|
|
//👇 Assigns the function result to a variable and pass it as a prop into the component
|
|
const functionResult = someFunction(label);
|
|
return {
|
|
props: {
|
|
...args,
|
|
label: functionResult,
|
|
},
|
|
};
|
|
},
|
|
};
|
|
```
|