import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Dropdown } from '.';
import { Props } from './props';

<Meta
  title="Development/Dropdown"
  component={Dropdown}
  argTypes={{
    style: { table: { category: 'styles' } },
    barStyle: { table: { category: 'styles' } },
    barHoveredStyle: { table: { category: 'styles' } },
    iconStyle: { table: { category: 'styles' } },
    bodyStyle: { table: { category: 'styles' } },
    bodyExpandedStyle: { table: { category: 'styles' } },
  }}
/>

export const Template = (args) => <Dropdown {...args} />;

# Dropdown

Dropdown is used in settings to display information under a toggle bar.

## Default

<Story
  name="Default"
  args={{
    className: 'example-dropdown',
    id: 'example-dropdown',
    label: 'Example Dropdown',
    children: <div>your data here</div>,
    style: {
      maxWidth: '400px',
      boxShadow: '0px 0px 3px 6px rgba(0, 0, 0, 0.1)',
    },
  }}
>
  {Template.bind({})}
</Story>

<ArgsTable story="Default" />

## Custom Styles

You can customize the look and feel with the `*Style` props.

<Story
  name="Custom Styles"
  args={{
    className: 'example-dropdown',
    id: 'example-dropdown',
    label: 'Example Dropdown',
    children: <div>your data here</div>,
    style: {
      maxWidth: '400px',
      border: '2px solid red',
    },
    barStyle: { border: '2px solid blue' },
    barHoveredStyle: { border: '2px solid yellow' },
    iconStyle: { border: '2px solid green' },
    bodyStyle: { border: '2px solid orange' },
    bodyExpandedStyle: { border: '2px solid black' },
  }}
>
  {Template.bind({})}
</Story>