@flexis/ui
Version:
Styleless React Components
103 lines (98 loc) • 7.48 kB
JavaScript
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
var _context;
import React from 'react';
var _createElement = React.createElement;
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 './';
var _global = global,
TestIcon = _global.TestIcon;
export var stylableApi = _concatInstanceProperty(_context = "\nStylable API\n---\n- :withIcon\n- ::label\n- ::input\n\t- :flex\n".concat(buildInfo([{
values: AlignSideValues,
prefix: ':',
postfix: 'icon',
indent: 1
}]), "\n- ::description\n- ::icon\n")).call(_context, buildInfo([{
values: AlignSideValues,
prefix: ':',
postfix: 'align',
indent: 1
}]), "\n");
export var events = {
onChange: action('change'),
onFocus: action('focus'),
onBlur: action('blur')
};
var _ref = /*#__PURE__*/_createElement(TestIcon, null);
var _ref2 = /*#__PURE__*/_createElement(TestIcon, null);
export default storiesOf('FormGroup', module).addParameters({
info: stylableApi
}).add('with input', function () {
return _createElement(FormGroup, {
id: "input-id",
flex: boolean('Flex', true),
label: text('Label', 'Text label')
}, _createElement(Input, _extends({}, events, {
defaultValue: ""
})));
}).add('with textarea', function () {
return _createElement(FormGroup, {
id: "input-id",
flex: boolean('Flex', true),
label: text('Label', 'Text label')
}, _createElement(Textarea, _extends({}, events, {
defaultValue: ""
})));
}).add('with input and text description', function () {
return _createElement(FormGroup, {
id: "input-id",
flex: boolean('Flex', true),
label: text('Label', 'Text label'),
description: text('Description', 'Description label')
}, _createElement(Input, _extends({}, events, {
defaultValue: ""
})));
}).add('with required state', function () {
return _createElement(FormGroup, {
id: "input-id",
label: text('Label', 'Text label'),
description: text('Description', 'Description label')
}, _createElement(Input, _extends({}, events, {
required: boolean('Required', true),
defaultValue: ""
})));
}).add('with input and icon', function () {
return _createElement(FormGroup, {
id: "input-id",
flex: boolean('Flex', true),
label: text('Label', 'Text label'),
description: text('Description', 'Description label'),
icon: _ref,
alignIcon: select('Align icon', AlignSideValues, 'left')
}, _createElement(Input, _extends({}, events, {
required: boolean('Required', false),
defaultValue: ""
})));
}).add('with textarea and icon', function () {
return _createElement(FormGroup, {
id: "input-id",
label: text('Label', 'Text label'),
icon: _ref2,
alignIcon: select('Align icon', AlignSideValues, 'left')
}, _createElement(Textarea, _extends({}, events, {
defaultValue: ""
})));
}).add('with custom label', function () {
return _createElement(FormGroup, {
id: "input-id",
label: _createElement("b", null, text('Label', 'Custom label'))
}, _createElement(Input, _extends({}, events, {
defaultValue: ""
})));
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0Zvcm1Hcm91cC9Gb3JtR3JvdXAuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEtBQVAsTUFBa0IsT0FBbEI7O0FBQ0EsU0FDQyxNQURELFFBRU8sMEJBRlA7QUFHQSxTQUNDLElBREQsRUFFQyxPQUZELEVBR0MsTUFIRCxRQUlPLDhCQUpQO0FBS0EsU0FDQyxTQURELEVBRUMsU0FGRCxRQUdPLHVCQUhQO0FBSUEsU0FDQyxlQURELFFBRU8saUJBRlA7QUFHQSxPQUFPLEtBQVAsTUFBa0IsVUFBbEI7QUFDQSxPQUFPLFFBQVAsTUFBcUIsYUFBckI7QUFDQSxPQUFPLFNBQVAsTUFBc0IsSUFBdEI7Y0FJSSxNO0lBREgsUSxXQUFBLFE7QUFHRCxPQUFPLElBQU0sV0FBVyxtSEFPdEIsU0FBUyxDQUFDLENBQ1g7QUFDQyxFQUFBLE1BQU0sRUFBRyxlQURWO0FBRUMsRUFBQSxNQUFNLEVBQUcsR0FGVjtBQUdDLEVBQUEsT0FBTyxFQUFFLE1BSFY7QUFJQyxFQUFBLE1BQU0sRUFBRztBQUpWLENBRFcsQ0FBRCxDQVBhLG1EQWlCdEIsU0FBUyxDQUFDLENBQ1g7QUFDQyxFQUFBLE1BQU0sRUFBRyxlQURWO0FBRUMsRUFBQSxNQUFNLEVBQUcsR0FGVjtBQUdDLEVBQUEsT0FBTyxFQUFFLE9BSFY7QUFJQyxFQUFBLE1BQU0sRUFBRztBQUpWLENBRFcsQ0FBRCxDQWpCYSxPQUFqQjtBQTJCUCxPQUFPLElBQU0sTUFBTSxHQUFHO0FBQ3JCLEVBQUEsUUFBUSxFQUFFLE1BQU0sQ0FBQyxRQUFELENBREs7QUFFckIsRUFBQSxPQUFPLEVBQUcsTUFBTSxDQUFDLE9BQUQsQ0FGSztBQUdyQixFQUFBLE1BQU0sRUFBSSxNQUFNLENBQUMsTUFBRDtBQUhLLENBQWY7O3dCQWdGRyxlQUFDLFFBQUQsTzs7eUJBaUJBLGVBQUMsUUFBRCxPOztBQTNGVixlQUFlLFNBQVMsQ0FBQyxXQUFELEVB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