playbook_ui_docs 14.9.0.pre.alpha.PLAY1660reactdropzone5020 → 14.9.0.pre.alpha.PLAY1731inputmasking4866

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +49 -53
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +36 -29
  4. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +1 -3
  5. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +1 -4
  6. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +0 -2
  8. data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +1 -2
  9. data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +0 -2
  10. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -5
  11. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -5
  12. data/dist/playbook-doc.js +1 -1
  13. metadata +2 -15
  14. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +0 -166
  15. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +0 -89
  16. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +0 -95
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +0 -75
  18. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +0 -1
  19. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +0 -108
  20. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +0 -2
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +0 -94
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +0 -83
  24. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +0 -3
  25. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +0 -120
  26. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +0 -1
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.9.0.pre.alpha.PLAY1660reactdropzone5020
4
+ version: 14.9.0.pre.alpha.PLAY1731inputmasking4866
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-12-19 00:00:00.000000000 Z
12
+ date: 2024-12-10 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -1631,12 +1631,10 @@ files:
1631
1631
  - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.md
1632
1632
  - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb
1633
1633
  - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx
1634
- - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx
1635
1634
  - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
1636
1635
  - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md
1637
1636
  - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx
1638
1637
  - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md
1639
- - app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx
1640
1638
  - app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml
1641
1639
  - app/pb_kits/playbook/pb_skeleton_loading/docs/index.js
1642
1640
  - app/pb_kits/playbook/pb_source/docs/_description.md
@@ -1748,7 +1746,6 @@ files:
1748
1746
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
1749
1747
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
1750
1748
  - app/pb_kits/playbook/pb_table/docs/_table_sticky.md
1751
- - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
1752
1749
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx
1753
1750
  - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md
1754
1751
  - app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb
@@ -1764,16 +1761,6 @@ files:
1764
1761
  - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
1765
1762
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
1766
1763
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
1767
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
1768
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md
1769
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
1770
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
1771
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
1772
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
1773
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx
1774
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md
1775
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx
1776
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
1777
1764
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
1778
1765
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
1779
1766
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx DELETED
@@ -1,166 +0,0 @@
1
- import React from 'react';
2
- import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
3
-
4
- const SortingChangeCallback = (sortOptions) => {
5
- alert(JSON.stringify(sortOptions[0]))
6
- }
7
-
8
- const SkeletonLoadingFilter = (props) => {
9
- const isLoading = true
10
-
11
- const options = [
12
- { value: 'USA' },
13
- { value: 'Canada' },
14
- { value: 'Brazil' },
15
- { value: 'Philippines' },
16
- { value: 'A galaxy far far away, like really far away...' },
17
- ]
18
-
19
- return (
20
- <div>
21
- <div>
22
- {isLoading ? (
23
- <Card
24
- marginBottom="lg"
25
- {...props}
26
- >
27
- <Flex
28
- alignItems="center"
29
- justify="between"
30
- orientation="row"
31
- >
32
- <Flex
33
- alignItems="center"
34
- justify="start"
35
- orientation="row"
36
- >
37
- <SkeletonLoading
38
- borderRadius="rounded"
39
- height="40px"
40
- marginRight="sm"
41
- width="40px"
42
- {...props}
43
- />
44
- <SkeletonLoading
45
- height="16px"
46
- marginRight="md"
47
- width="80px"
48
- {...props}
49
- />
50
- </Flex>
51
- <Flex
52
- alignItems="center"
53
- justify="end"
54
- orientation="row"
55
- >
56
- <SkeletonLoading
57
- height="18px"
58
- width="120px"
59
- {...props}
60
- />
61
- </Flex>
62
- </Flex>
63
- </Card>
64
- ) : (
65
- <Filter
66
- filters={{ 'Full Name': 'John Wick' }}
67
- marginBottom="lg"
68
- minWidth="375px"
69
- results={546}
70
- sortOptions={{
71
- popularity: 'Popularity',
72
- // eslint-disable-next-line
73
- manager_title: 'Manager\'s Title',
74
- // eslint-disable-next-line
75
- manager_name: 'Manager\'s Name',
76
- }}
77
- sortValue={[{ name: 'popularity', dir: 'desc' }]}
78
- >
79
- {({ closePopover }) => (
80
- <form>
81
- <TextInput
82
- label="Example Text Field"
83
- placeholder="Enter Text"
84
- />
85
- <Select
86
- blankSelection="Select One..."
87
- label="Example Collection Select"
88
- name="Collection Select"
89
- options={options}
90
- />
91
- <Flex spacing="between">
92
- <Button
93
- onClick={closePopover}
94
- text="Filter"
95
- />
96
- <Button
97
- text="Defaults"
98
- variant="secondary"
99
- />
100
- </Flex>
101
- </form>
102
- )}
103
- </Filter>
104
- )}
105
- </div>
106
- <div>
107
- {isLoading ? (
108
- <SkeletonLoading
109
- height="127px"
110
- marginBottom="lg"
111
- width="100%"
112
- {...props}
113
- />
114
- ) : (
115
- <Filter
116
- double
117
- filters={{
118
- 'Full Name': 'John Wick',
119
- 'City': 'San Francisco',
120
- }}
121
- marginBottom="xl"
122
- minWidth="375px"
123
- onSortChange={SortingChangeCallback}
124
- results={1}
125
- sortOptions={{
126
- popularity: 'Popularity',
127
- // eslint-disable-next-line
128
- manager_title: 'Manager\'s Title',
129
- // eslint-disable-next-line
130
- manager_name: 'Manager\'s Name',
131
- }}
132
- sortValue={[{ name: 'popularity', dir: 'desc' }]}
133
- >
134
- {({ closePopover }) => (
135
- <form>
136
- <TextInput
137
- label="Full Name"
138
- placeholder="Enter name"
139
- />
140
- <Select
141
- blankSelection="Select One..."
142
- label="Territory"
143
- maxWidth="sm"
144
- name="location"
145
- options={options}
146
- />
147
- <Flex spacing="between">
148
- <Button
149
- onClick={closePopover}
150
- text="Filter"
151
- />
152
- <Button
153
- text="Defaults"
154
- variant="secondary"
155
- />
156
- </Flex>
157
- </form>
158
- )}
159
- </Filter>
160
- )}
161
- </div>
162
- </div>
163
- )
164
- }
165
-
166
- export default SkeletonLoadingFilter;
data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx DELETED
@@ -1,89 +0,0 @@
1
- import React from 'react';
2
- import { Flex, SkeletonLoading, User } from "playbook-ui";
3
-
4
- const SkeletonLoadingUser = (props) => {
5
- const isLoading = true
6
-
7
- return (
8
- <div>
9
- <div>
10
- {isLoading ? (
11
- <Flex alignItems="center">
12
- <SkeletonLoading
13
- borderRadius="rounded"
14
- height="38px"
15
- paddingRight="sm"
16
- width="38px"
17
- {...props}
18
- />
19
- <SkeletonLoading
20
- gap="xxs"
21
- height="18px"
22
- stack="2"
23
- width="161px"
24
- {...props}
25
- />
26
- </Flex>
27
- ) : (
28
- <User
29
- align="left"
30
- avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
31
- name="Anna Black"
32
- orientation="horizontal"
33
- title="Remodeling Consultant"
34
- {...props}
35
- />
36
- )}
37
- </div>
38
- <div>
39
- {isLoading ? (
40
- <Flex
41
- alignItems="start"
42
- paddingTop="md"
43
- >
44
- <Flex
45
- alignItems="center"
46
- flexDirection="column"
47
- >
48
- <SkeletonLoading
49
- borderRadius="rounded"
50
- height="80px"
51
- paddingBottom="xs"
52
- width="80px"
53
- {...props}
54
- />
55
- <SkeletonLoading
56
- height="32px"
57
- paddingBottom="xxs"
58
- width="144px"
59
- {...props}
60
- />
61
- <SkeletonLoading
62
- height="21px"
63
- width="164px"
64
- {...props}
65
- />
66
- </Flex>
67
- </Flex>
68
- ) : (
69
- <Flex
70
- alignItems="start"
71
- paddingTop="md"
72
- >
73
- <User
74
- align="center"
75
- avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
76
- name="Anna Black"
77
- orientation="vertical"
78
- size="lg"
79
- title="Remodeling Consultant"
80
- {...props}
81
- />
82
- </Flex>
83
- )}
84
- </div>
85
- </div>
86
- )
87
- }
88
-
89
- export default SkeletonLoadingUser;
data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb DELETED
@@ -1,95 +0,0 @@
1
- <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
2
- <thead>
3
- <tr>
4
- <th id="1">Column 1</th>
5
- <th id="2">Column 2</th>
6
- <th id="3">Column 3</th>
7
- <th>Column 4</th>
8
- <th>Column 5</th>
9
- <th>Column 6</th>
10
- <th>Column 7</th>
11
- <th>Column 8</th>
12
- <th>Column 9</th>
13
- <th>Column 10</th>
14
- <th>Column 11</th>
15
- <th>Column 12</th>
16
- <th>Column 13</th>
17
- <th>Column 14</th>
18
- <th>Column 15</th>
19
- </tr>
20
- </thead>
21
- <tbody>
22
- <tr>
23
- <td id="1">Value 1</td>
24
- <td id="2">Value 2</td>
25
- <td id="3">Value 3</td>
26
- <td>Value 4</td>
27
- <td>Value 5</td>
28
- <td>Column 6</td>
29
- <td>Column 7</td>
30
- <td>Column 8</td>
31
- <td>Column 9</td>
32
- <td>Column 10</td>
33
- <td>Column 11</td>
34
- <td>Column 12</td>
35
- <td>Column 13</td>
36
- <td>Column 14</td>
37
- <td>Column 15</td>
38
-
39
- </tr>
40
- <tr>
41
- <td id="1">Value 1</td>
42
- <td id="2">Value 2</td>
43
- <td id="3">Value 3</td>
44
- <td>Value 4</td>
45
- <td>Value 5</td>
46
- <td>Column 6</td>
47
- <td>Column 7</td>
48
- <td>Column 8</td>
49
- <td>Column 9</td>
50
- <td>Column 10</td>
51
- <td>Column 11</td>
52
- <td>Column 12</td>
53
- <td>Column 13</td>
54
- <td>Column 14</td>
55
- <td>Column 15</td>
56
-
57
- </tr>
58
- <tr>
59
- <td id="1">Value 1</td>
60
- <td id="2">Value 2</td>
61
- <td id="3">Value 3</td>
62
- <td>Value 4</td>
63
- <td>Value 5</td>
64
- <td>Column 6</td>
65
- <td>Column 7</td>
66
- <td>Column 8</td>
67
- <td>Column 9</td>
68
- <td>Column 10</td>
69
- <td>Column 11</td>
70
- <td>Column 12</td>
71
- <td>Column 13</td>
72
- <td>Column 14</td>
73
- <td>Column 15</td>
74
-
75
- </tr>
76
- <tr>
77
- <td id="1">Value 1</td>
78
- <td id="2">Value 2</td>
79
- <td id="3">Value 3</td>
80
- <td>Value 4</td>
81
- <td>Value 5</td>
82
- <td>Column 6</td>
83
- <td>Column 7</td>
84
- <td>Column 8</td>
85
- <td>Column 9</td>
86
- <td>Column 10</td>
87
- <td>Column 11</td>
88
- <td>Column 12</td>
89
- <td>Column 13</td>
90
- <td>Column 14</td>
91
- <td>Column 15</td>
92
-
93
- </tr>
94
- </tbody>
95
- <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx DELETED
@@ -1,75 +0,0 @@
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 DELETED
@@ -1 +0,0 @@
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 DELETED
@@ -1,108 +0,0 @@
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 DELETED
@@ -1,2 +0,0 @@
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.