import { Layout, Playground, Attributes } from 'lib/components'
import { Dot } from 'components'

export const meta = {
  title: 'Dot',
  group: 'Data Display',
}

## Dot

Display an indicator of standardization status.

<Playground
  scope={{ Dot }}
  code={`
<>
  <Dot style={{ marginRight: '15px' }} />
  <Dot style={{ marginRight: '15px' }} type="success" />
  <Dot style={{ marginRight: '15px' }} type="warning" />
  <Dot type="error" />
</>
`}
/>

<Playground
  scope={{ Dot }}
  code={`
<>
  <Dot style={{ marginRight: '20px' }}>Canceled</Dot>
  <Dot style={{ marginRight: '20px' }} type="success">Ready</Dot>
  <Dot style={{ marginRight: '20px' }} type="warning">Warning</Dot>
  <Dot type="error">Error</Dot>
</>
`}
/>

<Attributes edit="/pages/en-us/components/dot.mdx">
<Attributes.Title>Dot.Props</Attributes.Title>

| Attribute | Description  | Type             | Accepted values       | Default   |
| --------- | ------------ | ---------------- | --------------------- | --------- |
| **type**  | dot type     | `DotTypes`       | [DotTypes](#dottypes) | `default` |
| ...       | native props | `HTMLAttributes` | -                     | -         |

<Attributes.Title>DotTypes</Attributes.Title>

```ts
type DotTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
