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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StyledTextLink = exports.getLinkStyle = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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 _excluded = ["theme", "type", "standAlone", "noUnderline", "asComponent"];

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
  };
  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
  };
  return tokens[type];
};

const getActiveColor = ({
  type
}) => ({
  theme
}) => {
  const tokens = {
    [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarker,
    [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarker,
    [_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
  };
  return tokens[type];
};

const getSizeToken = () => ({
  theme,
  size
}) => {
  const sizeTokens = {
    [_consts.SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
    [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
    [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall
  };
  return size && sizeTokens[size];
};

const StyledIconContainer = (0, _styledComponents.default)(({
  children,
  className
}) => /*#__PURE__*/React.createElement("span", {
  className: className
}, children)).withConfig({
  displayName: "TextLink__StyledIconContainer",
  componentId: "sc-c161ak-0"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["display:flex;align-items:center;svg{width:", ";height:", ";}"], theme.orbit.widthIconSmall, theme.orbit.heightIconSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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;
};

const getLinkStyle = ({
  theme
}) => (0, _styledComponents.css)(["&,&:link,&:visited{color:", ";text-decoration:", ";font-weight:", ";}&:hover{outline:none;text-decoration:none;color:", ";}&:active,&:focus{outline:none;text-decoration:none;color:", ";}"], getColor, resolveUnderline, theme.orbit.fontWeightLinks, getHoverColor, getActiveColor);

exports.getLinkStyle = getLinkStyle;
const StyledTextLink = (0, _styledComponents.default)((_ref) => {
  let {
    theme,
    type,
    standAlone,
    noUnderline,
    asComponent: Component
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/React.createElement(Component, props, props.children);
}).withConfig({
  displayName: "TextLink__StyledTextLink",
  componentId: "sc-c161ak-1"
})(["", ""], ({
  theme,
  standAlone
}) => (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.orbit.durationFast, standAlone && theme.orbit.heightButtonNormal, getLinkStyle)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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
}) => {
  if (!children) return null;
  return /*#__PURE__*/React.createElement(StyledIconContainer, null, children);
};

const TextLink = ({
  ariaCurrent,
  type = _consts.TYPE_OPTIONS.PRIMARY,
  size,
  children,
  href,
  external = false,
  rel,
  iconLeft,
  iconRight,
  onClick,
  dataTest,
  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,
    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,
    noUnderline: noUnderline,
    standAlone: standAlone
  }, /*#__PURE__*/React.createElement(IconContainer, null, iconLeft), children, /*#__PURE__*/React.createElement(IconContainer, null, iconRight));
};

var _default = TextLink;
exports.default = _default;