@flexis/ui
Version:
Styleless React Components
46 lines • 5.04 kB
JavaScript
import React from 'react';
import { action } from '@storybook/addon-actions';
import { text, boolean, select } from '@storybook/addon-knobs/react';
import { storiesOf, buildInfo } from '../../helpers/stories';
import { AlignSideValues } from '../common/types';
import Button from './';
const { TestIcon } = global;
export const stylableApi = `
Stylable API
---
- :withIcon
- :flexIcon
- ::iconContainer
- ::icon
${buildInfo([
{
values: AlignSideValues,
prefix: ':',
postfix: 'align',
indent: 1
}
])}
`;
export const events = {
onClick: action('click'),
onFocus: action('focus'),
onBlur: action('blur')
};
export default storiesOf('Button', module)
.addParameters({
info: stylableApi
})
.add('with text', () => (<Button {...events} disabled={boolean('Disabled', false)}>
{text('Label', 'Button')}
</Button>))
.add('with icon', () => (<Button {...events} disabled={boolean('Disabled', false)} icon={<TestIcon />} alignIcon={select('Align icon', AlignSideValues, 'left')}>
{text('Label', 'Button')}
</Button>))
.add('with icon only', () => (<Button {...events} disabled={boolean('Disabled', false)} icon={<TestIcon />} alignIcon={select('Align icon', AlignSideValues, 'left')}/>))
.add('with right aligned icon', () => (<Button {...events} disabled={boolean('Disabled', false)} icon={<TestIcon />} alignIcon={select('Align icon', AlignSideValues, 'right')}>
{text('Label', 'Button')}
</Button>))
.add('with flex icon', () => (<Button {...events} style={{ width: '100px' }} disabled={boolean('Disabled', false)} icon={<TestIcon />} alignIcon={select('Align icon', AlignSideValues, 'right')} flexIcon={boolean('Flex icon', true)}>
{text('Label', 'Button')}
</Button>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLnN0b3JpZXMuanN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLE1BQU0sRUFDTixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFDTixJQUFJLEVBQ0osT0FBTyxFQUNQLE1BQU0sRUFDTixNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFDTixTQUFTLEVBQ1QsU0FBUyxFQUNULE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUNOLGVBQWUsRUFDZixNQUFNLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sTUFBTSxNQUFNLElBQUksQ0FBQztBQUV4QixNQUFNLEVBQ0wsUUFBUSxFQUNSLEdBQUcsTUFBYSxDQUFDO0FBRWxCLE1BQU0sQ0FBQyxNQUFNLFdBQVcsR0FBRzs7Ozs7OztFQU96QixTQUFTLENBQUM7SUFDWDtRQUNDLE1BQU0sRUFBRyxlQUFlO1FBQ3hCLE1BQU0sRUFBRyxHQUFHO1FBQ1osT0FBTyxFQUFFLE9BQU87UUFDaEIsTUFBTSxFQUFHLENBQUM7S0FDVjtDQUNELENBQUM7Q0FDRCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHO0lBQ3JCLE9BQU8sRUFBRSxNQUFNLENBQUMsT0FBTyxDQUFDO0lBQ3hCLE9BQU8sRUFBRSxNQUFNLENBQUMsT0FBTyxDQUFDO0lBQ3hCLE1BQU0sRUFBRyxNQUFNLENBQUMsTUFBTSxDQUFDO0NBQ3ZCLENBQUM7QUFFRixlQUFlLFNBQVMsQ0FBQyxRQUFRLEVBQUUsTUFBTSxDQUFDO0tBQ3hDLGFBQWEsQ0FBQztJQUNkLElBQUksRUFBRSxXQUFXO0NBQ2pCLENBQUM7S0FDRCxHQUFHLENBQ0gsV0FBVyxFQUNYLEdBQUcsRUFBRSxDQUFDLENBQ0wsQ0FBQyxNQUFNLENBQ04sSUFBSSxNQUFNLENBQUMsQ0FDWCxRQUFRLENBQUMsQ0FBQyxPQUFPLENBQUMsVUFBVSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBRXJDO0lBQUEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLFFBQVEsQ0FBQyxDQUN6QjtHQUFBLEVBQUUsTUFBTSxDQUFDLENBQ1QsQ0FDRDtLQUNBLEdBQUcsQ0FDSCxXQUFXLEVBQ1gsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLE1BQU0sQ0FDTixJQUFJLE1BQU0sQ0FBQyxDQUNYLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDckMsSUFBSSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUEsRUFBRSxDQUFDLENBQ2xCLFNBQVMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxZQUFZLEVBQUUsZUFBZSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBRXpEO0lBQUEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLFFBQVEsQ0FBQyxDQUN6QjtHQUFBLEVBQUUsTUFBTSxDQUFDLENBQ1QsQ0FDRDtLQUNBLEdBQUcsQ0FDSCxnQkFBZ0IsRUFDaEIsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLE1BQU0sQ0FDTixJQUFJLE1BQU0sQ0FBQyxDQUNYLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDckMsSUFBSSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUEsRUFBRSxDQUFDLENBQ2xCLFNBQVMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxZQUFZLEVBQUUsZUFBZSxFQUFFLE1BQU0sQ0FBQyxDQUFDLEVBQ3hELENBQ0YsQ0FDRDtLQUNBLEdBQUcsQ0FDSCx5QkFBeUIsRUFDekIsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLE1BQU0sQ0FDTixJQUFJLE1BQU0sQ0FBQyxDQUNYLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDckMsSUFBSSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUEsRUFBRSxDQUFDLENBQ2xCLFNBQVMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxZQUFZLEVBQUUsZUFBZSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBRTFEO0lBQUEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLFFBQVEsQ0FBQyxDQUN6QjtHQUFBLEVBQUUsTUFBTSxDQUFDLENBQ1QsQ0FDRDtLQUNBLEdBQUcsQ0FDSCxnQkFBZ0IsRUFDaEIsR0FBRyxFQUFFLENBQUMsQ0FDTCxDQUFDLE1BQU0sQ0FDTixJQUFJLE1BQU0sQ0FBQyxDQUNYLEtBQUssQ0FBQyxDQUFDLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLENBQzFCLFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FDckMsSUFBSSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUEsRUFBRSxDQUFDLENBQ2xCLFNBQVMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxZQUFZLEVBQUUsZUFBZSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQzFELFFBQVEsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLENBQUMsQ0FFckM7SUFBQSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsUUFBUSxDQUFDLENBQ3pCO0dBQUEsRUFBRSxNQUFNLENBQUMsQ0FDVCxDQUNELENBQUMifQ==