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

// @flow
import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import TYPE_OPTIONS from "./consts";

import type { Props } from "./index";

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 }) => (
  <span className={className}>{children}</span>
))`
  display: block;
  color: ${getColor};
  transition: color ${({ theme }) => theme.orbit.durationFast} ease-in-out;

  & svg {
    width: ${({ theme }) => theme.orbit.widthIconSmall};
    height: ${({ theme }) => theme.orbit.heightIconSmall};
  }
`;

IconContainer.defaultProps = {
  theme: defaultTokens,
};

export const StyledTextLink = styled(({ theme, type, ...props }) => (
  <a {...props}>{props.children}</a>
))`
  color: ${getColor};
  font-weight: ${({ theme }) => theme.orbit.fontWeightLinks};
  text-decoration: ${({ theme, type }) =>
    type === [TYPE_OPTIONS.SECONDARY]
      ? theme.orbit.textDecorationTextLinkSecondary
      : theme.orbit.textDecorationTextLinkPrimary};
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color ${({ theme }) => theme.orbit.durationFast} ease-in-out;

  &:hover {
    text-decoration: ${({ theme, type }) =>
      type === [TYPE_OPTIONS.SECONDARY]
        ? theme.orbit.textDecorationTextLinkSecondaryHover
        : theme.orbit.textDecorationTextLinkPrimaryHover};
    color: ${({ theme, type }) =>
      type === [TYPE_OPTIONS.SECONDARY]
        ? theme.orbit.colorTextLinkSecondaryHover
        : theme.orbit.colorTextLinkPrimaryHover};

    ${IconContainer} {
      color: ${({ theme, type }) =>
        type === [TYPE_OPTIONS.SECONDARY]
          ? theme.orbit.colorTextLinkSecondaryHover
          : theme.orbit.colorTextLinkPrimaryHover};
    }
  }
  &:focus {
    outline-width: 3px;
  }
`;

StyledTextLink.defaultProps = {
  theme: defaultTokens,
};

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