@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
472 lines • 16.1 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ContainerComponents.js";
import { Actions, Card, Frame, Scrollbox, LabeledButton } from '../../..';
import Library from '../Library';
import Next from '../LibraryNext';
import { SampleListElements } from './samples';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function ContainerComponents() {
return _jsxDEV(Library.Page, {
title: "Containers",
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: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 13
}, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", {
children: "frontend-shared"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 13
}, this), ". Use re-implemented", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 13
}, this), " component in the layout group instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), _jsxDEV(Next.ChangelogItem, {
status: "deprecated",
children: ["The legacy implementation of", _jsxDEV("s", {
children: _jsxDEV("code", {
children: "Scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 13
}, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", {
children: "frontend-shared"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}, this), ". Use re-implemented", _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 13
}, this), " component in the data display group instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Frame",
children: _jsxDEV(Library.Example, {
title: "Laying out content in a Frame",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Frame"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 17
}, this), " component renders content inside of a", ' ', _jsxDEV("code", {
children: "frame"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 13
}, this), " design pattern."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Frame, {
children: [_jsxDEV("div", {
children: "This content is inside of a frame."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 15
}, this), _jsxDEV("div", {
children: "This content is inside of a frame."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Card",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 15
}, this), " component pattern provides a card-like layout using the ", _jsxDEV("code", {
children: "card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 21
}, this), " pattern."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Laying out content in a Card",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Card, {
children: [_jsxDEV("div", {
children: "This content is inside of a card."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 15
}, this), _jsxDEV("div", {
children: "This content is inside of a card."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Overriding styles",
children: [_jsxDEV("p", {
children: ["This example shows overriding the background color of a", ' ', _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this), " using a utility class."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Card, {
classes: "bg-grey-3",
children: [_jsxDEV("div", {
children: "This content is inside of a card."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 15
}, this), _jsxDEV("div", {
children: "This content is inside of a card."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Actions",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Actions"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 15
}, this), " component pattern lays out actions (buttons)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Laying out buttons with Actions",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Actions, {
children: [_jsxDEV(LabeledButton, {
children: "Cancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 15
}, this), _jsxDEV(LabeledButton, {
children: "Maybe"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 15
}, this), _jsxDEV(LabeledButton, {
variant: "primary",
children: "OK"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Laying out buttons vertically with Actions",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Actions, {
direction: "column",
children: [_jsxDEV(LabeledButton, {
children: "This is one option"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 15
}, this), _jsxDEV(LabeledButton, {
children: "This is another option"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 15
}, this), _jsxDEV(LabeledButton, {
variant: "primary",
children: "This is the best option"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Scrollbox",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 15
}, this), " component is a container for (potentially-) overflowing content. It provides a scroll context and is styled with the ", _jsxDEV("code", {
children: "scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 15
}, this), " pattern."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
variant: "wide",
children: [_jsxDEV("p", {
children: ["A ", _jsxDEV("code", {
children: "Scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 15
}, this), " will fill its available space. Constraints to that space need to be applied to a parent element. Here a parent element is set to a width and height."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Basic scrollbox",
withSource: true,
children: _jsxDEV("div", {
style: "height:250px;max-height:250px;width:200px",
children: _jsxDEV(Scrollbox, {
children: _jsxDEV("ul", {
className: "p-3 space-y-4",
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Scrollbox with header",
withSource: true,
children: _jsxDEV("div", {
style: "height:250px;max-height:250px;width:200px",
children: _jsxDEV(Scrollbox, {
withHeader: true,
children: [_jsxDEV("div", {
className: "hyp-sticky-header",
children: _jsxDEV("div", {
className: "hyp-sticky-header__heading",
children: "NATO Alphabet"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 17
}, this), _jsxDEV("ul", {
className: "p-3 pt-0 space-y-4",
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ContainerComponents.js.map