@hypothesis/frontend-shared/lib/components/feedback/Callout.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/feedback/Callout.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import { CautionIcon, CheckIcon, CancelIcon } from '../icons';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
/**
 * Render a banner-like alert message with corresponding icon and coloring
 */
export default function Callout({
  children,
  classes,
  elementRef,
  icon: Icon,
  status = 'notice',
  size = 'md',
  variant = 'outlined',
  unstyled = false,
  ...htmlAttributes
}) {
  const styled = !unstyled;
  const themed = styled && variant !== 'custom';
  const sized = styled && size !== 'custom';
  let StatusIcon = Icon;
  if (!StatusIcon) {
    switch (status) {
      case 'success':
        StatusIcon = CheckIcon;
        break;
      case 'error':
        StatusIcon = CancelIcon;
        break;
      default:
        StatusIcon = CautionIcon;
        break;
    }
  }

  // Only render an icon if no custom styling API props have been set.
  const withIcon = themed && sized;
  return _jsxDEV("div", {
    "data-component": "Callout",
    ...htmlAttributes,
    ref: downcastRef(elementRef),
    className: classnames(styled && 'flex items-center border', themed && {
      'rounded border': true,
      'shadow hover:shadow-md cursor-pointer': variant === 'raised',
      'border-yellow-notice': status === 'notice',
      'border-green-success': status === 'success',
      'border-red-error': status === 'error'
    },
    // Set background color, but only if rendering an icon
    themed && {
      'bg-yellow-notice': status === 'notice' && withIcon,
      'bg-green-success': status === 'success' && withIcon,
      'bg-red-error': status === 'error' && withIcon,
      'bg-white': !withIcon
    }, classes),
    children: [withIcon && _jsxDEV("div", {
      className: classnames({
        'p-2': size === 'md',
        'p-1.5': size === 'sm',
        'p-3': size === 'lg'
      }),
      children: _jsxDEV(StatusIcon, {
        "data-testid": "callout-icon",
        className: classnames('text-white', {
          'w-[1.25em] h-[1.25em]': size === 'md',
          // default
          'w-[0.85em] h-[0.85em]': size === 'sm',
          'w-[1.5em] h-[1.5em]': size === 'lg'
        })
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 95,
        columnNumber: 11
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 9
    }, this), _jsxDEV("div", {
      className: classnames(sized && {
        'p-2': size === 'md',
        // default
        'py-1.5 px-2': size === 'sm',
        'p-3': size === 'lg'
      }, styled && 'grow', themed && 'bg-white rounded-r'),
      children: children
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 105,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 64,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Callout.js.map