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

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

# StatusDot

An StatusDot component is a UI element that helps indicate the status of something.

<Canvas>
  <Story name="default">
    <StatusDot
      status={select(
        'Status',
        {
          online: 'online',
          offline: 'offline',
          busy: 'busy',
          new: 'new',
          active: 'active',
          inactive: 'inactive',
        },
        'online'
      )}
      size={select('Size', { md: 'md', sm: 'sm' }, 'md')}
      inline
      outerBorderWidth={number('outerBorderWidth', 0)}
      outerBorderColor={color('outerBorderColor', '')}
    />
  </Story>
</Canvas>

#### Reference

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

<br />
<br />

### Props

<ArgsTable of={StatusDot} />
