@flexis/ui
Version:
Styleless React Components
44 lines • 5.44 kB
JavaScript
import React from 'react';
import { action } from '@storybook/addon-actions';
import { select, text, boolean } from '@storybook/addon-knobs/react';
import { storiesOf, buildInfo } from '../../helpers/stories';
import ImageSelect, { DisplayValues } from './';
const { TestIcon } = global;
export const stylableApi = `
Stylable API
- ::preview
${buildInfo([
{
values: DisplayValues,
prefix: ':',
indent: 1
}
])}
- ::img
- ::placeholder
- ::resetButton
- :hidden
---
`;
export const events = {
onChange: action('change')
};
// tslint:disable-next-line
export const imageUrl = 'https://instagram.fhen2-1.fna.fbcdn.net/vp/d81ca16ed081cd80553eaaa63fa24b34/5D69ED4D/t51.2885-15/e15/11274387_579453698862853_1466193977_n.jpg?_nc_ht=instagram.fhen2-1.fna.fbcdn.net';
const style = {
backgroundSize: 'cover',
minWidth: '4em',
minHeight: '4em'
};
export default storiesOf('ImageSelect', module)
.addParameters({
info: stylableApi
})
.add('with default state', () => (<ImageSelect {...events} previewStyle={style} display={select('Display', DisplayValues, 'block')}/>))
.add('with placeholder', () => (<ImageSelect {...events} previewStyle={style} display={select('Display', DisplayValues, 'block')} placeholder={<TestIcon />}/>))
.add('with value', () => (<ImageSelect {...events} previewStyle={style} display={select('Display', DisplayValues, 'block')} value={text('Value', imageUrl)}/>))
.add('with default value', () => (<ImageSelect {...events} previewStyle={style} display={select('Display', DisplayValues, 'block')} defaultValue={text('Default value', imageUrl)}/>))
.add('with disabled state', () => (<ImageSelect {...events} previewStyle={style} defaultValue={text('Default value', imageUrl)} disabled={boolean('Disabled', true)}/>))
.add('with readOnly state', () => (<ImageSelect {...events} previewStyle={style} defaultValue={text('Default value', imageUrl)} readOnly={boolean('Readonly', true)}/>))
.add('with title', () => (<ImageSelect {...events} previewStyle={style} title={text('Title', 'Select image')}/>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW1hZ2VTZWxlY3Quc3Rvcmllcy5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9JbWFnZVNlbGVjdC9JbWFnZVNlbGVjdC5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLE1BQU0sRUFDTixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFDTixNQUFNLEVBQ04sSUFBSSxFQUNKLE9BQU8sRUFDUCxNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFDTixTQUFTLEVBQ1QsU0FBUyxFQUNULE1BQU0sdUJBQXVCLENBQUM7QUFDL0IsT0FBTyxXQUFXLEVBQUUsRUFDbkIsYUFBYSxFQUNiLE1BQU0sSUFBSSxDQUFDO0FBRVosTUFBTSxFQUNMLFFBQVEsRUFDUixHQUFHLE1BQWEsQ0FBQztBQUVsQixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUc7OztFQUd6QixTQUFTLENBQUM7SUFDWDtRQUNDLE1BQU0sRUFBRSxhQUFhO1FBQ3JCLE1BQU0sRUFBRSxHQUFHO1FBQ1gsTUFBTSxFQUFFLENBQUM7S0FDVDtDQUNELENBQUM7Ozs7OztDQU1ELENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxNQUFNLEdBQUc7SUFDckIsUUFBUSxFQUFFLE1BQU0sQ0FBQyxRQUFRLENBQUM7Q0FDMUIsQ0FBQztBQUVGLDJCQUEyQjtBQUMzQixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsdUxBQXVMLENBQUM7QUFFaE4sTUFBTSxLQUFLLEdBQUc7SUFDYixjQUFjLEVBQUUsT0FBTztJQUN2QixRQUFRLEVBQVEsS0FBSztJQUNyQixTQUFTLEVBQU8sS0FBSztDQUNyQixDQUFDO0FBRUYsZUFBZSxTQUFTLENBQUMsYUFBYSxFQUFFLE1BQU0sQ0FBQztLQUM3QyxhQUFhLENBQUM7SUFDZCxJQUFJLEVBQUUsV0FBVztDQUNqQixDQUFDO0tB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