@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
50 lines • 1.68 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/navigation/LinkButton.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import Button from '../input/Button';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
* Style a button as a link
*/
export default function LinkButton({
children,
classes,
elementRef,
inline = false,
underline = 'none',
variant = 'brand',
unstyled = false,
...htmlAttributes
}) {
const styled = !unstyled;
const themed = styled && variant !== 'custom';
return _jsxDEV(Button, {
"data-component": "LinkButton",
...htmlAttributes,
elementRef: downcastRef(elementRef),
classes: classnames(styled && {
'focus-visible-ring transition-colors whitespace-nowrap rounded': true,
inline: inline,
'flex items-center': !inline
}, styled && {
// underline
'no-underline hover:no-underline': underline === 'none',
// default
'underline enabled:hover:underline': underline === 'always',
'no-underline enabled:hover:underline': underline === 'hover'
}, themed && {
'aria-pressed:font-semibold aria-expanded:font-semibold': true,
'text-brand enabled:hover:text-brand-dark': variant === 'brand',
// default
'text-color-text enabled:hover:text-brand-dark': variant === 'text',
'text-color-text-light enabled:hover:text-brand': variant === 'text-light'
}, classes),
unstyled: true,
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 5
}, this);
}
//# sourceMappingURL=LinkButton.js.map