playbook_ui 13.19.0.pre.alpha.PBNTR207tabledivsupport2261 → 13.19.0.pre.alpha.PBNTR211tablekitsubcomponentsreact2318
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
- data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
- data/app/pb_kits/playbook/pb_table/SubKits/_table_body.tsx +64 -0
- data/app/pb_kits/playbook/pb_table/SubKits/_table_cell.tsx +66 -0
- data/app/pb_kits/playbook/pb_table/SubKits/_table_head.tsx +64 -0
- data/app/pb_kits/playbook/pb_table/SubKits/_table_header.tsx +66 -0
- data/app/pb_kits/playbook/pb_table/SubKits/_table_row.tsx +74 -0
- data/app/pb_kits/playbook/pb_table/SubKits/index.tsx +5 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +13 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +7 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +4 -2
- data/app/pb_kits/playbook/pb_table/table.test.js +142 -1
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
- data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
- data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +18 -3
- data/app/pb_kits/playbook/pb_table/_table_row.tsx +0 -47
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
import {
|
|
4
|
+
buildAriaProps,
|
|
5
|
+
buildCss,
|
|
6
|
+
buildDataProps,
|
|
7
|
+
buildHtmlProps,
|
|
8
|
+
} from "../../utilities/props";
|
|
9
|
+
import { globalProps } from "../../utilities/globalProps";
|
|
10
|
+
|
|
11
|
+
type TableRowPropTypes = {
|
|
12
|
+
aria?: { [key: string]: string };
|
|
13
|
+
children: React.ReactNode[] | React.ReactNode;
|
|
14
|
+
className: string;
|
|
15
|
+
data?: { [key: string]: string };
|
|
16
|
+
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
|
17
|
+
id?: string;
|
|
18
|
+
sideHighlightColor: string;
|
|
19
|
+
tag?: "table" | "div";
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const TableRow = (props: TableRowPropTypes) => {
|
|
23
|
+
const {
|
|
24
|
+
aria = {},
|
|
25
|
+
children,
|
|
26
|
+
className,
|
|
27
|
+
data = {},
|
|
28
|
+
htmlOptions = {},
|
|
29
|
+
id,
|
|
30
|
+
sideHighlightColor = "none",
|
|
31
|
+
tag = "table",
|
|
32
|
+
} = props;
|
|
33
|
+
|
|
34
|
+
const ariaProps = buildAriaProps(aria);
|
|
35
|
+
const dataProps = buildDataProps(data);
|
|
36
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
|
37
|
+
const sideHighlightClass =
|
|
38
|
+
sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
|
|
39
|
+
const classes = classnames(
|
|
40
|
+
buildCss("pb_table_row_kit", sideHighlightClass),
|
|
41
|
+
"pb_table_tr",
|
|
42
|
+
globalProps(props),
|
|
43
|
+
className
|
|
44
|
+
);
|
|
45
|
+
const isTableTag = tag === "table";
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<>
|
|
49
|
+
{isTableTag ? (
|
|
50
|
+
<tr
|
|
51
|
+
{...ariaProps}
|
|
52
|
+
{...dataProps}
|
|
53
|
+
{...htmlProps}
|
|
54
|
+
className={classes}
|
|
55
|
+
id={id}
|
|
56
|
+
>
|
|
57
|
+
{children}
|
|
58
|
+
</tr>
|
|
59
|
+
) : (
|
|
60
|
+
<div
|
|
61
|
+
{...ariaProps}
|
|
62
|
+
{...dataProps}
|
|
63
|
+
{...htmlProps}
|
|
64
|
+
className={classes}
|
|
65
|
+
id={id}
|
|
66
|
+
>
|
|
67
|
+
{children}
|
|
68
|
+
</div>
|
|
69
|
+
)}
|
|
70
|
+
</>
|
|
71
|
+
);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export default TableRow;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as TableHead } from './_table_head';
|
|
2
|
+
export { default as TableHeader } from './_table_header';
|
|
3
|
+
export { default as TableBody } from './_table_body';
|
|
4
|
+
export { default as TableRow } from './_table_row';
|
|
5
|
+
export { default as TableCell } from './_table_cell';
|
|
@@ -3,6 +3,13 @@ import classnames from 'classnames'
|
|
|
3
3
|
import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
4
4
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
5
5
|
import PbTable from '.'
|
|
6
|
+
import {
|
|
7
|
+
TableHead,
|
|
8
|
+
TableHeader,
|
|
9
|
+
TableBody,
|
|
10
|
+
TableRow,
|
|
11
|
+
TableCell,
|
|
12
|
+
} from "./SubKits";
|
|
6
13
|
|
|
7
14
|
type TableProps = {
|
|
8
15
|
aria?: { [key: string]: string },
|
|
@@ -105,4 +112,10 @@ const Table = (props: TableProps) => {
|
|
|
105
112
|
)
|
|
106
113
|
}
|
|
107
114
|
|
|
115
|
+
Table.Head = TableHead
|
|
116
|
+
Table.Header = TableHeader
|
|
117
|
+
Table.Body = TableBody
|
|
118
|
+
Table.Row = TableRow
|
|
119
|
+
Table.Cell = TableCell
|
|
120
|
+
|
|
108
121
|
export default Table
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
|
|
3
3
|
import Table from '../_table'
|
|
4
|
-
import TableRow from '../_table_row'
|
|
5
4
|
|
|
6
5
|
const TableSideHighlight = (props) => {
|
|
7
6
|
return (
|
|
@@ -20,7 +19,7 @@ const TableSideHighlight = (props) => {
|
|
|
20
19
|
</tr>
|
|
21
20
|
</thead>
|
|
22
21
|
<tbody>
|
|
23
|
-
<
|
|
22
|
+
<Table.Row
|
|
24
23
|
sideHighlightColor="product_1_highlight"
|
|
25
24
|
{...props}
|
|
26
25
|
>
|
|
@@ -29,8 +28,8 @@ const TableSideHighlight = (props) => {
|
|
|
29
28
|
<td>{'Value 3'}</td>
|
|
30
29
|
<td>{'Value 4'}</td>
|
|
31
30
|
<td>{'Value 5'}</td>
|
|
32
|
-
</
|
|
33
|
-
<
|
|
31
|
+
</Table.Row>
|
|
32
|
+
<Table.Row
|
|
34
33
|
sideHighlightColor="product_2_highlight"
|
|
35
34
|
{...props}
|
|
36
35
|
>
|
|
@@ -39,8 +38,8 @@ const TableSideHighlight = (props) => {
|
|
|
39
38
|
<td>{'Value 3'}</td>
|
|
40
39
|
<td>{'Value 4'}</td>
|
|
41
40
|
<td>{'Value 5'}</td>
|
|
42
|
-
</
|
|
43
|
-
<
|
|
41
|
+
</Table.Row>
|
|
42
|
+
<Table.Row
|
|
44
43
|
sideHighlightColor="product_3_highlight"
|
|
45
44
|
{...props}
|
|
46
45
|
>
|
|
@@ -49,8 +48,8 @@ const TableSideHighlight = (props) => {
|
|
|
49
48
|
<td>{'Value 3'}</td>
|
|
50
49
|
<td>{'Value 4'}</td>
|
|
51
50
|
<td>{'Value 5'}</td>
|
|
52
|
-
</
|
|
53
|
-
<
|
|
51
|
+
</Table.Row>
|
|
52
|
+
<Table.Row
|
|
54
53
|
sideHighlightColor="none"
|
|
55
54
|
{...props}
|
|
56
55
|
>
|
|
@@ -59,7 +58,7 @@ const TableSideHighlight = (props) => {
|
|
|
59
58
|
<td>{'Value 3'}</td>
|
|
60
59
|
<td>{'Value 4'}</td>
|
|
61
60
|
<td>{'Value 5'}</td>
|
|
62
|
-
</
|
|
61
|
+
</Table.Row>
|
|
63
62
|
</tbody>
|
|
64
63
|
</Table>
|
|
65
64
|
|
|
@@ -79,7 +78,7 @@ const TableSideHighlight = (props) => {
|
|
|
79
78
|
</tr>
|
|
80
79
|
</thead>
|
|
81
80
|
<tbody>
|
|
82
|
-
<
|
|
81
|
+
<Table.Row
|
|
83
82
|
sideHighlightColor="success"
|
|
84
83
|
{...props}
|
|
85
84
|
>
|
|
@@ -88,8 +87,8 @@ const TableSideHighlight = (props) => {
|
|
|
88
87
|
<td>{'Value 3'}</td>
|
|
89
88
|
<td>{'Value 4'}</td>
|
|
90
89
|
<td>{'Value 5'}</td>
|
|
91
|
-
</
|
|
92
|
-
<
|
|
90
|
+
</Table.Row>
|
|
91
|
+
<Table.Row
|
|
93
92
|
sideHighlightColor="warning"
|
|
94
93
|
{...props}
|
|
95
94
|
>
|
|
@@ -98,8 +97,8 @@ const TableSideHighlight = (props) => {
|
|
|
98
97
|
<td>{'Value 3'}</td>
|
|
99
98
|
<td>{'Value 4'}</td>
|
|
100
99
|
<td>{'Value 5'}</td>
|
|
101
|
-
</
|
|
102
|
-
<
|
|
100
|
+
</Table.Row>
|
|
101
|
+
<Table.Row
|
|
103
102
|
sideHighlightColor="error"
|
|
104
103
|
{...props}
|
|
105
104
|
>
|
|
@@ -108,8 +107,8 @@ const TableSideHighlight = (props) => {
|
|
|
108
107
|
<td>{'Value 3'}</td>
|
|
109
108
|
<td>{'Value 4'}</td>
|
|
110
109
|
<td>{'Value 5'}</td>
|
|
111
|
-
</
|
|
112
|
-
<
|
|
110
|
+
</Table.Row>
|
|
111
|
+
<Table.Row
|
|
113
112
|
sideHighlightColor="none"
|
|
114
113
|
{...props}
|
|
115
114
|
>
|
|
@@ -118,7 +117,7 @@ const TableSideHighlight = (props) => {
|
|
|
118
117
|
<td>{'Value 3'}</td>
|
|
119
118
|
<td>{'Value 4'}</td>
|
|
120
119
|
<td>{'Value 5'}</td>
|
|
121
|
-
</
|
|
120
|
+
</Table.Row>
|
|
122
121
|
</tbody>
|
|
123
122
|
</Table>
|
|
124
123
|
|
|
@@ -138,7 +137,7 @@ const TableSideHighlight = (props) => {
|
|
|
138
137
|
</tr>
|
|
139
138
|
</thead>
|
|
140
139
|
<tbody>
|
|
141
|
-
<
|
|
140
|
+
<Table.Row
|
|
142
141
|
sideHighlightColor="category_1"
|
|
143
142
|
{...props}
|
|
144
143
|
>
|
|
@@ -147,8 +146,8 @@ const TableSideHighlight = (props) => {
|
|
|
147
146
|
<td>{'Value 3'}</td>
|
|
148
147
|
<td>{'Value 4'}</td>
|
|
149
148
|
<td>{'Value 5'}</td>
|
|
150
|
-
</
|
|
151
|
-
<
|
|
149
|
+
</Table.Row>
|
|
150
|
+
<Table.Row
|
|
152
151
|
sideHighlightColor="category_2"
|
|
153
152
|
{...props}
|
|
154
153
|
>
|
|
@@ -157,8 +156,8 @@ const TableSideHighlight = (props) => {
|
|
|
157
156
|
<td>{'Value 3'}</td>
|
|
158
157
|
<td>{'Value 4'}</td>
|
|
159
158
|
<td>{'Value 5'}</td>
|
|
160
|
-
</
|
|
161
|
-
<
|
|
159
|
+
</Table.Row>
|
|
160
|
+
<Table.Row
|
|
162
161
|
sideHighlightColor="category_3"
|
|
163
162
|
{...props}
|
|
164
163
|
>
|
|
@@ -167,8 +166,8 @@ const TableSideHighlight = (props) => {
|
|
|
167
166
|
<td>{'Value 3'}</td>
|
|
168
167
|
<td>{'Value 4'}</td>
|
|
169
168
|
<td>{'Value 5'}</td>
|
|
170
|
-
</
|
|
171
|
-
<
|
|
169
|
+
</Table.Row>
|
|
170
|
+
<Table.Row
|
|
172
171
|
sideHighlightColor="none"
|
|
173
172
|
{...props}
|
|
174
173
|
>
|
|
@@ -177,7 +176,7 @@ const TableSideHighlight = (props) => {
|
|
|
177
176
|
<td>{'Value 3'}</td>
|
|
178
177
|
<td>{'Value 4'}</td>
|
|
179
178
|
<td>{'Value 5'}</td>
|
|
180
|
-
</
|
|
179
|
+
</Table.Row>
|
|
181
180
|
</tbody>
|
|
182
181
|
</Table>
|
|
183
182
|
</div>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
2
|
+
<%= pb_rails("table/table_head") do %>
|
|
3
|
+
<%= pb_rails("table/table_row") do %>
|
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("table/table_body") do %>
|
|
12
|
+
<%= pb_rails("table/table_row") do %>
|
|
13
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("table/table_row") do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<%= pb_rails("table/table_row") do %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Table from '../_table'
|
|
4
|
+
|
|
5
|
+
const TableWithSubcomponents = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<Table
|
|
8
|
+
size="sm"
|
|
9
|
+
{...props}
|
|
10
|
+
>
|
|
11
|
+
<Table.Head>
|
|
12
|
+
<Table.Row>
|
|
13
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
14
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
15
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
16
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
|
17
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
|
18
|
+
</Table.Row>
|
|
19
|
+
</Table.Head>
|
|
20
|
+
<Table.Body>
|
|
21
|
+
<Table.Row>
|
|
22
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
23
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
24
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
25
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
26
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
27
|
+
</Table.Row>
|
|
28
|
+
<Table.Row>
|
|
29
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
30
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
31
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
32
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
33
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
34
|
+
</Table.Row>
|
|
35
|
+
<Table.Row>
|
|
36
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
37
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
38
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
39
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
40
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
41
|
+
</Table.Row>
|
|
42
|
+
</Table.Body>
|
|
43
|
+
</Table>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export default TableWithSubcomponents
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
|
|
2
|
+
<%= pb_rails("table/table_head", props: {tag:"div"}) do %>
|
|
3
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("table/table_body", props: {tag:"div"}) do %>
|
|
12
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
13
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
20
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
|
|
21
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
|
|
22
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
|
|
23
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
|
|
24
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
|
|
25
|
+
<% end %>
|
|
26
|
+
<%= pb_rails("table/table_row", props: {tag:"div"}) do %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Table from '../_table'
|
|
4
|
+
|
|
5
|
+
const TableWithSubcomponentsAsDivs = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<Table
|
|
8
|
+
size="sm"
|
|
9
|
+
tag="div"
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<Table.Head tag="div">
|
|
13
|
+
<Table.Row tag="div">
|
|
14
|
+
<Table.Header tag="div">{'Column 1'}</Table.Header>
|
|
15
|
+
<Table.Header tag="div">{'Column 2'}</Table.Header>
|
|
16
|
+
<Table.Header tag="div">{'Column 3'}</Table.Header>
|
|
17
|
+
<Table.Header tag="div">{'Column 4'}</Table.Header>
|
|
18
|
+
<Table.Header tag="div">{'Column 5'}</Table.Header>
|
|
19
|
+
</Table.Row>
|
|
20
|
+
</Table.Head>
|
|
21
|
+
<Table.Body tag="div">
|
|
22
|
+
<Table.Row tag="div">
|
|
23
|
+
<Table.Cell tag="div">{'Value 1'}</Table.Cell>
|
|
24
|
+
<Table.Cell tag="div">{'Value 2'}</Table.Cell>
|
|
25
|
+
<Table.Cell tag="div">{'Value 3'}</Table.Cell>
|
|
26
|
+
<Table.Cell tag="div">{'Value 4'}</Table.Cell>
|
|
27
|
+
<Table.Cell tag="div">{'Value 5'}</Table.Cell>
|
|
28
|
+
</Table.Row>
|
|
29
|
+
<Table.Row tag="div">
|
|
30
|
+
<Table.Cell tag="div">{'Value 1'}</Table.Cell>
|
|
31
|
+
<Table.Cell tag="div">{'Value 2'}</Table.Cell>
|
|
32
|
+
<Table.Cell tag="div">{'Value 3'}</Table.Cell>
|
|
33
|
+
<Table.Cell tag="div">{'Value 4'}</Table.Cell>
|
|
34
|
+
<Table.Cell tag="div">{'Value 5'}</Table.Cell>
|
|
35
|
+
</Table.Row>
|
|
36
|
+
<Table.Row>
|
|
37
|
+
<Table.Cell tag="div">{'Value 1'}</Table.Cell>
|
|
38
|
+
<Table.Cell tag="div">{'Value 2'}</Table.Cell>
|
|
39
|
+
<Table.Cell tag="div">{'Value 3'}</Table.Cell>
|
|
40
|
+
<Table.Cell tag="div">{'Value 4'}</Table.Cell>
|
|
41
|
+
<Table.Cell tag="div">{'Value 5'}</Table.Cell>
|
|
42
|
+
</Table.Row>
|
|
43
|
+
</Table.Body>
|
|
44
|
+
</Table>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default TableWithSubcomponentsAsDivs
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
|
-
-
|
|
3
|
+
- table_with_subcomponents: Table with Sub Components (Table Elements)
|
|
4
|
+
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
5
|
+
# - table_div: Div
|
|
4
6
|
- table_sm: Small
|
|
5
7
|
- table_md: Medium
|
|
6
8
|
- table_lg: Large
|
|
@@ -27,7 +29,7 @@ examples:
|
|
|
27
29
|
- table_striped: Striped Table
|
|
28
30
|
|
|
29
31
|
react:
|
|
30
|
-
- table_div: Div
|
|
32
|
+
# - table_div: Div
|
|
31
33
|
- table_sm: Small
|
|
32
34
|
- table_md: Medium
|
|
33
35
|
- table_lg: Large
|
|
@@ -51,3 +53,6 @@ examples:
|
|
|
51
53
|
- table_with_background_kit: Table With Background Kit
|
|
52
54
|
- table_vertical_border: Vertical Borders
|
|
53
55
|
- table_striped: Striped Table
|
|
56
|
+
- table_with_subcomponents: Table with Sub Components (Table Elements)
|
|
57
|
+
- table_with_subcomponents_as_divs: Table with Sub Components (Divs)
|
|
58
|
+
|
|
@@ -22,3 +22,5 @@ export { default as TableWithBackgroundKit } from './_table_with_background_kit.
|
|
|
22
22
|
export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
|
|
23
23
|
export { default as TableStriped } from './_table_striped.jsx'
|
|
24
24
|
export { default as TableDiv } from './_table_div.jsx'
|
|
25
|
+
export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
|
|
26
|
+
export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[class^=pb_table] {
|
|
2
2
|
&.striped {
|
|
3
3
|
tbody, .pb_table_tbody {
|
|
4
|
-
tr:nth-child(odd), .
|
|
4
|
+
tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
|
|
5
5
|
background-color: $bg_light;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
&.dark {
|
|
11
11
|
&.striped {
|
|
12
12
|
tbody, .pb_table_tbody {
|
|
13
|
-
tr:nth-child(odd), .
|
|
13
|
+
tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
|
|
14
14
|
background-color: $bg_dark;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
&.data_table {
|
|
51
|
-
thead tr th
|
|
51
|
+
thead tr th,
|
|
52
|
+
.pb_table_thead .pb_table_tr .pb_table_th {
|
|
52
53
|
padding-top: $cell-pad-sm;
|
|
53
54
|
padding-bottom: $cell-pad-sm;
|
|
54
55
|
&:first-child {
|
|
@@ -58,7 +59,8 @@
|
|
|
58
59
|
padding-right: $cell-pad-sm;
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
|
-
tbody tr td
|
|
62
|
+
tbody tr td,
|
|
63
|
+
.pb_table_tbody .pb_table_tr .pb_table_td {
|
|
62
64
|
padding-top: $cell-pad-sm;
|
|
63
65
|
padding-bottom: $cell-pad-sm;
|
|
64
66
|
&:first-child {
|
|
@@ -1,7 +1,58 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
|
|
2
3
|
|
|
3
4
|
import Table from "./_table"
|
|
4
5
|
|
|
6
|
+
const DivsTable = () => {
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<Table
|
|
10
|
+
data={{testid: "table"}}
|
|
11
|
+
size="sm"
|
|
12
|
+
tag="div"
|
|
13
|
+
>
|
|
14
|
+
<Table.Head tag="div">
|
|
15
|
+
<Table.Row tag="div">
|
|
16
|
+
<Table.Header tag="div">{"Column 1"}</Table.Header>
|
|
17
|
+
<Table.Header tag="div">{"Column 2"}</Table.Header>
|
|
18
|
+
</Table.Row>
|
|
19
|
+
</Table.Head>
|
|
20
|
+
<Table.Body tag="div">
|
|
21
|
+
<Table.Row tag="div">
|
|
22
|
+
<Table.Cell tag="div">{"Value 1"}</Table.Cell>
|
|
23
|
+
<Table.Cell tag="div">{"Value 2"}</Table.Cell>
|
|
24
|
+
</Table.Row>
|
|
25
|
+
</Table.Body>
|
|
26
|
+
</Table>
|
|
27
|
+
</>
|
|
28
|
+
);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const TableTagTable = () => {
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<Table
|
|
35
|
+
data={{testid: "table"}}
|
|
36
|
+
size="sm"
|
|
37
|
+
>
|
|
38
|
+
<Table.Head>
|
|
39
|
+
<Table.Row>
|
|
40
|
+
<Table.Header>{"Column 1"}</Table.Header>
|
|
41
|
+
<Table.Header>{"Column 2"}</Table.Header>
|
|
42
|
+
</Table.Row>
|
|
43
|
+
</Table.Head>
|
|
44
|
+
<Table.Body>
|
|
45
|
+
<Table.Row>
|
|
46
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
47
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
48
|
+
</Table.Row>
|
|
49
|
+
</Table.Body>
|
|
50
|
+
</Table>
|
|
51
|
+
</>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
|
|
5
56
|
const props = {
|
|
6
57
|
data: { testid: "table" },
|
|
7
58
|
sticky: false
|
|
@@ -20,3 +71,93 @@ test("when striped is true", () => {
|
|
|
20
71
|
const kit = renderKit(Table, props, { striped: true })
|
|
21
72
|
expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card striped table-collapse-sm")
|
|
22
73
|
})
|
|
74
|
+
|
|
75
|
+
test("Renders Table.Head subkit for Div Table", () => {
|
|
76
|
+
render (<DivsTable/>)
|
|
77
|
+
|
|
78
|
+
const kit = screen.getByTestId("table")
|
|
79
|
+
const head = kit.querySelector(".pb_table_thead")
|
|
80
|
+
expect(head).toBeInTheDocument()
|
|
81
|
+
expect(head.tagName).toBe("DIV")
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
test("Renders Table.Header subkit for Div Table", () => {
|
|
85
|
+
render (<DivsTable/>)
|
|
86
|
+
|
|
87
|
+
const kit = screen.getByTestId("table")
|
|
88
|
+
const head = kit.querySelector(".pb_table_th")
|
|
89
|
+
expect(head).toBeInTheDocument()
|
|
90
|
+
expect(head.tagName).toBe("DIV")
|
|
91
|
+
})
|
|
92
|
+
|
|
93
|
+
test("Renders Table.Body subkit for Div Table", () => {
|
|
94
|
+
render (<DivsTable/>)
|
|
95
|
+
|
|
96
|
+
const kit = screen.getByTestId("table")
|
|
97
|
+
const head = kit.querySelector(".pb_table_tbody")
|
|
98
|
+
expect(head).toBeInTheDocument()
|
|
99
|
+
expect(head.tagName).toBe("DIV")
|
|
100
|
+
})
|
|
101
|
+
|
|
102
|
+
test("Renders Table.Row subkit for Div Table", () => {
|
|
103
|
+
render (<DivsTable/>)
|
|
104
|
+
|
|
105
|
+
const kit = screen.getByTestId("table")
|
|
106
|
+
const head = kit.querySelector(".pb_table_tr")
|
|
107
|
+
expect(head).toBeInTheDocument()
|
|
108
|
+
expect(head.tagName).toBe("DIV")
|
|
109
|
+
})
|
|
110
|
+
|
|
111
|
+
test("Renders Table.Cell subkit for Div Table", () => {
|
|
112
|
+
render (<DivsTable/>)
|
|
113
|
+
|
|
114
|
+
const kit = screen.getByTestId("table")
|
|
115
|
+
const head = kit.querySelector(".pb_table_td")
|
|
116
|
+
expect(head).toBeInTheDocument()
|
|
117
|
+
expect(head.tagName).toBe("DIV")
|
|
118
|
+
})
|
|
119
|
+
|
|
120
|
+
test("Renders Table.Head subkit for HTML Table elements Table", () => {
|
|
121
|
+
render (<TableTagTable/>)
|
|
122
|
+
|
|
123
|
+
const kit = screen.getByTestId("table")
|
|
124
|
+
const head = kit.querySelector(".pb_table_thead")
|
|
125
|
+
expect(head).toBeInTheDocument()
|
|
126
|
+
expect(head.tagName).toBe("THEAD")
|
|
127
|
+
})
|
|
128
|
+
|
|
129
|
+
test("Renders Table.Header subkit for HTML Table elements Table", () => {
|
|
130
|
+
render (<TableTagTable/>)
|
|
131
|
+
|
|
132
|
+
const kit = screen.getByTestId("table")
|
|
133
|
+
const head = kit.querySelector(".pb_table_th")
|
|
134
|
+
expect(head).toBeInTheDocument()
|
|
135
|
+
expect(head.tagName).toBe("TH")
|
|
136
|
+
})
|
|
137
|
+
|
|
138
|
+
test("Renders Table.Body subkit for HTML Table elements Table", () => {
|
|
139
|
+
render (<TableTagTable/>)
|
|
140
|
+
|
|
141
|
+
const kit = screen.getByTestId("table")
|
|
142
|
+
const head = kit.querySelector(".pb_table_tbody")
|
|
143
|
+
expect(head).toBeInTheDocument()
|
|
144
|
+
expect(head.tagName).toBe("TBODY")
|
|
145
|
+
})
|
|
146
|
+
|
|
147
|
+
test("Renders Table.Row subkit for HTML Table elements Table", () => {
|
|
148
|
+
render (<TableTagTable/>)
|
|
149
|
+
|
|
150
|
+
const kit = screen.getByTestId("table")
|
|
151
|
+
const head = kit.querySelector(".pb_table_tr")
|
|
152
|
+
expect(head).toBeInTheDocument()
|
|
153
|
+
expect(head.tagName).toBe("TR")
|
|
154
|
+
})
|
|
155
|
+
|
|
156
|
+
test("Renders Table.Cell subkit for HTML Table elements Table", () => {
|
|
157
|
+
render (<TableTagTable/>)
|
|
158
|
+
|
|
159
|
+
const kit = screen.getByTestId("table")
|
|
160
|
+
const head = kit.querySelector(".pb_table_td")
|
|
161
|
+
expect(head).toBeInTheDocument()
|
|
162
|
+
expect(head.tagName).toBe("TD")
|
|
163
|
+
})
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<% if object.tag == "table" %>
|
|
2
|
+
<%= content_tag(:tbody,
|
|
3
|
+
aria: object.aria,
|
|
4
|
+
class: object.classname,
|
|
5
|
+
data: object.data,
|
|
6
|
+
id: object.id) do %>
|
|
7
|
+
<%= content.presence %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% else %>
|
|
10
|
+
<%= content_tag(:div,
|
|
11
|
+
aria: object.aria,
|
|
12
|
+
class: object.classname,
|
|
13
|
+
data: object.data,
|
|
14
|
+
id: object.id) do %>
|
|
15
|
+
<%= content.presence %>
|
|
16
|
+
<% end %>
|
|
17
|
+
<% end %>
|