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

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

# Attachment

An Attachment component provides UI for file attachments, typically found in Chat-based (ie ChatTranscript) components.

<Canvas>
  <Story name="default">
    <Attachment
      name={text('name', 'derek.png')}
      size={text('size', '5kb')}
      state={select(
        'state',
        {
          default: 'default',
          error: 'error',
        },
        'default'
      )}
      url={text(
        'url',
        'https://github.com/helpscout/hsds-react/raw/main/images/Blue.png'
      )}
    />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: HSDS (ChatList, ChatTranscript), HsApp (Chat app)

<br />
<br />

### Props

<ArgsTable of={Attachment} />

<br />
<br />

## Attachment.Provider

A Provider component provides child components with props accessible as `context`.

### Props

<ArgsTable of={Attachment.Provider} />

## Stories

#### Preview theme

<Canvas>
  <Story name="Preview theme">
    <Attachment.Provider theme="preview">
      <Attachment
        name={text('name', 'derek.png')}
        size={text('size', '5kb')}
        state={select(
          'state',
          {
            default: 'default',
            error: 'error',
          },
          'default'
        )}
        url={text(
          'url',
          'https://github.com/helpscout/hsds-react/raw/main/images/Blue.png'
        )}
        imageUrl={select(
          'imageUrl',
          {
            none: null,
            'some image':
              'https://img.buzzfeed.com/buzzfeed-static/static/2014-12/5/11/enhanced/webdr06/longform-original-7538-1417798667-22.jpg?downsize=715:*&output-format=auto&output-quality=auto',
          },
          null
        )}
      />
    </Attachment.Provider>
  </Story>
</Canvas>

#### Preview theme with custom content

<Canvas>
  <Story name="Preview theme with custom content">
    <Attachment.Provider theme="preview">
      <Attachment
        name={text('name', 'custom content preview')}
        content={
          <div>
            <span style={{ color: 'initial' }}>
              This is my <b>custom</b>
            </span>{' '}
            content
          </div>
        }
        state={select(
          'state',
          {
            default: 'default',
            error: 'error',
          },
          'default'
        )}
        url={text(
          'url',
          'https://github.com/helpscout/hsds-react/raw/main/images/Blue.png'
        )}
      />
    </Attachment.Provider>
  </Story>
</Canvas>

#### Preview theme with image

<Canvas>
  <Story name="Preview theme with image">
    <div>
      <Attachment.Provider theme="preview">
        <Attachment
          name={text('name', 'image.png')}
          imageUrl={
            'http://matthewjamestaylor.com/img/illustrations/large/how-to-convert-a-liquid-layout-to-fixed-width.jpg'
          }
        />
      </Attachment.Provider>
    </div>
  </Story>
</Canvas>
