@rafacdb/bah/lib/Button.js

'use strict';

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

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 _templateObject = _taggedTemplateLiteral(['\n  ', ' {\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    cursor: pointer;\n    border: none;\n    height: 40px;\n    padding: 0 14px;\n    border-radius: 5px;\n    -webkit-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);\n    -moz-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);\n    box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);\n    font-size: 18px;\n    line-height: 37px;\n    -webkit-transition-property: background-color;\n    -webkit-transition-duration: 0.2s;\n    -webkit-transition-timing-function: linear;\n    -moz-transition-property: background-color;\n    -moz-transition-duration: 0.2s;\n    -moz-transition-timing-function: linear;\n    -ms-transition-property: background-color;\n    -ms-transition-duration: 0.2s;\n    -ms-transition-timing-function: linear;\n    -o-transition-property: background-color;\n    -o-transition-duration: 0.2s;\n    -o-transition-timing-function: linear;\n    transition-property: background-color;\n    transition-duration: 0.2s;\n    transition-timing-function: linear;\n    background: #fafafa;\n    color: #222;\n\n    i {\n      line-height: 37px;\n    }\n    &:active,\n    &:active i {\n      line-height: 40px;\n      transform: translateY(2px);\n    }\n    ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' span {\n      pointer-events: none;\n    }\n    &:hover {\n      text-decoration: none;\n    }\n    &:focus {\n      text-decoration: none;\n      outline: none;\n    }\n    &:active {\n      -webkit-box-shadow: none !important;\n      -moz-box-shadow: none !important;\n      box-shadow: none !important;\n    }\n\n    ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' &:disabled {\n      background: #606263;\n      color: #9ea1a3;\n    }\n  }\n'], ['\n  ', ' {\n    text-decoration: none;\n    display: block;\n    text-align: center;\n    cursor: pointer;\n    border: none;\n    height: 40px;\n    padding: 0 14px;\n    border-radius: 5px;\n    -webkit-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);\n    -moz-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);\n    box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);\n    font-size: 18px;\n    line-height: 37px;\n    -webkit-transition-property: background-color;\n    -webkit-transition-duration: 0.2s;\n    -webkit-transition-timing-function: linear;\n    -moz-transition-property: background-color;\n    -moz-transition-duration: 0.2s;\n    -moz-transition-timing-function: linear;\n    -ms-transition-property: background-color;\n    -ms-transition-duration: 0.2s;\n    -ms-transition-timing-function: linear;\n    -o-transition-property: background-color;\n    -o-transition-duration: 0.2s;\n    -o-transition-timing-function: linear;\n    transition-property: background-color;\n    transition-duration: 0.2s;\n    transition-timing-function: linear;\n    background: #fafafa;\n    color: #222;\n\n    i {\n      line-height: 37px;\n    }\n    &:active,\n    &:active i {\n      line-height: 40px;\n      transform: translateY(2px);\n    }\n    ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' span {\n      pointer-events: none;\n    }\n    &:hover {\n      text-decoration: none;\n    }\n    &:focus {\n      text-decoration: none;\n      outline: none;\n    }\n    &:active {\n      -webkit-box-shadow: none !important;\n      -moz-box-shadow: none !important;\n      box-shadow: none !important;\n    }\n\n    ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' &:disabled {\n      background: #606263;\n      color: #9ea1a3;\n    }\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);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* Buttons pen from https://codepen.io/valentin/pen/kahKl */


var ButtonStyled = _styledComponents2.default.div(_templateObject, function (props) {
  return props.buttonLink ? 'a' : 'button';
}, function (props) {
  return (props.primary || props.info || props.success || props.warning || props.danger || props.inverse) && '\n      -webkit-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);\n      -moz-box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);\n      box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);\n    ';
}, function (props) {
  return props.primary && '\n      background: #0088cc;\n      color: #fafafa;\n    ';
}, function (props) {
  return props.primary && '\n        &:hover,\n        &:focus {\n          background: #006da3;\n          color: #fafafa;\n        }\n    ';
}, function (props) {
  return props.info && '\n        background: #49afcd;\n        color: #fafafa;\n    ';
}, function (props) {
  return props.info && '\n        &:hover,\n        &:focus {\n          background: #339bba;\n          color: #fafafa;\n        }\n    ';
}, function (props) {
  return props.success && '\n        background: #5bb75b;\n        color: #fafafa;\n    ';
}, function (props) {
  return props.success && '\n        &:hover,\n        &:focus {\n          background: #47a247;\n          color: #fafafa;\n        }\n    ';
}, function (props) {
  return props.warning && '\n        background: #faa732;\n        color: #fafafa;\n    ';
}, function (props) {
  return props.warning && '\n        &:hover,\n        &:focus {\n          background: #f9960a;\n          color: #fafafa;\n        }\n    ';
}, function (props) {
  return props.danger && '\n        background: #da4f49;\n        color: #fafafa;\n    ';
}, function (props) {
  return props.danger && '\n        &:hover,\n        &:focus {\n          background: #d0312a;\n          color: #fafafa;\n        }\n    ';
}, function (props) {
  return props.inverse && '\n        background: #363636;\n        color: #fafafa;\n    ';
}, function (props) {
  return props.inverse && '\n        &:hover,\n        &:focus {\n          background: #222222;\n          color: #fafafa;\n        }\n    ';
}, function (props) {
  return props.small && '\n      height: 30px;\n      padding: 0 10px;\n      border-radius: 4px;\n      -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);\n      -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);\n      box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);\n      font-size: 14px;\n      line-height: 28px;\n      i {\n        line-height: 28px;\n      }\n    ';
}, function (props) {
  return props.small && '\n        &:active,\n        &:active i {\n          line-height: 30px;\n        }\n    ';
}, function (props) {
  return props.small && (props.primary || props.info || props.success || props.warning || props.danger || props.inverse) && '\n        -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);\n        -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);\n        box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);\n    ';
}, function (props) {
  return props.large && '\n        height: 50px;\n        padding: 0 18px;\n        border-radius: 6px;\n        -webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);\n        -moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);\n        box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);\n        font-size: 22px;\n        line-height: 46px;\n        i {\n          line-height: 46px;\n        }\n    ';
}, function (props) {
  return props.large && '\n        &:active,\n        &:active i {\n          line-height: 50px;\n        }\n    ';
}, function (props) {
  return props.large && (props.primary || props.info || props.success || props.warning || props.danger || props.inverse) && '\n        -webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);\n        -moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);\n        box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2);\n    ';
}, function (props) {
  return props.xlarge && '\n        height: 60px;\n        padding: 0 22px;\n        border-radius: 7px;\n        -webkit-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);\n        -moz-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);\n        box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);\n        font-size: 26px;\n        line-height: 55px;\n        i {\n          line-height: 55px;\n        }\n    ';
}, function (props) {
  return props.xlarge && '\n        &:active,\n        &:active i {\n          line-height: 60px;\n        }\n    ';
}, function (props) {
  return props.xlarge && (props.primary || props.info || props.success || props.warning || props.danger || props.inverse) && '\n        -webkit-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);\n        -moz-box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);\n        box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.2);\n    ';
}, function (props) {
  return props.inline && '\n        display: inline-block;\n        vertical-align: middle;\n    ';
});

var Button = function Button(_ref) {
  var children = _ref.children,
      primary = _ref.primary,
      info = _ref.info,
      success = _ref.success,
      warning = _ref.warning,
      danger = _ref.danger,
      inverse = _ref.inverse,
      inline = _ref.inline,
      small = _ref.small,
      large = _ref.large,
      xlarge = _ref.xlarge,
      buttonLink = _ref.buttonLink,
      props = _objectWithoutProperties(_ref, ['children', 'primary', 'info', 'success', 'warning', 'danger', 'inverse', 'inline', 'small', 'large', 'xlarge', 'buttonLink']);

  return _react2.default.createElement(
    ButtonStyled,
    {
      primary: primary,
      info: info,
      success: success,
      warning: warning,
      danger: danger,
      inverse: inverse,
      inline: inline,
      small: small,
      large: large,
      xlarge: xlarge,
      buttonLink: buttonLink
    },
    buttonLink ? _react2.default.createElement(
      'a',
      _extends({ href: '#' }, props),
      children
    ) : _react2.default.createElement(
      'button',
      props,
      children
    )
  );
};

Button.defaultProps = {
  children: '',
  primary: false,
  info: false,
  success: false,
  warning: false,
  danger: false,
  inverse: false,
  inline: false,
  small: false,
  large: false,
  xlarge: false,
  buttonLink: false
};

Button.propTypes = {
  children: _propTypes2.default.node.isRequired,
  primary: _propTypes2.default.bool,
  info: _propTypes2.default.bool,
  success: _propTypes2.default.bool,
  warning: _propTypes2.default.bool,
  danger: _propTypes2.default.bool,
  inverse: _propTypes2.default.bool,
  inline: _propTypes2.default.bool,
  small: _propTypes2.default.bool,
  large: _propTypes2.default.bool,
  xlarge: _propTypes2.default.bool,
  buttonLink: _propTypes2.default.bool
};

exports.default = Button;