import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { faker } from '@helpscout/helix'
import AvatarSelector from './'

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

# AvatarSelector

An AvatarSelector can be used as a custom renderTrigger for a Dropdown.

<Canvas>
  <Story name="default">
    <AvatarSelector />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Tom O
- **Usage**: HSApp, ChatApp

<br />
<br />

### Props

<ArgsTable of={AvatarSelector} />

### Stories

#### With Image

<Canvas>
  <Story name="with image">
    <AvatarSelector image={faker.image.avatar()()} name="Buzz Arooooooo" />
  </Story>
</Canvas>
