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

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

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 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",
  componentId: "sc-1bvlje4-0"
})(["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
};
export const StyledTextLink = styled((_ref) => {
  let {
    theme,
    type
  } = _ref,
      props = _objectWithoutProperties(_ref, ["theme", "type"]);

  return React.createElement("a", props, props.children);
}).withConfig({
  displayName: "TextLink__StyledTextLink",
  componentId: "sc-1bvlje4-1"
})(["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);
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;