@hypothesis/frontend-shared/lib/pattern-library/components/LibraryNext.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/LibraryNext.js";

/**
 * Pattern library components related to UI component re-implementation and
 * migration.
 */
import classnames from 'classnames';
import { useMemo } from 'preact/hooks';
import { jsxToHTML } from '../util/jsx-to-string';
/**
 * Render a little label or pill next to changelog items
 *
 * @typedef {'breaking'|'added'|'changed'|'deprecated'} ChangeStatus
 *
 * @param {object} props
 *   @param {ChangeStatus} props.status
 */

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";

function StatusChip({
  status
}) {
  return _jsxDEV("span", {
    className: classnames('rounded-md py-1', {
      'px-2 bg-red-error text-color-text-inverted': status === 'breaking',
      'px-2 bg-yellow-notice': status === 'deprecated',
      'font-semibold': status === 'added' || status === 'changed'
    }),
    children: [status === 'breaking' && _jsxDEV("span", {
      children: "Breaking"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 33
    }, this), status === 'deprecated' && _jsxDEV("span", {
      children: "Deprecated"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 29,
      columnNumber: 35
    }, this), status === 'added' && _jsxDEV("span", {
      children: "Added:"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 30,
      columnNumber: 30
    }, this), status === 'changed' && _jsxDEV("span", {
      children: "Changed:"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 31,
      columnNumber: 32
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 21,
    columnNumber: 5
  }, this);
}
/**
 * Wrapper around a list of changelog items
 *
 * @param {object} props
 *   @param {import('preact').ComponentChildren} props.children
 */


function Changelog({
  children
}) {
  return _jsxDEV("ul", {
    children: children
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 43,
    columnNumber: 10
  }, this);
}
/**
 * Single changelog item
 *
 * @param {object} props
 *   @param {ChangeStatus} props.status
 *   @param {import('preact').ComponentChildren} props.children
 */


function ChangelogItem({
  status,
  children
}) {
  return _jsxDEV("li", {
    className: "space-x-2",
    children: [_jsxDEV(StatusChip, {
      status: status
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 56,
      columnNumber: 7
    }, this), _jsxDEV("span", {
      children: children
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 57,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 55,
    columnNumber: 5
  }, this);
}
/**
 * Render provided `content` as a "code block" example.
 *
 * @param {object} props
 *   @param {string} props.content - Code content
 *   @param {'sm'|'md'|'lg'} [props.size]
 *   @param {string} [props.title] - Caption (e.g. filename, description) of
 *     code block
 */


function Code({
  content,
  size,
  title
}) {
  const codeMarkup = useMemo(() => jsxToHTML(content), [content]);
  return _jsxDEV("figure", {
    className: "space-y-2",
    children: [_jsxDEV("div", {
      className: classnames('unstyled-text bg-slate-7 text-color-text-inverted p-4 rounded-md', {
        'text-sm': size === 'sm'
      }),
      children: _jsxDEV("code", {
        className: "text-color-text-inverted",
        children: _jsxDEV("pre", {
          className: "whitespace-pre-wrap",
          dangerouslySetInnerHTML: {
            __html: codeMarkup
          }
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 83,
          columnNumber: 11
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 82,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 7
    }, this), title && _jsxDEV("figcaption", {
      className: "flex justify-end",
      children: _jsxDEV("span", {
        className: "italic",
        children: title
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 91,
        columnNumber: 11
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 90,
      columnNumber: 9
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 75,
    columnNumber: 5
  }, this);
}
/**
 * Render import "usage" of a given `componentName`
 *
 * @param {object} props
 *   @param {string} props.componentName
 *   @param {'next'|'legacy'} [props.generation]
 *   @param {'sm'|'md'|'lg'} [props.size]
 */


function Usage({
  componentName,
  generation = 'next',
  size = 'md'
}) {
  const importPath = generation === 'next' ? '@hypothesis/frontend-shared/lib/next' : '@hypothesis/frontend-shared';
  return _jsxDEV(Code, {
    content: `import { ${componentName} } from '${importPath}';
`,
    size: size
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 112,
    columnNumber: 5
  }, this);
}

export default {
  Changelog,
  ChangelogItem,
  Code,
  Usage
};
//# sourceMappingURL=LibraryNext.js.map