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

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

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

var _default2 = _interopRequireDefault(_default);

var _default3 = require('part:@lyra/components/dialogs/default');

var _default4 = _interopRequireDefault(_default3);

var _content = require('part:@lyra/components/dialogs/content');

var _content2 = _interopRequireDefault(_content);

var _confirm = require('part:@lyra/components/dialogs/confirm');

var _confirm2 = _interopRequireDefault(_confirm);

var _fullscreen = require('part:@lyra/components/dialogs/fullscreen');

var _fullscreen2 = _interopRequireDefault(_fullscreen);

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

var _lyra2 = _interopRequireDefault(_lyra);

var _popover = require('part:@lyra/components/dialogs/popover');

var _popover2 = _interopRequireDefault(_popover);

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

const style = {
  position: 'absolute',
  fontSize: '2em',
  zIndex: '-1'
};

const backgroundStuff = function backgroundStuff(storyFn) {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'div',
      { style: style },
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
    ),
    storyFn()
  );
};

(0, _storybook.storiesOf)('Dialogs').addDecorator(backgroundStuff).addDecorator(_knobs.withKnobs).add('Default', () => {
  const actions = [{
    index: '1',
    title: 'Finish',
    color: 'primary',
    autoFocus: true
  }, {
    index: '2',
    title: 'Cancel'
  }, {
    index: '3',
    title: 'Secondary',
    kind: 'simple',
    secondary: true
  }];

  const dialogActions = (0, _knobs.boolean)('has actions', false) ? actions : [];

  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/dialogs/default',
      propTables: [_default4.default]
    },
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _default2.default,
        { onClick: (0, _storybook.action)('oh noes! I should not ble clickable!') },
        'Try click me'
      ),
      _react2.default.createElement(
        _default4.default,
        {
          title: (0, _knobs.text)('title', 'This is the title'),
          isOpen: (0, _knobs.boolean)('is Open', true),
          showHeader: (0, _knobs.boolean)('Show Header', false),
          color: (0, _knobs.select)('Color', ['default', 'danger', 'success', 'info', 'warning']),
          onClose: (0, _storybook.action)('onClose'),
          onAction: (0, _storybook.action)('onAction'),
          actions: dialogActions ? (0, _knobs.object)('Actions (prop)', actions) : undefined
        },
        _react2.default.createElement(
          _content2.default,
          null,
          _react2.default.createElement(
            'div',
            { style: { padding: '2em' } },
            (0, _knobs.text)('content', 'This is the content and it is big. Very big yes so big.')
          )
        )
      )
    )
  );
}).add('Fullscreen', () => {
  const actions = [{
    index: '1',
    title: 'Default'
  }, {
    index: '2',
    title: 'Finish',
    color: 'success',
    autoFocus: true
  }, {
    index: '3',
    title: 'Cancel',
    color: 'danger'
  }, {
    index: '4',
    title: 'Secondary',
    kind: 'simple',
    secondary: true
  }];

  const dialogActions = (0, _knobs.boolean)('has actions', false) ? actions : [];

  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/dialogs/fullscreen',
      propTables: [_fullscreen2.default]
    },
    _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _default2.default,
        { onClick: (0, _storybook.linkTo)('Dialogs', 'Fullscreen (open)') },
        'Open fullscreen dialog'
      ),
      _react2.default.createElement(
        _fullscreen2.default,
        {
          title: (0, _knobs.text)('title (prop)', 'This is the title and it is very long. In fact it is so long that it will break and make a magic new line'),
          onClose: (0, _storybook.action)('onClose'),
          color: (0, _knobs.select)('Color (prop)', ['default', 'danger', 'success', 'info', 'warning']),
          centered: (0, _knobs.boolean)('Centered (prop)', false),
          isOpen: (0, _knobs.boolean)('is Open (prop)', true),
          actions: (0, _knobs.object)('actions (prop)', dialogActions),
          onAction: (0, _storybook.action)('onAction')
        },
        (0, _knobs.text)('content', 'This is the content')
      )
    )
  );
}).add('PopOver', () => {
  const actions = [{
    index: '1',
    title: 'Default'
  }, {
    index: '2',
    title: 'Finish',
    color: 'success',
    autoFocus: true
  }, {
    index: '3',
    title: 'Cancel',
    color: 'danger'
  }, {
    index: '4',
    title: 'Secondary',
    kind: 'simple',
    secondary: true
  }];

  return _react2.default.createElement(
    'div',
    { style: { top: '50%', left: '50%', position: 'absolute' } },
    _react2.default.createElement(
      _lyra2.default,
      {
        part: 'part:@lyra/components/dialogs/confirm',
        propTables: [_confirm2.default]
      },
      _react2.default.createElement(
        _popover2.default,
        {
          actions: (0, _knobs.boolean)('has actions', false) ? actions : [],
          color: (0, _knobs.select)('color (prop)', [undefined, 'danger', 'success', 'info', 'warning'])
        },
        (0, _knobs.text)('children (prop)', 'Do you really want to?')
      )
    )
  );
}).add('Confirm', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/dialogs/confirm',
      propTables: [_confirm2.default]
    },
    _react2.default.createElement(
      _confirm2.default,
      {
        color: (0, _knobs.select)('color (prop)', [undefined, 'danger', 'success', 'info', 'warning']),
        confirmColor: (0, _knobs.select)('confirmColor (prop)', [undefined, 'danger', 'success', 'info', 'warning']),
        onConfirm: (0, _storybook.action)('onConfirm'),
        onCancel: (0, _storybook.action)('onCancel'),
        confirmButtonText: (0, _knobs.text)('confirmButtonText (prop)'),
        cancelButtonText: (0, _knobs.text)('confirmButtonText (prop)')
      },
      (0, _knobs.text)('children (prop)', 'Do you really want to?')
    )
  );
});