import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import Alert from './'
import { Button, Heading, Link, Text } from '../index'

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

# Alert

An Alert component provides contextual feedback messages for user actions with the ability to provide additional actions.

<Canvas>
  <Story name="default">
    <Alert>Buddy!</Alert>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Everywhere

<br />
<br />

### Props

<ArgsTable of={Alert} />

## Stories

#### With content

<Canvas>
  <Story name="with content">
    <Alert>
      <Heading size="h1">H1 Heading</Heading>
      <Heading size="h2">H2 Heading</Heading>
      <Heading size="h3">H3 Heading</Heading>
      <br />
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </Alert>
  </Story>
</Canvas>

#### Dismissible

<Canvas>
  <Story name="dismissible">
    <div>
      <Alert dismissible>Buddy! This is dismissible.</Alert>
      <p>Content</p>
    </div>
  </Story>
</Canvas>

#### With Badge

<Canvas>
  <Story name="with badge">
    <div>
      <Alert badge="Wow">Badge Buddy!</Alert>
    </div>
  </Story>
</Canvas>

#### With Icon

<Canvas>
  <Story name="with icon">
    <div>
      <Alert icon>Icon Buddy!</Alert>
    </div>
  </Story>
</Canvas>

#### Status

<Canvas>
  <Story name="status">
    <div>
      <Alert status="info">Info Buddy!</Alert>
      <Alert status="error">Error Buddy!</Alert>
      <Alert status="success">Success Buddy!</Alert>
      <Alert status="warning">Warning Buddy!</Alert>
    </div>
  </Story>
</Canvas>

#### With action on the right

<Canvas>
  <Story name="action on the right">
    <div>
      <Alert
        actionRight={
          <Button size="sm" theme="grey" outlined>
            Action!
          </Button>
        }
        icon
      >
        Action Right Buddy with Icon!
      </Alert>
    </div>
  </Story>
</Canvas>
