@kiwicom/orbit-components/lib/ButtonLink/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

"use strict";

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

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 React = _interopRequireWildcard(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _defaultTokens = require("../defaultTokens");

var _defaultTokens2 = _interopRequireDefault(_defaultTokens);

var _consts = require("./consts");

var _consts2 = require("../Icon/consts");

var _Icon = require("../Icon");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getSizeToken = function getSizeToken(name) {
  return function (_ref) {
    var _TOKENS$heightButton, _TOKENS$fontSizeButto, _TOKENS$paddingButton, _TOKENS$paddingButton2, _TOKENS$marginRightIc, _tokens;

    var theme = _ref.theme,
        size = _ref.size;

    var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.TOKENS.heightButton, (_TOKENS$heightButton = {}, _defineProperty(_TOKENS$heightButton, _consts.SIZES.LARGE, theme.orbit.heightButtonLarge), _defineProperty(_TOKENS$heightButton, _consts.SIZES.NORMAL, theme.orbit.heightButtonNormal), _defineProperty(_TOKENS$heightButton, _consts.SIZES.SMALL, theme.orbit.heightButtonSmall), _TOKENS$heightButton)), _defineProperty(_tokens, _consts.TOKENS.fontSizeButton, (_TOKENS$fontSizeButto = {}, _defineProperty(_TOKENS$fontSizeButto, _consts.SIZES.LARGE, theme.orbit.fontSizeButtonLarge), _defineProperty(_TOKENS$fontSizeButto, _consts.SIZES.NORMAL, theme.orbit.fontSizeButtonNormal), _defineProperty(_TOKENS$fontSizeButto, _consts.SIZES.SMALL, theme.orbit.fontSizeButtonSmall), _TOKENS$fontSizeButto)), _defineProperty(_tokens, _consts.TOKENS.paddingButton, (_TOKENS$paddingButton = {}, _defineProperty(_TOKENS$paddingButton, _consts.SIZES.LARGE, theme.orbit.paddingButtonLarge), _defineProperty(_TOKENS$paddingButton, _consts.SIZES.NORMAL, theme.orbit.paddingButtonNormal), _defineProperty(_TOKENS$paddingButton, _consts.SIZES.SMALL, theme.orbit.paddingButtonSmall), _TOKENS$paddingButton)), _defineProperty(_tokens, _consts.TOKENS.paddingButtonWithIcon, (_TOKENS$paddingButton2 = {}, _defineProperty(_TOKENS$paddingButton2, _consts.SIZES.LARGE, theme.orbit.paddingButtonLargeWithIcon), _defineProperty(_TOKENS$paddingButton2, _consts.SIZES.NORMAL, theme.orbit.paddingButtonNormalWithIcon), _defineProperty(_TOKENS$paddingButton2, _consts.SIZES.SMALL, theme.orbit.paddingButtonSmallWithIcon), _TOKENS$paddingButton2)), _defineProperty(_tokens, _consts.TOKENS.marginRightIcon, (_TOKENS$marginRightIc = {}, _defineProperty(_TOKENS$marginRightIc, _consts.SIZES.LARGE, theme.orbit.marginButtonIconLarge), _defineProperty(_TOKENS$marginRightIc, _consts.SIZES.NORMAL, theme.orbit.marginButtonIconNormal), _defineProperty(_TOKENS$marginRightIc, _consts.SIZES.SMALL, theme.orbit.marginButtonIconSmall), _TOKENS$marginRightIc)), _tokens);
    return tokens[name][size];
  };
};
var getTypeToken = function getTypeToken(name) {
  return function (_ref2) {
    var _TOKENS$backgroundBut, _TOKENS$backgroundBut2, _TOKENS$backgroundBut3, _TOKENS$colorTextButt, _TOKENS$colorTextButt2, _TOKENS$colorTextButt3, _tokens2;

    var theme = _ref2.theme,
        type = _ref2.type;

    var tokens = (_tokens2 = {}, _defineProperty(_tokens2, _consts.TOKENS.backgroundButton, (_TOKENS$backgroundBut = {}, _defineProperty(_TOKENS$backgroundBut, _consts.TYPES.PRIMARY, theme.orbit.backgroundButtonLinkPrimary), _defineProperty(_TOKENS$backgroundBut, _consts.TYPES.SECONDARY, theme.orbit.backgroundButtonLinkSecondary), _TOKENS$backgroundBut)), _defineProperty(_tokens2, _consts.TOKENS.backgroundButtonHover, (_TOKENS$backgroundBut2 = {}, _defineProperty(_TOKENS$backgroundBut2, _consts.TYPES.PRIMARY, theme.orbit.backgroundButtonLinkPrimaryHover), _defineProperty(_TOKENS$backgroundBut2, _consts.TYPES.SECONDARY, theme.orbit.backgroundButtonLinkSecondaryHover), _TOKENS$backgroundBut2)), _defineProperty(_tokens2, _consts.TOKENS.backgroundButtonActive, (_TOKENS$backgroundBut3 = {}, _defineProperty(_TOKENS$backgroundBut3, _consts.TYPES.PRIMARY, theme.orbit.backgroundButtonLinkPrimaryHover), _defineProperty(_TOKENS$backgroundBut3, _consts.TYPES.SECONDARY, theme.orbit.backgroundButtonLinkSecondaryHover), _TOKENS$backgroundBut3)), _defineProperty(_tokens2, _consts.TOKENS.colorTextButton, (_TOKENS$colorTextButt = {}, _defineProperty(_TOKENS$colorTextButt, _consts.TYPES.PRIMARY, theme.orbit.colorTextButtonLinkPrimary), _defineProperty(_TOKENS$colorTextButt, _consts.TYPES.SECONDARY, theme.orbit.colorTextButtonLinkSecondary), _TOKENS$colorTextButt)), _defineProperty(_tokens2, _consts.TOKENS.colorTextButtonHover, (_TOKENS$colorTextButt2 = {}, _defineProperty(_TOKENS$colorTextButt2, _consts.TYPES.PRIMARY, theme.orbit.colorTextButtonLinkPrimaryHover), _defineProperty(_TOKENS$colorTextButt2, _consts.TYPES.SECONDARY, theme.orbit.colorTextButtonLinkSecondaryHover), _TOKENS$colorTextButt2)), _defineProperty(_tokens2, _consts.TOKENS.colorTextButtonActive, (_TOKENS$colorTextButt3 = {}, _defineProperty(_TOKENS$colorTextButt3, _consts.TYPES.PRIMARY, theme.orbit.colorTextButtonLinkPrimaryActive), _defineProperty(_TOKENS$colorTextButt3, _consts.TYPES.SECONDARY, theme.orbit.colorTextButtonLinkSecondaryActive), _TOKENS$colorTextButt3)), _tokens2);

    return tokens[name][type];
  };
};

var IconContainer = (0, _styledComponents2.default)(function (_ref3) {
  var theme = _ref3.theme,
      sizeIcon = _ref3.sizeIcon,
      type = _ref3.type,
      onlyIcon = _ref3.onlyIcon,
      props = _objectWithoutProperties(_ref3, ["theme", "sizeIcon", "type", "onlyIcon"]);

  return React.createElement("div", props);
}).withConfig({
  displayName: "ButtonLink__IconContainer"
})(["display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:", ";> *{width:", ";height:", ";}"], function (_ref4) {
  var onlyIcon = _ref4.onlyIcon;
  return onlyIcon ? "0" : getSizeToken(_consts.TOKENS.marginRightIcon);
}, (0, _Icon.getSize)(), (0, _Icon.getSize)());

IconContainer.defaultProps = {
  theme: _defaultTokens2.default
};

var IconContainerRight = (0, _styledComponents2.default)(IconContainer).withConfig({
  displayName: "ButtonLink__IconContainerRight"
})(["margin-right:0;margin-left:", ";"], function (_ref5) {
  var onlyIcon = _ref5.onlyIcon;
  return onlyIcon ? "0" : getSizeToken(_consts.TOKENS.marginRightIcon);
});

IconContainerRight.defaultProps = {
  theme: _defaultTokens2.default
};

var StyledButtonLink = (0, _styledComponents2.default)(function (_ref6) {
  var onlyIcon = _ref6.onlyIcon,
      component = _ref6.component,
      circled = _ref6.circled,
      external = _ref6.external,
      block = _ref6.block,
      type = _ref6.type,
      icon = _ref6.icon,
      iconLeft = _ref6.iconLeft,
      iconRight = _ref6.iconRight,
      sizeIcon = _ref6.sizeIcon,
      width = _ref6.width,
      children = _ref6.children,
      transparent = _ref6.transparent,
      style = _ref6.style,
      theme = _ref6.theme,
      dataTest = _ref6.dataTest,
      submit = _ref6.submit,
      props = _objectWithoutProperties(_ref6, ["onlyIcon", "component", "circled", "external", "block", "type", "icon", "iconLeft", "iconRight", "sizeIcon", "width", "children", "transparent", "style", "theme", "dataTest", "submit"]);

  var isButtonWithHref = component === "button" && props.href;
  var Component = isButtonWithHref ? "a" : component;
  var buttonType = submit ? "submit" : "button";
  return React.createElement(
    Component,
    _extends({ "data-test": dataTest, type: !isButtonWithHref ? buttonType : undefined }, props),
    children
  );
}).withConfig({
  displayName: "ButtonLink__StyledButtonLink"
})(["font-family:", ";box-sizing:border-box;appearance:none;display:inline-flex;justify-content:center;align-items:center;width:", ";height:", ";background:", ";color:", "!important;border:0;border-radius:", ";padding:0;padding-right:", ";padding-left:", ";font-weight:", "!important;font-size:", ";cursor:", ";opacity:", ";transition:all 0.15s ease-in-out !important;outline:0;text-decoration:none;&:enabled:hover{background:", ";color:", "!important;}&:enabled:active{transform:scale(", ");background:", ";color:", "!important;}&:enabled:focus{box-shadow:", ";&:active{box-shadow:none;}}"], function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.fontFamily;
}, function (_ref8) {
  var block = _ref8.block,
      width = _ref8.width,
      onlyIcon = _ref8.onlyIcon;
  return block ? "100%" : width && width + "px" || onlyIcon && getSizeToken(_consts.TOKENS.heightButton) || "auto";
}, getSizeToken(_consts.TOKENS.heightButton), getTypeToken(_consts.TOKENS.backgroundButton), getTypeToken(_consts.TOKENS.colorTextButton), function (_ref9) {
  var theme = _ref9.theme,
      circled = _ref9.circled;
  return circled ? getSizeToken(_consts.TOKENS.heightButton) : theme.orbit.borderRadiusNormal;
}, function (_ref10) {
  var onlyIcon = _ref10.onlyIcon,
      iconRight = _ref10.iconRight;
  return onlyIcon && "0" || (iconRight ? getSizeToken(_consts.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts.TOKENS.paddingButton));
}, function (_ref11) {
  var onlyIcon = _ref11.onlyIcon,
      icon = _ref11.icon,
      iconLeft = _ref11.iconLeft;
  return onlyIcon && "0" || (iconLeft || icon ? getSizeToken(_consts.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts.TOKENS.paddingButton));
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.fontWeightBold;
}, getSizeToken(_consts.TOKENS.fontSizeButton), function (_ref13) {
  var disabled = _ref13.disabled;
  return disabled ? "default" : "pointer";
}, function (_ref14) {
  var disabled = _ref14.disabled,
      theme = _ref14.theme;
  return disabled ? theme.orbit.opacityButtonDisabled : "1";
}, function (_ref15) {
  var transparent = _ref15.transparent;
  return !transparent && getTypeToken(_consts.TOKENS.backgroundButtonHover);
}, getTypeToken(_consts.TOKENS.colorTextButtonHover), function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.modifierScaleButtonActive;
}, function (_ref17) {
  var transparent = _ref17.transparent;
  return !transparent && getTypeToken(_consts.TOKENS.backgroundButtonActive);
}, getTypeToken(_consts.TOKENS.colorTextButtonActive), function (_ref18) {
  var transparent = _ref18.transparent,
      theme = _ref18.theme;
  return !transparent && theme.orbit.boxShadowButtonFocus;
});

exports.StyledButtonLink = StyledButtonLink;
StyledButtonLink.defaultProps = {
  theme: _defaultTokens2.default
};

var ButtonLink = function ButtonLink(props) {
  var external = props.external,
      children = props.children,
      component = props.component,
      href = props.href,
      _props$size = props.size,
      size = _props$size === undefined ? _consts.SIZES.NORMAL : _props$size,
      icon = props.icon,
      iconRight = props.iconRight,
      _props$type = props.type,
      type = _props$type === undefined ? _consts.TYPES.PRIMARY : _props$type,
      onClick = props.onClick;


  var iconLeft = props.iconLeft || icon;
  var sizeIcon = size === _consts2.ICON_SIZES.SMALL ? _consts2.ICON_SIZES.SMALL : _consts2.ICON_SIZES.MEDIUM;

  var onlyIcon = iconLeft && !children;

  return React.createElement(
    StyledButtonLink,
    _extends({
      onClick: onClick,
      component: component,
      onlyIcon: onlyIcon,
      sizeIcon: sizeIcon,
      type: type,
      target: href && external ? "_blank" : undefined
    }, props),
    iconLeft && React.createElement(
      IconContainer,
      { size: size, type: type, onlyIcon: onlyIcon, sizeIcon: sizeIcon },
      iconLeft
    ),
    children,
    iconRight && React.createElement(
      IconContainerRight,
      { size: size, type: type, onlyIcon: onlyIcon, sizeIcon: sizeIcon },
      iconRight
    )
  );
};

ButtonLink.defaultProps = {
  component: "button",
  external: false,
  type: "primary",
  size: "normal",
  width: 0,
  transparent: false
};

exports.default = ButtonLink;