@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
599 lines • 20.7 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/ScrollPage.js";
import { Scroll, ScrollContainer, ScrollContent } from '../../../../next';
import Library from '../../Library';
import Next from '../../LibraryNext';
import { SampleListElements } from '../samples';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function ScrollPage() {
return _jsxDEV(Library.Page, {
title: "Scroll",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 17
}, this), " family of presentational components provide support for customized scrollable content in cases that", ' ', _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 13
}, this), " does not satisfy a use case."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: [_jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 15
}, this), ": Contains its content \u2014 a mix of scrollable and (optionally) non-scrollable content \u2014 to the dimensions of a parent element"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 15
}, this), ": A layout container that scrolls on overflow, with shadows for scroll-hinting"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 13
}, this), _jsxDEV("li", {
children: [_jsxDEV("code", {
children: "ScrollContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 15
}, this), ": Applies consistent spacing and padding to content in a ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 31
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 11
}, this)]
}, void 0, true),
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 11
}, this), ", ", _jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 32
}, this), ", and", ' ', _jsxDEV("code", {
children: "ScrollContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}, this), " are new components modeled after aspects of the legacy ", _jsxDEV("code", {
children: "Scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 22
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Usage",
children: [_jsxDEV(Next.Usage, {
componentName: "Scroll, ScrollContainer, ScrollContent",
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: [_jsxDEV("p", {
children: ["Sizing constraints are dictated by the immediate parent container of the outermost ", _jsxDEV("code", {
children: "Scroll*"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 27
}, this), " component. Here and in following examples, the parent container sets width (", _jsxDEV("code", {
children: "320px"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 56
}, this), ") and height (", _jsxDEV("code", {
children: "200px"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 21
}, this), ")."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Scrolling content",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(ScrollContainer, {
children: _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Scroll",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 11
}, this), " provides a fluid container that scrolls on overflow."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Using Scroll by itself",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Variant",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 13
}, this), "'s", " ", _jsxDEV("code", {
children: "raised"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 20
}, this), " variant (default) renders CSS shadows to hint that content is scrollable. These can be disabled by using the", ' ', _jsxDEV("code", {
children: "flat"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 13
}, this), " variant."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "variant:'raised' (default)",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(Scroll, {
variant: "raised",
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "variant:'flat'",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(Scroll, {
variant: "flat",
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "ScrollContent",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 11
}, this), " puts consistent padding and spacing around content in a ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 24
}, this), " component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Scroll with ScrollContent",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 17
}, this)
}, void 0, false, {
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, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "ScrollContainer",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 11
}, this), " allows the combination of scrolling and non-scrolling content to be constrained to the parent ", "container's", ' ', "dimensions. This is very handy when trying to constrain complex content within, e.g., a modal."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["Only the content within ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 35
}, this), " actually scrolls."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Using ScrollContainer",
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(ScrollContainer, {
children: [_jsxDEV("div", {
className: "p-2 border-b",
children: "Non-scrolling content here"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 17
}, this), _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "p-2 border-t",
children: "More non-scrolling content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Disabling borders",
children: [_jsxDEV("p", {
children: ["Turn off ", _jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 22
}, this), " borders with the", ' ', _jsxDEV("code", {
children: "borderless"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 13
}, this), " boolean prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[320px] h-[200px]",
children: _jsxDEV(ScrollContainer, {
borderless: true,
children: [_jsxDEV("div", {
className: "p-2 border-b",
children: "Non-scrolling content here"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 17
}, this), _jsxDEV(Scroll, {
children: _jsxDEV(ScrollContent, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 23
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ScrollPage.js.map