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

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/IconsPage.tsx";
import classnames from 'classnames';
import { Link } from '../../../../';
import * as Icons from '../../../../components/icons';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function IconsPage() {
  return _jsxDEV(Library.Page, {
    title: "Icons",
    intro: _jsxDEV("p", {
      children: "Icons are simple, standalone components that wrap SVG source markup."
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 12,
      columnNumber: 9
    }, this),
    children: _jsxDEV(Library.Section, {
      children: [_jsxDEV(Library.SectionL2, {
        children: [_jsxDEV(Library.Usage, {
          componentName: "CancelIcon"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 19,
          columnNumber: 11
        }, this), _jsxDEV(Library.SectionL3, {
          children: _jsxDEV(Library.Demo, {
            title: "Basic Icon component usage: CancelIcon",
            withSource: true,
            children: _jsxDEV(Icons.CancelIcon, {}, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 25,
              columnNumber: 15
            }, this)
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 21,
            columnNumber: 13
          }, this)
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 20,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 18,
        columnNumber: 9
      }, this), _jsxDEV(Library.SectionL2, {
        title: "Icon components",
        children: _jsxDEV("div", {
          className: "my-4 grid grid-cols-4 gap-6",
          children: Object.keys(Icons).map(iconName => {
            const IconComponent = Icons[iconName];
            return _jsxDEV("div", {
              className: classnames('flex flex-col gap-y-4 border rounded p-4 items-center justify-center'),
              children: [_jsxDEV(IconComponent, {}, void 0, false, {
                fileName: _jsxFileName,
                lineNumber: 41,
                columnNumber: 19
              }, this), iconName]
            }, iconName, true, {
              fileName: _jsxFileName,
              lineNumber: 35,
              columnNumber: 17
            }, this);
          })
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 31,
          columnNumber: 11
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 30,
        columnNumber: 9
      }, this), _jsxDEV(Library.SectionL2, {
        title: "Component API",
        children: [_jsxDEV(Library.SectionL3, {
          title: "...htmlProps",
          children: [_jsxDEV(Library.Callout, {
            children: ["Unlike other components in this package, Icon components take", ' ', _jsxDEV("code", {
              children: "className"
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 53,
              columnNumber: 15
            }, this), ", not ", _jsxDEV("code", {
              children: "classes"
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 53,
              columnNumber: 43
            }, this), "."]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 51,
            columnNumber: 13
          }, this), _jsxDEV(Library.Info, {
            children: [_jsxDEV(Library.InfoItem, {
              label: "description",
              children: "Icon components accept SVG attributes."
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 56,
              columnNumber: 15
            }, this), _jsxDEV(Library.InfoItem, {
              label: "type",
              children: [_jsxDEV("code", {
                children: ['preact.JSX.HTMLAttributes<', _jsxDEV(Link, {
                  href: "https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement",
                  children: "SVGSVGElement"
                }, void 0, false, {
                  fileName: _jsxFileName,
                  lineNumber: 62,
                  columnNumber: 19
                }, this)]
              }, void 0, true, {
                fileName: _jsxFileName,
                lineNumber: 60,
                columnNumber: 17
              }, this), '>']
            }, void 0, true, {
              fileName: _jsxFileName,
              lineNumber: 59,
              columnNumber: 15
            }, this)]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 55,
            columnNumber: 13
          }, this)]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 50,
          columnNumber: 11
        }, this), _jsxDEV(Library.Demo, {
          title: "Styled icon component",
          withSource: true,
          children: _jsxDEV(Icons.CautionIcon, {
            className: "text-yellow-notice w-16 h-16"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 72,
            columnNumber: 13
          }, this)
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 71,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 17,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 9,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=IconsPage.js.map