@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
248 lines • 9.5 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/LayoutFoundations.js";
import { useState } from 'preact/hooks';
import { Actions, Card, LabeledButton } from '../../../';
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function LayoutFoundations() {
const [showExample1, setShowExample1] = useState(false);
const [showExample2, setShowExample2] = useState(false);
const [showExample3, setShowExample3] = useState(false);
return _jsxDEV(Library.Page, {
title: "Layout",
children: _jsxDEV(Library.Pattern, {
title: "Positioning and Overlay",
children: [_jsxDEV(Library.Example, {
title: "Centering in the viewport",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "fixed-centered"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 17
}, this), " layout pattern centers an element both horizontally and vertically within the entire viewport."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV("div", {
children: [_jsxDEV(LabeledButton, {
variant: "primary",
onClick: () => setShowExample1(true),
children: "Show example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
style: `width:450px;${showExample1 ? 'visibility:visible' : 'visibility:hidden'}`,
children: _jsxDEV(Card, {
classes: "w-[450px]",
children: [_jsxDEV("p", {
children: "This is a card that is centered vertically and horizontally in the current viewport."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 19
}, this), _jsxDEV(Actions, {
children: _jsxDEV(LabeledButton, {
variant: "primary",
onClick: () => setShowExample1(false),
children: "Hide example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Full-screen overlay",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 17
}, this), " layout pattern provides a full-viewport, semi-opaque overlay that obscures UI interactions in the viewport below. It is intended for use as a backdrop for modals, e.g."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV("div", {
children: [_jsxDEV(LabeledButton, {
variant: "primary",
onClick: () => setShowExample2(true),
children: "Show example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "fixed top-0 left-0 bottom-0 right-0 bg-black/50 z-5",
style: showExample2 ? 'visibility:visible' : 'visibility:hidden',
children: _jsxDEV("div", {
className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
children: _jsxDEV(LabeledButton, {
onClick: () => setShowExample2(false),
children: "Hide example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Full-screen overlay with fixed-centered content",
children: [_jsxDEV("p", {
children: ["This shows an example of combining the ", _jsxDEV("code", {
children: "overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 52
}, this), " and", ' ', _jsxDEV("code", {
children: "fixed-centered"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}, this), " patterns."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV("div", {
children: [_jsxDEV(LabeledButton, {
variant: "primary",
onClick: () => setShowExample3(true),
children: "Show example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "fixed top-0 left-0 bottom-0 right-0 bg-black/50 z-5",
style: showExample3 ? 'visibility:visible' : 'visibility:hidden',
children: _jsxDEV("div", {
className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
children: _jsxDEV(Card, {
classes: "w-[450px]",
children: [_jsxDEV("div", {
children: "This is content in a fixed-centered card of 450px width over a full-screen overlay."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 21
}, this), _jsxDEV(Actions, {
children: _jsxDEV(LabeledButton, {
variant: "primary",
onClick: () => setShowExample3(false),
children: "Hide example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 5
}, this);
}
//# sourceMappingURL=LayoutFoundations.js.map