@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 = _interopRequireWildcard(require("styled-components"));

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

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

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

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

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

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

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

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

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

var _getButtonLinkSpacing = _interopRequireDefault(require("./helpers/getButtonLinkSpacing"));

var _getButtonLinkBoxShadow = _interopRequireDefault(require("./helpers/getButtonLinkBoxShadow"));

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: "ButtonLink__IconContainer",
  componentId: "sc-14jv5cl-0"
})(["display:flex;flex-direction:row;align-items:center;justify-content:center;margin:", ";> *{width:", ";height:", ";}"], (0, _getIconSpacing.default)(), function (_ref2) {
  var sizeIcon = _ref2.sizeIcon;
  return (0, _Icon.getSize)(sizeIcon);
}, function (_ref3) {
  var sizeIcon = _ref3.sizeIcon;
  return (0, _Icon.getSize)(sizeIcon);
});
IconContainer.defaultProps = {
  theme: _defaultTheme.default
};
var StyledButtonLink = (0, _styledComponents.default)(function (_ref4) {
  var onlyIcon = _ref4.onlyIcon,
      component = _ref4.component,
      circled = _ref4.circled,
      external = _ref4.external,
      block = _ref4.block,
      type = _ref4.type,
      icon = _ref4.icon,
      iconLeft = _ref4.iconLeft,
      iconRight = _ref4.iconRight,
      sizeIcon = _ref4.sizeIcon,
      width = _ref4.width,
      children = _ref4.children,
      transparent = _ref4.transparent,
      style = _ref4.style,
      theme = _ref4.theme,
      dataTest = _ref4.dataTest,
      submit = _ref4.submit,
      buttonRef = _ref4.buttonRef,
      ariaControls = _ref4.ariaControls,
      ariaExpanded = _ref4.ariaExpanded,
      spaceAfter = _ref4.spaceAfter,
      title = _ref4.title,
      props = _objectWithoutProperties(_ref4, ["onlyIcon", "component", "circled", "external", "block", "type", "icon", "iconLeft", "iconRight", "sizeIcon", "width", "children", "transparent", "style", "theme", "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,
    type: !isButtonWithHref ? buttonType : undefined
  }, props, {
    ref: buttonRef,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-label": title
  }), children);
}).withConfig({
  displayName: "ButtonLink__StyledButtonLink",
  componentId: "sc-14jv5cl-1"
})(["font-family:", ";box-sizing:border-box;appearance:none;display:inline-flex;justify-content:center;align-items:center;width:", ";flex:", ";max-width:100%;height:", ";background:", ";color:", "!important;border:0;border-radius:", ";padding:", ";font-weight:", "!important;font-size:", ";cursor:", ";opacity:", ";transition:all 0.15s ease-in-out !important;outline:0;text-decoration:none;margin-bottom:", ";&:hover{", ";}&:active{", ";}&:focus{", ";}"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.fontFamily;
}, function (_ref6) {
  var block = _ref6.block,
      width = _ref6.width,
      onlyIcon = _ref6.onlyIcon;
  return block ? "100%" : width && "".concat(width, "px") || onlyIcon && (0, _getSizeToken.default)(_consts.TOKENS.heightButton) || "auto";
}, function (_ref7) {
  var block = _ref7.block;
  return block ? "1 1 auto" : "0 0 auto";
}, (0, _getSizeToken.default)(_consts.TOKENS.heightButton), (0, _getTypeToken.default)(_consts.TOKENS.backgroundButton), (0, _getTypeToken.default)(_consts.TOKENS.colorTextButton), function (_ref8) {
  var theme = _ref8.theme,
      circled = _ref8.circled;
  return circled ? (0, _getSizeToken.default)(_consts.TOKENS.heightButton) : theme.orbit.borderRadiusNormal;
}, (0, _getButtonLinkSpacing.default)(), function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.fontWeightBold;
}, (0, _getSizeToken.default)(_consts.TOKENS.fontSizeButton), function (_ref10) {
  var disabled = _ref10.disabled;
  return disabled ? "not-allowed" : "pointer";
}, function (_ref11) {
  var disabled = _ref11.disabled,
      theme = _ref11.theme;
  return disabled ? theme.orbit.opacityButtonDisabled : "1";
}, _getSpacingToken.default, function (_ref12) {
  var transparent = _ref12.transparent,
      disabled = _ref12.disabled;
  return !disabled && (0, _styledComponents.css)(["background:", ";color:", "!important;"], !transparent && (0, _getTypeToken.default)(_consts.TOKENS.backgroundButtonHover), (0, _getTypeToken.default)(_consts.TOKENS.colorTextButtonHover));
}, function (_ref13) {
  var transparent = _ref13.transparent,
      disabled = _ref13.disabled;
  return !disabled && (0, _styledComponents.css)(["background:", ";color:", "!important;", ";"], !transparent && (0, _getTypeToken.default)(_consts.TOKENS.backgroundButtonActive), (0, _getTypeToken.default)(_consts.TOKENS.colorTextButtonActive), (0, _getButtonLinkBoxShadow.default)(_consts.BUTTON_STATES.ACTIVE));
}, (0, _getButtonLinkBoxShadow.default)(_consts.BUTTON_STATES.FOCUS));
exports.StyledButtonLink = StyledButtonLink;
StyledButtonLink.defaultProps = {
  theme: _defaultTheme.default
};

var StyledButtonLinkContent = _styledComponents.default.div.withConfig({
  displayName: "ButtonLink__StyledButtonLinkContent",
  componentId: "sc-14jv5cl-2"
})(["display:flex;flex-basis:100%;justify-content:center;align-items:center;", ";"], onlyIE((0, _styledComponents.css)(["min-width:100%;max-width:1px;"])));

var StyledButtonLinkContentChildren = _styledComponents.default.div.withConfig({
  displayName: "ButtonLink__StyledButtonLinkContentChildren",
  componentId: "sc-14jv5cl-3"
})(["display:inline-block;"]); // $FlowExpected


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