@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
321 lines • 10.7 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/layout/PanelPage.js";
import { Panel } from '../../../../next';
import { Button, EditIcon } from '../../../../next';
import Library from '../../Library';
import Next from '../../LibraryNext';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function PanelPage() {
return _jsxDEV(Library.Page, {
title: "Panel",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 13
}, this), " is an opinionated composite component for standardized panel layout."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["For more custom control, use ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 42
}, this), " and its allies."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 11
}, this)]
}, void 0, true),
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 11
}, this), " is a re-implementation of a legacy component with the same name."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Migrating to this component",
children: _jsxDEV(Next.Changelog, {
children: [_jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop ", _jsxDEV("code", {
children: "icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 20
}, this), ":", ' ', _jsxDEV("s", {
children: _jsxDEV("code", {
children: '{string}'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this), ' ', "\u279C now takes ", _jsxDEV("code", {
children: '{IconComponent}'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "added",
children: ["Prop ", _jsxDEV("code", {
children: "containerRef"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 20
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Usage",
children: [_jsxDEV(Next.Usage, {
componentName: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: [_jsxDEV("p", {
children: ["All ", _jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 17
}, this), "s have a ", _jsxDEV("code", {
children: "title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 44
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Basic Panel",
withSource: true,
children: _jsxDEV(Panel, {
title: "A simple panel",
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "onClose",
children: [_jsxDEV("p", {
children: ["Provide a function to ", _jsxDEV("code", {
children: "onClose"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 33
}, this), " to render a close button."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Panel with close button",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
onClose: () => alert('you clicked it'),
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "icon",
children: [_jsxDEV("p", {
children: ["An ", _jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 14
}, this), " provided to the ", _jsxDEV("code", {
children: "icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 57
}, this), " prop will be rendered to the left of the title."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
icon: EditIcon,
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "buttons",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 11
}, this), " passed to the ", _jsxDEV("code", {
children: "buttons"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 56
}, this), " prop will be rendered as actions in the panel."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
buttons: _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
children: "Cancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 19
}, this), _jsxDEV(Button, {
variant: "primary",
children: "Do it"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 19
}, this)]
}, void 0, true),
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 5
}, this);
}
//# sourceMappingURL=PanelPage.js.map