import ListItemIcon from "../ListItemIcon";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";

export const metaSettings = createStoryMetaSettings({
  component: ListItemIcon,
  enumPropNamesArray: ["margin"],
  iconPropNamesArray: ["icon"]
});

<Meta
  title="Navigation/List - (Coming Soon)/ListItemIcon - (Coming Soon)"
  component={ListItemIcon}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const listItemIconTemplate = createComponentTemplate(ListItemIcon);

<!--- Component documentation -->

# ListItemIcon

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Icon of a list item.

<Canvas>
  <Story name="Overview">{listItemIconTemplate.bind({})}</Story>
</Canvas>

## Props

<ArgsTable story="Overview" />
