box-ui-elements-mlh
Version:
70 lines (68 loc) • 3.7 kB
JavaScript
import * as React from 'react';
import { boolean } from '@storybook/addon-knobs';
import { State, Store } from '@sambego/storybook-state';
import Link from '../../link/Link';
import MenuItem from '../MenuItem';
import MenuLinkItem from '../MenuLinkItem';
import MenuSectionHeader from '../MenuSectionHeader';
import MenuSeparator from '../MenuSeparator';
import SelectMenuLinkItem from '../SelectMenuLinkItem';
import SubmenuItem from '../SubmenuItem';
import Menu from '../Menu';
import notes from './Menu.stories.md';
export var basic = function basic() {
return /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "View Profile"), /*#__PURE__*/React.createElement(MenuItem, {
showRadar: true
}, "Help"), /*#__PURE__*/React.createElement(MenuSeparator, null), /*#__PURE__*/React.createElement(MenuSectionHeader, null, "Menu Section"), /*#__PURE__*/React.createElement(MenuLinkItem, null, /*#__PURE__*/React.createElement(Link, {
href: "/#"
}, "Awesome Link")));
};
export var withSubmenu = function withSubmenu() {
return /*#__PURE__*/React.createElement("div", {
style: {
maxWidth: '220px'
}
}, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "View Profile"), /*#__PURE__*/React.createElement(SubmenuItem, null, "Submenu", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "View Profile"), /*#__PURE__*/React.createElement(MenuItem, null, "Help"))), /*#__PURE__*/React.createElement(MenuItem, null, "Help")));
};
export var withSubmenuFlip = function withSubmenuFlip() {
return /*#__PURE__*/React.createElement("div", {
style: {
maxWidth: '220px'
}
}, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "View Profile"), /*#__PURE__*/React.createElement(SubmenuItem, null, "Submenu", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "View Profile"), /*#__PURE__*/React.createElement(MenuItem, null, "Help"), /*#__PURE__*/React.createElement(MenuItem, null, "Help"))), /*#__PURE__*/React.createElement(MenuItem, null, "Help")));
};
export var withSelectMenu = function withSelectMenu() {
return /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(SelectMenuLinkItem, {
isSelected: boolean('isSelected', true)
}, /*#__PURE__*/React.createElement(Link, {
href: "http://opensource.box.com/box-ui-elements/storybook"
}, "View Profile")), /*#__PURE__*/React.createElement(SelectMenuLinkItem, null, /*#__PURE__*/React.createElement(Link, {
href: "http://opensource.box.com/box-ui-elements/storybook"
}, "Awesome Link")));
};
export var withChildOnResize = function withChildOnResize() {
var componentStore = new Store({
isLargeMenu: false
});
var setVisibility = function setVisibility() {
if (window.innerWidth < 700 && !componentStore.get('isLargeMenu')) {
componentStore.set({
isLargeMenu: true
});
}
};
window.addEventListener('resize', setVisibility);
return /*#__PURE__*/React.createElement(State, {
store: componentStore
}, function (state) {
return /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, null, "View Profile"), /*#__PURE__*/React.createElement(MenuItem, null, "Help"), state.isLargeMenu && /*#__PURE__*/React.createElement(MenuItem, null, "Visible on Resize"), /*#__PURE__*/React.createElement(MenuItem, null, "Last Item"));
});
};
export default {
title: 'Components|Menu',
component: Menu,
parameters: {
notes: notes
}
};
//# sourceMappingURL=Menu.stories.js.map