@flexis/ui
Version:
Styleless React Components
141 lines • 10.9 kB
JavaScript
import React from 'react';
import { action } from '@storybook/addon-actions';
import { select, boolean } from '@storybook/addon-knobs/react';
import { storiesOf, buildInfo } from '../../helpers/stories';
import { AlignValues } from '../common/types';
import Dropdown, { DropdownContent } from './';
export const stylableApi = `
Stylable API
---
- :active
- :disable
- ::content
- :active
- :offset
${buildInfo([
{
values: AlignValues,
prefix: ':',
postfix: 'align',
indent: 1
}
])}
`;
export default storiesOf('Dropdown', module)
.addParameters({
info: stylableApi
})
.add('with simple content', () => (<Dropdown onToggle={action('toggle')} align={select('Align', AlignValues, 'start')} disabled={boolean('Disabled', false)} blockScroll={boolean('Block scroll', true)} hideOnClick={boolean('Hide on click', false)}>
<button id='dropdownToggleButton'>
Click me!
</button>
<DropdownContent style={{
padding: '1rem',
width: '12rem',
textAlign: 'center'
}}>
Dropdown content.<br />
<button>text</button>
</DropdownContent>
</Dropdown>))
.add('with default active', () => (<Dropdown onToggle={action('toggle')} align={select('Align', AlignValues, 'start')} disabled={boolean('Disabled', false)} blockScroll={boolean('Block scroll', true)} hideOnClick={boolean('Hide on click', false)} defaultActive>
<button>
Click me!
</button>
<DropdownContent style={{
padding: '1rem',
width: '12rem',
textAlign: 'center'
}}>
Dropdown content.
</DropdownContent>
</Dropdown>))
.add('with disabled state', () => (<Dropdown onToggle={action('toggle')} align={select('Align', AlignValues, 'start')} disabled={boolean('Disabled', true)} blockScroll={boolean('Block scroll', true)} hideOnClick={boolean('Hide on click', false)}>
<button>
Click me!
</button>
<DropdownContent style={{
padding: '1rem',
width: '12rem',
textAlign: 'center'
}}>
Dropdown content.
</DropdownContent>
</Dropdown>))
.add('with active state', () => (<Dropdown onToggle={action('toggle')} align={select('Align', AlignValues, 'start')} disabled={boolean('Disabled', false)} active={boolean('Active', true)} blockScroll={boolean('Block scroll', true)} hideOnClick={boolean('Hide on click', false)}>
<button>
Click me!
</button>
<DropdownContent style={{
padding: '1rem',
width: '12rem',
textAlign: 'center'
}}>
Dropdown content.
</DropdownContent>
</Dropdown>))
.add('with scroll', () => (<div style={{
padding: '100px 0 1200px'
}}>
<Dropdown onToggle={action('toggle')} align={select('Align', AlignValues, 'start')} disabled={boolean('Disabled', false)} blockScroll={boolean('Block scroll', true)}>
<button>
Click me!
</button>
<DropdownContent style={{
padding: '1rem',
width: '12rem',
textAlign: 'center'
}}>
Dropdown content.
</DropdownContent>
</Dropdown>
</div>))
.add('with fixed block', () => (<div style={{
padding: '100px 0 1200px'
}}>
<div style={{
position: 'fixed',
top: '30px',
left: '100px',
border: '1px solid black',
width: '300px',
height: '200px',
overflow: 'auto'
}}>
<div style={{
padding: '100px 0 1200px'
}}>
<Dropdown onToggle={action('toggle')} align={select('Align', AlignValues, 'start')} disabled={boolean('Disabled', false)} blockScroll={boolean('Block scroll', true)}>
<button>
Click me!
</button>
<DropdownContent style={{
padding: '1rem',
width: '12rem',
textAlign: 'center'
}}>
Dropdown content.
</DropdownContent>
</Dropdown>
</div>
</div>
</div>))
.add('with two dropdowns', () => (<>
<Dropdown onToggle={action('toggle')}>
<button id='dropdownToggleButton'>
Click me!
</button>
<DropdownContent>
Dropdown content.
</DropdownContent>
</Dropdown>
<Dropdown onToggle={action('toggle')}>
<button id='dropdownToggleButton2'>
Click me!
</button>
<DropdownContent>
Dropdown content.
</DropdownContent>
</Dropdown>
</>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHJvcGRvd24uc3Rvcmllcy5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ecm9wZG93bi9Ecm9wZG93bi5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLE1BQU0sRUFDTixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFDTixNQUFNLEVBQ04sT0FBTyxFQUNQLE1BQU0sOEJBQThCLENBQUM7QUFDdEMsT0FBTyxFQUNOLFNBQVMsRUFDVCxTQUFTLEVBQ1QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQ04sV0FBVyxFQUNYLE1BQU0saUJBQWlCLENBQUM7QUFDekIsT0FBTyxRQUFRLEVBQUUsRUFDaEIsZUFBZSxFQUNmLE1BQU0sSUFBSSxDQUFDO0FBRVosTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHOzs7Ozs7OztFQVF6QixTQUFTLENBQUM7SUFDWDtRQUNDLE1BQU0sRUFBRyxXQUFXO1FBQ3BCLE1BQU0sRUFBRyxHQUFHO1FBQ1osT0FBTyxFQUFFLE9BQU87UUFDaEIsTUFBTSxFQUFHLENBQUM7S0FDVjtDQUNELENBQUM7Q0FDRCxDQUFDO0FBRUYsZUFBZSxTQUFTLENBQUMsVUFBVSxFQUFFLE1BQU0sQ0FBQztLQUMxQyxhQUFhLENBQUM7SUFDZCxJQUFJLEVBQUUsV0FBVztDQUNqQixDQUFDO0tBQ0QsR0FBRyxDQUNILHFCQUFxQixFQUNyQixHQUFHLEVBQUUsQ0FBQyxDQUNMLENBQUMsUUFBUSxDQUNSLFFBQVEsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUMzQixLQUFLLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxPQUFPLENBQUMsQ0FBQyxDQUM3QyxRQUFRLENBQUMsQ0FBQyxPQUFPLENBQUMsVUFBVSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQ3JDLFdBQVcsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FDM0MsV0FBVyxDQUFDLENBQUMsT0FBTyxDQUFDLGVBQWUsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUU3QztJQUFBLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxzQkFBc0IsQ0FDaEM7O0lBQ0QsRUFBRSxNQUFNLENBQ1I7SUFBQSxDQUFDLGVBQWUsQ0FDZixLQUFLLENBQUMsQ0FBQztJQUNOLE9BQU8sRUFBSSxNQUFNO0lBQ2pCLEtBQUssRUFBTSxPQUFPO0lBQ2xCLFNBQVMsRUFBRSxRQUFRO0NBQ25CLENBQUMsQ0FFRjtzQkFBaUIsQ0FBQyxFQUFFLENBQUEsRUFDcEI7S0FBQSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUNyQjtJQUFBLEVBQUUsZUFBZSxDQUNsQjtHQUFBLEVBQUUsUUFBUSxDQUFDLENBQ1gsQ0FDRDtLQUNBLEdBQUcsQ0FDSCxxQkFBcUIsRUFDckIsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLFFBQVEsQ0FDUixRQUFRLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FDM0IsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FDN0MsUUFBUSxDQUFDLENBQUMsT0FBTyxDQUFDLFVBQVUsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUNyQyxXQUFXLENBQUMsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQzNDLFdBQVcsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDN0MsYUFBYSxDQUViO0lBQUEsQ0FBQyxNQUFNLENBQ047O0lBQ0QsRUFBRSxNQUFNLENBQ1I7SUFBQSxDQUFDLGVBQWUsQ0FDZixLQUFLLENBQUMsQ0FBQztJQUNOLE9BQU8sRUFBSSxNQUFNO0lBQ2pCLEtBQUssRUFBTSxPQUFPO0lBQ2xCLFNBQVMsRUFBRSxRQUFRO0NBQ25CLENBQUMsQ0FFRjs7SUFDRCxFQUFFLGVBQWUsQ0FDbEI7R0FBQSxFQUFFLFFBQVEsQ0FBQyxDQUNYLENBQ0Q7S0FDQSxHQUFHLENBQ0gscUJBQXFCLEVBQ3JCLEdBQUcsRUFBRSxDQUFDLENBQ0wsQ0FBQyxRQUFRLENBQ1IsUUFBUSxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQzNCLEtBQUssQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQzdDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FDcEMsV0FBVyxDQUFDLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUMzQyxXQUFXLENBQUMsQ0FBQyxPQUFPLENBQUMsZUFBZSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBRTdDO0lBQUEsQ0FBQyxNQUFNLENBQ047O0lBQ0QsRUFBRSxNQUFNLENBQ1I7SUFBQSxDQUFDLGVBQWUsQ0FDZixLQUFLLENBQUMsQ0FBQztJQUNOLE9BQU8sRUFBSSxNQUFNO0lBQ2pCLEtBQUssRUFBTSxPQUFPO0lBQ2xCLFNBQVMsRUFBRSxRQUFRO0NBQ25CLENBQUMsQ0FFRjs7SUFDRCxFQUFFLGVBQWUsQ0FDbEI7R0FBQSxFQUFFLFFBQVEsQ0FBQyxDQUNYLENBQ0Q7S0FDQSxHQUFHLENBQ0gsbUJBQW1CLEVBQ25CLEdBQUcsRUFBRSxDQUFDLENBQ0wsQ0FBQyxRQUFRLENBQ1IsUUFBUSxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQzNCLEtBQUssQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQzdDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDckMsTUFBTSxDQUFDLENBQUMsT0FBTyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUNoQyxXQUFXLENBQUMsQ0FBQyxPQUFPLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQzNDLFdBQVcsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FFN0M7SUFBQSxDQUFDLE1BQU0sQ0FDTjs7SUFDRCxFQUFFLE1BQU0sQ0FDUjtJQUFBLENBQUMsZUFBZSxDQUNmLEtBQUssQ0FBQyxDQUFDO0lBQ04sT0FBTyxFQUFJLE1BQU07SUFDakIsS0FBSyxFQUFNLE9BQU87SUFDbEIsU0FBUyxFQUFFLFFBQVE7Q0FDbkIsQ0FBQyxDQUVGOztJQUNELEVBQUUsZUFBZSxDQUNsQjtHQUFBLEVBQUUsUUFBUSxDQUFDLENBQ1gsQ0FDRDtLQUNBLEdBQUcsQ0FDSCxhQUFhLEVBQ2IsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLEdBQUcsQ0FDSCxLQUFLLENBQUMsQ0FBQztJQUNOLE9BQU8sRUFBRSxnQkFBZ0I7Q0FDekIsQ0FBQyxDQUVGO0lBQUEsQ0FBQyxRQUFRLENBQ1IsUUFBUSxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQzNCLEtBQUssQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQzdDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDckMsV0FBVyxDQUFDLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUUzQztLQUFBLENBQUMsTUFBTSxDQUNOOztLQUNELEVBQUUsTUFBTSxDQUNSO0tBQUEsQ0FBQyxlQUFlLENBQ2YsS0FBSyxDQUFDLENBQUM7SUFDTixPQUFPLEVBQUksTUFBTTtJQUNqQixLQUFLLEVBQU0sT0FBTztJQUNsQixTQUFTLEVBQUUsUUFBUTtDQUNuQixDQUFDLENBRUY7O0tBQ0QsRUFBRSxlQUFlLENBQ2xCO0lBQUEsRUFBRSxRQUFRLENBQ1g7R0FBQSxFQUFFLEdBQUcsQ0FBQyxDQUNOLENBQ0Q7S0FDQSxHQUFHLENBQ0gsa0JBQWtCLEVBQ2xCLEdBQUcsRUFBRSxDQUFDLENBQ0wsQ0FBQyxHQUFHLENBQ0gsS0FBSyxDQUFDLENBQUM7SUFDTixPQUFPLEVBQUUsZ0JBQWdCO0NBQ3pCLENBQUMsQ0FFRjtJQUFBLENBQUMsR0FBRyxDQUNILEtBQUssQ0FBQyxDQUFDO0lBQ04sUUFBUSxFQUFFLE9BQU87SUFDakIsR0FBRyxFQUFPLE1BQU07SUFDaEIsSUFBSSxFQUFNLE9BQU87SUFDakIsTUFBTSxFQUFJLGlCQUFpQjtJQUMzQixLQUFLLEVBQUssT0FBTztJQUNqQixNQUFNLEVBQUksT0FBTztJQUNqQixRQUFRLEVBQUUsTUFBTTtDQUNoQixDQUFDLENBRUY7S0FBQSxDQUFDLEdBQUcsQ0FDSCxLQUFLLENBQUMsQ0FBQztJQUNOLE9BQU8sRUFBRSxnQkFBZ0I7Q0FDekIsQ0FBQyxDQUVGO01BQUEsQ0FBQyxRQUFRLENBQ1IsUUFBUSxDQUFDLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQzNCLEtBQUssQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQzdDLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDckMsV0FBVyxDQUFDLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUUzQztPQUFBLENBQUMsTUFBTSxDQUNOOztPQUNELEVBQUUsTUFBTSxDQUNSO09BQUEsQ0FBQyxlQUFlLENBQ2YsS0FBSyxDQUFDLENBQUM7SUFDTixPQUFPLEVBQUksTUFBTTtJQUNqQixLQUFLLEVBQU0sT0FBTztJQUNsQixTQUFTLEVBQUUsUUFBUTtDQUNuQixDQUFDLENBRUY7O09BQ0QsRUFBRSxlQUFlLENBQ2xCO01BQUEsRUFBRSxRQUFRLENBQ1g7S0FBQSxFQUFFLEdBQUcsQ0FDTjtJQUFBLEVBQUUsR0FBRyxDQUNOO0dBQUEsRUFBRSxHQUFHLENBQUMsQ0FDTixDQUNEO0tBQ0EsR0FBRyxDQUNILG9CQUFvQixFQUNwQixHQUFHLEVBQUUsQ0FBQyxDQUNMLEVBQ0M7SUFBQSxDQUFDLFFBQVEsQ0FDUixRQUFRLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FFM0I7S0FBQSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsc0JBQXNCLENBQ2hDOztLQUNELEVBQUUsTUFBTSxDQUNSO0tBQUEsQ0FBQyxlQUFlLENBQ2Y7O0tBQ0QsRUFBRSxlQUFlLENBQ2xCO0lBQUEsRUFBRSxRQUFRLENBQ1Y7SUFBQSxDQUFDLFFBQVEsQ0FDUixRQUFRLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FFM0I7S0FBQSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsdUJBQXVCLENBQ2pDOztLQUNELEVBQUUsTUFBTSxDQUNSO0tBQUEsQ0FBQyxlQUFlLENBQ2Y7O0tBQ0QsRUFBRSxlQUFlLENBQ2xCO0lBQUEsRUFBRSxRQUFRLENBQ1g7R0FBQSxHQUFHLENBQ0gsQ0FDRCxDQUFDIn0=