@kiwicom/orbit-components/es/TextLink/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"

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 TYPE_OPTIONS from "./consts";

const getColor = ({ theme, type }) => {
  const tokens = {
    [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextLinkPrimary,
    [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextLinkSecondary
  };

  return tokens[type];
};

const IconContainer = styled(({ children, className }) => React.createElement(
  "span",
  { className: className },
  children
)).withConfig({
  displayName: "TextLink__IconContainer"
})(["display:block;color:", ";transition:color ", " ease-in-out;& svg{width:", ";height:", ";}"], getColor, ({ theme }) => theme.orbit.durationFast, ({ theme }) => theme.orbit.widthIconSmall, ({ theme }) => theme.orbit.heightIconSmall);

IconContainer.defaultProps = {
  theme: defaultTokens
};

const StyledTextLink = styled((_ref) => {
  let { theme, type } = _ref,
      props = _objectWithoutProperties(_ref, ["theme", "type"]);

  return React.createElement(
    "a",
    props,
    props.children
  );
}).withConfig({
  displayName: "TextLink__StyledTextLink"
})(["color:", ";font-weight:", ";text-decoration:", ";cursor:pointer;display:inline-flex;align-items:center;transition:color ", " ease-in-out;&:hover{text-decoration:", ";color:", ";", "{color:", ";}}&:focus{outline-width:3px;}"], getColor, ({ theme }) => theme.orbit.fontWeightLinks, ({ theme, type }) => type === [TYPE_OPTIONS.SECONDARY] ? theme.orbit.textDecorationTextLinkSecondary : theme.orbit.textDecorationTextLinkPrimary, ({ theme }) => theme.orbit.durationFast, ({ theme, type }) => type === [TYPE_OPTIONS.SECONDARY] ? theme.orbit.textDecorationTextLinkSecondaryHover : theme.orbit.textDecorationTextLinkPrimaryHover, ({ theme, type }) => type === [TYPE_OPTIONS.SECONDARY] ? theme.orbit.colorTextLinkSecondaryHover : theme.orbit.colorTextLinkPrimaryHover, IconContainer, ({ theme, type }) => type === [TYPE_OPTIONS.SECONDARY] ? theme.orbit.colorTextLinkSecondaryHover : theme.orbit.colorTextLinkPrimaryHover);

export { StyledTextLink };
StyledTextLink.defaultProps = {
  theme: defaultTokens
};

const TextLink = ({
  type = TYPE_OPTIONS.PRIMARY,
  children,
  href,
  external = false,
  rel,
  icon,
  onClick,
  dataTest
}) => React.createElement(
  StyledTextLink,
  {
    type: type,
    href: href,
    target: external ? "_blank" : undefined,
    rel: rel,
    onClick: onClick,
    "data-test": dataTest
  },
  children,
  icon && React.createElement(
    IconContainer,
    { type: type },
    icon
  )
);
export default TextLink;