import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Cash, CashOutline } from '@useblu/ocean-icons-react';
import UnorderedListItem from '../UnorderedListItem';

<Meta title="Components/List/UnorderedListItem" component={UnorderedListItem} />

# Unordered List Item API

The API documentation of the Unordered List Item React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { UnorderedListItem } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <UnorderedListItem
      description="Lorem ipsum dolor sit amet consectetur porta feugiat faucibus scelerisque."
      iconVariant="outline"
      title="Lorem ipsum"
      icon={CashOutline}
    />
  </Story>
</Canvas>

## Props

<ArgsTable of="." />

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class                               | Description                                   |
| ------------------------------------------ | --------------------------------------------- |
| .ods-unordered-list-item                   | Styles applied to the root element.           |
| .ods-unordered-list-item\_\_icon           | Styles applied to the icon element.           |
| .ods-unordered-list-item\_\_icon-container | Styles applied to the icon container element. |
| .ods-unordered-list-item\_\_title          | Styles applied to the title element.          |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Tag/Tag.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      description: 'Lorem ipsum dolor sit amet.',
      iconVariant: 'chevron',
      title: 'Title',
    }}
    argTypes={{
      icon: { control: null },
    }}
  >
    {(props) => {
      const { icon, ...rest } = props;
      return (
        <UnorderedListItem
          icon={props.iconVariant === 'solid' ? Cash : CashOutline}
          {...rest}
        />
      );
    }}
  </Story>
</Canvas>
