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

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

# StatusBar

A StatusBar component provides contextual feedback messages for user actions.

<Canvas>
  <Story name="default">
    <StatusBar
      isOpen
      closeOnClick={boolean('closeOnClick', false)}
      status={select(
        'Status',
        {
          error: 'error',
          info: 'info',
          success: 'success',
          warning: 'warning',
        },
        'info'
      )}
      theme={select(
        'Theme',
        {
          light: 'light',
          bold: 'bold',
        },
        'light'
      )}
      onClick={action('onClick')}
      onOpen={action('onOpen')}
      onClose={action('onClose')}
    >
      How about that uh? <StatusBar.Button>Let's go there</StatusBar.Button>
    </StatusBar>
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

<ArgsTable of={StatusBar} />

## StatusBar.Button

A `StatusBar.Button` component provides an actionable UI

<ArgsTable of={StatusBar.Button} />
