@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
323 lines (322 loc) • 10.9 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/CloseButtonPage.tsx";
import { useState } from 'preact/hooks';
import { Button, CloseButton, Dialog } from '../../../../';
import Library from '../../Library';
/**
* Dialog for use in demos
*/
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
function Dialog_({
children,
...dialogProps
}) {
const [dialogOpen, setDialogOpen] = useState(false);
const closeDialog = () => setDialogOpen(false);
const openButton = _jsxDEV(Button, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: [dialogOpen ? 'Hide' : 'Show', " dialog"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 5
}, this);
return _jsxDEV("div", {
className: "flex w-full gap-x-2",
children: [!dialogOpen && _jsxDEV("div", {
children: openButton
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 23
}, this), _jsxDEV("div", {
className: "grow",
children: dialogOpen && _jsxDEV(Dialog, {
...dialogProps,
onClose: closeDialog,
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 5
}, this);
}
export default function CloseButtonPage() {
return _jsxDEV(Library.Page, {
title: "CloseButton",
intro: _jsxDEV("p", {
children: "Render a close button that can take a click handler or find one in context."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "CloseButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
withSource: true,
title: "Basic CloseButton",
children: _jsxDEV(CloseButton, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with CloseButton",
children: _jsxDEV(Library.SectionL3, {
title: "Click handlers for close buttons",
children: [_jsxDEV("p", {
children: ["You can pass an ", _jsxDEV("code", {
children: "onClick"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 31
}, this), " prop to", ' ', _jsxDEV("code", {
children: "CloseButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 15
}, this), " like any button and that will be used. If no ", _jsxDEV("code", {
children: "onClick"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 18
}, this), " is provided, ", _jsxDEV("code", {
children: "CloseButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 52
}, this), " will check for any available ", _jsxDEV("code", {
children: "CloseableContext"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 39
}, this), " close handler and use that, if found."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["For example, ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 28
}, this), " components provide a", ' ', _jsxDEV("code", {
children: "CloseableContext"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 15
}, this), ". Any ", _jsxDEV("code", {
children: "CloseButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 50
}, this), " inside of a ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 20
}, this), " with an ", _jsxDEV("code", {
children: "onClose"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 48
}, this), " handler will use that handler automatically: you do not need to provide an", ' ', _jsxDEV("code", {
children: "onClick"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 15
}, this), " prop in these cases."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Dialog with CloseButton",
withSource: true,
children: _jsxDEV(Dialog_, {
variant: "custom",
children: _jsxDEV("div", {
className: "flex gap-x-3",
children: [_jsxDEV("div", {
className: "grow",
children: "Example custom dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 19
}, this), _jsxDEV(CloseButton, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "CloseButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 13
}, this), " provides the same API as", ' ', _jsxDEV("code", {
children: _jsxDEV(Library.Link, {
href: "/input-button",
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "title",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["This is an optional prop for ", _jsxDEV("code", {
children: "CloseButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 46
}, this), " (it is required for ", _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 30
}, this), ")."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `string`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'Close'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 5
}, this);
}
//# sourceMappingURL=CloseButtonPage.js.map