@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, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import { TYPE_OPTIONS, SIZE_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 getSizeToken = () => ({
  theme,
  size
}) => {
  const sizeTokens = {
    [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
    [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall
  };
  return size && sizeTokens[size];
};

const IconContainer = styled(({
  children,
  className
}) => React.createElement("span", {
  className: className
}, children)).withConfig({
  displayName: "TextLink__IconContainer",
  componentId: "sc-1bvlje4-0"
})(["display:flex;align-items:center;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: defaultTheme
};
export const getLinkStyle = ({
  theme,
  type
}) => css(["&,&:link,&:visited{color:", ";text-decoration:", ";font-weight:", ";}&:hover,&:active{text-decoration:", ";color:", ";"], getColor({
  theme,
  type
}), type === TYPE_OPTIONS.SECONDARY ? theme.orbit.textDecorationTextLinkSecondary : theme.orbit.textDecorationTextLinkPrimary, theme.orbit.fontWeightLinks, type === TYPE_OPTIONS.SECONDARY ? theme.orbit.textDecorationTextLinkSecondaryHover : theme.orbit.textDecorationTextLinkPrimaryHover, type === TYPE_OPTIONS.SECONDARY ? theme.orbit.colorTextLinkSecondaryHover : theme.orbit.colorTextLinkPrimaryHover);
export const StyledTextLink = styled((_ref) => {
  let {
    theme,
    type,
    component: Component
  } = _ref,
      props = _objectWithoutProperties(_ref, ["theme", "type", "component"]);

  return React.createElement(Component, props, props.children);
}).withConfig({
  displayName: "TextLink__StyledTextLink",
  componentId: "sc-1bvlje4-1"
})(["font-family:", ";font-weight:", ";font-size:", ";cursor:pointer;display:inline-flex;align-items:center;transition:color ", " ease-in-out;", ";", "{color:", ";}}&:focus{outline-width:3px;}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontWeightLinks, getSizeToken, ({
  theme
}) => theme.orbit.durationFast, getLinkStyle, IconContainer, ({
  theme,
  type
}) => type === TYPE_OPTIONS.SECONDARY ? theme.orbit.colorTextLinkSecondaryHover : theme.orbit.colorTextLinkPrimaryHover);
StyledTextLink.defaultProps = {
  theme: defaultTheme
}; // eslint-disable-next-line jsx-a11y/anchor-has-content

const DefaultComponent = props => React.createElement("a", props);

const TextLink = ({
  type = TYPE_OPTIONS.PRIMARY,
  size,
  children,
  href,
  external = false,
  rel,
  icon,
  onClick,
  dataTest,
  tabIndex,
  component = DefaultComponent
}) => {
  const relValues = rel ? rel.split(" ") : []; // add noopener and noreferrer whenever external

  if (relValues && external) {
    if (!relValues.includes("noopener")) {
      relValues.push("noopener");
    }

    if (!relValues.includes("noreferrer")) {
      relValues.push("noreferrer");
    }
  }

  return React.createElement(StyledTextLink, {
    type: type,
    size: size,
    href: href,
    target: external ? "_blank" : undefined,
    rel: relValues && relValues.join(" "),
    onClick: onClick,
    "data-test": dataTest,
    tabIndex: tabIndex || (!href ? "0" : undefined),
    role: !href ? "button" : undefined,
    component: component
  }, children, icon && React.createElement(IconContainer, {
    type: type
  }, icon));
};

export default TextLink;