@lyra/components/lib/textfields/story.js

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _storybook = require('part:@lyra/storybook');

var _default = require('part:@lyra/components/textfields/default');

var _default2 = _interopRequireDefault(_default);

var _search = require('part:@lyra/components/textfields/search');

var _search2 = _interopRequireDefault(_search);

var _knobs = require('part:@lyra/storybook/addons/knobs');

var _lyra = require('part:@lyra/storybook/addons/lyra');

var _lyra2 = _interopRequireDefault(_lyra);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _storybook.storiesOf)('Textfields').addDecorator(_knobs.withKnobs).add('Default', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/textfields/default',
      propTables: [_default2.default]
    },
    _react2.default.createElement(_default2.default, {
      label: (0, _knobs.text)('label (prop)', 'This is the label'),
      placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
      value: (0, _knobs.text)('value (prop)'),
      hasError: (0, _knobs.boolean)('hasError (prop)', false),
      onChange: (0, _storybook.action)('onChange'),
      onFocus: (0, _storybook.action)('onFocus'),
      onClear: (0, _storybook.action)('onClear'),
      isClearable: (0, _knobs.boolean)('isClearable (prop)', false),
      hasFocus: (0, _knobs.boolean)('hasFocus (prop)', false)
    })
  );
}).add('Search', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/textfields/search',
      propTables: [_search2.default]
    },
    _react2.default.createElement(_search2.default, {
      label: (0, _knobs.text)('label (prop)', 'This is the label'),
      placeholder: (0, _knobs.text)('placeholder (prop)', 'This is the placeholder'),
      value: (0, _knobs.text)('value (prop)'),
      hasFocus: (0, _knobs.boolean)('hasFocus (prop)', false),
      onChange: (0, _storybook.action)('onChange'),
      isClearable: (0, _knobs.boolean)('isClearable (prop)', false)
    })
  );
}).add('Spacing test', () => {
  return _react2.default.createElement(
    'div',
    { style: { margin: '1rem' } },
    _react2.default.createElement(_default2.default, { label: 'Label', placeholder: 'Placeholder' }),
    _react2.default.createElement(_default2.default, { label: 'Label', placeholder: 'Placeholder' }),
    _react2.default.createElement(_default2.default, { label: 'Label', placeholder: 'Placeholder' }),
    _react2.default.createElement(_default2.default, { label: 'Label', placeholder: 'Placeholder' })
  );
});