@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.js";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import ButtonBase from './ButtonBase';
/**
 * @typedef {import('../../types').IconComponent} IconComponent
 *
 * @typedef {import('../../types').PresentationalProps} CommonProps
 * @typedef {import('./ButtonBase').ButtonCommonProps} ButtonCommonProps
 * @typedef {import('./ButtonBase').HTMLButtonAttributes} HTMLButtonAttributes
 *
 * @typedef ButtonProps
 * @prop {'sm'|'md'|'lg'} [size='md'] - Adjusts padding on button
 * @prop {'primary'|'secondary'} [variant='secondary']
 * @prop {IconComponent} [icon] - Optional icon to display at left
 *   of button label text. Will be sized proportional to local font size.
 */

/**
 * Render a button with a label (`children`) and optional icon
 *
 * @param {CommonProps & ButtonCommonProps & ButtonProps & HTMLButtonAttributes} props
 */

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function Button({
  children,
  classes,
  elementRef,
  expanded,
  pressed,
  title,
  icon: Icon,
  size = 'md',
  variant = 'secondary',
  ...htmlAttributes
}) {
  return _jsxDEV(ButtonBase, { ...htmlAttributes,
    className: classnames('focus-visible-ring transition-colors whitespace-nowrap rounded-sm', 'flex items-center font-semibold', {
      // Variants
      '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'
    }, {
      // Sizes
      'p-2 gap-x-2': size === 'md',
      // default
      'px-1.5 py-1 gap-x-1.5': size === 'sm',
      'px-3 py-2.5 gap-x-2.5': size === 'lg'
    }, classes),
    elementRef: downcastRef(elementRef),
    expanded: expanded,
    pressed: pressed,
    title: title,
    "data-component": "Button",
    children: [Icon && _jsxDEV(Icon, {
      className: "w-em h-em"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 68,
      columnNumber: 16
    }, this), children]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 42,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Button.js.map