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

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

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

var React = _interopRequireWildcard(require("react"));

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

var _defaultTokens = _interopRequireDefault(require("../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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } 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, _styledComponents.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",
  componentId: "sc-14jv5cl-0"
})(["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);
}, function (_ref5) {
  var sizeIcon = _ref5.sizeIcon;
  return (0, _Icon.getSize)(sizeIcon);
}, function (_ref6) {
  var sizeIcon = _ref6.sizeIcon;
  return (0, _Icon.getSize)(sizeIcon);
});
IconContainer.defaultProps = {
  theme: _defaultTokens.default
};
var IconContainerRight = (0, _styledComponents.default)(IconContainer).withConfig({
  displayName: "ButtonLink__IconContainerRight",
  componentId: "sc-14jv5cl-1"
})(["margin-right:0;margin-left:", ";"], function (_ref7) {
  var onlyIcon = _ref7.onlyIcon;
  return onlyIcon ? "0" : getSizeToken(_consts.TOKENS.marginRightIcon);
});
IconContainerRight.defaultProps = {
  theme: _defaultTokens.default
};
var StyledButtonLink = (0, _styledComponents.default)(function (_ref8) {
  var onlyIcon = _ref8.onlyIcon,
      component = _ref8.component,
      circled = _ref8.circled,
      external = _ref8.external,
      block = _ref8.block,
      type = _ref8.type,
      icon = _ref8.icon,
      iconLeft = _ref8.iconLeft,
      iconRight = _ref8.iconRight,
      sizeIcon = _ref8.sizeIcon,
      width = _ref8.width,
      children = _ref8.children,
      transparent = _ref8.transparent,
      style = _ref8.style,
      theme = _ref8.theme,
      dataTest = _ref8.dataTest,
      submit = _ref8.submit,
      props = _objectWithoutProperties(_ref8, ["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",
  componentId: "sc-14jv5cl-2"
})(["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 (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.fontFamily;
}, function (_ref10) {
  var block = _ref10.block,
      width = _ref10.width,
      onlyIcon = _ref10.onlyIcon;
  return block ? "100%" : width && "".concat(width, "px") || onlyIcon && getSizeToken(_consts.TOKENS.heightButton) || "auto";
}, getSizeToken(_consts.TOKENS.heightButton), getTypeToken(_consts.TOKENS.backgroundButton), getTypeToken(_consts.TOKENS.colorTextButton), function (_ref11) {
  var theme = _ref11.theme,
      circled = _ref11.circled;
  return circled ? getSizeToken(_consts.TOKENS.heightButton) : theme.orbit.borderRadiusNormal;
}, function (_ref12) {
  var onlyIcon = _ref12.onlyIcon,
      iconRight = _ref12.iconRight;
  return onlyIcon && "0" || (iconRight ? getSizeToken(_consts.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts.TOKENS.paddingButton));
}, function (_ref13) {
  var onlyIcon = _ref13.onlyIcon,
      icon = _ref13.icon,
      iconLeft = _ref13.iconLeft;
  return onlyIcon && "0" || (iconLeft || icon ? getSizeToken(_consts.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts.TOKENS.paddingButton));
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.fontWeightBold;
}, getSizeToken(_consts.TOKENS.fontSizeButton), function (_ref15) {
  var disabled = _ref15.disabled;
  return disabled ? "default" : "pointer";
}, function (_ref16) {
  var disabled = _ref16.disabled,
      theme = _ref16.theme;
  return disabled ? theme.orbit.opacityButtonDisabled : "1";
}, function (_ref17) {
  var transparent = _ref17.transparent;
  return !transparent && getTypeToken(_consts.TOKENS.backgroundButtonHover);
}, getTypeToken(_consts.TOKENS.colorTextButtonHover), function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.modifierScaleButtonActive;
}, function (_ref19) {
  var transparent = _ref19.transparent;
  return !transparent && getTypeToken(_consts.TOKENS.backgroundButtonActive);
}, getTypeToken(_consts.TOKENS.colorTextButtonActive), function (_ref20) {
  var transparent = _ref20.transparent,
      theme = _ref20.theme;
  return !transparent && theme.orbit.boxShadowButtonFocus;
});
exports.StyledButtonLink = StyledButtonLink;
StyledButtonLink.defaultProps = {
  theme: _defaultTokens.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 === void 0 ? _consts.SIZES.NORMAL : _props$size,
      icon = props.icon,
      iconRight = props.iconRight,
      _props$type = props.type,
      type = _props$type === void 0 ? _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
};
var _default = ButtonLink;
exports.default = _default;