playbook_ui_docs 14.10.0.pre.rc.12 → 14.10.0.pre.rc.13

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f70ed3dedef8198ab92c537e70e6c26f3d17e3820ac45135b9ca65da2ccfc7e0
4
- data.tar.gz: 372e7bdbe59053deae30e1e48f3899dd54a2f6648cf26351925a20082b96495b
3
+ metadata.gz: a99381781732f6aa6eaccf8cbfc18cca864591a8e326e3f994ef64fa187dd402
4
+ data.tar.gz: 98c969268057708617bd8ee181410acc2662519cadb1ea5d04cb482e21999114
5
5
  SHA512:
6
- metadata.gz: f83138947bc746122d50971f901a1b9e0d83ceaa6cb20cdfbb46d557aa3109b43734d69ca5cb4a47fc0a46032e952a6fa6ab7fdb87c1b6e51a4d5258a36af967
7
- data.tar.gz: 64c3bd3cfb82e752f8673bff2ef6aba7dea3fbec838c6996731b475742826785d0d4d27c27596029c26b17b0535fcec4125dac60f13132e3b6e6511edc5ab857
6
+ metadata.gz: dcc891479496541888ae35dbcb1e4d3713526875e0122c7a4c833eb499c7f466a3d3c0a67e31944fcc4e48be0de618f9af020b98a95884ac8e8d30091522ab28
7
+ data.tar.gz: 4a09bfdc9afbab584a79f825adcaa5e8671010346582488b941a2b29b0a06772baec0fb9074daa1152ef2a2c679ee0eadcb2494d8f9f77f0c14c1b9326f1113f
@@ -0,0 +1,75 @@
1
+ import React from 'react'
2
+ import { Table, Icon, Body, Card } from 'playbook-ui'
3
+
4
+ const TableWithCollapsible = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Card
9
+ borderNone
10
+ borderRadius="none"
11
+ padding="md"
12
+ {...props}
13
+ >
14
+ <Body {...props}>Nested content inside a Table Row</Body>
15
+ </Card>
16
+ );
17
+ };
18
+
19
+ return (
20
+ <Table
21
+ size="sm"
22
+ {...props}
23
+ >
24
+ <Table.Head>
25
+ <Table.Row>
26
+ <Table.Header>{'Column 1'}</Table.Header>
27
+ <Table.Header>{'Column 2'}</Table.Header>
28
+ <Table.Header>{'Column 3'}</Table.Header>
29
+ <Table.Header>{'Column 4'}</Table.Header>
30
+ <Table.Header>{'Column 5'}</Table.Header>
31
+ <Table.Header>{''}</Table.Header>
32
+ </Table.Row>
33
+
34
+ </Table.Head>
35
+ <Table.Body>
36
+ <Table.Row collapsible
37
+ collapsibleContent={<Content/>}
38
+ {...props}
39
+ >
40
+ <Table.Cell>{'Value 1'}</Table.Cell>
41
+ <Table.Cell>{'Value 2'}</Table.Cell>
42
+ <Table.Cell>{'Value 3'}</Table.Cell>
43
+ <Table.Cell>{'Value 4'}</Table.Cell>
44
+ <Table.Cell>{'Value 5'}</Table.Cell>
45
+ <Table.Cell textAlign="right">{
46
+ <Icon
47
+ color="primary"
48
+ fixedWidth
49
+ icon="chevron-down"
50
+ />}
51
+ </Table.Cell>
52
+
53
+ </Table.Row>
54
+ <Table.Row>
55
+ <Table.Cell>{'Value 1'}</Table.Cell>
56
+ <Table.Cell>{'Value 2'}</Table.Cell>
57
+ <Table.Cell>{'Value 3'}</Table.Cell>
58
+ <Table.Cell>{'Value 4'}</Table.Cell>
59
+ <Table.Cell>{'Value 5'}</Table.Cell>
60
+ <Table.Cell>{''}</Table.Cell>
61
+ </Table.Row>
62
+ <Table.Row>
63
+ <Table.Cell>{'Value 1'}</Table.Cell>
64
+ <Table.Cell>{'Value 2'}</Table.Cell>
65
+ <Table.Cell>{'Value 3'}</Table.Cell>
66
+ <Table.Cell>{'Value 4'}</Table.Cell>
67
+ <Table.Cell>{'Value 5'}</Table.Cell>
68
+ <Table.Cell>{''}</Table.Cell>
69
+ </Table.Row>
70
+ </Table.Body>
71
+ </Table>
72
+ )
73
+ }
74
+
75
+ export default TableWithCollapsible
@@ -0,0 +1 @@
1
+ The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
@@ -0,0 +1,108 @@
1
+ import React from 'react'
2
+ import { Table, Card, Icon, Body } from 'playbook-ui'
3
+
4
+ const TableWithCollapsibleWithCustomClick = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Card
9
+ borderNone
10
+ borderRadius="none"
11
+ padding="md"
12
+ {...props}
13
+ >
14
+ <Body {...props}>Nested content inside a Table Row</Body>
15
+ </Card>
16
+ );
17
+ };
18
+
19
+
20
+ return (
21
+ <Table
22
+ size="sm"
23
+ {...props}
24
+ >
25
+ <Table.Head>
26
+ <Table.Row>
27
+ <Table.Header>{'Column 1'}</Table.Header>
28
+ <Table.Header>{'Column 2'}</Table.Header>
29
+ <Table.Header>{'Column 3'}</Table.Header>
30
+ <Table.Header>{'Column 4'}</Table.Header>
31
+ <Table.Header>{'Column 5'}</Table.Header>
32
+ <Table.Header>{''}</Table.Header>
33
+ </Table.Row>
34
+
35
+ </Table.Head>
36
+ <Table.Body>
37
+ <Table.Row collapsible
38
+ collapsibleContent={<Content/>}
39
+ toggleCellId="cell-1"
40
+ {...props}
41
+ >
42
+ <Table.Cell>{'Value 1'}</Table.Cell>
43
+ <Table.Cell>{'Value 2'}</Table.Cell>
44
+ <Table.Cell>{'Value 3'}</Table.Cell>
45
+ <Table.Cell>{'Value 4'}</Table.Cell>
46
+ <Table.Cell>{'Value 5'}</Table.Cell>
47
+ <Table.Cell cursor="pointer"
48
+ id="cell-1"
49
+ textAlign="right"
50
+ >
51
+ <Icon
52
+ color="primary"
53
+ fixedWidth
54
+ icon="chevron-down"
55
+ />
56
+ </Table.Cell>
57
+
58
+ </Table.Row>
59
+ <Table.Row collapsible
60
+ collapsibleContent={<Content/>}
61
+ toggleCellId="cell-2"
62
+ {...props}
63
+ >
64
+ <Table.Cell>{'Value 1'}</Table.Cell>
65
+ <Table.Cell>{'Value 2'}</Table.Cell>
66
+ <Table.Cell>{'Value 3'}</Table.Cell>
67
+ <Table.Cell>{'Value 4'}</Table.Cell>
68
+ <Table.Cell>{'Value 5'}</Table.Cell>
69
+ <Table.Cell cursor="pointer"
70
+ id="cell-2"
71
+ textAlign="right"
72
+ >
73
+ <Icon
74
+ color="primary"
75
+ fixedWidth
76
+ icon="chevron-down"
77
+ />
78
+ </Table.Cell>
79
+
80
+ </Table.Row>
81
+ <Table.Row collapsible
82
+ collapsibleContent={<Content/>}
83
+ toggleCellId="cell-3"
84
+ {...props}
85
+ >
86
+ <Table.Cell>{'Value 1'}</Table.Cell>
87
+ <Table.Cell>{'Value 2'}</Table.Cell>
88
+ <Table.Cell>{'Value 3'}</Table.Cell>
89
+ <Table.Cell>{'Value 4'}</Table.Cell>
90
+ <Table.Cell>{'Value 5'}</Table.Cell>
91
+ <Table.Cell cursor="pointer"
92
+ id="cell-3"
93
+ textAlign="right"
94
+ >
95
+ <Icon
96
+ color="primary"
97
+ fixedWidth
98
+ icon="chevron-down"
99
+ />
100
+ </Table.Cell>
101
+
102
+ </Table.Row>
103
+ </Table.Body>
104
+ </Table>
105
+ )
106
+ }
107
+
108
+ export default TableWithCollapsibleWithCustomClick
@@ -0,0 +1,2 @@
1
+ When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
2
+ __NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.
@@ -0,0 +1,94 @@
1
+ import React from 'react'
2
+ import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
3
+
4
+ const TableWithCollapsibleWithCustomContent = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Card
9
+ borderNone
10
+ borderRadius="none"
11
+ color="light"
12
+ paddingX="xl"
13
+ paddingY="md"
14
+ {...props}
15
+ >
16
+ <Body paddingBottom="sm"
17
+ text="Expanded Custom Layout"
18
+ {...props}
19
+ />
20
+ <Flex justify="between">
21
+ <Image
22
+ url="https://via.placeholder.com/150"
23
+ />
24
+ <Image
25
+ url="https://via.placeholder.com/150"
26
+ />
27
+ <Image
28
+ url="https://via.placeholder.com/150"
29
+ />
30
+ <Image
31
+ url="https://via.placeholder.com/150"
32
+ />
33
+ </Flex>
34
+ </Card>
35
+ );
36
+ };
37
+
38
+ return (
39
+ <Table
40
+ size="sm"
41
+ {...props}
42
+ >
43
+ <Table.Head>
44
+ <Table.Row>
45
+ <Table.Header>{'Column 1'}</Table.Header>
46
+ <Table.Header>{'Column 2'}</Table.Header>
47
+ <Table.Header>{'Column 3'}</Table.Header>
48
+ <Table.Header>{'Column 4'}</Table.Header>
49
+ <Table.Header>{'Column 5'}</Table.Header>
50
+ <Table.Header>{''}</Table.Header>
51
+ </Table.Row>
52
+
53
+ </Table.Head>
54
+ <Table.Body>
55
+ <Table.Row collapsible
56
+ collapsibleContent={<Content/>}
57
+ {...props}
58
+ >
59
+ <Table.Cell>{'Value 1'}</Table.Cell>
60
+ <Table.Cell>{'Value 2'}</Table.Cell>
61
+ <Table.Cell>{'Value 3'}</Table.Cell>
62
+ <Table.Cell>{'Value 4'}</Table.Cell>
63
+ <Table.Cell>{'Value 5'}</Table.Cell>
64
+ <Table.Cell textAlign="right">{
65
+ <Icon
66
+ color="primary"
67
+ fixedWidth
68
+ icon="chevron-down"
69
+ />}
70
+ </Table.Cell>
71
+
72
+ </Table.Row>
73
+ <Table.Row>
74
+ <Table.Cell>{'Value 1'}</Table.Cell>
75
+ <Table.Cell>{'Value 2'}</Table.Cell>
76
+ <Table.Cell>{'Value 3'}</Table.Cell>
77
+ <Table.Cell>{'Value 4'}</Table.Cell>
78
+ <Table.Cell>{'Value 5'}</Table.Cell>
79
+ <Table.Cell>{''}</Table.Cell>
80
+ </Table.Row>
81
+ <Table.Row>
82
+ <Table.Cell>{'Value 1'}</Table.Cell>
83
+ <Table.Cell>{'Value 2'}</Table.Cell>
84
+ <Table.Cell>{'Value 3'}</Table.Cell>
85
+ <Table.Cell>{'Value 4'}</Table.Cell>
86
+ <Table.Cell>{'Value 5'}</Table.Cell>
87
+ <Table.Cell>{''}</Table.Cell>
88
+ </Table.Row>
89
+ </Table.Body>
90
+ </Table>
91
+ )
92
+ }
93
+
94
+ export default TableWithCollapsibleWithCustomContent
@@ -0,0 +1,83 @@
1
+ import React from 'react'
2
+ import { Table, Background, Icon } from 'playbook-ui'
3
+
4
+ const TableWithCollapsibleWithNestedRows = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Table
9
+ borderRadius="none"
10
+ container={false}
11
+ size="sm"
12
+ {...props}
13
+ >
14
+ <Background tag="tr"
15
+ {...props}
16
+ >
17
+ <Table.Cell>Expanded</Table.Cell>
18
+ <Table.Cell>Expanded</Table.Cell>
19
+ <Table.Cell>Expanded</Table.Cell>
20
+ <Table.Cell>Expanded</Table.Cell>
21
+ <Table.Cell>Expanded</Table.Cell>
22
+ </Background>
23
+ </Table>
24
+ );
25
+ };
26
+
27
+ return (
28
+ <Table
29
+ size="sm"
30
+ {...props}
31
+ >
32
+ <Table.Head>
33
+ <Table.Row>
34
+ <Table.Header>{'Column 1'}</Table.Header>
35
+ <Table.Header>{'Column 2'}</Table.Header>
36
+ <Table.Header>{'Column 3'}</Table.Header>
37
+ <Table.Header>{'Column 4'}</Table.Header>
38
+ <Table.Header>{'Column 5'}</Table.Header>
39
+ <Table.Header>{''}</Table.Header>
40
+ </Table.Row>
41
+
42
+ </Table.Head>
43
+ <Table.Body>
44
+ <Table.Row collapsible
45
+ collapsibleContent={<Content/>}
46
+ collapsibleSideHighlight={false}
47
+ >
48
+ <Table.Cell>{'Value 1'}</Table.Cell>
49
+ <Table.Cell>{'Value 2'}</Table.Cell>
50
+ <Table.Cell>{'Value 3'}</Table.Cell>
51
+ <Table.Cell>{'Value 4'}</Table.Cell>
52
+ <Table.Cell>{'Value 5'}</Table.Cell>
53
+ <Table.Cell textAlign="right">{
54
+ <Icon
55
+ color="primary"
56
+ fixedWidth
57
+ icon="chevron-down"
58
+ />}
59
+ </Table.Cell>
60
+
61
+ </Table.Row>
62
+ <Table.Row>
63
+ <Table.Cell>{'Value 1'}</Table.Cell>
64
+ <Table.Cell>{'Value 2'}</Table.Cell>
65
+ <Table.Cell>{'Value 3'}</Table.Cell>
66
+ <Table.Cell>{'Value 4'}</Table.Cell>
67
+ <Table.Cell>{'Value 5'}</Table.Cell>
68
+ <Table.Cell>{''}</Table.Cell>
69
+ </Table.Row>
70
+ <Table.Row>
71
+ <Table.Cell>{'Value 1'}</Table.Cell>
72
+ <Table.Cell>{'Value 2'}</Table.Cell>
73
+ <Table.Cell>{'Value 3'}</Table.Cell>
74
+ <Table.Cell>{'Value 4'}</Table.Cell>
75
+ <Table.Cell>{'Value 5'}</Table.Cell>
76
+ <Table.Cell>{''}</Table.Cell>
77
+ </Table.Row>
78
+ </Table.Body>
79
+ </Table>
80
+ )
81
+ }
82
+
83
+ export default TableWithCollapsibleWithNestedRows
@@ -0,0 +1,3 @@
1
+ The `collapsibleContent` can display any content, including nested Table Rows.
2
+
3
+ Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
@@ -0,0 +1,120 @@
1
+ import React from 'react'
2
+ import {Pill, Background, Table, Icon} from "playbook-ui"
3
+
4
+ const TableWithCollapsibleWithNestedTable = (props) => {
5
+
6
+ const Content = () => {
7
+ return (
8
+ <Table
9
+ borderRadius="none"
10
+ container={false}
11
+ size="sm"
12
+ {...props}
13
+ >
14
+ <Table.Head>
15
+ <Background
16
+ tag="tr"
17
+ {...props}
18
+ >
19
+ <Table.Header>{"Alt Header"}</Table.Header>
20
+ <Table.Header>{"Alt Header"}</Table.Header>
21
+ <Table.Header>{"Alt Header"}</Table.Header>
22
+ <Table.Header>{"Alt Header"}</Table.Header>
23
+ </Background>
24
+ </Table.Head>
25
+ <Table.Body>
26
+ <Table.Row>
27
+ <Table.Cell>{"Expanded"}</Table.Cell>
28
+ <Table.Cell>{"Expanded"}</Table.Cell>
29
+ <Table.Cell>{"Expanded"}</Table.Cell>
30
+ <Table.Cell>
31
+ <Pill text="Pill"
32
+ variant="primary"
33
+ {...props}
34
+ />
35
+ </Table.Cell>
36
+ </Table.Row>
37
+ <Table.Row>
38
+ <Table.Cell>{"Expanded"}</Table.Cell>
39
+ <Table.Cell>{"Expanded"}</Table.Cell>
40
+ <Table.Cell>{"Expanded"}</Table.Cell>
41
+ <Table.Cell>
42
+ <Pill text="Pill"
43
+ variant="primary"
44
+ {...props}
45
+ />
46
+ </Table.Cell>
47
+ </Table.Row>
48
+ <Table.Row>
49
+ <Table.Cell>{"Expanded"}</Table.Cell>
50
+ <Table.Cell>{"Expanded"}</Table.Cell>
51
+ <Table.Cell>{"Expanded"}</Table.Cell>
52
+ <Table.Cell>
53
+ <Pill text="Pill"
54
+ variant="primary"
55
+ {...props}
56
+ />
57
+ </Table.Cell>
58
+ </Table.Row>
59
+ </Table.Body>
60
+ </Table>
61
+ );
62
+ };
63
+
64
+ return (
65
+ <Table
66
+ size="sm"
67
+ {...props}
68
+ >
69
+ <Table.Head>
70
+ <Table.Row>
71
+ <Table.Header>{'Column 1'}</Table.Header>
72
+ <Table.Header>{'Column 2'}</Table.Header>
73
+ <Table.Header>{'Column 3'}</Table.Header>
74
+ <Table.Header>{'Column 4'}</Table.Header>
75
+ <Table.Header>{'Column 5'}</Table.Header>
76
+ <Table.Header>{''}</Table.Header>
77
+ </Table.Row>
78
+
79
+ </Table.Head>
80
+ <Table.Body>
81
+ <Table.Row collapsible
82
+ collapsibleContent={<Content/>}
83
+ collapsibleSideHighlight={false}
84
+ >
85
+ <Table.Cell>{'Value 1'}</Table.Cell>
86
+ <Table.Cell>{'Value 2'}</Table.Cell>
87
+ <Table.Cell>{'Value 3'}</Table.Cell>
88
+ <Table.Cell>{'Value 4'}</Table.Cell>
89
+ <Table.Cell>{'Value 5'}</Table.Cell>
90
+ <Table.Cell textAlign="right">{
91
+ <Icon
92
+ color="primary"
93
+ fixedWidth
94
+ icon="chevron-down"
95
+ />}
96
+ </Table.Cell>
97
+
98
+ </Table.Row>
99
+ <Table.Row>
100
+ <Table.Cell>{'Value 1'}</Table.Cell>
101
+ <Table.Cell>{'Value 2'}</Table.Cell>
102
+ <Table.Cell>{'Value 3'}</Table.Cell>
103
+ <Table.Cell>{'Value 4'}</Table.Cell>
104
+ <Table.Cell>{'Value 5'}</Table.Cell>
105
+ <Table.Cell>{''}</Table.Cell>
106
+ </Table.Row>
107
+ <Table.Row>
108
+ <Table.Cell>{'Value 1'}</Table.Cell>
109
+ <Table.Cell>{'Value 2'}</Table.Cell>
110
+ <Table.Cell>{'Value 3'}</Table.Cell>
111
+ <Table.Cell>{'Value 4'}</Table.Cell>
112
+ <Table.Cell>{'Value 5'}</Table.Cell>
113
+ <Table.Cell>{''}</Table.Cell>
114
+ </Table.Row>
115
+ </Table.Body>
116
+ </Table>
117
+ )
118
+ }
119
+
120
+ export default TableWithCollapsibleWithNestedTable
@@ -0,0 +1 @@
1
+ The `collapsibleContent` can also be used to display nested Tables within each Row.
@@ -55,3 +55,8 @@ examples:
55
55
  - table_with_subcomponents: Table with Sub Components (Table Elements)
56
56
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
57
57
  - table_outer_padding: Outer Padding
58
+ - table_with_collapsible: Table with Collapsible
59
+ - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
60
+ - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
61
+ - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
62
+ - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
@@ -26,3 +26,8 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
26
26
  export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
27
27
  export { default as TableOuterPadding } from './_table_outer_padding.jsx'
28
28
  export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
29
+ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
30
+ export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
31
+ export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
32
+ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
33
+ export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'