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

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

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

import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import { TYPES, SIZES, TOKENS } from "./consts";
import { ICON_SIZES } from "../Icon/consts";
import { getSize } from "../Icon";

const getSizeToken = name => ({
  theme,
  size
}) => {
  const tokens = {
    [TOKENS.heightButton]: {
      [SIZES.LARGE]: theme.orbit.heightButtonLarge,
      [SIZES.NORMAL]: theme.orbit.heightButtonNormal,
      [SIZES.SMALL]: theme.orbit.heightButtonSmall
    },
    [TOKENS.fontSizeButton]: {
      [SIZES.LARGE]: theme.orbit.fontSizeButtonLarge,
      [SIZES.NORMAL]: theme.orbit.fontSizeButtonNormal,
      [SIZES.SMALL]: theme.orbit.fontSizeButtonSmall
    },
    [TOKENS.paddingButton]: {
      [SIZES.LARGE]: theme.orbit.paddingButtonLarge,
      [SIZES.NORMAL]: theme.orbit.paddingButtonNormal,
      [SIZES.SMALL]: theme.orbit.paddingButtonSmall
    },
    [TOKENS.paddingButtonWithIcon]: {
      [SIZES.LARGE]: theme.orbit.paddingButtonLargeWithIcon,
      [SIZES.NORMAL]: theme.orbit.paddingButtonNormalWithIcon,
      [SIZES.SMALL]: theme.orbit.paddingButtonSmallWithIcon
    },
    [TOKENS.marginRightIcon]: {
      [SIZES.LARGE]: theme.orbit.marginButtonIconLarge,
      [SIZES.NORMAL]: theme.orbit.marginButtonIconNormal,
      [SIZES.SMALL]: theme.orbit.marginButtonIconSmall
    }
  };
  return tokens[name][size];
};

const getTypeToken = name => ({
  theme,
  type
}) => {
  const tokens = {
    [TOKENS.backgroundButton]: {
      [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimary,
      [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondary
    },
    [TOKENS.backgroundButtonHover]: {
      [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimaryHover,
      [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondaryHover
    },
    [TOKENS.backgroundButtonActive]: {
      [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimaryHover,
      [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondaryHover
    },
    [TOKENS.colorTextButton]: {
      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimary,
      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondary
    },
    [TOKENS.colorTextButtonHover]: {
      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryHover,
      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryHover
    },
    [TOKENS.colorTextButtonActive]: {
      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryActive,
      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryActive
    }
  };
  return tokens[name][type];
};

const IconContainer = styled((_ref) => {
  let {
    theme,
    sizeIcon,
    type,
    onlyIcon
  } = _ref,
      props = _objectWithoutProperties(_ref, ["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:", ";}"], ({
  onlyIcon
}) => onlyIcon ? "0" : getSizeToken(TOKENS.marginRightIcon), ({
  sizeIcon
}) => getSize(sizeIcon), ({
  sizeIcon
}) => getSize(sizeIcon));
IconContainer.defaultProps = {
  theme: defaultTokens
};
const IconContainerRight = styled(IconContainer).withConfig({
  displayName: "ButtonLink__IconContainerRight",
  componentId: "sc-14jv5cl-1"
})(["margin-right:0;margin-left:", ";"], ({
  onlyIcon
}) => onlyIcon ? "0" : getSizeToken(TOKENS.marginRightIcon));
IconContainerRight.defaultProps = {
  theme: defaultTokens
};
export const StyledButtonLink = styled((_ref2) => {
  let {
    onlyIcon,
    component,
    circled,
    external,
    block,
    type,
    icon,
    iconLeft,
    iconRight,
    sizeIcon,
    width,
    children,
    transparent,
    style,
    theme,
    dataTest,
    submit
  } = _ref2,
      props = _objectWithoutProperties(_ref2, ["onlyIcon", "component", "circled", "external", "block", "type", "icon", "iconLeft", "iconRight", "sizeIcon", "width", "children", "transparent", "style", "theme", "dataTest", "submit"]);

  const isButtonWithHref = component === "button" && props.href;
  const Component = isButtonWithHref ? "a" : component;
  const 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;}}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  block,
  width,
  onlyIcon
}) => block ? "100%" : width && `${width}px` || onlyIcon && getSizeToken(TOKENS.heightButton) || "auto", getSizeToken(TOKENS.heightButton), getTypeToken(TOKENS.backgroundButton), getTypeToken(TOKENS.colorTextButton), ({
  theme,
  circled
}) => circled ? getSizeToken(TOKENS.heightButton) : theme.orbit.borderRadiusNormal, ({
  onlyIcon,
  iconRight
}) => onlyIcon && "0" || (iconRight ? getSizeToken(TOKENS.paddingButtonWithIcon) : getSizeToken(TOKENS.paddingButton)), ({
  onlyIcon,
  icon,
  iconLeft
}) => onlyIcon && "0" || (iconLeft || icon ? getSizeToken(TOKENS.paddingButtonWithIcon) : getSizeToken(TOKENS.paddingButton)), ({
  theme
}) => theme.orbit.fontWeightBold, getSizeToken(TOKENS.fontSizeButton), ({
  disabled
}) => disabled ? "default" : "pointer", ({
  disabled,
  theme
}) => disabled ? theme.orbit.opacityButtonDisabled : "1", ({
  transparent
}) => !transparent && getTypeToken(TOKENS.backgroundButtonHover), getTypeToken(TOKENS.colorTextButtonHover), ({
  theme
}) => theme.orbit.modifierScaleButtonActive, ({
  transparent
}) => !transparent && getTypeToken(TOKENS.backgroundButtonActive), getTypeToken(TOKENS.colorTextButtonActive), ({
  transparent,
  theme
}) => !transparent && theme.orbit.boxShadowButtonFocus);
StyledButtonLink.defaultProps = {
  theme: defaultTokens
};

const ButtonLink = props => {
  const {
    external,
    children,
    component,
    href,
    size = SIZES.NORMAL,
    icon,
    iconRight,
    type = TYPES.PRIMARY,
    onClick
  } = props;
  const iconLeft = props.iconLeft || icon;
  const sizeIcon = size === ICON_SIZES.SMALL ? ICON_SIZES.SMALL : ICON_SIZES.MEDIUM;
  const 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
};
export default ButtonLink;