import { Story, Meta, Canvas, ArgsTable } from '@storybook/blocks'
import Bullet from '../Bullet';
import * as BulletStories from './Bullet.stories';

<Meta of={BulletStories} />

# Bullet

<br />

## `Bullets` are components comprised of an icon and text that can be used to create customized lists.

<br />

### Default

<Canvas>
  <Story of={BulletStories.Default} />
</Canvas>

### With icon

<Canvas>
  <Story of={BulletStories.WithIcon} />
</Canvas>

### With tooltip

<Canvas>
  <Story of={BulletStories.WithTooltip} />
</Canvas>

## Usage Example

```jsx
import Bullet from '@appdirect/sfb-theme-components/src/atoms/bullet/Bullet'

<Bullet
    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    iconType="plus"
    tooltip="Aenean vel arcu ac purus mollis sollicitudin. Donec felis tortor, pretiu"
/>
```

## Props

<ArgsTable of={Bullet} />
