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

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _fold = require('part:@lyra/components/edititem/fold');

var _fold2 = _interopRequireDefault(_fold);

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

var _lyra2 = _interopRequireDefault(_lyra);

var _chance = require('chance');

var _chance2 = _interopRequireDefault(_chance);

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

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

/* eslint-disable react/no-multi-comp */
const chance = new _chance2.default();

(0, _storybook.storiesOf)('Edit item').addDecorator(_knobs.withKnobs).add('Fold', () => {
  const wrapperStyles = {
    width: '50%',
    margin: '0 auto',
    backgroundColor: '#ccc',
    minHeight: '50vh',
    maxHeight: '70vh',
    paddingTop: '5rem',
    position: 'relative',
    overflow: (0, _knobs.boolean)('scroll', true) ? 'scroll' : 'visible'
  };
  return _react2.default.createElement(
    'div',
    { style: wrapperStyles },
    _react2.default.createElement(
      'p',
      null,
      'Over'
    ),
    _react2.default.createElement(
      _lyra2.default,
      {
        part: 'part:@lyra/components/edititem/fold',
        propTables: [_fold2.default]
      },
      _react2.default.createElement(
        _fold2.default,
        { title: 'Edit this item', onClose: (0, _storybook.action)('onClose') },
        (0, _knobs.text)('children (prop)', 'Put your content here'),
        _react2.default.createElement('div', { style: { height: `${(0, _knobs.number)('content padding', 10)}px` } })
      )
    ),
    _react2.default.createElement(
      'p',
      null,
      'Under'
    ),
    chance.paragraph(),
    chance.paragraph(),
    chance.paragraph(),
    chance.paragraph(),
    chance.paragraph(),
    chance.paragraph(),
    chance.paragraph(),
    chance.paragraph()
  );
});