'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(['\n  color: ', ';\n  border-color: ', ';\n  background: transparent;\n\n  &:hover:not(:disabled),\n  &:focus:not(:disabled) {\n    color: ', ';\n    background: ', ';\n    border-color: ', ';\n  }\n'], ['\n  color: ', ';\n  border-color: ', ';\n  background: transparent;\n\n  &:hover:not(:disabled),\n  &:focus:not(:disabled) {\n    color: ', ';\n    background: ', ';\n    border-color: ', ';\n  }\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  padding: 9px 28px;\n  font-size: 0.6em;\n'], ['\n  padding: 9px 28px;\n  font-size: 0.6em;\n']),
    _templateObject3 = _taggedTemplateLiteral(['\n  padding: 13px 58px;\n  font-size: 0.9em;\n'], ['\n  padding: 13px 58px;\n  font-size: 0.9em;\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  border-color: ', ';\n  background: ', ';\n\n  &:hover:not(:disabled),\n  &:focus:not(:disabled) {\n    background: ', ';\n    border-color: ', ';\n  }\n'], ['\n  border-color: ', ';\n  background: ', ';\n\n  &:hover:not(:disabled),\n  &:focus:not(:disabled) {\n    background: ', ';\n    border-color: ', ';\n  }\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _icons = require('../Icon/icons');

var _icons2 = _interopRequireDefault(_icons);

var _SubmitButton = require('./SubmitButton');

var _SubmitButton2 = _interopRequireDefault(_SubmitButton);

var _themeGet = require('../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Button = _styledComponents2.default.button.withConfig({
  displayName: 'Button'
})(['font-size:0.8em;text-decoration:none;font-weight:700;font-family:', ';text-transform:uppercase;border-width:', ';border-style:solid;border-radius:3em;border-color:', ';color:', ';background:', ';padding:11px 38px;display:inline-block;position:relative;overflow:hidden;line-height:normal;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;user-select:none;box-sizing:border-box;transition:all 0.25s ease;outline:none;&:hover:not(:disabled),&:focus:not(:disabled){background:', ';border-color:', ';box-shadow:', ';}&:disabled{background:', ';color:', ';border-color:', ';cursor:default;opacity:0.5;}&::before,&::after{position:absolute;height:100%;color:inherit;transition:all 0.3s;speak:none;font-family:', ';}&::before{content:\'', '\';left:-200px;}&::after{content:\'', '\';right:-200px;}&:hover:not(:disabled)::before{left:10px;}&:hover:not(:disabled)::after{right:10px;}'], (0, _themeGet2.default)('fonts.brand'), (0, _themeGet2.default)('thicknesses.normal'), (0, _themeGet2.default)('colors.primary.default'), (0, _themeGet2.default)('colors.text.inverted'), (0, _themeGet2.default)('colors.primary.default'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('shadows.short'), (0, _themeGet2.default)('colors.background.disabled'), (0, _themeGet2.default)('colors.text.disabled'), (0, _themeGet2.default)('colors.background.disabled'), (0, _themeGet2.default)('fonts.icon'), function (_ref) {
  var leftIcon = _ref.leftIcon,
      iconHelper = _ref.iconHelper;
  return iconHelper(leftIcon);
}, function (_ref2) {
  var rightIcon = _ref2.rightIcon,
      iconHelper = _ref2.iconHelper;
  return iconHelper(rightIcon);
});

Button.propTypes = {
  /**
   * An icon name for an icon to pop in from the left side of the button on hover.
   */
  leftIcon: _propTypes2.default.string,
  /**
   * An icon name for an icon to pop in from the right side of the button on hover.
   */
  rightIcon: _propTypes2.default.string,
  /**
   * Use this to override the icon provider function (advanced). An icon provider function takes an icon name and
   * provides a unicode character to render.
   */
  iconHelper: _propTypes2.default.func,
  /**
   * A class name to add to the button element.
   */
  className: _propTypes2.default.string,
  /**
   * An id to add to the button element.
   */
  id: _propTypes2.default.string
};

Button.defaultProps = {
  leftIcon: null,
  rightIcon: null,
  iconHelper: _icons2.default,
  className: null,
  id: null
};

Button.Submit = _SubmitButton2.default;

Button.Secondary = Button.extend(_templateObject, (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.text.inverted'), (0, _themeGet2.default)('colors.primary.dark'), (0, _themeGet2.default)('colors.primary.dark'));

Button.Small = Button.extend(_templateObject2);

Button.Large = Button.extend(_templateObject3);

Button.Danger = Button.extend(_templateObject4, (0, _themeGet2.default)('colors.negative.default'), (0, _themeGet2.default)('colors.negative.default'), (0, _themeGet2.default)('colors.negative.dark'), (0, _themeGet2.default)('colors.negative.dark'));

/**
 * @component
 */
exports.default = Button;