import { Meta } from "@storybook/blocks";
import { ComponentRuleWithLabelDo, ComponentRuleWithLabelDont } from "./MenuItem.stories.helpers";
import * as MenuItemStories from "./MenuItem.stories";

<Meta of={MenuItemStories} />

# Menu Item

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

## Overview

Use menu item for drawing one options that displayed inside a menu.

<Canvas of={MenuItemStories.Overview} />

## Props

<PropsTable />

## Variants

### States

<Canvas of={MenuItemStories.States} />

### Icons

<Canvas of={MenuItemStories.Icons} />

### Label

<Canvas of={MenuItemStories.Label} />

### SubMenu

<Canvas of={MenuItemStories.SubMenu} />

### Overflow

<Canvas of={MenuItemStories.Overflow} />

### Tooltips

<Canvas of={MenuItemStories.TooltipStory} />

## Do's and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: ComponentRuleWithLabelDo(),
        description: "Keep the label text in the menu item short and informative. Use 1 word only."
      },
      negative: {
        component: ComponentRuleWithLabelDont(),
        description: "Dont use long text with more than 1 word, to ensure clarity and to avoid ellipsis."
      }
    }
  ]}
/>