@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
808 lines • 29 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/layout/PanelPage.tsx";
import { Panel } from '../../../../';
import { Button, EditIcon, ScrollBox } from '../../../../';
import Library from '../../Library';
import { LoremIpsum } from '../samples';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function PanelPage() {
return _jsxDEV(Library.Page, {
title: "Panel",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 11
}, this), " is a composite component that can be used to create panel-like interfaces. For more nuanced control, use ", _jsxDEV("code", {
children: "Card"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 64
}, this), ' ', "and its allies."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Panel",
withSource: true,
children: _jsxDEV(Panel, {
title: "A simple panel",
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Panels",
children: _jsxDEV(Library.SectionL3, {
title: "Scrolling content",
children: [_jsxDEV("p", {
children: ["If a ", _jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 20
}, this), " is a direct child of an element with a height constraint and the ", _jsxDEV("code", {
children: "scrollable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 41
}, this), " prop is set, its content will scroll if it exceeds the available height. Header and buttons do not scroll."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Scrolling content with `scrollable` prop",
withSource: true,
children: _jsxDEV("div", {
className: "h-[350px]",
children: _jsxDEV(Panel, {
title: "Scrolling content",
scrollable: true,
children: _jsxDEV(LoremIpsum, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["More control can be achieved by using ", _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 53
}, this), " or other scrolling components instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Scrolling certain content",
withSource: true,
children: _jsxDEV("div", {
className: "h-[350px]",
children: _jsxDEV(Panel, {
title: "Scrolling selected content",
buttons: _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
children: "Buttons"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 23
}, this), _jsxDEV(Button, {
children: "do not"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 23
}, this), _jsxDEV(Button, {
variant: "primary",
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 23
}, this)]
}, void 0, true),
children: [_jsxDEV("p", {
children: "This content does not scroll."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 19
}, this), _jsxDEV(ScrollBox, {
children: _jsxDEV(LoremIpsum, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "title",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Panel title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `string`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "required",
children: _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "buttons",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 17
}, this), " to render as available actions in the panel."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `preact.ComponentChildren`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with buttons",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
buttons: _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
children: "Cancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 21
}, this), _jsxDEV(Button, {
variant: "primary",
children: "Do it"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 21
}, this)]
}, void 0, true),
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "fullWidthHeader",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Make the header and its bottom border stretch the full width of the panel."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with fullWidthHeader",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel with full-width header",
fullWidthHeader: true,
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "icon",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["An ", _jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 20
}, this), " to render in the panel header."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with icon",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
icon: EditIcon,
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onClose",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Render a close button and invoke this callback function when it is clicked."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `() => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with close button",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
onClose: () => alert('you clicked it'),
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "paddingSize",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Determine how much padding is used around the content in the panel."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'sm' | 'md' | 'lg' | 'none'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "paddingSize: 'sm'",
paddingSize: "sm",
children: _jsxDEV("div", {
className: "bg-grey-1",
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "paddingSize: 'md'",
paddingSize: "md",
children: _jsxDEV("div", {
className: "bg-grey-1",
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "paddingSize: 'lg'",
paddingSize: "lg",
children: _jsxDEV("div", {
className: "bg-grey-1",
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "No padding",
children: _jsxDEV(Panel, {
title: "paddingSize: 'none'",
paddingSize: "none",
children: _jsxDEV("div", {
className: "bg-grey-1",
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "scrollable",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Make the content in the panel scroll if the panel exceeds height constraints. All scrollable panels have a", ' ', _jsxDEV("code", {
children: "fullWidthHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 17
}, this), " to align with scroll-shadow hints."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "h-[300px]",
children: _jsxDEV(Panel, {
title: "Scrolling panel",
buttons: _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
children: "Cancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 23
}, this), _jsxDEV(Button, {
variant: "primary",
children: "Do it"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 23
}, this)]
}, void 0, true),
scrollable: true,
children: _jsxDEV(LoremIpsum, {
size: "lg"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 265,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 260,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 5
}, this);
}
//# sourceMappingURL=PanelPage.js.map