@clayui/link/lib/esm/Link.js

ClayLink component

import classNames from "classnames";
import React from "react";
import ClayLinkContext from "./Context";
const LINK_PRESETS = {
  danger: {
    base: "c-link text-danger",
    decoration: "underline"
  },
  primary: {
    base: "c-link link-primary",
    decoration: "underline"
  },
  secondary: {
    base: "c-link link-secondary",
    decoration: "underline"
  },
  tertiary: {
    base: "c-link text-tertiary",
    decoration: null
  },
  unstyled: {
    base: "link-unstyled",
    decoration: null
  }
};
const FONT_WEIGHTS = {
  "normal": "font-weight-normal",
  "semi-bold": "font-weight-semi-bold"
};
const defaultMessages = {
  opensNewWindow: "(Opens a new window)"
};
const Link = React.forwardRef(
  ({
    block,
    borderless,
    button,
    children,
    className,
    decoration,
    displayType,
    fontSize,
    messages = defaultMessages,
    monospaced,
    outline,
    rel,
    small,
    target,
    weight,
    ...otherProps
  }, ref) => {
    const TagOrComponent = React.useContext(ClayLinkContext);
    let classes;
    if (button) {
      button = button === true ? {} : button;
      classes = {
        "btn": !!button,
        "btn-block": button.block || block,
        "btn-monospaced": button.monospaced || monospaced,
        "btn-outline-borderless": borderless,
        "btn-sm": button.small || small,
        [`btn-${displayType}`]: displayType && !outline && !borderless,
        [`btn-outline-${displayType}`]: displayType && (outline || borderless),
        [FONT_WEIGHTS[weight]]: weight,
        [`text-${fontSize}`]: fontSize,
        [`text-decoration-${decoration}`]: decoration
      };
    } else {
      decoration = decoration === null || outline ? void 0 : decoration || LINK_PRESETS[displayType]?.decoration;
      classes = {
        "link-monospaced": monospaced,
        "link-outline": outline,
        "link-outline-borderless": borderless,
        [LINK_PRESETS[displayType]?.base]: displayType && !outline,
        [`link-outline-${displayType}`]: displayType && outline,
        [FONT_WEIGHTS[weight]]: weight,
        [`text-${fontSize}`]: fontSize,
        [`text-decoration-${decoration}`]: decoration
      };
    }
    if (target && !rel) {
      rel = "noreferrer noopener";
    }
    return /* @__PURE__ */ React.createElement(
      TagOrComponent,
      {
        className: classNames(className, classes),
        ref,
        rel,
        target,
        ...otherProps
      },
      children,
      target === "_blank" && /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, messages.opensNewWindow)
    );
  }
);
Link.displayName = "ClayLink";
var Link_default = Link;
export {
  Link_default as default
};