box-ui-elements-mlh
Version:
73 lines (70 loc) • 2.83 kB
JavaScript
import * as React from 'react';
import { boolean } from '@storybook/addon-knobs';
import Avatar from '../avatar/Avatar';
import Link from '../link/Link';
import Menu from '../menu/Menu';
import MenuItem from '../menu/MenuItem';
import MenuLinkItem from '../menu/MenuLinkItem';
import MenuSeparator from '../menu/MenuSeparator';
import MenuToggle from './MenuToggle';
import PlainButton from '../plain-button/PlainButton';
import DropdownMenu from './DropdownMenu';
import notes from './DropdownMenu.stories.md';
function generateClickHandler(message) {
return function (event) {
event.preventDefault();
/* eslint-disable-next-line no-console */
console.log("".concat(message, " menu option selected"));
};
}
export var basic = function basic() {
return /*#__PURE__*/React.createElement(DropdownMenu, {
onMenuOpen: function onMenuOpen() {
/* eslint-disable-next-line no-console */
console.log('menu opened');
},
onMenuClose: function onMenuClose() {
/* eslint-disable-next-line no-console */
console.log('menu closed');
}
}, /*#__PURE__*/React.createElement(PlainButton, {
className: "dropdown-menu-example-button",
type: "button"
}, /*#__PURE__*/React.createElement(MenuToggle, null, /*#__PURE__*/React.createElement(Avatar, {
id: "123",
name: "Jay Tee"
}))), /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
onClick: generateClickHandler('View Profile')
}, "View Profile"), /*#__PURE__*/React.createElement(MenuItem, {
onClick: generateClickHandler('Help')
}, "Help"), /*#__PURE__*/React.createElement(MenuItem, {
onClick: generateClickHandler('Should Not Fire This Handler'),
isDisabled: boolean('isDisabled', true)
}, "Disabled Option"), /*#__PURE__*/React.createElement(MenuSeparator, null), /*#__PURE__*/React.createElement(MenuLinkItem, null, /*#__PURE__*/React.createElement(Link, {
href: "/logout-example-link",
onClick: generateClickHandler('Log Out')
}, "Log Out"))));
};
export var withLinkMenu = function withLinkMenu() {
return (
/*#__PURE__*/
// When using `MenuToggle` in an element with the `lnk` class, the caret icon is automatically colored blue.
React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(PlainButton, {
className: "lnk"
}, /*#__PURE__*/React.createElement(MenuToggle, null, "Hello")), /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem
/* eslint-disable-next-line no-console */
, {
onClick: function onClick() {
return console.log('hey');
}
}, "Menu Item")))
);
};
export default {
title: 'Components|DropdownMenu',
component: DropdownMenu,
parameters: {
notes: notes
}
};
//# sourceMappingURL=DropdownMenu.stories.js.map