@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
288 lines • 9.72 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/IconsPage.js";
import Library from '../../Library';
import Next from '../../LibraryNext';
import { Link } from '../../../../next';
import * as Icons from '../../../../components/icons';
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."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 14
}, this),
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: [_jsxDEV("p", {
children: ["These standalone icon components are new. These are intended to replace the single legacy ", _jsxDEV("code", {
children: "Icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 37
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Migrating to this component",
children: _jsxDEV(Next.Changelog, {
children: _jsxDEV(Next.ChangelogItem, {
status: "changed",
children: "It is no longer necessary to import SVG source nor registration functions from this package to use icons."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Usage",
children: [_jsxDEV(Next.Usage, {
componentName: "CancelIcon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Icons.CancelIcon, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: [_jsxDEV("p", {
children: ["Icon components accept any", ' ', _jsxDEV("code", {
children: _jsxDEV(Link, {
href: "https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement",
children: "SVGSVGElement"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 11
}, this), ' ', "attributes as props. Use ", _jsxDEV("code", {
children: "className"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 36
}, this), " (not", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 11
}, this), ") to style icons."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _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: 50,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Sizing icons",
children: [_jsxDEV("p", {
children: ["Icons are sized at ", _jsxDEV("code", {
children: "16\xD716"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 30
}, this), " unless styled otherwise."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["Icons are often sized relative to the surrounding text. The", ' ', _jsxDEV("code", {
children: "em"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 11
}, this), " spacing value provided by this ", "package's", " tailwind preset allows sizing at ", _jsxDEV("code", {
children: "1em"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 35
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 9
}, this), _jsxDEV("p", {
children: _jsxDEV(Link, {
href: "https://tailwindcss.com/docs/customizing-spacing",
underline: "always",
children: _jsxDEV("div", {
className: "flex items-center gap-x-1",
children: ["More information about ", "tailwind's", " sizing utility classes", _jsxDEV(Icons.ExternalIcon, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Sized icon components",
withSource: true,
children: _jsxDEV("div", {
className: "space-y-2",
children: [_jsxDEV("div", {
className: "text-xs items-center flex gap-x-2",
children: [_jsxDEV(Icons.ArrowRightIcon, {
className: "w-em h-em"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 17
}, this), "Icon sized relative to some small text"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "text-lg items-center flex gap-x-2",
children: [_jsxDEV(Icons.ArrowRightIcon, {
className: "w-em h-em"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 17
}, this), "Icon sized relative to some larger text"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Available icon components",
children: _jsxDEV("div", {
className: "grid grid-cols-4 gap-6",
children: Object.keys(Icons).map(iconName => {
const IconComponent = Icons[iconName];
return _jsxDEV("div", {
className: "flex flex-col gap-y-4 border rounded-sm p-4 items-center justify-center",
children: [_jsxDEV(IconComponent, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 17
}, this), iconName]
}, iconName, true, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 15
}, this);
})
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 5
}, this);
}
//# sourceMappingURL=IconsPage.js.map