@hypothesis/frontend-shared/lib/components/input/Button.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/Button.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
 * Render a button with optional icon
 */
export default function Button({
  children,
  classes,
  elementRef,
  expanded,
  pressed,
  title,
  icon: Icon,
  size = 'md',
  variant = 'secondary',
  unstyled = false,
  role,
  ...htmlAttributes
}) {
  const styled = !unstyled;
  const themed = styled && variant !== 'custom';
  const sized = styled && size !== 'custom';
  const ariaProps = {
    'aria-label': title
  };

  // aria-pressed and aria-expanded are not allowed for buttons with
  // an aria role of `tab`. Instead, the aria-selected attribute is expected.
  if (role === 'tab') {
    ariaProps['aria-selected'] = pressed;
  } else {
    ariaProps['aria-pressed'] = pressed;
    ariaProps['aria-expanded'] = expanded;
  }
  return _jsxDEV("button", {
    role: role !== null && role !== void 0 ? role : 'button',
    "data-component": "Button"
    // Setting a default `type` can prevent undesired form submissions in
    // certain cases
    ,
    type: "button",
    ...ariaProps,
    ...htmlAttributes,
    className: classnames({
      'focus-visible-ring transition-colors whitespace-nowrap flex items-center': styled
    }, themed && {
      'font-semibold rounded': true,
      'text-grey-7 bg-grey-1 enabled:hover:text-grey-9 enabled:hover:bg-grey-2 aria-pressed:text-grey-9 aria-expanded:text-grey-9': variant === 'secondary',
      // default
      'text-grey-1 bg-grey-7 enabled:hover:bg-grey-8 disabled:text-grey-4': variant === 'primary'
    }, sized && {
      'p-2 gap-x-2': size === 'md',
      // default
      'p-1 gap-x-1': size === 'xs',
      'p-1.5 gap-x-1.5': size === 'sm',
      'p-2.5 gap-x-1.5': size === 'lg'
    }, classes),
    ref: downcastRef(elementRef),
    title: title,
    children: [Icon && _jsxDEV(Icon, {
      className: "w-em h-em"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 120,
      columnNumber: 16
    }, this), children]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 89,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Button.js.map