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

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _switch = require('part:@lyra/components/toggles/switch');

var _switch2 = _interopRequireDefault(_switch);

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

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

var _lyra2 = _interopRequireDefault(_lyra);

var _activateOnFocus = require('part:@lyra/components/utilities/activate-on-focus');

var _activateOnFocus2 = _interopRequireDefault(_activateOnFocus);

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

(0, _storybook.storiesOf)('Utilities').addDecorator(_knobs.withKnobs).add('Activate on focus', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/utilities/activate-on-focus',
      propTables: [_switch2.default]
    },
    _react2.default.createElement(
      'div',
      {
        style: {
          height: '700px',
          width: '500px',
          border: '3px dotted #ccc',
          position: 'relative',
          padding: '20px'
        }
      },
      _react2.default.createElement(
        _activateOnFocus2.default,
        {
          onFocus: (0, _storybook.action)('onFocus'),
          onBlur: (0, _storybook.action)('onBlur'),
          message: (0, _knobs.text)('message (prop)'),
          enableBlur: (0, _knobs.boolean)('enableBlur (prop)', false)
        },
        _react2.default.createElement(
          'textarea',
          { rows: '30' },
          'This should not be selected on first click'
        )
      )
    )
  );
});