import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate, createStoryMetaSettings } from "../../../../storybook";
import MenuItemButton from "../MenuItemButton";
import {
  menuItemButtonDisabledTemplate,
  menuItemButtonIconTemplate,
  menuItemButtonKindsTemplate
} from "./menuItemButton.stories";

export const metaSettings = createStoryMetaSettings({
  component: MenuItemButton,
  enumPropNamesArray: ["kind", "tooltipPosition"],
  iconPropNamesArray: ["leftIcon", "rightIcon"]
});

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

<!--- Component template -->

export const menuItemButtonTemplate = createComponentTemplate(MenuItemButton);

<!--- Component documentation -->

# Menu Item Button

- [Overview](#overview)
- [Props](#props)
- [Variants](#variants)
- [Feedback](#feedback)

## Overview

<Canvas>
  <Story name="Overview" args={{ children: "Menu item children" }}>
    {menuItemButtonTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={MenuItemButton} />

<Tip>
  Need to place multiple buttons in a grid-like layout inside a Menu? Consider using the <code>MenuGridItem</code>{" "}
  component
</Tip>

## Variants

### States

<Canvas>
  <Story name="States">{menuItemButtonKindsTemplate.bind({})}</Story>
</Canvas>

### Disabled

<Canvas>
  <Story name="Disabled">{menuItemButtonDisabledTemplate.bind({})}</Story>
</Canvas>

### Icons

<Canvas>
  <Story name="Icons">{menuItemButtonIconTemplate.bind({})}</Story>
</Canvas>
