@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
115 lines • 4.74 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerPatterns.js";
import { useState } from 'preact/hooks';
import { LabeledButton } from '../../../';
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function ContainerPatterns() {
const [showModalExample, setShowModalExample] = useState(false);
return _jsxDEV(Library.Page, {
title: "Containers",
children: _jsxDEV(Library.Pattern, {
title: "Modal",
children: _jsxDEV(Library.Example, {
title: "Responsive modal container",
children: [_jsxDEV("p", {
children: ["This pattern makes use of the ", _jsxDEV("code", {
children: "overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 43
}, this), " pattern. It responsively positions and sizes a container in the viewport to hold modal content."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
children: [_jsxDEV(LabeledButton, {
variant: "primary",
onClick: () => setShowModalExample(true),
children: "Show example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "fixed top-0 left-0 bottom-0 right-0 bg-black/50 z-5",
style: {
visibility: showModalExample ? 'visible' : 'hidden'
},
children: _jsxDEV("div", {
className: "hyp-modal",
children: _jsxDEV("div", {
className: "border p-3 bg-white",
children: [_jsxDEV("div", {
children: _jsxDEV("p", {
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue bibendum ipsum, ut euismod eros. Morbi sit amet sollicitudin diam. Cras tristique dui at nulla gravida, non sodales velit tincidunt. Pellentesque pharetra elit ac risus porta, vel vestibulum odio consectetur. Aliquam convallis augue ex, vitae aliquet enim varius id. Integer porttitor erat non nisi posuere, a tempus felis ultrices. In hac habitasse platea dictumst. Donec ut justo at odio pharetra laoreet ac consectetur elit."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 21
}, this), _jsxDEV("div", {
className: "flex justify-end p-2",
children: _jsxDEV(LabeledButton, {
variant: "primary",
onClick: () => setShowModalExample(false),
children: "Hide example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ContainerPatterns.js.map