How to write stories

story.to.design relies on Storybook args in order to extract variants of a component.

Example of a story with args

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const ForFigma = {
  argTypes: {
    disabled: { control: 'boolean' },
    type: { control: 'select', options: ['primary', 'secondary'] },
  },
  args: {
    // Default values
    children: 'Label',
    disabled: false,
    type: 'primary',
  },
};

This example will set specific argTypes and args default values for component Button only on a story called ForFigma.

Arg in Storybook	story.to.design
`children`	Set to value “Label” on all variants.
`disabled`	Propose “true” and “false” variants.
`type`	Propose “primary” and “secondary” variants.

See Storybook args for more information.