'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _addonActions = require('@storybook/addon-actions');

var _addonKnobs = require('@storybook/addon-knobs');

var _ = require('../../../..');

var _2 = _interopRequireDefault(_);

var _ButtonWithIcon = require('./ButtonWithIcon.md');

var _ButtonWithIcon2 = _interopRequireDefault(_ButtonWithIcon);

var _ButtonWithIconKnobs = require('./ButtonWithIcon.knobs.options');

var _ButtonWithIconKnobs2 = _interopRequireDefault(_ButtonWithIconKnobs);

var _Icon = require('../../../base/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _IconKnob = require('../../../base/Icon/Icon.knob.options');

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

(0, _react3.storiesOf)('atoms/buttons', module).addDecorator((0, _addonKnobs.withKnobs)({ escapeHTML: false })).add('ButtonWithIcon', function () {
  var props = {
    onClick: (0, _addonActions.action)('ButtonWithIcon clicked'),
    text: (0, _addonKnobs.text)('text', 'Button With Icon'),
    type: (0, _addonKnobs.select)('type', _ButtonWithIconKnobs2.default.type, 'submit'),
    classes: (0, _addonKnobs.array)('classes', []),
    iconSize: (0, _addonKnobs.select)('iconSize', _ButtonWithIconKnobs2.default.iconSize, ''),
    size: (0, _addonKnobs.select)('size', _ButtonWithIconKnobs2.default.size, ''),
    expanded: (0, _addonKnobs.boolean)('expanded', true),
    capitalized: (0, _addonKnobs.boolean)('capitalized', true),
    'arial-label': (0, _addonKnobs.text)('arial-label', ''),
    'aria-haspopup': (0, _addonKnobs.boolean)('aria-haspopup', false),
    theme: (0, _addonKnobs.select)('theme', _ButtonWithIconKnobs2.default.theme),
    usage: (0, _addonKnobs.select)('usage', _ButtonWithIconKnobs2.default.usage)
  };
  var iconProps = {
    name: (0, _addonKnobs.select)('name', _IconKnob.svgOptions, 'chevron'),
    svgWidth: 20,
    svgHeight: 20
  };
  return _react2.default.createElement(_2.default, _extends({}, props, { icon: _react2.default.createElement(_Icon2.default, iconProps) }));
}, { info: _ButtonWithIcon2.default }).add('ButtonSearch', function () {
  var icons = {
    chevron: _react2.default.createElement(_Icon2.default, { name: 'chevron', svgHeight: 20, svgWidth: 20 }),
    search: _react2.default.createElement(_Icon2.default, { name: 'search', svgHeight: 20, svgWidth: 20 })
  };
  var props = {
    onClick: (0, _addonActions.action)('ButtonWithIcon clicked'),
    usage: (0, _addonKnobs.select)('usage', _ButtonWithIconKnobs2.default.usage, '')
  };

  // Set the icon prop to the actual element based on knob selection.
  props.icon = icons[props.icon];

  return _react2.default.createElement(_2.default, props);
}, { info: _ButtonWithIcon2.default });