@hypothesis/frontend-shared/lib/components/navigation/Link.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/navigation/Link.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
 * Styled component for a link (`<a>` element).
 */
export default function Link({
  children,
  classes,
  elementRef,
  underline = 'none',
  unstyled = false,
  variant = 'brand',
  ...htmlAttributes
}) {
  const styled = !unstyled;
  const themed = styled && variant !== 'custom';
  return _jsxDEV("a", {
    "data-component": "Link",
    rel: "noopener noreferrer",
    ...htmlAttributes,
    className: classnames(styled && {
      'focus-visible-ring rounded': true,
      // underline
      // TODO: Underline should be controlled by `variant` and should default
      // to `always`
      'no-underline hover:no-underline': underline === 'none',
      // default
      'underline hover:underline': underline === 'always',
      'no-underline hover:underline': underline === 'hover'
    }, themed && {
      // color
      'text-brand hover:text-brand-dark': variant === 'brand',
      // default
      'text-color-text-light hover:text-brand': variant === 'text-light',
      'text-color-text hover:text-brand-dark': variant === 'text'
    }, classes),
    ref: downcastRef(elementRef),
    children: children
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 37,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Link.js.map