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

Basic UX components

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _buttons = require('part:@lyra/components/toggles/buttons');

var _buttons2 = _interopRequireDefault(_buttons);

var _button = require('part:@lyra/components/toggles/button');

var _button2 = _interopRequireDefault(_button);

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

var _switch2 = _interopRequireDefault(_switch);

var _checkbox = require('part:@lyra/components/toggles/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

var _lyraLogoIcon = require('part:@lyra/base/lyra-logo-icon');

var _lyraLogoIcon2 = _interopRequireDefault(_lyraLogoIcon);

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)('Toggles').addDecorator(_knobs.withKnobs).add('Switch', () => {
  return _react2.default.createElement(
    _lyra2.default,
    { part: 'part:@lyra/components/toggles/switch', propTables: [_switch2.default] },
    _react2.default.createElement(_switch2.default, {
      checked: (0, _knobs.boolean)('undefined', false) ? undefined : (0, _knobs.boolean)('checked (prop)', false),
      label: (0, _knobs.text)('label (prop)', 'This is the label'),
      disabled: (0, _knobs.boolean)('disabled (prop)', false),
      onChange: (0, _storybook.action)('change'),
      onFocus: (0, _storybook.action)('onFocus'),
      onBlur: (0, _storybook.action)('onBlur')
    })
  );
}).add('Checkbox', () => {
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/toggles/checkbox',
      propTables: [_checkbox2.default]
    },
    _react2.default.createElement(
      _checkbox2.default,
      {
        label: (0, _knobs.text)('label (prop)', 'This is the label'),
        checked: (0, _knobs.boolean)('undefined', false) ? undefined : (0, _knobs.boolean)('checked (prop)', false),
        disabled: (0, _knobs.boolean)('disabled (prop)', false),
        onChange: (0, _storybook.action)('onChange'),
        onBlur: (0, _storybook.action)('onBlur'),
        onFocus: (0, _storybook.action)('onFocus')
      },
      (0, _knobs.boolean)('Children') ? _react2.default.createElement(
        'h1',
        null,
        'Test'
      ) : false
    )
  );
}).add('Buttons', () => {
  const items = [{
    title: 'The good',
    key: 'good'
  }, {
    title: 'The Bad',
    key: 'bad'
  }, {
    title: 'The ugly',
    key: 'ugly'
  }];
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/toggles/buttons',
      propTables: [_buttons2.default]
    },
    _react2.default.createElement(_buttons2.default, {
      items: items,
      label: 'Select something',
      onChange: (0, _storybook.action)('onChange'),
      value: items[1]
    })
  );
}).add('Toggle button', () => {
  const icon = (0, _knobs.boolean)('icon', false) ? _lyraLogoIcon2.default : false;
  return _react2.default.createElement(
    _lyra2.default,
    {
      part: 'part:@lyra/components/toggles/buttons',
      propTables: [_buttons2.default]
    },
    _react2.default.createElement(
      _button2.default,
      {
        selected: (0, _knobs.boolean)('selected (prop)', false),
        disabled: (0, _knobs.boolean)('disabled (prop)', false),
        onClick: (0, _storybook.action)('onClick'),
        icon: icon
      },
      (0, _knobs.text)('children (prop)', 'this is the content')
    )
  );
}).add('Toggle button collection', () => {
  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(_button2.default, {
      icon: _lyraLogoIcon2.default,
      selected: true,
      onClick: (0, _storybook.action)('onClick')
    }),
    _react2.default.createElement(_button2.default, {
      icon: _lyraLogoIcon2.default,
      selected: true,
      onClick: (0, _storybook.action)('onClick')
    }),
    _react2.default.createElement(_button2.default, {
      icon: _lyraLogoIcon2.default,
      selected: true,
      onClick: (0, _storybook.action)('onClick')
    }),
    _react2.default.createElement(_button2.default, {
      icon: _lyraLogoIcon2.default,
      selected: true,
      onClick: (0, _storybook.action)('onClick')
    })
  );
});