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

<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"

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

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

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"
})(["display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:", ";> *{width:", ";height:", ";}"], ({ onlyIcon }) => onlyIcon ? "0" : getSizeToken(TOKENS.marginRightIcon), getSize(), getSize());

IconContainer.defaultProps = {
  theme: defaultTokens
};

const IconContainerRight = styled(IconContainer).withConfig({
  displayName: "ButtonLink__IconContainerRight"
})(["margin-right:0;margin-left:", ";"], ({ onlyIcon }) => onlyIcon ? "0" : getSizeToken(TOKENS.marginRightIcon));

IconContainerRight.defaultProps = {
  theme: defaultTokens
};

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"
})(["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);

export { StyledButtonLink };
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;