forked from storybookjs/storybook
/
Menu.stories.tsx
92 lines (82 loc) 路 2.26 KB
/
Menu.stories.tsx
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { Fragment, FunctionComponent } from 'react';
import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
import { styled } from '@storybook/theming';
import { MenuItemIcon, SidebarMenu, ToolbarMenu, MenuButton, SidebarMenuList } from './Menu';
import { useMenu } from '../../containers/menu';
export default {
component: MenuItemIcon,
title: 'UI/Sidebar/Menu',
decorators: [
(StoryFn: FunctionComponent) => (
<Fragment>
<StoryFn />
</Fragment>
),
],
};
const fakemenu = [
{ title: 'has icon', left: <MenuItemIcon icon="check" />, id: 'icon' },
{
title: 'has imgSrc',
left: <MenuItemIcon imgSrc="https://via.placeholder.com/20" />,
id: 'img',
},
{ title: 'has neither', left: <MenuItemIcon />, id: 'non' },
];
export const Items = () => <TooltipLinkList links={fakemenu} />;
export const Real = () => <SidebarMenu menu={fakemenu} isHighlighted />;
export const Toolbar = () => <ToolbarMenu menu={fakemenu} />;
const DoubleThemeRenderingHack = styled.div({
'#root > [data-side="left"] > &': {
textAlign: 'right',
},
});
const ExpandedMenu: FunctionComponent<{ menu: any }> = ({ menu }) => (
<DoubleThemeRenderingHack>
<WithTooltip
placement="bottom"
trigger="click"
closeOnClick
startOpen
tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
>
<MenuButton outline small containsIcon highlighted={false} title="Shortcuts">
<Icons icon="ellipsis" />
</MenuButton>
</WithTooltip>
</DoubleThemeRenderingHack>
);
export const Expanded = () => {
const menu = useMenu(
{
// @ts-ignore
getShortcutKeys: () => ({}),
getAddonsShortcuts: () => ({}),
versionUpdateAvailable: () => false,
releaseNotesVersion: () => '6.0.0',
},
false,
false,
false,
false,
false
);
return <ExpandedMenu menu={menu} />;
};
export const ExpandedWithoutReleaseNotes = () => {
const menu = useMenu(
{
// @ts-ignore
getShortcutKeys: () => ({}),
getAddonsShortcuts: () => ({}),
versionUpdateAvailable: () => false,
releaseNotesVersion: () => undefined,
},
false,
false,
false,
false,
false
);
return <ExpandedMenu menu={menu} />;
};