playbook_ui 14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806 → 14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -3
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -2
  4. data/app/pb_kits/playbook/pb_body/_body.scss +14 -13
  5. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +22 -16
  6. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +6 -0
  7. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +2 -1
  8. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +9 -4
  10. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  11. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  12. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +5 -0
  13. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +7 -2
  14. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +8 -2
  15. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +11 -1
  16. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +16 -2
  17. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  18. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  19. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +44 -36
  21. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +4 -4
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
  24. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
  25. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
  26. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
  31. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
  32. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  33. data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
  34. data/app/pb_kits/playbook/pb_table/index.ts +26 -100
  35. data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -1
  36. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +35 -0
  37. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +106 -1
  38. data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
  39. data/app/pb_kits/playbook/pb_table/table.rb +2 -17
  40. data/app/pb_kits/playbook/pb_title/_title.scss +6 -5
  41. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +13 -0
  42. data/app/pb_kits/playbook/tokens/_titles.scss +0 -8
  43. data/app/pb_kits/playbook/utilities/_hover.scss +11 -2
  44. data/app/pb_kits/playbook/utilities/globalProps.ts +2 -0
  45. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +15 -0
  46. data/dist/chunks/{_typeahead-CCDoUmRR.js → _typeahead-ClJHKLj6.js} +3 -3
  47. data/dist/chunks/_weekday_stacked-DaVTrOfA.js +45 -0
  48. data/dist/chunks/{lib-CVPInSs5.js → lib-CtS0DLMo.js} +3 -3
  49. data/dist/chunks/{pb_form_validation-CDLJ5eAG.js → pb_form_validation-C3vQKj7-.js} +1 -1
  50. data/dist/chunks/vendor.js +1 -1
  51. data/dist/playbook-doc.js +1 -1
  52. data/dist/playbook-rails-react-bindings.js +1 -1
  53. data/dist/playbook-rails.js +1 -1
  54. data/dist/playbook.css +1 -1
  55. data/lib/playbook/hover.rb +7 -1
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +17 -7
  58. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +0 -95
  59. data/dist/chunks/_weekday_stacked-CxjKLoMr.js +0 -45
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md ADDED
@@ -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.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md ADDED
@@ -0,0 +1 @@
1
+ The `collapsibleContent` can also be used to display nested Tables within each Row.
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -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
data/app/pb_kits/playbook/pb_table/docs/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_table/index.ts CHANGED
@@ -1,106 +1,32 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
2
 
3
3
  export default class PbTable extends PbEnhancedElement {
4
- private stickyLeftColumns: string[] = [];
5
- private handleStickyColumnsRef: () => void;
6
-
7
- static get selector(): string {
8
- return '.table-responsive-collapse'
9
- }
10
-
11
- connect(): void {
12
- const tables = document.querySelectorAll('.table-responsive-collapse');
13
- // Each Table
14
- [].forEach.call(tables, (table: HTMLTableElement) => {
15
- // Header Titles
16
- const headers: string[] = [];
17
- [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
18
- const colSpan = header.colSpan
19
- for (let i = 0; i < colSpan; i++) {
20
- headers.push(header.textContent.replace(/\r?\n|\r/, ''));
21
- }
22
- });
23
- // for each row in tbody
24
- [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
25
- // for each cell
26
- [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
27
- // apply the attribute
28
- cell.setAttribute('data-title', headers[headerIndex])
29
- })
30
- })
31
- });
32
-
33
- // New sticky columns logic
34
- this.initStickyColumns();
35
- }
36
-
37
- private initStickyColumns(): void {
38
- // Find tables with sticky-left-column class
39
- const tables = document.querySelectorAll('.sticky-left-column');
40
-
41
- tables.forEach((table) => {
42
- // Extract sticky left column IDs by looking at the component's class
43
- const classList = Array.from(table.classList);
44
-
45
- // Look for classes in the format sticky-left-column-{ids}
46
- const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
47
- if (stickyColumnClass) {
48
- // Extract the IDs from the class name
49
- this.stickyLeftColumns = stickyColumnClass
50
- .replace('sticky-columns-', '')
51
- .split('-');
52
-
53
- if (this.stickyLeftColumns.length > 0) {
54
- this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
55
- this.handleStickyColumns();
56
- window.addEventListener('resize', this.handleStickyColumnsRef);
57
- }
4
+ static get selector(): string {
5
+ return '.table-responsive-collapse'
6
+ }
7
+
8
+ connect(): void {
9
+ const tables = document.querySelectorAll('.table-responsive-collapse');
10
+
11
+ // Each Table
12
+ [].forEach.call(tables, (table: HTMLTableElement) => {
13
+ // Header Titles
14
+ const headers: string[] = [];
15
+ [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
16
+ const colSpan = header.colSpan
17
+ for (let i = 0; i < colSpan; i++) {
18
+ headers.push(header.textContent.replace(/\r?\n|\r/, ''));
58
19
  }
59
20
  });
60
- }
61
-
62
- private handleStickyColumns(): void {
63
- let accumulatedWidth = 0;
64
21
 
65
- this.stickyLeftColumns.forEach((colId, index) => {
66
- const isLastColumn = index === this.stickyLeftColumns.length - 1;
67
- const header = document.querySelector(`th[id="${colId}"]`);
68
- const cells = document.querySelectorAll(`td[id="${colId}"]`);
69
-
70
- if (header) {
71
- header.classList.add('sticky');
72
- (header as HTMLElement).style.left = `${accumulatedWidth}px`;
73
-
74
- if (!isLastColumn) {
75
- header.classList.add('with-border');
76
- header.classList.remove('sticky-shadow');
77
- } else {
78
- header.classList.remove('with-border');
79
- header.classList.add('sticky-shadow');
80
- }
81
-
82
- accumulatedWidth += (header as HTMLElement).offsetWidth;
83
- }
84
-
85
- cells.forEach((cell) => {
86
- cell.classList.add('sticky');
87
- (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
88
-
89
- if (!isLastColumn) {
90
- cell.classList.add('with-border');
91
- cell.classList.remove('sticky-shadow');
92
- } else {
93
- cell.classList.remove('with-border');
94
- cell.classList.add('sticky-shadow');
95
- }
96
- });
97
- });
98
- }
99
-
100
- // Cleanup method to remove event listener
101
- disconnect(): void {
102
- if (this.handleStickyColumnsRef) {
103
- window.removeEventListener('resize', this.handleStickyColumnsRef);
104
- }
105
- }
106
- }
22
+ // for each row in tbody
23
+ [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
24
+ // for each cell
25
+ [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
26
+ // apply the attribute
27
+ cell.setAttribute('data-title', headers[headerIndex])
28
+ })
29
+ })
30
+ })
31
+ }
32
+ }
data/app/pb_kits/playbook/pb_table/styles/_all.scss CHANGED
@@ -21,4 +21,5 @@
21
21
  @import "striped";
22
22
  @import "outer_padding";
23
23
  @import "sticky_columns";
24
- @import "scroll";
24
+ @import "scroll";
25
+ @import "collapsible";