import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { Avatar } from '../../index'
import Message from '../'

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

# Message

Message components provides the UI to display content within a Chat context.

<Canvas>
  <Story name="Message">
    <div>
      <Message from avatar={<Avatar name="Arctic Puffin" />} />
      <Message to>
        <Message.Action read timestamp="9:41am">
          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
          Buddy became upset. <a href="#">Find out what happened</a>
        </Message.Action>
      </Message>
      <Message to avatar={<Avatar name="Buddy" />}>
        <Message.Chat read timestamp="9:41am">
          :sob:
          <br />
          omgomgomg
          {1}
        </Message.Chat>
        {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
        <Message.Chat read timestamp="9:41am" metaPosition="top">
          🚀
        </Message.Chat>
        <Message.Chat read timestamp="9:41am">
          <strong>*Frantically running through North pole*</strong>
        </Message.Chat>
      </Message>
      <Message from>
        <Message.Action read timestamp="9:41am">
          Puffin joined.
        </Message.Action>
      </Message>
      <Message from avatar={<Avatar name="Arctic Puffin" />}>
        <Message.Chat read timestamp="9:41am" body="🙂" />
        <Message.Chat read timestamp="9:41am" body="Hello World" />
      </Message>
      <Message from avatar={<Avatar name="Arctic Puffin" />}>
        <Message.Chat read timestamp="9:41am">
          Hey Buddy!
        </Message.Chat>
        <Message.Media
          imageUrl="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"
          caption="image.jpg"
          timestamp="9:41am"
          read
        />
      </Message>
      <Message to avatar={<Avatar name="Buddy" />}>
        <Message.Chat read timestamp="9:41am">
          <strong>*NOT NOW ARCTIC PUFFIN!*</strong>
        </Message.Chat>
        <Message.Chat read timestamp="9:41am">
          <Link href="https://en.wikipedia.org/wiki/Elf_(film)">
            https://en.wikipedia.org/wiki/Elf_(film)
          </Link>
        </Message.Chat>
        <Message.Content>
          <PreviewCard
            href="https://en.wikipedia.org/wiki/Elf_(film)"
            title="Wikipedia: Elf (film)"
            target="_blank"
          >
            Elf is a 2003 American Christmas fantasy comedy film directed by Jon
            Favreau and written by David Berenbaum. It stars Will Ferrell, James
            Caan, Zooey Deschanel, Mary Steenburgen, Daniel Tay, Edward Asner,
            and Bob Newhart...
          </PreviewCard>
          <Message.Chat read timestamp="9:41am" body="🙃" />
        </Message.Content>
        <Message.Chat read timestamp="9:41am">
          Just read that!
        </Message.Chat>
        <Message.Chat read timestamp="9:41am">
          Laboris ipsum aliqua veniam cillum pariatur culpa ut sit tempor esse
          sit. Est id laboris cillum aliquip sit laboris tempor fugiat et nulla
          velit ea velit consequat. Incididunt sit ullamco fugiat minim nisi ea
          est incididunt et consequat fugiat. Qui tempor ut veniam aliqua dolor
          do Lorem nulla laborum Lorem qui.
        </Message.Chat>
      </Message>
      <Message from avatar={<Avatar name="Arctic Puffin" />}>
        <Message.Chat read timestamp="9:41am">
          :sob:
        </Message.Chat>
      </Message>
      <Message to>
        <Message.Action read timestamp="9:41am">
          Buddy left the North Pole.
        </Message.Action>
      </Message>
      <Message to>
        <Message.Action read timestamp="9:41am">
          Buddy came back to the North Pole.
        </Message.Action>
      </Message>
      <Message to>
        <Message.Action read timestamp="9:41am">
          Marked as important.
        </Message.Action>
      </Message>
      <Message to avatar={<Avatar name="Buddy" />}>
        <Message.Chat
          isNote
          read
          timestamp="9:41am"
          body="Note: <em>SAAAAAAANTAAAAAAAA!</em> www.helpscout.com"
        />
        {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
        <Message.Chat
          read
          timestamp="9:41am"
          caption="Caption before the bubble"
          metaPosition="top"
        >
          🦄❤️
        </Message.Chat>
      </Message>
      <Message to>
        <Message.Action read timestamp="9:41am">
          Marked as super important.
        </Message.Action>
      </Message>
      <Message from avatar={<Avatar name="Arctic Puffin" />}>
        <Message.Chat typing />
      </Message>
    </div>
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

<ArgsTable of={Message} />
