storybook/docs/snippets/react/component-story-custom-args-complex.mdx.mdx
2021-08-09 19:19:01 +01:00

53 lines
1.1 KiB
Plaintext

```md
<!--- YourComponent.stories.mdx -->
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { YourComponent } from './your-component';
<Meta title="Example of how to use argTypes and functions" />
<!---👇 A function to apply some computations -->
export const someFunction = (valuePropertyA, valuePropertyB) => {
<!--- Makes some computations and returns something -->
};
export const Template = ({propertyA,propertyB,...rest})=>{
<!---👇 Assigns the function result to a variable -->
const someFunctionResult = someFunction(propertyA, propertyB);
return <YourComponent someProperty={someFunctionResult} {...rest} />;
}
<Canvas>
<Story
name="A complex case with a function"
argTypes={{
propertyA: {
options: [
'Item One',
'Item Two',
'Item Three'
],
},
propertyB: {
options: [
'Another Item One',
'Another Item Two',
'Another Item Three'
],
},
}}
args={{
propertyA: 'Item One',
propertyB: 'Another Item One',
}}>
{Template.bind({})}
</Story>
</Canvas>
```