react-misc-toolbox/dist/StyledButton.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MERCURY_CENTER = exports.MERCURY_BSIDE = exports.MERCURY_SIDE = exports.FACEBOOK_ICON = exports.GOOGLE_ICON = exports.MERCURY_BUTTON = exports.FACEBOOK_BUTTON = exports.CANCEL_BUTTON = exports.CARETDOWN_BUTTON = exports.GOOGLE_BUTTON = exports.EXPAND_MORE = exports.EXPAND_LESS = exports.ICON = exports.BUTTON = undefined;

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  padding: ', ';\n  font-size: ', ';\n  display: flex;\n  font-family: \'PT Sans\', sans-serif;\n  align-items: center;\n  justify-content: center;\n  transition: background 250ms ease-in-out, color 250ms ease-in-out;\n  cursor: ', ';\n  ', ';\n  ', ';\n'], ['\n  padding: ', ';\n  font-size: ', ';\n  display: flex;\n  font-family: \'PT Sans\', sans-serif;\n  align-items: center;\n  justify-content: center;\n  transition: background 250ms ease-in-out, color 250ms ease-in-out;\n  cursor: ', ';\n  ', ';\n  ', ';\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  pointer-events: none;\n'], ['\n  pointer-events: none;\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  align-items: center;\n'], ['\n  justify-content: flex-start;\n  align-items: center;\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: space-between;\n'], ['\n  justify-content: space-between;\n']),
    _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  align-items: center;\n  padding: ', ';\n  height: ', ';\n'], ['\n  justify-content: flex-start;\n  align-items: center;\n  padding: ', ';\n  height: ', ';\n']),
    _templateObject6 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  align-items: center;\n  width: ', ';\n\n  transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n    padding 0.5s ease-in-out;\n  padding: ', ';\n  height: ', ';\n  background-color: ', ';\n'], ['\n  justify-content: flex-start;\n  align-items: center;\n  width: ', ';\n\n  transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n    padding 0.5s ease-in-out;\n  padding: ', ';\n  height: ', ';\n  background-color: ', ';\n']),
    _templateObject7 = (0, _taggedTemplateLiteral3.default)(['\n  justify-content: flex-start;\n  align-items: center;\n  width: ', ';\n\n  transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n    padding 0.5s ease-in-out;\n  padding: ', ';\n  height: ', ';\n  ', ';\n'], ['\n  justify-content: flex-start;\n  align-items: center;\n  width: ', ';\n\n  transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out,\n    padding 0.5s ease-in-out;\n  padding: ', ';\n  height: ', ';\n  ', ';\n']),
    _templateObject8 = (0, _taggedTemplateLiteral3.default)(['\n/* padding: ', '; */\n  padding: 0 1rem;\n  \n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ', ';\n  /* flex-grow: ', '; */\n\n  transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out, padding 0.5s ease-in-out;\n  /* transition: width 0.5s ease-in-out; */\n\n  \n  justify-content: flex-start;\n\n'], ['\n/* padding: ', '; */\n  padding: 0 1rem;\n  \n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ', ';\n  /* flex-grow: ', '; */\n\n  transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out, padding 0.5s ease-in-out;\n  /* transition: width 0.5s ease-in-out; */\n\n  \n  justify-content: flex-start;\n\n']),
    _templateObject9 = (0, _taggedTemplateLiteral3.default)(['\n  pointer-events: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 1.5rem;\n  margin-right: 1.5rem;\n  width: 1.5rem;\n  padding: 0.6rem;\n'], ['\n  pointer-events: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 1.5rem;\n  margin-right: 1.5rem;\n  width: 1.5rem;\n  padding: 0.6rem;\n']),
    _templateObject10 = (0, _taggedTemplateLiteral3.default)(['\n  background-image: url(\'/static/google.svg\');\n'], ['\n  background-image: url(\'/static/google.svg\');\n']),
    _templateObject11 = (0, _taggedTemplateLiteral3.default)(['\n  background-image: url(\'/static/facebook.svg\');\n'], ['\n  background-image: url(\'/static/facebook.svg\');\n']);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _tinycolor = require('tinycolor2');

var _tinycolor2 = _interopRequireDefault(_tinycolor);

var _defaultStyles = require('./defaultStyles');

var _SVGExpandLess = require('./svg/SVGExpandLess');

var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);

var _SVGExpandMore = require('./svg/SVGExpandMore');

var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);

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

var getColor = function getColor(_ref) {
  var balance = _ref.balance,
      _ref$intensity = _ref.intensity,
      intensity = _ref$intensity === undefined ? 100 : _ref$intensity,
      colors = _ref.colors,
      key = _ref.key,
      isDisabled = _ref.isDisabled,
      isInverted = _ref.isInverted,
      isOn = _ref.isOn,
      _ref$disabledDefault = _ref.disabledDefault,
      disabledDefault = _ref$disabledDefault === undefined ? {
    color: '#666',
    backgroundColor: '#fff'
  } : _ref$disabledDefault,
      onHover = _ref.onHover,
      hasTouch = _ref.hasTouch;

  var color = void 0,
      on = void 0,
      off = void 0;
  var on$ = colors.on,
      off$ = colors.off,
      disabled = colors.disabled,
      transitionType = colors.transition;

  if (isInverted) {
    on = off$;
    off = on$;
  } else {
    on = on$;
    off = off$;
  }

  if (isDisabled) {
    color = disabled && disabled[key] || disabledDefault[key];
  }

  var onValue = void 0,
      offValue = void 0;

  // Set default values in case on/off values aren't provided in the color scheme:

  if (on[key]) {
    onValue = on[key];
  } else {
    onValue = _defaultStyles.buttonStyles.neutral.on[key];
  }
  if (off[key]) {
    offValue = off[key];
  } else {
    offValue = _defaultStyles.buttonStyles.neutral.off[key];
  }

  // -

  if (onHover && !isDisabled && !hasTouch) {
    switch (transitionType) {
      case 'text':
      case 'mix':
        color = _tinycolor2.default.mix(onValue, offValue, balance).toString();
        break;
      case 'saturate':
        if (isOn === true) {
          color = (0, _tinycolor2.default)(onValue).brighten(intensity / 5).toString();
        } else {
          color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
        }
        break;
      case 'darken':
        if (isOn === true) {
          color = (0, _tinycolor2.default)(onValue).darken(intensity / 5).toString();
        } else {
          color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
        }
        break;
      case 'contrast':
        if (isOn === true) {
          color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
        } else {
          color = (0, _tinycolor2.default)(onValue).darken(intensity / 5).toString();
        }
        break;
      case 'darken':
      default:
        if (isOn === true) {
          color = (0, _tinycolor2.default)(onValue).darken(intensity / 5).toString();
        } else {
          color = (0, _tinycolor2.default)(offValue).darken(intensity / 5).toString();
        }
        break;
    }
  }
  if (!onHover && !isDisabled) {
    if (isOn) {
      color = onValue;
    } else {
      color = offValue;
    }
  }

  return color;
};

var backgroundColor = function backgroundColor(_ref2) {
  var props = (0, _objectWithoutProperties3.default)(_ref2, []);

  var getBackgroundColor = function getBackgroundColor(args) {
    return getColor((0, _extends3.default)({}, props, args, {
      key: 'backgroundColor'
    }));
  };
  return '\n  background-color: ' + getBackgroundColor() + ';\n  :hover {\n    background-color: ' + getBackgroundColor({
    onHover: true,
    balance: props.isOn ? 25 : 75,
    intensity: 25
  }) + ';\n  }\n  :active {\n    background-color: ' + getBackgroundColor({
    onHover: true,
    balance: 50,
    intensity: 50
  }) + ';\n  }  \n  ';
};
var invertedBackgroundColor = function invertedBackgroundColor(_ref3) {
  var props = (0, _objectWithoutProperties3.default)(_ref3, []);

  var getBackgroundColor = function getBackgroundColor(args) {
    return getColor((0, _extends3.default)({}, props, args, {
      isInverted: !props.isInverted,
      key: 'backgroundColor'
    }));
  };
  return '\n  background-color: ' + getBackgroundColor() + ';\n  :hover {\n    background-color: ' + getBackgroundColor({
    onHover: true,
    balance: props.isOn ? 25 : 75,
    intensity: 25
  }) + ';\n  }\n  :active {\n    background-color: ' + getBackgroundColor({
    onHover: true,
    balance: 50,
    intensity: 50
  }) + ';\n  }  \n  ';
};

var color = function color(_ref4) {
  var props = (0, _objectWithoutProperties3.default)(_ref4, []);

  var getTextColor = function getTextColor(args) {
    return getColor((0, _extends3.default)({}, props, args, {
      key: 'color'
    }));
  };
  return '\n  color: ' + getTextColor() + ';\n  :hover {\n    color: ' + getTextColor({
    onHover: true,
    balance: props.isOn ? 25 : 75
  }) + ';\n  }\n  :active {\n    color: ' + getTextColor({
    onHover: true,
    balance: 50
  }) + ';\n  }  \n  ';
};

var BUTTON = _styledComponents2.default.div(_templateObject, function (_ref5) {
  var size = _ref5.size;
  return size * 0.5 / 10 + 'rem ' + size / 10 + 'rem';
}, function (_ref6) {
  var size = _ref6.size,
      sizeFontRatio = _ref6.sizeFontRatio;
  return size * sizeFontRatio / 10 + 'rem';
}, function (_ref7) {
  var isDisabled = _ref7.isDisabled;
  return isDisabled ? 'default' : 'pointer';
}, backgroundColor, color);

BUTTON.defaultProps = {
  colors: _defaultStyles.buttonStyles.semiTransparentNeutral
};
var EXPAND_LESS = (0, _styledComponents2.default)(_SVGExpandLess2.default)(_templateObject2);
var EXPAND_MORE = (0, _styledComponents2.default)(_SVGExpandMore2.default)(_templateObject2);
var GOOGLE_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject3);
var CARETDOWN_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject4);
var CANCEL_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject4);
var FACEBOOK_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject3);
var MERCURY_BUTTON = (0, _styledComponents2.default)(BUTTON)(_templateObject5, function (_ref8) {
  var size = _ref8.size;
  return 0.025 * size + 'rem 0 ' + 0.025 * size + 'rem 0';
}, function (_ref9) {
  var size = _ref9.size;
  return size * 0.15 + 'rem';
});

var MERCURY_SIDE = _styledComponents2.default.div(_templateObject6, function (_ref10) {
  var isOn = _ref10.isOn,
      mercuryRatio = _ref10.mercuryRatio,
      sideTransform = _ref10.sideTransform,
      _ref10$marginLock = _ref10.marginLock,
      marginLock = _ref10$marginLock === undefined ? false : _ref10$marginLock;
  return !marginLock ? isOn ? mercuryRatio[0] + '%' : mercuryRatio[1] + '%' : isOn ? mercuryRatio[0] + '%' : mercuryRatio[0] * sideTransform + '%';
}, function (_ref11) {
  var size = _ref11.size;
  return 0.025 * size + 'rem 0';
}, function (_ref12) {
  var size = _ref12.size;
  return size * 0.15 + 'rem';
}, function (_ref13) {
  var colors = _ref13.colors,
      isOn = _ref13.isOn,
      isInverted = _ref13.isInverted;
  return isOn ? isInverted ? colors.on.backgroundColor : colors.off.backgroundColor : isInverted ? colors.off.backgroundColor : colors.on.backgroundColor;
});

var MERCURY_BSIDE = _styledComponents2.default.div(_templateObject7, function (_ref14) {
  var isOn = _ref14.isOn,
      mercuryRatio = _ref14.mercuryRatio,
      sideTransform = _ref14.sideTransform,
      _ref14$marginLock = _ref14.marginLock,
      marginLock = _ref14$marginLock === undefined ? false : _ref14$marginLock;
  return !marginLock ? isOn ? mercuryRatio[0] + '%' : mercuryRatio[1] + '%' : isOn ? '0%' : mercuryRatio[0] * (1 - sideTransform) + '%';
}, function (_ref15) {
  var size = _ref15.size;
  return 0.025 * size + 'rem 0';
}, function (_ref16) {
  var size = _ref16.size;
  return size * 0.15 + 'rem';
}, backgroundColor);
var MERCURY_CENTER = _styledComponents2.default.div(_templateObject8, function (_ref17) {
  var size = _ref17.size;
  return 0.025 * size + 'rem ' + 0.05 * size + 'rem';
}, function (_ref18) {
  var isOn = _ref18.isOn,
      mercuryRatio = _ref18.mercuryRatio,
      marginLock = _ref18.marginLock;
  return !marginLock ? isOn ? 100 - mercuryRatio[0] + '%' : 100 - mercuryRatio[1] + '%' : 100 - mercuryRatio[0] + '%';
}, function (_ref19) {
  var isOn = _ref19.isOn;
  return isOn ? 0.75 : 0.85;
});

var ICON = _styledComponents2.default.div(_templateObject9);

var GOOGLE_ICON = (0, _styledComponents2.default)(ICON)(_templateObject10);

var FACEBOOK_ICON = (0, _styledComponents2.default)(ICON)(_templateObject11);

exports.BUTTON = BUTTON;
exports.ICON = ICON;
exports.EXPAND_LESS = EXPAND_LESS;
exports.EXPAND_MORE = EXPAND_MORE;
exports.GOOGLE_BUTTON = GOOGLE_BUTTON;
exports.CARETDOWN_BUTTON = CARETDOWN_BUTTON;
exports.CANCEL_BUTTON = CANCEL_BUTTON;
exports.FACEBOOK_BUTTON = FACEBOOK_BUTTON;
exports.MERCURY_BUTTON = MERCURY_BUTTON;
exports.GOOGLE_ICON = GOOGLE_ICON;
exports.FACEBOOK_ICON = FACEBOOK_ICON;
exports.MERCURY_SIDE = MERCURY_SIDE;
exports.MERCURY_BSIDE = MERCURY_BSIDE;
exports.MERCURY_CENTER = MERCURY_CENTER;