@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
76 lines • 2.8 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/OptionButton.tsx";
import classnames from 'classnames';
import { CheckIcon } from '../icons/';
import Button from './Button';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
* Render a button representing one of a set of options, with optional
* right-aligned `details` content
*/
export default function OptionButton({
children,
details,
selected = false,
pressed,
...buttonProps
}) {
const isPressed = selected || pressed;
return _jsxDEV(Button, {
classes: classnames('group',
// Facilitate styling children based on this element's state
'w-full gap-x-2 px-2 py-1', 'rounded border border-stone-300 bg-stone-50', 'enabled:hover:border-slate-5 enabled:hover:bg-slate-0', 'disabled:border-stone-200', 'aria-pressed:border-slate-5 aria-pressed:bg-slate-0 aria-pressed:shadow-inner', 'aria-expanded:border-slate-5 aria-expanded:bg-slate-0 aria-expanded:shadow-inner'),
size: "custom",
variant: "custom",
pressed: isPressed,
...buttonProps,
children: [_jsxDEV("div", {
className: "grow flex items-center gap-x-1 text-start",
children: [isPressed && _jsxDEV("div", {
className: "rounded-full bg-slate-600 p-0.5",
children: _jsxDEV(CheckIcon, {
className: "w-[0.6em] h-[0.6em] text-white"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 11
}, this), _jsxDEV("div", {
className: "text-slate-600 font-semibold group-disabled:text-stone-400",
"data-testid": "option-button-label",
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 7
}, this), _jsxDEV("div", {
className: "text-end",
children: details && _jsxDEV("span", {
className: classnames('uppercase text-[0.8em] text-stone-500', 'group-enabled:group-hover:text-stone-600', 'group-disabled:text-stone-400', 'group-aria-pressed:text-slate-600 group-aria-expanded:text-slate-600'),
"data-testid": "option-button-details",
children: details
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 5
}, this);
}
//# sourceMappingURL=OptionButton.js.map