@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
264 lines • 9.35 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/TablePatterns.js";
import Library from '../Library';
import { SampleTableBody } from './samples';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function TablePatterns() {
return _jsxDEV(Library.Page, {
title: "Tables",
children: [_jsxDEV("p", {
children: ["These ", _jsxDEV("code", {
children: "table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 15
}, this), " patterns support a basic table layout that adapts to available space. They are intended for simpler tabular display: maximum 2 or possibly 3 columns. Remember that", ' ', _jsxDEV("code", {
children: "table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 9
}, this), " content needs to be usable in tight and narrow spaces."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Table",
children: [_jsxDEV(Library.Example, {
title: "Basic table",
variant: "wide",
children: [_jsxDEV("p", {
children: ["By default, a ", _jsxDEV("code", {
children: "table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 27
}, this), " will fill available horizontal space, and will use whatever height is needed to render its rows.", ' ', _jsxDEV("code", {
children: "tr.is-selected"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 13
}, this), " styles a row as selected."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("table", {
className: "hyp-table",
children: [_jsxDEV("thead", {
children: _jsxDEV("tr", {
children: [_jsxDEV("th", {
scope: "col",
className: "hyp-table__header",
children: "Column A"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 19
}, this), _jsxDEV("th", {
scope: "col",
className: "hyp-table__header",
children: "Column B"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 15
}, this), _jsxDEV(SampleTableBody, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Adjusting column widths",
children: [_jsxDEV("p", {
children: ["Table column widths may be adjusted by styling ", _jsxDEV("code", {
children: "thead th"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 60
}, this), ' ', "elements. In this example, the column widths are set to 30% and 70%."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("table", {
className: "hyp-table",
children: [_jsxDEV("thead", {
children: _jsxDEV("tr", {
children: [_jsxDEV("th", {
scope: "col",
className: "hyp-table__header",
style: "width:30%",
children: "Column A"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 19
}, this), _jsxDEV("th", {
scope: "col",
className: "hyp-table__header",
style: "width:70%",
children: "Column B"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 15
}, this), _jsxDEV(SampleTableBody, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Constraining with a scrollbox",
children: [_jsxDEV("p", {
children: ["In this example, the ", _jsxDEV("code", {
children: "table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 34
}, this), " is constrained within a", ' ', _jsxDEV("code", {
children: "scrollbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 13
}, this), " with a ", _jsxDEV("code", {
children: "max-height"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 43
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: "max-height:250px",
className: "hyp-scrollbox--with-header",
children: _jsxDEV("table", {
className: "hyp-table",
children: [_jsxDEV("thead", {
children: _jsxDEV("tr", {
children: [_jsxDEV("th", {
scope: "col",
className: "hyp-table__header",
children: "Column A"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 21
}, this), _jsxDEV("th", {
scope: "col",
className: "hyp-table__header",
children: "Column B"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 17
}, this), _jsxDEV(SampleTableBody, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 7,
columnNumber: 5
}, this);
}
//# sourceMappingURL=TablePatterns.js.map