@flexis/ui
Version:
Styleless React Components
69 lines • 4.67 kB
JavaScript
import React from 'react';
import { text, select } from '@storybook/addon-knobs/react';
import { storiesOf, buildInfo } from '../../helpers/stories';
import { PlacementValues, AlignValues } from '../common/types';
import Tooltip from './';
export const stylableApi = `
Stylable API
---
- ::tooltip
- :active
- :offset
- :topPlacement
- :rightPlacement
- :bottomPlacement
- :leftPlacement
- :startAlign
- :centerAlign
- :endAlign
${buildInfo([
{
values: PlacementValues,
prefix: ':',
postfix: 'placement',
indent: 1
},
{
values: AlignValues,
prefix: ':',
postfix: 'align',
indent: 1
}
])}
`;
export default storiesOf('Tooltip', module)
.addParameters({
info: stylableApi
})
.add('with text', () => (<Tooltip id='tooltip' placement={select('Placement', PlacementValues, 'bottom')} align={select('Align', AlignValues, 'start')} content={text('Content', 'Tooltip text')}>
Point mouse on me
</Tooltip>))
.add('with scroll', () => (<div style={{
padding: '100px 0 1200px'
}}>
<Tooltip placement={select('Placement', PlacementValues, 'bottom')} align={select('Align', AlignValues, 'start')} content={text('Content', 'Tooltip text')}>
Point mouse on me
</Tooltip>
</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'
}}>
<Tooltip placement={select('Placement', PlacementValues, 'bottom')} align={select('Align', AlignValues, 'start')} content={text('Content', 'Tooltip text')}>
Point mouse on me
</Tooltip>
</div>
</div>
</div>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5zdG9yaWVzLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Rvb2x0aXAvVG9vbHRpcC5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLElBQUksRUFDSixNQUFNLEVBQ04sTUFBTSw4QkFBOEIsQ0FBQztBQUN0QyxPQUFPLEVBQ04sU0FBUyxFQUNULFNBQVMsRUFDVCxNQUFNLHVCQUF1QixDQUFDO0FBQy9CLE9BQU8sRUFDTixlQUFlLEVBQ2YsV0FBVyxFQUNYLE1BQU0saUJBQWlCLENBQUM7QUFDekIsT0FBTyxPQUFPLE1BQU0sSUFBSSxDQUFDO0FBRXpCLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRzs7Ozs7Ozs7Ozs7OztFQWF6QixTQUFTLENBQUM7SUFDWDtRQUNDLE1BQU0sRUFBRyxlQUFlO1FBQ3hCLE1BQU0sRUFBRyxHQUFHO1FBQ1osT0FBTyxFQUFFLFdBQVc7UUFDcEIsTUFBTSxFQUFHLENBQUM7S0FDVjtJQUNEO1FBQ0MsTUFBTSxFQUFHLFdBQVc7UUFDcEIsTUFBTSxFQUFHLEdBQUc7UUFDWixPQUFPLEVBQUUsT0FBTztRQUNoQixNQUFNLEVBQUcsQ0FBQztLQUNWO0NBQ0QsQ0FBQztDQUNELENBQUM7QUFFRixlQUFlLFNBQVMsQ0FBQyxTQUFTLEVBQUUsTUFBTSxDQUFDO0tBQ3pDLGFBQWEsQ0FBQztJQUNkLElBQUksRUFBRSxXQUFXO0NBQ2pCLENBQUM7S0FDRCxHQUFHLENBQ0gsV0FBVyxFQUNYLEdBQUcsRUFBRSxDQUFDLENBQ0wsQ0FBQyxPQUFPLENBQ1AsRUFBRSxDQUFDLFNBQVMsQ0FDWixTQUFTLENBQUMsQ0FBQyxNQUFNLENBQUMsV0FBVyxFQUFFLGVBQWUsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUMxRCxLQUFLLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxPQUFPLENBQUMsQ0FBQyxDQUM3QyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLGNBQWMsQ0FBQyxDQUFDLENBRXpDOztHQUNELEVBQUUsT0FBTyxDQUFDLENBQ1YsQ0FDRDtLQUNBLEdBQUcsQ0FDSCxhQUFhLEVBQ2IsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLEdBQUcsQ0FDSCxLQUFLLENBQUMsQ0FBQztJQUNOLE9BQU8sRUFBRSxnQkFBZ0I7Q0FDekIsQ0FBQyxDQUVGO0lBQUEsQ0FBQyxPQUFPLENBQ1AsU0FBUyxDQUFDLENBQUMsTUFBTSxDQUFDLFdBQVcsRUFBRSxlQUFlLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FDMUQsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxDQUFDLENBQUMsQ0FDN0MsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxjQUFjLENBQUMsQ0FBQyxDQUV6Qzs7SUFDRCxFQUFFLE9BQU8sQ0FDVjtHQUFBLEVBQUUsR0FBRyxDQUFDLENBQ04sQ0FDRDtLQUNBLEdBQUcsQ0FDSCxrQkFBa0IsRUFDbEIsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLEdBQUcsQ0FDSCxLQUFLLENBQUMsQ0FBQztJQUNOLE9BQU8sRUFBRSxnQkFBZ0I7Q0FDekIsQ0FBQyxDQUVGO0lBQUEsQ0FBQyxHQUFHLENBQ0gsS0FBSyxDQUFDLENBQUM7SUFDTixRQUFRLEVBQUUsT0FBTztJQUNqQixHQUFHLEVBQU8sTUFBTTtJQUNoQixJQUFJLEVBQU0sT0FBTztJQUNqQixNQUFNLEVBQUksaUJBQWlCO0lBQzNCLEtBQUssRUFBSyxPQUFPO0lBQ2pCLE1BQU0sRUFBSSxPQUFPO0lBQ2pCLFFBQVEsRUFBRSxNQUFNO0NBQ2hCLENBQUMsQ0FFRjtLQUFBLENBQUMsR0FBRyxDQUNILEtBQUssQ0FBQyxDQUFDO0lBQ04sT0FBTyxFQUFFLGdCQUFnQjtDQUN6QixDQUFDLENBRUY7TUFBQSxDQUFDLE9BQU8sQ0FDUCxTQUFTLENBQUMsQ0FBQyxNQUFNLENBQUMsV0FBVyxFQUFFLGVBQWUsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUMxRCxLQUFLLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxPQUFPLENBQUMsQ0FBQyxDQUM3QyxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLGNBQWMsQ0FBQyxDQUFDLENBRXpDOztNQUNELEVBQUUsT0FBTyxDQUNWO0tBQUEsRUFBRSxHQUFHLENBQ047SUFBQSxFQUFFLEdBQUcsQ0FDTjtHQUFBLEVBQUUsR0FBRyxDQUFDLENBQ04sQ0FDRCxDQUFDIn0=