@kiwicom/orbit-components/lib/Button/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.StyledButton = void 0;

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

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

var _js = require("@kiwicom/js");

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

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

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

var _Loading = _interopRequireWildcard(require("../Loading"));

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

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

var _getSizeToken = _interopRequireDefault(require("./helpers/getSizeToken"));

var _getTypeToken = _interopRequireDefault(require("./helpers/getTypeToken"));

var _getButtonSpacing = _interopRequireDefault(require("./helpers/getButtonSpacing"));

var _getIconSpacing = _interopRequireDefault(require("./helpers/getIconSpacing"));

var _getButtonBoxShadow = _interopRequireDefault(require("./helpers/getButtonBoxShadow"));

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; }

// media query only for IE 10+, not Edge
var onlyIE = function onlyIE(style) {
  var breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "all";
  return (0, _styledComponents.css)(["@media ", " and (-ms-high-contrast:none),(-ms-high-contrast:active){", ";}"], breakpoint, style);
};

var IconContainer = (0, _styledComponents.default)(function (_ref) {
  var className = _ref.className,
      children = _ref.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:", ";color:", ";transition:background ", " ease-in-out,box-shadow ", " ease-in-out;> *{width:", ";height:", ";}"], (0, _getIconSpacing.default)(), function (_ref2) {
  var bordered = _ref2.bordered;
  return bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonBordered) : (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButton);
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.durationFast;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.durationFast;
}, 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: _defaultTheme.default
};
var StyledButton = (0, _styledComponents.default)(function (_ref7) {
  var theme = _ref7.theme,
      component = _ref7.component,
      circled = _ref7.circled,
      external = _ref7.external,
      type = _ref7.type,
      icon = _ref7.icon,
      iconLeft = _ref7.iconLeft,
      iconRight = _ref7.iconRight,
      sizeIcon = _ref7.sizeIcon,
      width = _ref7.width,
      bordered = _ref7.bordered,
      loading = _ref7.loading,
      onlyIcon = _ref7.onlyIcon,
      block = _ref7.block,
      style = _ref7.style,
      dataTest = _ref7.dataTest,
      submit = _ref7.submit,
      buttonRef = _ref7.buttonRef,
      ariaControls = _ref7.ariaControls,
      ariaExpanded = _ref7.ariaExpanded,
      spaceAfter = _ref7.spaceAfter,
      title = _ref7.title,
      props = _objectWithoutProperties(_ref7, ["theme", "component", "circled", "external", "type", "icon", "iconLeft", "iconRight", "sizeIcon", "width", "bordered", "loading", "onlyIcon", "block", "style", "dataTest", "submit", "buttonRef", "ariaControls", "ariaExpanded", "spaceAfter", "title"]);

  var isButtonWithHref = component === "button" && props.href;
  var Component = isButtonWithHref ? "a" : component;
  var buttonType = submit ? "submit" : "button";
  return React.createElement(Component, _extends({
    "data-test": dataTest,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-label": title,
    type: !isButtonWithHref ? buttonType : undefined
  }, props, {
    ref: buttonRef
  }), props.children);
}).withConfig({
  displayName: "Button__StyledButton",
  componentId: "sc-1brqp3f-1"
})(["position:relative;display:", ";justify-content:center;align-items:center;box-sizing:border-box;appearance:none;text-decoration:none;width:", ";flex:", ";max-width:100%;height:", ";background:", ";color:", " !important;border:0;border-radius:", ";padding:", ";font-family:", ";font-weight:", "!important;font-size:", ";cursor:", ";transition:all 0.15s ease-in-out !important;outline:0;opacity:", ";margin-bottom:", ";", ";&:hover{background:", ";color:", "!important;", ";", "{color:", ";}}&:active{", ";}&:focus{", ";}", "{width:", ";height:", ";}"], function (_ref8) {
  var href = _ref8.href,
      component = _ref8.component;
  return href || component === "a" ? "inline-flex" : "flex";
}, function (_ref9) {
  var block = _ref9.block,
      width = _ref9.width,
      onlyIcon = _ref9.onlyIcon;
  return block ? "100%" : width && "".concat(width, "px") || onlyIcon && (0, _getSizeToken.default)(_consts2.TOKENS.heightButton) || "auto";
}, function (_ref10) {
  var block = _ref10.block;
  return block ? "1 1 auto" : "0 0 auto";
}, (0, _getSizeToken.default)(_consts2.TOKENS.heightButton), function (_ref11) {
  var bordered = _ref11.bordered;
  return bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.backgroundButtonBordered) : (0, _getTypeToken.default)(_consts2.TOKENS.backgroundButton);
}, function (_ref12) {
  var bordered = _ref12.bordered;
  return bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonBordered) : (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButton);
}, function (_ref13) {
  var theme = _ref13.theme,
      circled = _ref13.circled;
  return circled ? (0, _getSizeToken.default)(_consts2.TOKENS.heightButton) : theme.orbit.borderRadiusNormal;
}, (0, _getButtonSpacing.default)(), function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.fontFamily;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.fontWeightBold;
}, (0, _getSizeToken.default)(_consts2.TOKENS.fontSizeButton), function (_ref16) {
  var disabled = _ref16.disabled;
  return disabled ? "not-allowed" : "pointer";
}, function (_ref17) {
  var disabled = _ref17.disabled,
      theme = _ref17.theme;
  return disabled && theme.orbit.opacityButtonDisabled;
}, _getSpacingToken.default, (0, _getButtonBoxShadow.default)(_consts2.BUTTON_STATES.DEFAULT), function (_ref18) {
  var disabled = _ref18.disabled,
      bordered = _ref18.bordered;
  return !disabled && (bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.backgroundButtonBorderedHover) : (0, _getTypeToken.default)(_consts2.TOKENS.backgroundButtonHover));
}, function (_ref19) {
  var disabled = _ref19.disabled,
      bordered = _ref19.bordered;
  return !disabled && (bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonBorderedHover) : (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonHover));
}, (0, _getButtonBoxShadow.default)(_consts2.BUTTON_STATES.HOVER), IconContainer, function (_ref20) {
  var disabled = _ref20.disabled,
      bordered = _ref20.bordered;
  return !disabled && (bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonBorderedHover) : (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonHover));
}, function (_ref21) {
  var disabled = _ref21.disabled,
      bordered = _ref21.bordered;
  return !disabled && (0, _styledComponents.css)(["background:", ";color:", "!important;", ";& ", "{color:", ";}"], bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.backgroundButtonBorderedActive) : (0, _getTypeToken.default)(_consts2.TOKENS.backgroundButtonActive), bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonBorderedActive) : (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonActive), (0, _getButtonBoxShadow.default)(_consts2.BUTTON_STATES.ACTIVE), IconContainer, bordered ? (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonBorderedActive) : (0, _getTypeToken.default)(_consts2.TOKENS.colorTextButtonActive));
}, (0, _getButtonBoxShadow.default)(_consts2.BUTTON_STATES.FOCUS), _Loading.StyledSpinner, (0, _getSizeToken.default)(_consts2.TOKENS.loadingWidth), (0, _getSizeToken.default)(_consts2.TOKENS.loadingHeight));
exports.StyledButton = StyledButton;
StyledButton.defaultProps = {
  theme: _defaultTheme.default
};
var StyledButtonContent = (0, _styledComponents.default)(function (_ref22) {
  var theme = _ref22.theme,
      loading = _ref22.loading,
      props = _objectWithoutProperties(_ref22, ["theme", "loading"]);

  return React.createElement("div", props);
}).withConfig({
  displayName: "Button__StyledButtonContent",
  componentId: "sc-1brqp3f-2"
})(["visibility:", ";height:100%;display:flex;flex-basis:100%;justify-content:center;align-items:center;", ";"], function (_ref23) {
  var loading = _ref23.loading;
  return loading && "hidden";
}, onlyIE((0, _styledComponents.css)(["min-width:100%;max-width:1px;"])));
StyledButtonContent.defaultProps = {
  theme: _defaultTheme.default
};

var StyledButtonContentChildren = _styledComponents.default.div.withConfig({
  displayName: "Button__StyledButtonContentChildren",
  componentId: "sc-1brqp3f-3"
})(["display:inline-block;"]); // $FlowExpected


var Button = React.forwardRef(function (props, ref) {
  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,
      role = props.role,
      onClick = props.onClick,
      circled = props.circled,
      submit = props.submit,
      tabIndex = props.tabIndex,
      ariaExpanded = props.ariaExpanded,
      className = props.className,
      ariaControls = props.ariaControls,
      spaceAfter = props.spaceAfter,
      dataTest = props.dataTest,
      title = props.title;
  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;
  (0, _js.warning)(!(!children && !title), "Warning: children or title property is missing on Button. Use title property to add aria-label to be accessible for screen readers. More information https://orbit.kiwi/components/button/api/#accessibility");
  return React.createElement(StyledButton, {
    onClick: onClick,
    iconLeft: iconLeft,
    iconRight: iconRight,
    bordered: bordered,
    block: block,
    component: component,
    disabled: isDisabled,
    loading: loading,
    onlyIcon: onlyIcon,
    size: size,
    sizeIcon: sizeIcon,
    href: !disabled ? href : null,
    target: !disabled && href && external ? "_blank" : undefined,
    rel: !disabled && href && external ? "noopener noreferrer" : undefined,
    type: type,
    width: width,
    className: className,
    buttonRef: ref,
    role: role,
    circled: circled,
    submit: submit,
    tabIndex: tabIndex,
    ariaExpanded: ariaExpanded,
    ariaControls: ariaControls,
    dataTest: dataTest,
    spaceAfter: spaceAfter,
    title: title
  }, 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 && React.createElement(StyledButtonContentChildren, null, children), iconRight && React.createElement(IconContainer, {
    bordered: bordered,
    onlyIcon: onlyIcon,
    size: size,
    sizeIcon: sizeIcon,
    type: type,
    right: true
  }, iconRight)));
});
Button.displayName = "Button";
var _default = Button;
exports.default = _default;