UNPKG

@flexis/ui

Version:

Styleless React Components

82 lines 5 kB
import React from 'react'; import { action } from '@storybook/addon-actions'; import { storiesOf } from '../../helpers/stories'; import Menu, { MenuItem, MenuItemSeparator, MenuButton } from './'; export const stylableApi = ` Stylable API --- - ::button - ::item - ::itemSeparator `; export const events = { onClick: action('click'), onFocus: action('focus'), onBlur: action('blur') }; export default storiesOf('Menu', module) .addParameters({ info: stylableApi }) .add('with items', () => (<Menu style={{ width: '10rem' }}> <MenuItem> <MenuButton {...events}> Menu item #1 </MenuButton> </MenuItem> <MenuItem> <MenuButton {...events}> Menu item #2 </MenuButton> </MenuItem> <MenuItem> <MenuButton {...events}> Menu item #3 </MenuButton> </MenuItem> </Menu>)) .add('with separator', () => (<Menu style={{ width: '10rem' }}> <MenuItem> <MenuButton {...events}> Menu item #1 </MenuButton> </MenuItem> <MenuItemSeparator style={{ minHeight: '1em' }}/> <MenuItem> <MenuButton {...events}> Menu item #2 </MenuButton> </MenuItem> <MenuItem> <MenuButton {...events}> Menu item #3 </MenuButton> </MenuItem> </Menu>)) .add('with items and submenu', () => (<Menu style={{ width: '10rem' }}> <MenuItem> <MenuButton {...events}> Menu item #1 </MenuButton> </MenuItem> <MenuItem> <MenuButton {...events}> Menu item #2 </MenuButton> </MenuItem> <MenuItem> <Menu style={{ width: '10rem', marginLeft: '4rem' }}> <MenuItem> <MenuButton {...events}> Menu item #1 </MenuButton> </MenuItem> <MenuItem> <MenuButton {...events}> Menu item #2 </MenuButton> </MenuItem> </Menu> </MenuItem> </Menu>)); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWVudS5zdG9yaWVzLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL01lbnUvTWVudS5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLE1BQU0sRUFDTixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFDTixTQUFTLEVBQ1QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLElBQUksRUFBRSxFQUNaLFFBQVEsRUFDUixpQkFBaUIsRUFDakIsVUFBVSxFQUNWLE1BQU0sSUFBSSxDQUFDO0FBRVosTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHOzs7Ozs7Q0FNMUIsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRztJQUNyQixPQUFPLEVBQUUsTUFBTSxDQUFDLE9BQU8sQ0FBQztJQUN4QixPQUFPLEVBQUUsTUFBTSxDQUFDLE9BQU8sQ0FBQztJQUN4QixNQUFNLEVBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQztDQUN2QixDQUFDO0FBRUYsZUFBZSxTQUFTLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQztLQUN0QyxhQUFhLENBQUM7SUFDZCxJQUFJLEVBQUUsV0FBVztDQUNqQixDQUFDO0tBQ0QsR0FBRyxDQUNILFlBQVksRUFDWixHQUFHLEVBQUUsQ0FBQyxDQUNMLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLENBQy9CO0lBQUEsQ0FBQyxRQUFRLENBQ1I7S0FBQSxDQUFDLFVBQVUsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxDQUN0Qjs7S0FDRCxFQUFFLFVBQVUsQ0FDYjtJQUFBLEVBQUUsUUFBUSxDQUNWO0lBQUEsQ0FBQyxRQUFRLENBQ1I7S0FBQSxDQUFDLFVBQVUsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxDQUN0Qjs7S0FDRCxFQUFFLFVBQVUsQ0FDYjtJQUFBLEVBQUUsUUFBUSxDQUNWO0lBQUEsQ0FBQyxRQUFRLENBQ1I7S0FBQSxDQUFDLFVBQVUsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxDQUN0Qjs7S0FDRCxFQUFFLFVBQVUsQ0FDYjtJQUFBLEVBQUUsUUFBUSxDQUNYO0dBQUEsRUFBRSxJQUFJLENBQUMsQ0FDUCxDQUNEO0tBQ0EsR0FBRyxDQUNILGdCQUFnQixFQUNoQixHQUFHLEVBQUUsQ0FBQyxDQUNMLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLENBQy9CO0lBQUEsQ0FBQyxRQUFRLENBQ1I7S0FBQSxDQUFDLFVBQVUsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxDQUN0Qjs7S0FDRCxFQUFFLFVBQVUsQ0FDYjtJQUFBLEVBQUUsUUFBUSxDQUNWO0lBQUEsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUMvQztJQUFBLENBQUMsUUFBUSxDQUNSO0tBQUEsQ0FBQyxVQUFVLENBQUMsSUFBSSxNQUFNLENBQUMsQ0FDdEI7O0tBQ0QsRUFBRSxVQUFVLENBQ2I7SUFBQSxFQUFFLFFBQVEsQ0FDVjtJQUFBLENBQUMsUUFBUSxDQUNSO0tBQUEsQ0FBQyxVQUFVLENBQUMsSUFBSSxNQUFNLENBQUMsQ0FDdEI7O0tBQ0QsRUFBRSxVQUFVLENBQ2I7SUFBQSxFQUFFLFFBQVEsQ0FDWDtHQUFBLEVBQUUsSUFBSSxDQUFDLENBQ1AsQ0FDRDtLQUNBLEdBQUcsQ0FDSCx3QkFBd0IsRUFDeEIsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsQ0FBQyxDQUMvQjtJQUFBLENBQUMsUUFBUSxDQUNSO0tBQUEsQ0FBQyxVQUFVLENBQUMsSUFBSSxNQUFNLENBQUMsQ0FDdEI7O0tBQ0QsRUFBRSxVQUFVLENBQ2I7SUFBQSxFQUFFLFFBQVEsQ0FDVjtJQUFBLENBQUMsUUFBUSxDQUNSO0tBQUEsQ0FBQyxVQUFVLENBQUMsSUFBSSxNQUFNLENBQUMsQ0FDdEI7O0tBQ0QsRUFBRSxVQUFVLENBQ2I7SUFBQSxFQUFFLFFBQVEsQ0FDVjtJQUFBLENBQUMsUUFBUSxDQUNSO0tBQUEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUNuRDtNQUFBLENBQUMsUUFBUSxDQUNSO09BQUEsQ0FBQyxVQUFVLENBQUMsSUFBSSxNQUFNLENBQUMsQ0FDdEI7O09BQ0QsRUFBRSxVQUFVLENBQ2I7TUFBQSxFQUFFLFFBQVEsQ0FDVjtNQUFBLENBQUMsUUFBUSxDQUNSO09BQUEsQ0FBQyxVQUFVLENBQUMsSUFBSSxNQUFNLENBQUMsQ0FDdEI7O09BQ0QsRUFBRSxVQUFVLENBQ2I7TUFBQSxFQUFFLFFBQVEsQ0FDWDtLQUFBLEVBQUUsSUFBSSxDQUNQO0lBQUEsRUFBRSxRQUFRLENBQ1g7R0FBQSxFQUFFLElBQUksQ0FBQyxDQUNQLENBQ0QsQ0FBQyJ9