@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
188 lines • 6.39 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/PanelComponents.js";
import { Panel } from '../../../';
import Library from '../Library';
import Next from '../LibraryNext';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function PanelComponents() {
return _jsxDEV(Library.Page, {
title: "Panel",
children: _jsxDEV(Library.Pattern, {
title: "Panel",
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: _jsxDEV(Next.Changelog, {
children: _jsxDEV(Next.ChangelogItem, {
status: "deprecated",
children: ["The legacy implementation of", _jsxDEV("s", {
children: _jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 15
}, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", {
children: "frontend-shared"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 15
}, this), ". Use re-implemented", _jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 15
}, this), " component in the layout group instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Basic usage",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "Basic panel",
children: _jsxDEV("p", {
children: "Here is a panel with no close button and very simple content."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "With close button",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "Basic panel with close button",
onClose: () => alert('close clicked'),
children: [_jsxDEV("p", {
children: "Here is a panel with very basic content and a close button."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 15
}, this), _jsxDEV("p", {
children: ["Providing an ", _jsxDEV("code", {
children: "onClose"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 30
}, this), " function will cause a close button to render."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "With header icon",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
icon: "edit",
title: "Panel with optional heading icon",
onClose: () => alert('close clicked'),
children: "This panel has an optional icon in the header."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Clean theme",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "theme-clean",
style: "width:100%",
children: _jsxDEV(Panel, {
icon: "edit",
title: "Panel with clean-theme styling",
onClose: () => alert('close clicked'),
children: "This panel has an optional icon in the header."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 7,
columnNumber: 5
}, this);
}
//# sourceMappingURL=PanelComponents.js.map