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

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/IconComponents.js";
import Library from '../Library';
import Next from '../LibraryNext';
import { Card, Icon, registerIcon } from '../../../';
import * as iconSrc from '../../../icons';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
const icons = {};

for (const iconName in iconSrc) {
  if (Object.prototype.hasOwnProperty.call(iconSrc, iconName)) {
    icons[iconName] = registerIcon(iconName, iconSrc[iconName]);
  }
}

export default function IconComponents() {
  return _jsxDEV(Library.Page, {
    title: "Icons",
    intro: _jsxDEV("p", {
      children: ["The legacy ", _jsxDEV("code", {
        children: "Icon"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 21,
        columnNumber: 22
      }, this), " component renders an SVG icon indicated by the ", _jsxDEV("code", {
        children: "name"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 22,
        columnNumber: 18
      }, this), " prop."]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 20,
      columnNumber: 9
    }, this),
    children: [_jsxDEV(Library.Pattern, {
      title: "Status",
      children: _jsxDEV(Next.Changelog, {
        children: _jsxDEV(Next.ChangelogItem, {
          status: "deprecated",
          children: ["The single icon component ", _jsxDEV("code", {
            children: "Icon"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 29,
            columnNumber: 39
          }, this), " is deprecated in favor of individual icon components. The ", _jsxDEV("code", {
            children: "Icon"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 30,
            columnNumber: 48
          }, this), " component is slated for removal in ", _jsxDEV("code", {
            children: "v6.0"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 31,
            columnNumber: 35
          }, this), " of this package."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 28,
          columnNumber: 11
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 27,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 26,
      columnNumber: 7
    }, this), _jsxDEV(Library.Pattern, {
      title: "Hypothesis icon set",
      children: _jsxDEV("div", {
        className: "grid grid-cols-3 md:grid-cols-6 gap-6",
        children: Object.keys(icons).map(iconName => _jsxDEV(Card, {
          classes: "flex flex-col items-center bg-grey-0 border-slate-5 space-y-3 rounded-lg",
          children: [_jsxDEV("div", {
            style: "text-lg",
            children: _jsxDEV(Icon, {
              name: icons[iconName]
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 43,
              columnNumber: 17
            }, this)
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 42,
            columnNumber: 15
          }, this), _jsxDEV("div", {
            children: iconName
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 45,
            columnNumber: 15
          }, this)]
        }, iconName, true, {
          fileName: _jsxFileName,
          lineNumber: 38,
          columnNumber: 13
        }, this))
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 36,
        columnNumber: 9
      }, this)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 17,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=IconComponents.js.map