playbook_ui_docs 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608

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.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
  3. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
  6. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  7. data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
  8. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  9. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +117 -0
  10. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +227 -0
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +1 -0
  12. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +4 -2
  13. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
  15. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
  16. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +72 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +91 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +1 -0
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +1 -0
  21. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
  24. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
  25. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
  26. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
  27. data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
  28. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
  29. data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
  30. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
  31. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  32. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  33. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +31 -0
  34. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +26 -0
  35. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +1 -0
  36. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +1 -0
  37. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  38. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  39. data/dist/playbook-doc.js +1 -1
  40. metadata +25 -3
  41. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a9a56199c55751b0622186a61c0072d89817f864fecd9cf1181b13d2555c84bf
4
- data.tar.gz: c88fde11c878878b9b14e115b9fcbfcdb63bea5d5f2c296aa422b1aa09164221
3
+ metadata.gz: 03003e7a5730643b9389fcb6a713c2904707265b33e7dc2ec70ee8f6c4cf92da
4
+ data.tar.gz: 3f626f86fbacd8850ad2bece6ced718bb80a7eed53bed0633acd7dde78ef0abf
5
5
  SHA512:
6
- metadata.gz: feb420d2480a3dfe7acc94e307ac4f98c613fa20957af19d990dc40d770c46aadcac3799c9cb30000c05d21bae6c4253f619868150ef0fcab35a4f7c5eb6b348
7
- data.tar.gz: 98f2d9232423d8d2ff37a4607123f8caa31e7ae3b5d951707c100e48fc60defad52497a0e063de1ca0689be93f8d0796c40fbc4362d1e15f199ee5d071224ad4
6
+ metadata.gz: b500436c1333f7f4b944b55d522beb6ceb19b87bfa985281aad0ede5dc0678851663536164c727833e29c6fad129229d1f8af103fffba6e470440b1a42f40122
7
+ data.tar.gz: 2df17ac6cbd8c42efd4b62fd789b2935d3fb06178e06e0c8ae0e65a10419648bc455ecc2d2bfe7e5b68cf021695b8f5f8ff65fa484d2b4914eb176c3a1bd1931
@@ -10,3 +10,16 @@
10
10
  variant: "notification"
11
11
  }) %>
12
12
  </div>
13
+
14
+ <div>
15
+ <%= pb_rails("badge", props: {
16
+ text: "1",
17
+ variant: "notification_error",
18
+ rounded: true
19
+ }) %>
20
+
21
+ <%= pb_rails("badge", props: {
22
+ text: "4",
23
+ variant: "notification_error"
24
+ }) %>
25
+ </div>
@@ -4,20 +4,39 @@ import Badge from '../_badge'
4
4
  const BadgeNotification = (props) => {
5
5
  return (
6
6
  <>
7
- <Badge
8
- rounded
9
- text="1"
10
- variant="notification"
11
- {...props}
12
- />
7
+ <div>
8
+ <Badge
9
+ rounded
10
+ text="1"
11
+ variant="notification"
12
+ {...props}
13
+ />
13
14
 
14
- &nbsp;
15
+ &nbsp;
15
16
 
16
- <Badge
17
- text="4"
18
- variant="notification"
19
- {...props}
20
- />
17
+ <Badge
18
+ text="4"
19
+ variant="notification"
20
+ {...props}
21
+ />
22
+ </div>
23
+
24
+ <div>
25
+ <Badge
26
+ rounded
27
+ text="1"
28
+ variant="notificationError"
29
+ {...props}
30
+ />
31
+
32
+ &nbsp;
33
+
34
+ <Badge
35
+ text="4"
36
+ variant="notificationError"
37
+ {...props}
38
+ />
39
+ </div>
21
40
  </>
22
41
  )
23
42
  }
@@ -5,21 +5,17 @@ const DialogDefault = () => {
5
5
  const [isOpen, setIsOpen] = useState(false)
6
6
  const close = () => setIsOpen(false)
7
7
  const open = () => setIsOpen(true)
8
- const [isLoading, setIsLoading] = useState(false)
9
8
 
10
9
  return (
11
10
  <>
12
11
  <Button onClick={open}>{'Open Dialog'}</Button>
13
12
  <Dialog
14
13
  cancelButton="Cancel Button"
15
- className="wrapper"
16
14
  confirmButton="Okay"
17
- loading={isLoading}
18
15
  onCancel={close}
19
16
  onClose={close}
20
- onConfirm={() => setIsLoading(!isLoading)}
17
+ onConfirm={close}
21
18
  opened={isOpen}
22
- portalClassName="portal"
23
19
  size="sm"
24
20
  text="Hello Body Text, Nice to meet ya."
25
21
  title="Header Title is the Title Prop"
@@ -0,0 +1,46 @@
1
+ import React, { useState } from 'react'
2
+ import { Button, Dialog } from 'playbook-ui'
3
+
4
+ const DialogLoading = () => {
5
+ const [isOpen, setIsOpen] = useState(false)
6
+ const close = () => {
7
+ if (!isLoading) {
8
+ setIsOpen(false)
9
+ }
10
+ }
11
+ const open = () => setIsOpen(true)
12
+ const [isLoading, setIsLoading] = useState(false)
13
+ const submit = async () => {
14
+ setIsLoading(true)
15
+
16
+ try {
17
+ await new Promise((r) => setTimeout(r, 3000))
18
+ setIsOpen(false)
19
+ } catch (error) {
20
+ console.error("An error occurred.")
21
+ } finally {
22
+ setIsLoading(false)
23
+ }
24
+ }
25
+
26
+ return (
27
+ <>
28
+ <Button onClick={open}>{'Open Dialog'}</Button>
29
+ <Dialog
30
+ cancelButton="Cancel"
31
+ className="wrapper"
32
+ confirmButton="Okay"
33
+ loading={isLoading}
34
+ onCancel={close}
35
+ onClose={close}
36
+ onConfirm={submit}
37
+ opened={isOpen}
38
+ size="sm"
39
+ text="Make a 3 second request?"
40
+ title="Loading Example"
41
+ />
42
+ </>
43
+ )
44
+ }
45
+
46
+ export default DialogLoading
@@ -22,6 +22,7 @@ examples:
22
22
  - dialog_stacked_alert: Stacked Button Alert
23
23
  - dialog_full_height: Full Height
24
24
  - dialog_full_height_placement: Full Height Placement
25
+ - dialog_loading: Loading
25
26
 
26
27
  swift:
27
28
  - dialog_default_swift: Simple
@@ -8,3 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
8
8
  export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
9
9
  export { default as DialogFullHeight } from './_dialog_full_height.jsx'
10
10
  export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
11
+ export { default as DialogLoading } from './_dialog_loading.jsx'
@@ -35,6 +35,7 @@
35
35
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
36
36
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
37
37
  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
38
+ <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
38
39
 
39
40
  <%= form.actions do |action| %>
40
41
  <%= action.submit %>
@@ -0,0 +1,117 @@
1
+ <%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
2
+
3
+ <%= pb_rails("form_pill", props: {
4
+ text: "Neutral",
5
+ tabindex: 0,
6
+ }) %>
7
+ <%= pb_rails("form_pill", props: {
8
+ color: "primary",
9
+ text: "Primary",
10
+ tabindex: 0,
11
+ }) %>
12
+ <%= pb_rails("form_pill", props: {
13
+ color: "success",
14
+ text: "Success",
15
+ tabindex: 0,
16
+ }) %>
17
+ <%= pb_rails("form_pill", props: {
18
+ color: "warning",
19
+ text: "Warning",
20
+ tabindex: 0,
21
+ }) %>
22
+ <%= pb_rails("form_pill", props: {
23
+ color: "error",
24
+ text: "Error",
25
+ tabindex: 0,
26
+ }) %>
27
+ <%= pb_rails("form_pill", props: {
28
+ color: "info",
29
+ text: "Info",
30
+ tabindex: 0,
31
+ }) %>
32
+
33
+ <%= pb_rails("title", props: { text: "Data Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
34
+
35
+ <%= pb_rails("form_pill", props: {
36
+ color: "data_1",
37
+ text: "Data 1",
38
+ tabindex: 0,
39
+ }) %>
40
+ <%= pb_rails("form_pill", props: {
41
+ color: "data_2",
42
+ text: "Data 2",
43
+ tabindex: 0,
44
+ }) %>
45
+ <%= pb_rails("form_pill", props: {
46
+ color: "data_3",
47
+ text: "Data 3",
48
+ tabindex: 0,
49
+ }) %>
50
+ <%= pb_rails("form_pill", props: {
51
+ color: "data_4",
52
+ text: "Data 4",
53
+ tabindex: 0,
54
+ }) %>
55
+ <%= pb_rails("form_pill", props: {
56
+ color: "data_5",
57
+ text: "Data 5",
58
+ tabindex: 0,
59
+ }) %>
60
+ <%= pb_rails("form_pill", props: {
61
+ color: "data_6",
62
+ text: "Data 6",
63
+ tabindex: 0,
64
+ }) %>
65
+ <%= pb_rails("form_pill", props: {
66
+ color: "data_7",
67
+ text: "Data 7",
68
+ tabindex: 0,
69
+ }) %>
70
+ <%= pb_rails("form_pill", props: {
71
+ color: "data_8",
72
+ text: "Data 8",
73
+ tabindex: 0,
74
+ }) %>
75
+
76
+ <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
77
+
78
+ <%= pb_rails("form_pill", props: {
79
+ color: "windows",
80
+ text: "Windows",
81
+ tabindex: 0,
82
+ }) %>
83
+ <%= pb_rails("form_pill", props: {
84
+ color: "siding",
85
+ text: "Siding",
86
+ tabindex: 0,
87
+ }) %>
88
+ <%= pb_rails("form_pill", props: {
89
+ color: "roofing",
90
+ text: "Roofing",
91
+ tabindex: 0,
92
+ }) %>
93
+ <%= pb_rails("form_pill", props: {
94
+ color: "doors",
95
+ text: "Doors",
96
+ tabindex: 0,
97
+ }) %>
98
+ <%= pb_rails("form_pill", props: {
99
+ color: "gutters",
100
+ text: "Gutters",
101
+ tabindex: 0,
102
+ }) %>
103
+ <%= pb_rails("form_pill", props: {
104
+ color: "solar",
105
+ text: "Solar",
106
+ tabindex: 0,
107
+ }) %>
108
+ <%= pb_rails("form_pill", props: {
109
+ color: "insulation",
110
+ text: "Insulation",
111
+ tabindex: 0,
112
+ }) %>
113
+ <%= pb_rails("form_pill", props: {
114
+ color: "accessories",
115
+ text: "Accessories",
116
+ tabindex: 0,
117
+ }) %>
@@ -0,0 +1,227 @@
1
+ import React from 'react'
2
+ import { FormPill, Title } from 'playbook-ui'
3
+
4
+ const FormPillColors = (props) => {
5
+ return (
6
+ <div>
7
+ <Title
8
+ marginBottom="sm"
9
+ size={4}
10
+ text="Status Colors"
11
+ {...props}
12
+ />
13
+ <FormPill
14
+ onClick={() => {
15
+ alert('Click!')
16
+ }}
17
+ tabIndex={0}
18
+ text="Neutral"
19
+ {...props}
20
+ />
21
+ <FormPill
22
+ color="primary"
23
+ onClick={() => {
24
+ alert('Click!')
25
+ }}
26
+ tabIndex={0}
27
+ text="Primary"
28
+ {...props}
29
+ />
30
+ <FormPill
31
+ color="success"
32
+ onClick={() => {
33
+ alert('Click!')
34
+ }}
35
+ tabIndex={0}
36
+ text="Success"
37
+ {...props}
38
+ />
39
+ <FormPill
40
+ color="warning"
41
+ onClick={() => {
42
+ alert('Click!')
43
+ }}
44
+ tabIndex={0}
45
+ text="Warning"
46
+ {...props}
47
+ />
48
+ <FormPill
49
+ color="error"
50
+ onClick={() => {
51
+ alert('Click!')
52
+ }}
53
+ tabIndex={0}
54
+ text="Error"
55
+ {...props}
56
+ />
57
+ <FormPill
58
+ color="info"
59
+ onClick={() => {
60
+ alert('Click!')
61
+ }}
62
+ tabIndex={0}
63
+ text="Info"
64
+ {...props}
65
+ />
66
+ <Title
67
+ marginBottom="sm"
68
+ marginTop="md"
69
+ size={4}
70
+ text="Data Colors"
71
+ {...props}
72
+ />
73
+ <FormPill
74
+ color="data_1"
75
+ onClick={() => {
76
+ alert('Click!')
77
+ }}
78
+ tabIndex={0}
79
+ text="Data 1"
80
+ {...props}
81
+ />
82
+ <FormPill
83
+ color="data_2"
84
+ onClick={() => {
85
+ alert('Click!')
86
+ }}
87
+ tabIndex={0}
88
+ text="Data 2"
89
+ {...props}
90
+ />
91
+ <FormPill
92
+ color="data_3"
93
+ onClick={() => {
94
+ alert('Click!')
95
+ }}
96
+ tabIndex={0}
97
+ text="Data 3"
98
+ {...props}
99
+ />
100
+ <FormPill
101
+ color="data_4"
102
+ onClick={() => {
103
+ alert('Click!')
104
+ }}
105
+ tabIndex={0}
106
+ text="Data 4"
107
+ {...props}
108
+ />
109
+ <FormPill
110
+ color="data_5"
111
+ onClick={() => {
112
+ alert('Click!')
113
+ }}
114
+ tabIndex={0}
115
+ text="Data 5"
116
+ {...props}
117
+ />
118
+ <FormPill
119
+ color="data_6"
120
+ onClick={() => {
121
+ alert('Click!')
122
+ }}
123
+ tabIndex={0}
124
+ text="Data 6"
125
+ {...props}
126
+ />
127
+ <FormPill
128
+ color="data_7"
129
+ onClick={() => {
130
+ alert('Click!')
131
+ }}
132
+ tabIndex={0}
133
+ text="Data 7"
134
+ {...props}
135
+ />
136
+ <FormPill
137
+ color="data_8"
138
+ onClick={() => {
139
+ alert('Click!')
140
+ }}
141
+ tabIndex={0}
142
+ text="Data 8"
143
+ {...props}
144
+ />
145
+ <Title
146
+ marginBottom="sm"
147
+ marginTop="md"
148
+ size={4}
149
+ text="Product Colors"
150
+ {...props}
151
+ />
152
+ <FormPill
153
+ color="windows"
154
+ onClick={() => {
155
+ alert('Click!')
156
+ }}
157
+ tabIndex={0}
158
+ text="Windows"
159
+ {...props}
160
+ />
161
+ <FormPill
162
+ color="siding"
163
+ onClick={() => {
164
+ alert('Click!')
165
+ }}
166
+ tabIndex={0}
167
+ text="Siding"
168
+ {...props}
169
+ />
170
+ <FormPill
171
+ color="roofing"
172
+ onClick={() => {
173
+ alert('Click!')
174
+ }}
175
+ tabIndex={0}
176
+ text="Roofing"
177
+ {...props}
178
+ />
179
+ <FormPill
180
+ color="doors"
181
+ onClick={() => {
182
+ alert('Click!')
183
+ }}
184
+ tabIndex={0}
185
+ text="Doors"
186
+ {...props}
187
+ />
188
+ <FormPill
189
+ color="gutters"
190
+ onClick={() => {
191
+ alert('Click!')
192
+ }}
193
+ tabIndex={0}
194
+ text="Gutters"
195
+ {...props}
196
+ />
197
+ <FormPill
198
+ color="solar"
199
+ onClick={() => {
200
+ alert('Click!')
201
+ }}
202
+ tabIndex={0}
203
+ text="Solar"
204
+ {...props}
205
+ />
206
+ <FormPill
207
+ color="insulation"
208
+ onClick={() => {
209
+ alert('Click!')
210
+ }}
211
+ tabIndex={0}
212
+ text="Insulation"
213
+ {...props}
214
+ />
215
+ <FormPill
216
+ color="accessories"
217
+ onClick={() => {
218
+ alert('Click!')
219
+ }}
220
+ tabIndex={0}
221
+ text="Accessories"
222
+ {...props}
223
+ />
224
+ </div>
225
+ )
226
+ }
227
+ export default FormPillColors
@@ -0,0 +1 @@
1
+ The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Neutral is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop.
@@ -5,11 +5,13 @@ examples:
5
5
  - form_pill_size: Form Pill Size
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
- # - form_pill_icon: Form Pill Icon
8
+ - form_pill_icon: Form Pill Icon
9
+ - form_pill_colors: Form Pill Colors
9
10
 
10
11
  react:
11
12
  - form_pill_user: Form Pill User
12
13
  - form_pill_size: Form Pill Size
13
14
  - form_pill_tag: Form Pill Tag
14
15
  - form_pill_example: Example
15
- # - form_pill_icon: Form Pill Icon
16
+ - form_pill_icon: Form Pill Icon
17
+ - form_pill_colors: Form Pill Colors
@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
3
3
  export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
+ export { default as FormPillColors } from './_form_pill_colors.jsx'
@@ -0,0 +1,53 @@
1
+ import React from "react";
2
+ import { GanttChart } from "playbook-ui";
3
+
4
+ const mockOptions = {
5
+ title: {
6
+ text: "Simple Gantt Chart",
7
+ },
8
+
9
+ xAxis: [
10
+ {
11
+ min: Date.UTC(2014, 10, 17),
12
+ max: Date.UTC(2014, 10, 30),
13
+ },
14
+ ],
15
+
16
+ series: [
17
+ {
18
+ name: "Project 1",
19
+ data: [
20
+ {
21
+ name: "Start prototype",
22
+ start: Date.UTC(2014, 10, 18),
23
+ end: Date.UTC(2014, 10, 25),
24
+ },
25
+ {
26
+ name: "Develop",
27
+ start: Date.UTC(2014, 10, 20),
28
+ end: Date.UTC(2014, 10, 25),
29
+ },
30
+ {
31
+ name: "Run acceptance tests",
32
+ start: Date.UTC(2014, 10, 23),
33
+ end: Date.UTC(2014, 10, 26),
34
+ },
35
+ {
36
+ name: "Test prototype",
37
+ start: Date.UTC(2014, 10, 27),
38
+ end: Date.UTC(2014, 10, 29),
39
+ },
40
+ ],
41
+ },
42
+ ],
43
+ };
44
+
45
+ const GanttChartDefault = (props) => (
46
+ <div>
47
+ <GanttChart customOptions={mockOptions}
48
+ {...props}
49
+ />
50
+ </div>
51
+ );
52
+
53
+ export default GanttChartDefault;
@@ -0,0 +1,7 @@
1
+ examples:
2
+
3
+
4
+ react:
5
+ - gantt_chart_default: Default
6
+
7
+
@@ -0,0 +1 @@
1
+ export { default as GanttChartDefault } from './_gantt_chart_default.jsx'
@@ -0,0 +1,72 @@
1
+ <% treeData = [{
2
+ label: "Power Home Remodeling",
3
+ value: "Power Home Remodeling",
4
+ id: "100",
5
+ expanded: true,
6
+ children: [
7
+ {
8
+ label: "People",
9
+ value: "People",
10
+ id: "101",
11
+ expanded: true,
12
+ children: [
13
+ {
14
+ label: "Talent Acquisition",
15
+ value: "Talent Acquisition",
16
+ id: "102",
17
+ },
18
+ {
19
+ label: "Business Affairs",
20
+ value: "Business Affairs",
21
+ id: "103",
22
+ children: [
23
+ {
24
+ label: "Initiatives",
25
+ value: "Initiatives",
26
+ id: "104",
27
+ },
28
+ {
29
+ label: "Learning & Development",
30
+ value: "Learning & Development",
31
+ id: "105",
32
+ },
33
+ ],
34
+ },
35
+ {
36
+ label: "People Experience",
37
+ value: "People Experience",
38
+ id: "106",
39
+ },
40
+ ],
41
+ },
42
+ {
43
+ label: "Contact Center",
44
+ value: "Contact Center",
45
+ id: "107",
46
+ children: [
47
+ {
48
+ label: "Appointment Management",
49
+ value: "Appointment Management",
50
+ id: "108",
51
+ },
52
+ {
53
+ label: "Customer Service",
54
+ value: "Customer Service",
55
+ id: "109",
56
+ },
57
+ {
58
+ label: "Energy",
59
+ value: "Energy",
60
+ id: "110",
61
+ },
62
+ ],
63
+ },
64
+ ],
65
+ }] %>
66
+
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "multi-level-select-default-rails",
69
+ name: "my_array",
70
+ tree_data: treeData,
71
+ color: "primary"
72
+ }) %>