@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
283 lines • 9.65 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/ScrollBoxPage.js";
import { ScrollBox } 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 ScrollBoxPage() {
return _jsxDEV(Library.Page, {
title: "ScrollBox",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 13
}, this), " is an opinionated composite component that provides a shorthand for styling scrollable content."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["For more custom control over scrolling content, see", ' ', _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 13
}, this), " and its allies."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this)]
}, void 0, true),
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 11
}, this), " is a re-implementation of the legacy component", ' ', _jsxDEV("code", {
children: "Scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}, this), " (note casing change)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Migrating to this component",
children: _jsxDEV(Next.Changelog, {
children: [_jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: [_jsxDEV("strong", {
children: "Watch out!"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this), " The casing of this ", "component's", ' ', "name has changed:", _jsxDEV("s", {
children: _jsxDEV("code", {
children: "Scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 15
}, this), ' ', "\u279C ", _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop:", _jsxDEV("s", {
children: _jsxDEV("code", {
children: "withHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 15
}, this), ' ', "\u279C No longer supported. Use ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 42
}, this), " components directly to add header-like non-scrolling content."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop:", _jsxDEV("s", {
children: _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 15
}, this), ' ', "\u279C no longer supported. Use ", _jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 42
}, this), "-family components directly for more customization"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Usage",
children: [_jsxDEV(Next.Usage, {
componentName: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Basic ScrollBox",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[280px] h-[200px]",
children: _jsxDEV(ScrollBox, {
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Border",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 11
}, this), " applies a border to the outer", ' ', _jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 11
}, this), " by default. This can be disabled with the", ' ', _jsxDEV("code", {
children: "borderless"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}, this), " boolean prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Turning off borders",
withSource: true,
children: _jsxDEV("div", {
className: "w-[280px] h-[200px]",
children: _jsxDEV(ScrollBox, {
borderless: true,
children: _jsxDEV("ul", {
children: _jsxDEV(SampleListElements, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 15
}, this)
}, void 0, false, {
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)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ScrollBoxPage.js.map