@kiwicom/orbit-components
Version:
<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"
324 lines (289 loc) • 29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledButton = 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("../Icon/consts");
var _consts2 = require("./consts");
var _Loading = require("../Loading");
var _Loading2 = _interopRequireDefault(_Loading);
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$loadingWidth, _TOKENS$loadingHeight, _TOKENS$fontSizeButto, _TOKENS$paddingButton, _TOKENS$paddingButton2, _TOKENS$marginRightIc, _tokens;
var theme = _ref.theme,
size = _ref.size;
var tokens = (_tokens = {}, _defineProperty(_tokens, _consts2.TOKENS.heightButton, (_TOKENS$heightButton = {}, _defineProperty(_TOKENS$heightButton, _consts2.SIZE_OPTIONS.LARGE, theme.orbit.heightButtonLarge), _defineProperty(_TOKENS$heightButton, _consts2.SIZE_OPTIONS.NORMAL, theme.orbit.heightButtonNormal), _defineProperty(_TOKENS$heightButton, _consts2.SIZE_OPTIONS.SMALL, theme.orbit.heightButtonSmall), _TOKENS$heightButton)), _defineProperty(_tokens, _consts2.TOKENS.loadingWidth, (_TOKENS$loadingWidth = {}, _defineProperty(_TOKENS$loadingWidth, _consts2.SIZE_OPTIONS.LARGE, theme.orbit.widthIconMedium), _defineProperty(_TOKENS$loadingWidth, _consts2.SIZE_OPTIONS.NORMAL, theme.orbit.widthIconMedium), _defineProperty(_TOKENS$loadingWidth, _consts2.SIZE_OPTIONS.SMALL, theme.orbit.widthIconSmall), _TOKENS$loadingWidth)), _defineProperty(_tokens, _consts2.TOKENS.loadingHeight, (_TOKENS$loadingHeight = {}, _defineProperty(_TOKENS$loadingHeight, _consts2.SIZE_OPTIONS.LARGE, theme.orbit.heightIconMedium), _defineProperty(_TOKENS$loadingHeight, _consts2.SIZE_OPTIONS.NORMAL, theme.orbit.heightIconMedium), _defineProperty(_TOKENS$loadingHeight, _consts2.SIZE_OPTIONS.SMALL, theme.orbit.heightIconSmall), _TOKENS$loadingHeight)), _defineProperty(_tokens, _consts2.TOKENS.fontSizeButton, (_TOKENS$fontSizeButto = {}, _defineProperty(_TOKENS$fontSizeButto, _consts2.SIZE_OPTIONS.LARGE, theme.orbit.fontSizeButtonLarge), _defineProperty(_TOKENS$fontSizeButto, _consts2.SIZE_OPTIONS.NORMAL, theme.orbit.fontSizeButtonNormal), _defineProperty(_TOKENS$fontSizeButto, _consts2.SIZE_OPTIONS.SMALL, theme.orbit.fontSizeButtonSmall), _TOKENS$fontSizeButto)), _defineProperty(_tokens, _consts2.TOKENS.paddingButton, (_TOKENS$paddingButton = {}, _defineProperty(_TOKENS$paddingButton, _consts2.SIZE_OPTIONS.LARGE, theme.orbit.paddingButtonLarge), _defineProperty(_TOKENS$paddingButton, _consts2.SIZE_OPTIONS.NORMAL, theme.orbit.paddingButtonNormal), _defineProperty(_TOKENS$paddingButton, _consts2.SIZE_OPTIONS.SMALL, theme.orbit.paddingButtonSmall), _TOKENS$paddingButton)), _defineProperty(_tokens, _consts2.TOKENS.paddingButtonWithIcon, (_TOKENS$paddingButton2 = {}, _defineProperty(_TOKENS$paddingButton2, _consts2.SIZE_OPTIONS.LARGE, theme.orbit.paddingButtonLargeWithIcon), _defineProperty(_TOKENS$paddingButton2, _consts2.SIZE_OPTIONS.NORMAL, theme.orbit.paddingButtonNormalWithIcon), _defineProperty(_TOKENS$paddingButton2, _consts2.SIZE_OPTIONS.SMALL, theme.orbit.paddingButtonSmallWithIcon), _TOKENS$paddingButton2)), _defineProperty(_tokens, _consts2.TOKENS.marginRightIcon, (_TOKENS$marginRightIc = {}, _defineProperty(_TOKENS$marginRightIc, _consts2.SIZE_OPTIONS.LARGE, theme.orbit.marginButtonIconLarge), _defineProperty(_TOKENS$marginRightIc, _consts2.SIZE_OPTIONS.NORMAL, theme.orbit.marginButtonIconNormal), _defineProperty(_TOKENS$marginRightIc, _consts2.SIZE_OPTIONS.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, _TOKENS$colorTextButt4, _TOKENS$colorTextButt5, _TOKENS$colorTextButt6, _TOKENS$borderColorBu, _TOKENS$borderColorBu2, _TOKENS$borderColorBu3, _tokens2;
var theme = _ref2.theme,
type = _ref2.type;
var tokens = (_tokens2 = {}, _defineProperty(_tokens2, _consts2.TOKENS.backgroundButton, (_TOKENS$backgroundBut = {}, _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.backgroundButtonPrimary), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.backgroundButtonSecondary), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.INFO, theme.orbit.backgroundButtonInfo), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundButtonSuccess), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.backgroundButtonWarning), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundButtonCritical), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.backgroundButtonFacebook), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.backgroundButtonGoogle), _TOKENS$backgroundBut)), _defineProperty(_tokens2, _consts2.TOKENS.backgroundButtonHover, (_TOKENS$backgroundBut2 = {}, _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.backgroundButtonPrimaryHover), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.backgroundButtonSecondaryHover), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.INFO, theme.orbit.backgroundButtonInfoHover), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundButtonSuccessHover), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.backgroundButtonWarningHover), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundButtonCriticalHover), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.backgroundButtonFacebookHover), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.backgroundButtonGoogleHover), _TOKENS$backgroundBut2)), _defineProperty(_tokens2, _consts2.TOKENS.backgroundButtonActive, (_TOKENS$backgroundBut3 = {}, _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.backgroundButtonPrimaryActive), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.backgroundButtonSecondaryActive), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.INFO, theme.orbit.backgroundButtonInfoActive), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundButtonSuccessActive), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.backgroundButtonWarningActive), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundButtonCriticalActive), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.backgroundButtonFacebookActive), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.backgroundButtonGoogleActive), _TOKENS$backgroundBut3)), _defineProperty(_tokens2, _consts2.TOKENS.colorTextButton, (_TOKENS$colorTextButt = {}, _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.colorTextButtonPrimary), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.colorTextButtonSecondary), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.INFO, theme.orbit.colorTextButtonInfo), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextButtonSuccess), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.colorTextButtonWarning), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextButtonCritical), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.colorTextButtonFacebook), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.colorTextButtonGoogle), _TOKENS$colorTextButt)), _defineProperty(_tokens2, _consts2.TOKENS.colorTextButtonBordered, (_TOKENS$colorTextButt2 = {}, _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.colorTextButtonPrimaryBordered), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.colorTextButtonSecondaryBordered), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.INFO, theme.orbit.colorTextButtonInfoBordered), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextButtonSuccessBordered), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.colorTextButtonWarningBordered), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextButtonCriticalBordered), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.colorTextButtonFacebookBordered), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.colorTextButtonGoogleBordered), _TOKENS$colorTextButt2)), _defineProperty(_tokens2, _consts2.TOKENS.colorTextButtonHover, (_TOKENS$colorTextButt3 = {}, _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.colorTextButtonPrimaryHover), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.colorTextButtonSecondaryHover), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.INFO, theme.orbit.colorTextButtonInfoHover), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextButtonSuccessHover), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.colorTextButtonWarningHover), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextButtonCriticalHover), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.colorTextButtonFacebookHover), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.colorTextButtonGoogleHover), _TOKENS$colorTextButt3)), _defineProperty(_tokens2, _consts2.TOKENS.colorTextButtonBorderedHover, (_TOKENS$colorTextButt4 = {}, _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.colorTextButtonPrimaryBorderedHover), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.colorTextButtonSecondaryBorderedHover), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.INFO, theme.orbit.colorTextButtonInfoBorderedHover), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextButtonSuccessBorderedHover), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.colorTextButtonWarningBorderedHover), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextButtonCriticalBorderedHover), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.colorTextButtonFacebookBorderedHover), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.colorTextButtonGoogleBorderedHover), _TOKENS$colorTextButt4)), _defineProperty(_tokens2, _consts2.TOKENS.colorTextButtonActive, (_TOKENS$colorTextButt5 = {}, _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.colorTextButtonPrimaryActive), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.colorTextButtonSecondaryActive), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.INFO, theme.orbit.colorTextButtonInfoActive), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextButtonSuccessActive), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.colorTextButtonWarningActive), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextButtonCriticalActive), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.colorTextButtonFacebookActive), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.colorTextButtonGoogleActive), _TOKENS$colorTextButt5)), _defineProperty(_tokens2, _consts2.TOKENS.colorTextButtonBorderedActive, (_TOKENS$colorTextButt6 = {}, _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.colorTextButtonPrimaryBorderedActive), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.colorTextButtonSecondaryBorderedActive), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.INFO, theme.orbit.colorTextButtonInfoBorderedActive), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextButtonSuccessBorderedActive), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.colorTextButtonWarningBorderedActive), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextButtonCriticalBorderedActive), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.colorTextButtonFacebookBorderedActive), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.colorTextButtonGoogleBorderedActive), _TOKENS$colorTextButt6)), _defineProperty(_tokens2, _consts2.TOKENS.borderColorButton, (_TOKENS$borderColorBu = {}, _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.borderColorButtonPrimaryBordered), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.borderColorButtonSecondaryBordered), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.INFO, theme.orbit.borderColorButtonInfoBordered), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.borderColorButtonSuccessBordered), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.borderColorButtonWarningBordered), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.borderColorButtonCriticalBordered), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.borderColorButtonFacebookBordered), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.borderColorButtonGoogleBordered), _TOKENS$borderColorBu)), _defineProperty(_tokens2, _consts2.TOKENS.borderColorButtonHover, (_TOKENS$borderColorBu2 = {}, _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.borderColorButtonPrimaryBorderedHover), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.borderColorButtonSecondaryBorderedHover), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.INFO, theme.orbit.borderColorButtonInfoBorderedHover), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.borderColorButtonSuccessBorderedHover), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.borderColorButtonWarningBorderedHover), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.borderColorButtonCriticalBorderedHover), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.borderColorButtonFacebookBorderedHover), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.borderColorButtonGoogleBorderedHover), _TOKENS$borderColorBu2)), _defineProperty(_tokens2, _consts2.TOKENS.borderColorButtonActive, (_TOKENS$borderColorBu3 = {}, _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.borderColorButtonPrimaryBorderedActive), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.borderColorButtonSecondaryBorderedActive), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.INFO, theme.orbit.borderColorButtonInfoBorderedActive), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.borderColorButtonSuccessBorderedActive), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.borderColorButtonWarningBorderedActive), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.borderColorButtonCriticalBorderedActive), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.borderColorButtonFacebookBorderedActive), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.borderColorButtonGoogleBorderedActive), _TOKENS$borderColorBu3)), _tokens2);
return tokens[name][type];
};
};
var IconContainer = (0, _styledComponents2.default)(function (_ref3) {
var className = _ref3.className,
children = _ref3.children;
return React.createElement(
"div",
{ className: className },
children
);
}).withConfig({
displayName: "Button__IconContainer"
})(["display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:", ";color:", ";transition:background ", " ease-in-out,box-shadow ", " ease-in-out;> *{width:", ";height:", ";}"], function (_ref4) {
var onlyIcon = _ref4.onlyIcon;
return onlyIcon ? "0" : getSizeToken(_consts2.TOKENS.marginRightIcon);
}, function (_ref5) {
var bordered = _ref5.bordered;
return bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBordered) : getTypeToken(_consts2.TOKENS.colorTextButton);
}, function (_ref6) {
var theme = _ref6.theme;
return theme.orbit.durationFast;
}, function (_ref7) {
var theme = _ref7.theme;
return theme.orbit.durationFast;
}, (0, _Icon.getSize)(), (0, _Icon.getSize)());
IconContainer.defaultProps = {
theme: _defaultTokens2.default
};
var IconContainerRight = (0, _styledComponents2.default)(IconContainer).withConfig({
displayName: "Button__IconContainerRight"
})(["margin-right:0;margin-left:", ";"], function (_ref8) {
var onlyIcon = _ref8.onlyIcon;
return onlyIcon ? "0" : getSizeToken(_consts2.TOKENS.marginRightIcon);
});
IconContainerRight.defaultProps = {
theme: _defaultTokens2.default
};
var StyledButton = (0, _styledComponents2.default)(function (_ref9) {
var theme = _ref9.theme,
component = _ref9.component,
circled = _ref9.circled,
external = _ref9.external,
type = _ref9.type,
icon = _ref9.icon,
iconLeft = _ref9.iconLeft,
iconRight = _ref9.iconRight,
sizeIcon = _ref9.sizeIcon,
width = _ref9.width,
bordered = _ref9.bordered,
loading = _ref9.loading,
onlyIcon = _ref9.onlyIcon,
block = _ref9.block,
style = _ref9.style,
dataTest = _ref9.dataTest,
submit = _ref9.submit,
props = _objectWithoutProperties(_ref9, ["theme", "component", "circled", "external", "type", "icon", "iconLeft", "iconRight", "sizeIcon", "width", "bordered", "loading", "onlyIcon", "block", "style", "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),
props.children
);
}).withConfig({
displayName: "Button__StyledButton"
})(["position:relative;display:", ";justify-content:center;align-items:center;box-sizing:border-box;appearance:none;text-decoration:none;width:", ";flex:", ";height:", ";background:", ";color:", " !important;border:0;border-radius:", ";padding:0;padding-right:", ";padding-left:", ";font-weight:", "!important;font-size:", ";cursor:", ";transition:all 0.15s ease-in-out !important;outline:0;opacity:", ";pointer-events:", ";box-shadow:", ";&:hover{background:", ";box-shadow:", ";color:", "!important;", "{color:", ";}}&:active{", ";background:", ";box-shadow:", ";color:", "!important;& ", "{color:", ";}}&:enabled:focus{box-shadow:", " ", ";}", "{width:", ";height:", ";}"], function (_ref10) {
var href = _ref10.href,
component = _ref10.component;
return href || component === "a" ? "inline-flex" : "flex";
}, function (_ref11) {
var block = _ref11.block,
width = _ref11.width,
onlyIcon = _ref11.onlyIcon;
return block ? "100%" : width && width + "px" || onlyIcon && getSizeToken(_consts2.TOKENS.heightButton) || "auto";
}, function (_ref12) {
var block = _ref12.block;
return block ? "1 1 100%" : "0 0 auto";
}, getSizeToken(_consts2.TOKENS.heightButton), function (_ref13) {
var bordered = _ref13.bordered,
theme = _ref13.theme;
return bordered ? theme.orbit.backgroundButtonBordered : getTypeToken(_consts2.TOKENS.backgroundButton);
}, function (_ref14) {
var bordered = _ref14.bordered;
return bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBordered) : getTypeToken(_consts2.TOKENS.colorTextButton);
}, function (_ref15) {
var theme = _ref15.theme,
circled = _ref15.circled;
return circled ? getSizeToken(_consts2.TOKENS.heightButton) : theme.orbit.borderRadiusNormal;
}, function (_ref16) {
var onlyIcon = _ref16.onlyIcon,
iconRight = _ref16.iconRight;
return onlyIcon && "0" || (iconRight ? getSizeToken(_consts2.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts2.TOKENS.paddingButton));
}, function (_ref17) {
var onlyIcon = _ref17.onlyIcon,
icon = _ref17.icon,
iconLeft = _ref17.iconLeft;
return onlyIcon && "0" || (iconLeft || icon ? getSizeToken(_consts2.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts2.TOKENS.paddingButton));
}, function (_ref18) {
var theme = _ref18.theme;
return theme.orbit.fontWeightBold;
}, getSizeToken(_consts2.TOKENS.fontSizeButton), function (_ref19) {
var disabled = _ref19.disabled;
return disabled ? "default" : "pointer";
}, function (_ref20) {
var disabled = _ref20.disabled,
theme = _ref20.theme;
return disabled && theme.orbit.opacityButtonDisabled;
}, function (_ref21) {
var disabled = _ref21.disabled;
return disabled && "none";
}, function (_ref22) {
var bordered = _ref22.bordered,
theme = _ref22.theme,
type = _ref22.type;
return bordered && "inset 0 0 0 1px " + getTypeToken(_consts2.TOKENS.borderColorButton)({
theme: theme,
type: type
});
}, function (_ref23) {
var disabled = _ref23.disabled,
bordered = _ref23.bordered,
theme = _ref23.theme;
return !disabled && (bordered ? theme.orbit.backgroundButtonBorderedHover : getTypeToken(_consts2.TOKENS.backgroundButtonHover));
}, function (_ref24) {
var disabled = _ref24.disabled,
bordered = _ref24.bordered,
theme = _ref24.theme,
type = _ref24.type;
return !disabled && bordered && "inset 0 0 0 1px " + getTypeToken(_consts2.TOKENS.borderColorButtonHover)({ theme: theme, type: type });
}, function (_ref25) {
var disabled = _ref25.disabled,
bordered = _ref25.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedHover) : getTypeToken(_consts2.TOKENS.colorTextButtonHover));
}, IconContainer, function (_ref26) {
var disabled = _ref26.disabled,
bordered = _ref26.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedHover) : getTypeToken(_consts2.TOKENS.colorTextButtonHover));
}, function (_ref27) {
var disabled = _ref27.disabled,
theme = _ref27.theme;
return !disabled && "transform: scale(" + theme.orbit.modifierScaleButtonActive + ")";
}, function (_ref28) {
var disabled = _ref28.disabled,
bordered = _ref28.bordered,
theme = _ref28.theme;
return !disabled && (bordered ? theme.orbit.backgroundButtonBorderedActive : getTypeToken(_consts2.TOKENS.backgroundButtonActive));
}, function (_ref29) {
var disabled = _ref29.disabled,
bordered = _ref29.bordered,
theme = _ref29.theme,
type = _ref29.type;
return !disabled && bordered && "inset 0 0 0 1px " + getTypeToken(_consts2.TOKENS.borderColorButtonActive)({ theme: theme, type: type });
}, function (_ref30) {
var disabled = _ref30.disabled,
bordered = _ref30.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedActive) : getTypeToken(_consts2.TOKENS.colorTextButtonActive));
}, IconContainer, function (_ref31) {
var disabled = _ref31.disabled,
bordered = _ref31.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedActive) : getTypeToken(_consts2.TOKENS.colorTextButtonActive));
}, function (_ref32) {
var bordered = _ref32.bordered,
theme = _ref32.theme,
type = _ref32.type;
return bordered && "inset 0 0 0 1px " + getTypeToken(_consts2.TOKENS.borderColorButton)({ theme: theme, type: type }) + ",";
}, function (_ref33) {
var theme = _ref33.theme;
return theme.orbit.boxShadowButtonFocus;
}, _Loading.StyledSpinner, getSizeToken(_consts2.TOKENS.loadingWidth), getSizeToken(_consts2.TOKENS.loadingHeight));
exports.StyledButton = StyledButton;
StyledButton.defaultProps = {
theme: _defaultTokens2.default
};
var StyledButtonContent = _styledComponents2.default.div.withConfig({
displayName: "Button__StyledButtonContent"
})(["visibility:", ";height:100%;display:flex;justify-content:center;align-items:center;"], function (_ref34) {
var loading = _ref34.loading;
return loading && "hidden";
});
StyledButtonContent.defaultProps = {
theme: _defaultTokens2.default
};
var Button = function Button(props) {
var _props$component = props.component,
component = _props$component === undefined ? "button" : _props$component,
children = props.children,
bordered = props.bordered,
disabled = props.disabled,
href = props.href,
_props$size = props.size,
size = _props$size === undefined ? _consts2.SIZE_OPTIONS.NORMAL : _props$size,
icon = props.icon,
iconRight = props.iconRight,
external = props.external,
_props$type = props.type,
type = _props$type === undefined ? _consts2.TYPE_OPTIONS.PRIMARY : _props$type,
block = props.block,
_props$loading = props.loading,
loading = _props$loading === undefined ? false : _props$loading,
_props$width = props.width,
width = _props$width === undefined ? 0 : _props$width;
var iconLeft = props.iconLeft || icon;
var sizeIcon = size === _consts.ICON_SIZES.SMALL ? _consts.ICON_SIZES.SMALL : _consts.ICON_SIZES.MEDIUM;
var onlyIcon = iconLeft && !children;
var isDisabled = loading || disabled;
return React.createElement(
StyledButton,
_extends({
bordered: bordered,
block: block,
component: component,
disabled: isDisabled,
loading: loading,
onlyIcon: onlyIcon,
size: size,
sizeIcon: sizeIcon,
target: href && external ? "_blank" : undefined,
type: type,
width: width
}, props),
loading && React.createElement(_Loading2.default, { type: "buttonLoader" }),
React.createElement(
StyledButtonContent,
{ loading: loading },
iconLeft && React.createElement(
IconContainer,
{
bordered: bordered,
onlyIcon: onlyIcon,
size: size,
sizeIcon: sizeIcon,
type: type
},
iconLeft
),
children,
iconRight && React.createElement(
IconContainerRight,
{
bordered: bordered,
onlyIcon: onlyIcon,
size: size,
sizeIcon: sizeIcon,
type: type
},
iconRight
)
)
);
};
exports.default = Button;