@flexis/ui
Version:
Styleless React Components
68 lines • 7.27 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 Input from '../Input';
import Textarea from '../Textarea';
import FormGroup from './';
const { TestIcon } = global;
export const stylableApi = `
Stylable API
---
- :withIcon
- ::label
- ::input
- :flex
${buildInfo([
{
values: AlignSideValues,
prefix: ':',
postfix: 'icon',
indent: 1
}
])}
- ::description
- ::icon
${buildInfo([
{
values: AlignSideValues,
prefix: ':',
postfix: 'align',
indent: 1
}
])}
`;
export const events = {
onChange: action('change'),
onFocus: action('focus'),
onBlur: action('blur')
};
export default storiesOf('FormGroup', module)
.addParameters({
info: stylableApi
})
.add('with input', () => (<FormGroup id='input-id' flex={boolean('Flex', true)} label={text('Label', 'Text label')}>
<Input {...events} defaultValue=''/>
</FormGroup>))
.add('with textarea', () => (<FormGroup id='input-id' flex={boolean('Flex', true)} label={text('Label', 'Text label')}>
<Textarea {...events} defaultValue=''/>
</FormGroup>))
.add('with input and text description', () => (<FormGroup id='input-id' flex={boolean('Flex', true)} label={text('Label', 'Text label')} description={text('Description', 'Description label')}>
<Input {...events} defaultValue=''/>
</FormGroup>))
.add('with required state', () => (<FormGroup id='input-id' label={text('Label', 'Text label')} description={text('Description', 'Description label')}>
<Input {...events} required={boolean('Required', true)} defaultValue=''/>
</FormGroup>))
.add('with input and icon', () => (<FormGroup id='input-id' flex={boolean('Flex', true)} label={text('Label', 'Text label')} description={text('Description', 'Description label')} icon={<TestIcon />} alignIcon={select('Align icon', AlignSideValues, 'left')}>
<Input {...events} required={boolean('Required', false)} defaultValue=''/>
</FormGroup>))
.add('with textarea and icon', () => (<FormGroup id='input-id' label={text('Label', 'Text label')} icon={<TestIcon />} alignIcon={select('Align icon', AlignSideValues, 'left')}>
<Textarea {...events} defaultValue=''/>
</FormGroup>))
.add('with custom label', () => (<FormGroup id='input-id' label={(<b>
{text('Label', 'Custom label')}
</b>)}>
<Input {...events} defaultValue=''/>
</FormGroup>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRm9ybUdyb3VwLnN0b3JpZXMuanN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRm9ybUdyb3VwL0Zvcm1Hcm91cC5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLE1BQU0sRUFDTixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFDTixJQUFJLEVBQ0osT0FBTyxFQUNQLE1BQU0sRUFDTixNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFDTixTQUFTLEVBQ1QsU0FBUyxFQUNULE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxFQUNOLGVBQWUsRUFDZixNQUFNLGlCQUFpQixDQUFDO0FBQ3pCLE9BQU8sS0FBSyxNQUFNLFVBQVUsQ0FBQztBQUM3QixPQUFPLFFBQVEsTUFBTSxhQUFhLENBQUM7QUFDbkMsT0FBTyxTQUFTLE1BQU0sSUFBSSxDQUFDO0FBRTNCLE1BQU0sRUFDTCxRQUFRLEVBQ1IsR0FBRyxNQUFhLENBQUM7QUFFbEIsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHOzs7Ozs7O0VBT3pCLFNBQVMsQ0FBQztJQUNYO1FBQ0MsTUFBTSxFQUFHLGVBQWU7UUFDeEIsTUFBTSxFQUFHLEdBQUc7UUFDWixPQUFPLEVBQUUsTUFBTTtRQUNmLE1BQU0sRUFBRyxDQUFDO0tBQ1Y7Q0FDRCxDQUFDOzs7RUFHQSxTQUFTLENBQUM7SUFDWDtRQUNDLE1BQU0sRUFBRyxlQUFlO1FBQ3hCLE1BQU0sRUFBRyxHQUFHO1FBQ1osT0FBTyxFQUFFLE9BQU87UUFDaEIsTUFBTSxFQUFHLENBQUM7S0FDVjtDQUNELENBQUM7Q0FDRCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHO0lBQ3JCLFFBQVEsRUFBRSxNQUFNLENBQUMsUUFBUSxDQUFDO0lBQzFCLE9BQU8sRUFBRyxNQUFNLENBQUMsT0FBTyxD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