import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, select } from '@storybook/addon-knobs'
import Toolbar from './'

<Meta title="Components/Conversation/Toolbar" component={Toolbar} />

# Toolbar

<Canvas>
  <Story name="default">
    <Toolbar
      shadow={boolean('shadow', false)}
      seamless={boolean('seamless', false)}
      theme={select(
        'Theme',
        {
          default: 'default',
          note: 'note',
        },
        'default'
      )}
    >
      <Toolbar.Item>Left Content</Toolbar.Item>
      <Toolbar.Item>Right Content</Toolbar.Item>
    </Toolbar>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: ChatApp, Messages

<br />
<br />

### Props

<ArgsTable of={Toolbar} />

## Toolbar.Block

A Toolbar.Block component is a layout-based component. This component fills up space between or around `Toolbar.Item`.

## Toolbar.Item

A Toolbar.Item component is a layout-based component. This component takes up as much space as it's content requires.

### Stories

#### Placement

<Canvas>
  <Story name="Placement">
    <div>
      <Toolbar placement="top">
        <Toolbar.Item>Left Content</Toolbar.Item>
        <Toolbar.Item>Right Content</Toolbar.Item>
      </Toolbar>
      <br />
      <Toolbar placement="bottom">
        <Toolbar.Item>Left Content</Toolbar.Item>
        <Toolbar.Item>Right Content</Toolbar.Item>
      </Toolbar>
    </div>
  </Story>
</Canvas>
