@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
309 lines (285 loc) • 34.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StyledButton = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));
var _consts = require("../Icon/consts");
var _consts2 = require("./consts");
var _Loading = _interopRequireWildcard(require("../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)) { 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$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$backgroundBut4, _TOKENS$backgroundBut5, _TOKENS$backgroundBut6, _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), _defineProperty(_TOKENS$backgroundBut, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _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), _defineProperty(_TOKENS$backgroundBut2, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhiteHover), _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), _defineProperty(_TOKENS$backgroundBut3, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhiteActive), _TOKENS$backgroundBut3)), _defineProperty(_tokens2, _consts2.TOKENS.backgroundButtonBordered, (_TOKENS$backgroundBut4 = {}, _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.INFO, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.backgroundButtonBordered), _defineProperty(_TOKENS$backgroundBut4, _consts2.TYPE_OPTIONS.WHITE, "transparent"), _TOKENS$backgroundBut4)), _defineProperty(_tokens2, _consts2.TOKENS.backgroundButtonBorderedHover, (_TOKENS$backgroundBut5 = {}, _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.INFO, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.backgroundButtonBorderedHover), _defineProperty(_TOKENS$backgroundBut5, _consts2.TYPE_OPTIONS.WHITE, "rgba(255, 255, 255, 0.2)"), _TOKENS$backgroundBut5)), _defineProperty(_tokens2, _consts2.TOKENS.backgroundButtonBorderedActive, (_TOKENS$backgroundBut6 = {}, _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.PRIMARY, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.SECONDARY, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.INFO, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.WARNING, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.FACEBOOK, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.GOOGLE, theme.orbit.backgroundButtonBorderedActive), _defineProperty(_TOKENS$backgroundBut6, _consts2.TYPE_OPTIONS.WHITE, "rgba(255, 255, 255, 0.25)"), _TOKENS$backgroundBut6)), _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), _defineProperty(_TOKENS$colorTextButt, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteInkNormal), _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), _defineProperty(_TOKENS$colorTextButt2, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _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), _defineProperty(_TOKENS$colorTextButt3, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteInkNormalHover), _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), _defineProperty(_TOKENS$colorTextButt4, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _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), _defineProperty(_TOKENS$colorTextButt5, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteInkNormalActive), _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), _defineProperty(_TOKENS$colorTextButt6, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _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), _defineProperty(_TOKENS$borderColorBu, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _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), _defineProperty(_TOKENS$borderColorBu2, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _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), _defineProperty(_TOKENS$borderColorBu3, _consts2.TYPE_OPTIONS.WHITE, theme.orbit.paletteWhite), _TOKENS$borderColorBu3)), _tokens2);
return tokens[name][type];
};
};
var IconContainer = (0, _styledComponents.default)(function (_ref3) {
var className = _ref3.className,
children = _ref3.children;
return React.createElement("div", {
className: className
}, children);
}).withConfig({
displayName: "Button__IconContainer",
componentId: "sc-1brqp3f-0"
})(["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;
}, function (_ref8) {
var sizeIcon = _ref8.sizeIcon;
return (0, _Icon.getSize)(sizeIcon);
}, function (_ref9) {
var sizeIcon = _ref9.sizeIcon;
return (0, _Icon.getSize)(sizeIcon);
});
IconContainer.defaultProps = {
theme: _defaultTokens.default
};
var IconContainerRight = (0, _styledComponents.default)(IconContainer).withConfig({
displayName: "Button__IconContainerRight",
componentId: "sc-1brqp3f-1"
})(["margin-right:0;margin-left:", ";"], function (_ref10) {
var onlyIcon = _ref10.onlyIcon;
return onlyIcon ? "0" : getSizeToken(_consts2.TOKENS.marginRightIcon);
});
IconContainerRight.defaultProps = {
theme: _defaultTokens.default
};
var StyledButton = (0, _styledComponents.default)(function (_ref11) {
var theme = _ref11.theme,
component = _ref11.component,
circled = _ref11.circled,
external = _ref11.external,
type = _ref11.type,
icon = _ref11.icon,
iconLeft = _ref11.iconLeft,
iconRight = _ref11.iconRight,
sizeIcon = _ref11.sizeIcon,
width = _ref11.width,
bordered = _ref11.bordered,
loading = _ref11.loading,
onlyIcon = _ref11.onlyIcon,
block = _ref11.block,
style = _ref11.style,
dataTest = _ref11.dataTest,
submit = _ref11.submit,
props = _objectWithoutProperties(_ref11, ["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",
componentId: "sc-1brqp3f-2"
})(["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 (_ref12) {
var href = _ref12.href,
component = _ref12.component;
return href || component === "a" ? "inline-flex" : "flex";
}, function (_ref13) {
var block = _ref13.block,
width = _ref13.width,
onlyIcon = _ref13.onlyIcon;
return block ? "100%" : width && "".concat(width, "px") || onlyIcon && getSizeToken(_consts2.TOKENS.heightButton) || "auto";
}, function (_ref14) {
var block = _ref14.block;
return block ? "1 1 100%" : "0 0 auto";
}, getSizeToken(_consts2.TOKENS.heightButton), function (_ref15) {
var bordered = _ref15.bordered;
return bordered ? getTypeToken(_consts2.TOKENS.backgroundButtonBordered) : getTypeToken(_consts2.TOKENS.backgroundButton);
}, function (_ref16) {
var bordered = _ref16.bordered;
return bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBordered) : getTypeToken(_consts2.TOKENS.colorTextButton);
}, function (_ref17) {
var theme = _ref17.theme,
circled = _ref17.circled;
return circled ? getSizeToken(_consts2.TOKENS.heightButton) : theme.orbit.borderRadiusNormal;
}, function (_ref18) {
var onlyIcon = _ref18.onlyIcon,
iconRight = _ref18.iconRight;
return onlyIcon && "0" || (iconRight ? getSizeToken(_consts2.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts2.TOKENS.paddingButton));
}, function (_ref19) {
var onlyIcon = _ref19.onlyIcon,
icon = _ref19.icon,
iconLeft = _ref19.iconLeft;
return onlyIcon && "0" || (iconLeft || icon ? getSizeToken(_consts2.TOKENS.paddingButtonWithIcon) : getSizeToken(_consts2.TOKENS.paddingButton));
}, function (_ref20) {
var theme = _ref20.theme;
return theme.orbit.fontWeightBold;
}, getSizeToken(_consts2.TOKENS.fontSizeButton), function (_ref21) {
var disabled = _ref21.disabled;
return disabled ? "default" : "pointer";
}, function (_ref22) {
var disabled = _ref22.disabled,
theme = _ref22.theme;
return disabled && theme.orbit.opacityButtonDisabled;
}, function (_ref23) {
var disabled = _ref23.disabled;
return disabled && "none";
}, function (_ref24) {
var bordered = _ref24.bordered,
theme = _ref24.theme,
type = _ref24.type;
return bordered && "inset 0 0 0 1px ".concat(getTypeToken(_consts2.TOKENS.borderColorButton)({
theme: theme,
type: type
}));
}, function (_ref25) {
var disabled = _ref25.disabled,
bordered = _ref25.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.backgroundButtonBorderedHover) : getTypeToken(_consts2.TOKENS.backgroundButtonHover));
}, function (_ref26) {
var disabled = _ref26.disabled,
bordered = _ref26.bordered,
theme = _ref26.theme,
type = _ref26.type;
return !disabled && bordered && "inset 0 0 0 1px ".concat(getTypeToken(_consts2.TOKENS.borderColorButtonHover)({
theme: theme,
type: type
}));
}, function (_ref27) {
var disabled = _ref27.disabled,
bordered = _ref27.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedHover) : getTypeToken(_consts2.TOKENS.colorTextButtonHover));
}, IconContainer, function (_ref28) {
var disabled = _ref28.disabled,
bordered = _ref28.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedHover) : getTypeToken(_consts2.TOKENS.colorTextButtonHover));
}, function (_ref29) {
var disabled = _ref29.disabled,
theme = _ref29.theme;
return !disabled && "transform: scale(".concat(theme.orbit.modifierScaleButtonActive, ")");
}, function (_ref30) {
var disabled = _ref30.disabled,
bordered = _ref30.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.backgroundButtonBorderedActive) : getTypeToken(_consts2.TOKENS.backgroundButtonActive));
}, function (_ref31) {
var disabled = _ref31.disabled,
bordered = _ref31.bordered,
theme = _ref31.theme,
type = _ref31.type;
return !disabled && bordered && "inset 0 0 0 1px ".concat(getTypeToken(_consts2.TOKENS.borderColorButtonActive)({
theme: theme,
type: type
}));
}, function (_ref32) {
var disabled = _ref32.disabled,
bordered = _ref32.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedActive) : getTypeToken(_consts2.TOKENS.colorTextButtonActive));
}, IconContainer, function (_ref33) {
var disabled = _ref33.disabled,
bordered = _ref33.bordered;
return !disabled && (bordered ? getTypeToken(_consts2.TOKENS.colorTextButtonBorderedActive) : getTypeToken(_consts2.TOKENS.colorTextButtonActive));
}, function (_ref34) {
var bordered = _ref34.bordered,
theme = _ref34.theme,
type = _ref34.type;
return bordered && "inset 0 0 0 1px ".concat(getTypeToken(_consts2.TOKENS.borderColorButton)({
theme: theme,
type: type
}), ",");
}, function (_ref35) {
var theme = _ref35.theme;
return theme.orbit.boxShadowButtonFocus;
}, _Loading.StyledSpinner, getSizeToken(_consts2.TOKENS.loadingWidth), getSizeToken(_consts2.TOKENS.loadingHeight));
exports.StyledButton = StyledButton;
StyledButton.defaultProps = {
theme: _defaultTokens.default
};
var StyledButtonContent = _styledComponents.default.div.withConfig({
displayName: "Button__StyledButtonContent",
componentId: "sc-1brqp3f-3"
})(["visibility:", ";height:100%;display:flex;justify-content:center;align-items:center;"], function (_ref36) {
var loading = _ref36.loading;
return loading && "hidden";
});
StyledButtonContent.defaultProps = {
theme: _defaultTokens.default
};
var Button = function Button(props) {
var _props$component = props.component,
component = _props$component === void 0 ? "button" : _props$component,
children = props.children,
bordered = props.bordered,
disabled = props.disabled,
href = props.href,
_props$size = props.size,
size = _props$size === void 0 ? _consts2.SIZE_OPTIONS.NORMAL : _props$size,
icon = props.icon,
iconRight = props.iconRight,
external = props.external,
_props$type = props.type,
type = _props$type === void 0 ? _consts2.TYPE_OPTIONS.PRIMARY : _props$type,
block = props.block,
_props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
_props$width = props.width,
width = _props$width === void 0 ? 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(_Loading.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)));
};
var _default = Button;
exports.default = _default;