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

<Meta
  title="Components/Conversation/EmojiPicker"
  component={EmojiPicker}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A7743',
    },
  }}
/>

# EmojiPicker

The EmojiPicker component contains the logic to present a set of emojis in a DropList for selection.

<Canvas>
  <Story name="default">
    <div
      style={{
        width: '400px',
        margin: '50px 100px 0 150px',
        border: '1px dashed silver',
        borderRadius: '5px',
        padding: '20px',
      }}
    >
      <EmojiPicker
        emojiSize={select('EmojiSize', { sm: 'sm', md: 'md', lg: 'lg' }, 'md')}
      />
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Terrence, Juan Pablo
- **Usage**: HSApp (ChatApp)

<br />
<br />

### Props

Besides the following props, most `DropList` are valid

<ArgsTable of={EmojiPicker} />
