Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import React from 'react';
import { Story } from '@storybook/react';
import PopoverMenu, { PopoverMenuProps } from '../components/PopoverMenu';
import { DropdownItem } from '../components/types';
import { Box } from '@mui/material';
export default {
title: 'PopoverMenu',
component: PopoverMenu,
};
const PopoverMenuTemplate: Story<PopoverMenuProps> = (args) => {
return (
<Box display='flex' justifyContent='space-between'>
<PopoverMenu {...args} />
<PopoverMenu {...args} />
<PopoverMenu {...args} />
</Box>
);
};
export const Default = PopoverMenuTemplate.bind({});
Default.args = {
anchor: (
<>
<span>Test</span>
<span>Anchor</span>
</>
),
menuSections: [
[{ label: 'Menu Above', value: 'Menu Above' }],
[{ label: 'Menu Below', value: 'Menu Below' }],
[{ label: 'Dangerous Option', value: 'Danger', type: 'destructive' }],
[{ label: 'Disabled Option', value: 'Disabled', disabled: true }],
],
onClick: (item: DropdownItem) => window.alert(`you clicked ${item.value}`),
};
export const ItemizedOnClick = PopoverMenuTemplate.bind({});
ItemizedOnClick.args = {
anchor: 'Test Itemized Onclick',
menuSections: [
[{ label: 'Menu Above', value: 'Menu Above', onClick: () => window.alert('You clicked menu above') }],
[{ label: 'Menu Below', value: 'Menu Below', onClick: () => window.alert('You clicked menu below') }],
[{ label: 'Dangerous Option', value: 'Danger', onClick: () => window.alert('Danger!!'), type: 'destructive' }],
[{ label: 'Disabled Option', value: 'Disabled', disabled: true }],
],
};
|