@hypothesis/frontend-shared/lib/components/Panel.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Panel.js";
import classnames from 'classnames'; // @ts-ignore

import cancelSVG from '../../images/icons/cancel.svg';
import { IconButton } from './buttons';
import { registerIcon, SvgIcon } from './SvgIcon'; // Register the cancel icon for use

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
const cancelIcon = registerIcon('cancel', cancelSVG);
/**
 * @typedef PanelProps
 * @prop {import("preact").ComponentChildren} children
 * @prop {string} [icon] - Name of optional icon to render in header
 * @prop {() => void} [onClose] - handler for closing the panel; if provided,
 *   will render a close button that invokes this onClick
 * @prop {string} title
 */

/**
 * Render a "panel"-like interface with a title and optional icon and/or
 * close button.
 *
 * @deprecated - Use re-implemented Panel component in the layout group
 * @param {PanelProps} props
 */

export function Panel({
  children,
  icon,
  onClose,
  title
}) {
  const withCloseButton = !!onClose;
  return _jsxDEV("div", {
    className: classnames('Hyp-Panel', {
      'Hyp-Panel--closeable': withCloseButton
    }),
    children: [_jsxDEV("header", {
      className: "Hyp-Panel__header",
      children: [icon && _jsxDEV("div", {
        className: "Hyp-Panel__header-icon",
        children: _jsxDEV(SvgIcon, {
          name: icon,
          title: title
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 38,
          columnNumber: 13
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 37,
        columnNumber: 11
      }, this), _jsxDEV("h2", {
        className: "Hyp-Panel__title",
        children: title
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 41,
        columnNumber: 9
      }, this), withCloseButton && _jsxDEV("div", {
        className: "Hyp-Panel__close",
        children: _jsxDEV(IconButton, {
          icon: cancelIcon,
          title: "Close",
          onClick: onClose
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 44,
          columnNumber: 13
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 43,
        columnNumber: 11
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 7
    }, this), _jsxDEV("div", {
      className: "Hyp-Panel__content",
      children: children
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 48,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 30,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Panel.js.map