@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
78 lines • 2.9 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/navigation/Tab.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import Button from '../input/Button';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
* Render a button with appropriate ARIA tab affordances
*/
export default function Tab({
children,
classes,
elementRef,
icon: Icon,
textContent,
selected = false,
size = 'md',
variant = 'text',
unstyled = false,
...htmlAttributes
}) {
const styled = !unstyled;
const themed = styled && variant !== 'custom';
const sized = styled && size !== 'custom';
return _jsxDEV(Button, {
"data-component": "Tab",
...htmlAttributes,
classes: classnames(
// Buttons have a flex layout. Add a horizontal gap.
sized && 'gap-x-1.5', themed && {
'px-4 py-2': variant === 'tab' && sized,
'font-semibold text-grey-7 rounded-t-lg border border-transparent border-b-0': variant === 'tab',
'aria-selected:text-color-text aria-selected:bg-white': variant === 'tab',
'aria-selected:border aria-selected:border-grey-3 aria-selected:border-b-0': variant === 'tab',
'enabled:hover:text-color-text disabled:text-grey-7/50': variant === 'tab',
'enabled:hover:text-brand-dark': variant === 'text',
'aria-selected:font-bold': variant === 'text'
}, classes),
elementRef: downcastRef(elementRef),
"aria-selected": selected,
role: "tab",
variant: "custom",
size: "custom",
unstyled: unstyled,
children: [Icon && _jsxDEV(Icon, {
className: classnames(
// A small padding value here sizes the icon down slightly in relation
// to the tab text, which results in nicer proportions.
'p-[0.125em] w-em h-em')
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 9
}, this), _jsxDEV("span", {
"data-content": textContent,
"data-testid": "sizing-wrapper",
className: classnames({
// Set the content of this span's ::before pseudo-element to
// `textContent` and make it bold.
'before:content-[attr(data-content)] before:font-bold': textContent,
// Make the ::before occupy space within the button, but make it
// invisible. This ensures that the tab button is wide enough to show
// bolded text even if the visible text is not currently bold. See
// https://css-tricks.com/bold-on-hover-without-the-layout-shift/
'before:block before:invisible before:h-0 before:overflow-hidden': textContent
}),
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 5
}, this);
}
//# sourceMappingURL=Tab.js.map