import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { select, text, boolean, number } from '@storybook/addon-knobs'
import AvatarSpec from '../../utilities/specs/avatarList.specs'
import AvatarList from './'
import { Avatar } from '../index'

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

# AvatarList

An AvatarList component displays an array of `Avatars`. This component has a max number of Avatars it will render. Any additional Avatars will be consolidated into a `+` counter that appears at the end.

<Canvas>
  <Story name="Default">
    <div style={{ background: '#eee', padding: 10 }}>
      <AvatarList
        max={number('max', 14)}
        grid={boolean('grid', false)}
        center={boolean('centered', false)}
        stack={boolean('stack', false)}
        size={select('size', ['xs', 'sm', 'md', 'lg'])}
      >
        {AvatarSpec.generate(20).map(avatar => {
          const { name, image, status } = avatar
          return (
            <Avatar
              image={image}
              key={name}
              name={name}
              status={status}
              withShadow={boolean('withShadow', false)}
            />
          )
        })}
      </AvatarList>
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: PL
- **Usage**: Embed, HsApp (chat app)

<br />
<br />

### Props

<ArgsTable of={AvatarList} />

### Stories

#### Stacked

<Canvas>
  <Story name="Horizontal Stack">
    <div style={{ background: '#eee', padding: 10 }}>
      <AvatarList max={number('max', 14)} center stack="horizontal" size="md">
        {AvatarSpec.generate(19).map(avatar => {
          const { name, image, status } = avatar
          return (
            <Avatar
              image={image}
              key={name}
              name={name}
              status={status}
              withShadow={boolean('withShadow', true)}
            />
          )
        })}
      </AvatarList>
    </div>
  </Story>
</Canvas>

<Canvas>
  <Story name="Vertical Stack">
    <div
      style={{
        background: '#f9fafa',
        padding: 10,
        margin: 'auto',
        width: '100px',
      }}
    >
      <AvatarList
        max={number('max', 6)}
        center
        stack="vertical"
        size="smmd"
        extraTooltipProps={{
          title: ['John', 'Paul', 'Ringo'].join('\n'),
          placement: 'bottom',
        }}
      >
        {AvatarSpec.generate(8).map(avatar => {
          const { name, image, status } = avatar
          return (
            <Avatar
              borderColor="#f9fafa"
              image={image}
              key={name}
              name={name}
            />
          )
        })}
      </AvatarList>
    </div>
  </Story>
</Canvas>
