import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import MenuDropdown from '../menuDropdown';

export const items = [
    {
        isDisabled: false,
        isVisible: true,
        link: {
            value: 'http://www.google.ca/',
            isLocalized: true,
            type: 'INPUT'
        },
        openInNewTab: false,
        title: {
            value: 'Untitled 1',
            isLocalized: true,
            type: 'INPUT'
        },
        type: 'CUSTOM_LINK',
        uuid: '9be402d7-9aca-44e1-a5eb-b1c15327f64d'
    },
    {
        isDisabled: false,
        isVisible: true,
        link: {
            value: 'http://www.google.ca/',
            isLocalized: true,
            type: 'INPUT'
        },
        openInNewTab: false,
        title: {
            value: 'Untitled 2',
            isLocalized: true,
            type: 'INPUT'
        },
        type: 'CUSTOM_LINK',
        uuid: '9be402d7-9aca-44e1-a5eb-b1c15327f68d'
    }
];

<Meta title="Atoms/Menu Dropdown" component={MenuDropdown} />

# MenuDropdown
<br />

## `MenuDropdown` are ideal to display menuItems on hover.
<br />

### Default
<Canvas>
    <Story name="Default">
        <MenuDropdown items={items} />
    </Story>
</Canvas>


## Usage Example

```jsx
import MenuDropdown from '@appdirect/sfb-theme-components/src/atoms/menu-dropdown/MenuDropdown';

<MenuDropdown items={items} />

```
## Props

<ArgsTable of={MenuDropdown} />
