@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 _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["theme", "type", "standAlone", "noUnderline", "asComponent"];
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
  };
  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
  };
  return tokens[type];
};

const getActiveColor = ({
  type
}) => ({
  theme
}) => {
  const tokens = {
    [TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarker,
    [TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarker,
    [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
  };
  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 StyledIconContainer = styled(({
  children,
  className
}) => /*#__PURE__*/React.createElement("span", {
  className: className
}, children)).withConfig({
  displayName: "TextLink__StyledIconContainer",
  componentId: "sc-c161ak-0"
})(["", ""], ({
  theme
}) => 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
};

const resolveUnderline = ({
  type,
  theme,
  noUnderline
}) => {
  if (noUnderline) return "none";
  return type === TYPE_OPTIONS.SECONDARY ? theme.orbit.textDecorationTextLinkSecondary : theme.orbit.textDecorationTextLinkPrimary;
};

export const getLinkStyle = ({
  theme
}) => 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);
export const StyledTextLink = styled(_ref => {
  let {
    theme,
    type,
    standAlone,
    noUnderline,
    asComponent: Component
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(Component, props, props.children);
}).withConfig({
  displayName: "TextLink__StyledTextLink",
  componentId: "sc-c161ak-1"
})(["", ""], ({
  theme,
  standAlone
}) => 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

StyledTextLink.defaultProps = {
  theme: defaultTheme
}; // 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 = 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: createRel({
      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));
};

export default TextLink;