@flexis/ui
Version:
Styleless React Components
82 lines • 5 kB
JavaScript
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