@grafana/ui/dist/cjs/components/Link/TextLink.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var data = require('@grafana/data');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
var utils = require('../Text/utils.cjs');
var Link = require('./Link.cjs');

"use strict";
const svgSizes = {
  h1: "xl",
  h2: "xl",
  h3: "lg",
  h4: "lg",
  h5: "md",
  h6: "md",
  body: "md",
  bodySmall: "xs"
};
const TextLink = React.forwardRef(
  ({ href, color = "link", external = false, inline = true, variant = "body", weight, icon, children, ...rest }, ref) => {
    const validUrl = data.textUtil.sanitizeUrl(href != null ? href : "");
    const theme = ThemeContext.useTheme2();
    const styles = getLinkStyles(theme, inline, variant, weight, color);
    const externalIcon = icon || "external-link-alt";
    if (external) {
      return /* @__PURE__ */ jsxRuntime.jsxs("a", { href: validUrl, ref, ...rest, target: "_blank", rel: "noreferrer", className: styles.wrapper, children: [
        children,
        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: styles.icon, size: svgSizes[variant] || "md", name: externalIcon })
      ] });
    }
    const strippedUrl = data.locationUtil.stripBaseFromUrl(validUrl);
    return /* @__PURE__ */ jsxRuntime.jsxs(Link.Link, { ref, href: strippedUrl, ...rest, className: styles.wrapper, children: [
      children,
      icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: styles.icon, name: icon, size: svgSizes[variant] || "md" })
    ] });
  }
);
TextLink.displayName = "TextLink";
const getLinkStyles = (theme, inline, variant, weight, color) => {
  return {
    icon: css.css({
      marginLeft: "0.25em",
      verticalAlign: "text-bottom"
    }),
    wrapper: css.css([
      variant && {
        ...theme.typography[variant]
      },
      weight && {
        fontWeight: utils.customWeight(weight, theme)
      },
      color && {
        color: theme.colors.text[color]
      },
      {
        textDecoration: "none",
        "&:hover": {
          textDecoration: "underline",
          color: theme.colors.text.link
        }
      },
      inline && {
        textDecoration: "underline",
        "&:hover": {
          textDecoration: "none"
        }
      }
    ])
  };
};

exports.TextLink = TextLink;
//# sourceMappingURL=TextLink.cjs.map