@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.

import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
import createRel from "../primitives/ButtonPrimitive/common/createRel";
const getColor = ({
  $type
}) => ({
  theme
}) => {
  const tokens = {
    [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextLinkPrimary,
    [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextLinkSecondary,
    [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDark,
    [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDark,
    [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDark,
    [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDark,
    [TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite
  };
  if (!$type) return null;
  return tokens[$type];
};
const getHoverColor = ({
  $type
}) => ({
  theme
}) => {
  const tokens = {
    [TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarkHover,
    [TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarkHover,
    [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDarkHover,
    [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDarkHover,
    [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDarkHover,
    [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDarkHover,
    [TYPE_OPTIONS.WHITE]: theme.orbit.paletteProductLight
  };
  if (!$type) return null;
  return tokens[$type];
};
const getActiveColor = ({
  $type
}) => ({
  theme
}) => {
  const tokens = {
    [TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarkActive,
    [TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarkActive,
    [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDarker,
    [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDarker,
    [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDarker,
    [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDarker,
    [TYPE_OPTIONS.WHITE]: theme.orbit.paletteProductLight
  };
  if (!$type) return null;
  return tokens[$type];
};
const getSizeToken = ({
  theme,
  size
}) => {
  const sizeTokens = {
    [SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.fontSizeTextLarge,
    [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
    [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall
  };
  return sizeTokens[size];
};
const getIconSize = ({
  theme,
  size
}) => {
  if (size === SIZE_OPTIONS.LARGE) return {
    width: theme.orbit.widthIconLarge,
    height: theme.orbit.heightIconLarge
  };
  if (size === SIZE_OPTIONS.SMALL) return {
    width: theme.orbit.widthIconSmall,
    height: theme.orbit.heightIconSmall
  };
  return {
    width: theme.orbit.widthIconMedium,
    height: theme.orbit.heightIconMedium
  };
};
const StyledIconContainer = styled.span.withConfig({
  displayName: "TextLink__StyledIconContainer",
  componentId: "sc-chh1ci-0"
})(["", ""], ({
  theme,
  size
}) => css(["display:flex;align-items:center;svg{", ";}"], getIconSize({
  theme,
  size
})));
StyledIconContainer.defaultProps = {
  theme: defaultTheme
};
const resolveUnderline = ({
  $type,
  theme,
  $noUnderline
}) => {
  if ($noUnderline) return "none";
  return $type === TYPE_OPTIONS.SECONDARY ? theme.orbit.textDecorationTextLinkSecondary : theme.orbit.textDecorationTextLinkPrimary;
};

// Common styles for TextLink and "a" in Text
export const getLinkStyle = ({
  theme,
  $type
}) => css(["&,&:link,&:visited{&:not(:hover){color:", " ", ";text-decoration:", " ", ";font-weight:", " ", ";}}&:hover{outline:none;text-decoration:none;color:", ";}&:active{outline:none;text-decoration:none;color:", ";}"], getColor, $type === TYPE_OPTIONS.SECONDARY && `!important`, resolveUnderline, $type === TYPE_OPTIONS.SECONDARY && `!important`, theme.orbit.fontWeightLinks, $type === TYPE_OPTIONS.SECONDARY && `!important`, getHoverColor, getActiveColor);
export const StyledTextLink = styled(({
  asComponent: Component,
  theme,
  ...props
}) => /*#__PURE__*/React.createElement(Component, props, props.children)).withConfig({
  displayName: "TextLink__StyledTextLink",
  componentId: "sc-chh1ci-1"
})(["", ""], ({
  theme,
  $standAlone,
  size
}) => css(["font-family:", ";font-weight:", ";font-size:", ";cursor:pointer;display:inline-flex;align-items:center;transition:color ", " ease-in-out;height:", ";", ";"], theme.orbit.fontFamily, theme.orbit.fontWeightLinks, getSizeToken({
  theme,
  size
}), theme.orbit.durationFast, $standAlone && theme.orbit.heightButtonNormal, getLinkStyle));
StyledTextLink.defaultProps = {
  theme: defaultTheme
};

// eslint-disable-next-line jsx-a11y/anchor-has-content
const DefaultComponent = props => /*#__PURE__*/React.createElement("a", props);
const IconContainer = ({
  children,
  size
}) => {
  if (!children) return null;
  return /*#__PURE__*/React.createElement(StyledIconContainer, {
    size: size
  }, children);
};
const TextLink = ({
  ariaCurrent,
  type = TYPE_OPTIONS.PRIMARY,
  size,
  children,
  href,
  external = false,
  rel,
  iconLeft,
  iconRight,
  onClick,
  dataTest,
  download,
  id,
  tabIndex,
  asComponent = DefaultComponent,
  stopPropagation = false,
  title,
  standAlone,
  noUnderline
}) => {
  const onClickHandler = ev => {
    if (stopPropagation) {
      ev.stopPropagation();
    }
    if (onClick) onClick(ev);
  };
  return /*#__PURE__*/React.createElement(StyledTextLink, {
    "aria-current": ariaCurrent,
    id: id,
    $type: type,
    size: size,
    href: href,
    target: external ? "_blank" : undefined,
    rel: createRel({
      href,
      external,
      rel
    }),
    onClick: onClickHandler,
    "data-test": dataTest,
    tabIndex: tabIndex || (!href ? 0 : undefined),
    role: !href ? "button" : undefined,
    asComponent: asComponent,
    title: title,
    download: download,
    $noUnderline: noUnderline,
    $standAlone: standAlone
  }, /*#__PURE__*/React.createElement(IconContainer, {
    size: size
  }, iconLeft), children, /*#__PURE__*/React.createElement(IconContainer, {
    size: size
  }, iconRight));
};
export default TextLink;