import MenuDivider from "../MenuDivider";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createComponentTemplate } from "../../../../storybook/functions/createComponentTemplate";
import Menu from "../../Menu/Menu";
import MenuItem from "../../MenuItem/MenuItem";

<Meta title="Navigation/Menu - (Coming Soon)/MenuDivider - (Coming Soon)" component={MenuDivider} />

<!--- Component template -->

export const menuDividerTemplate = createComponentTemplate(MenuDivider);

<!--- Component documentation -->

# Menu Divider

- [Overview](#overview)
- [Props](#props)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Use menu divider for create separation between to menu items inside a menu

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

## Props

<ArgsTable of={MenuDivider} />

## Use cases and examples

### Menu with divider

<Canvas>
  <Story name="Menu with divider">
    <div style={{ width: 200 }}>
      <Menu>
        <MenuItem title="Menu item 1" />
        <MenuDivider />
        <MenuItem title="Menu item 2" />
      </Menu>
    </div>
  </Story>
</Canvas>

### Sub menu with divider

<Canvas>
  <Story name="Sub menu with divider">
    <div style={{ width: 200, height: 90 }}>
      <Menu>
        <MenuItem title="Item with sub menu">
          <Menu>
            <MenuItem title="Item 1" />
            <MenuDivider />
            <MenuItem title="Item 2" />
          </Menu>
        </MenuItem>
      </Menu>
    </div>
  </Story>
</Canvas>
