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

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

"use strict";

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

// Common styles for TextLink and "a" in Text
const getLinkStyle = ({
  theme,
  $type
}) => (0, _styledComponents.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 === _consts.TYPE_OPTIONS.SECONDARY && `!important`, resolveUnderline, $type === _consts.TYPE_OPTIONS.SECONDARY && `!important`, theme.orbit.fontWeightLinks, $type === _consts.TYPE_OPTIONS.SECONDARY && `!important`, getHoverColor, getActiveColor);
exports.getLinkStyle = getLinkStyle;
const StyledTextLink = (0, _styledComponents.default)(({
  asComponent: Component,
  theme,
  ...props
}) => /*#__PURE__*/React.createElement(Component, props, props.children)).withConfig({
  displayName: "TextLink__StyledTextLink",
  componentId: "sc-chh1ci-1"
})(["", ""], ({
  theme,
  $standAlone,
  size
}) => (0, _styledComponents.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));
exports.StyledTextLink = StyledTextLink;
StyledTextLink.defaultProps = {
  theme: _defaultTheme.default
};

// 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 = _consts.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: (0, _createRel.default)({
      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));
};
var _default = TextLink;
exports.default = _default;