playbook_ui 13.8.0.pre.alpha.play845allkitsbytypes1258 → 13.9.0.pre.alpha.PLAY962SingleSelect1261

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/_button.tsx +1 -6
  3. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx +1 -1
  5. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -7
  6. data/app/pb_kits/playbook/pb_message/_message_mixins.scss +1 -0
  7. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +27 -22
  8. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +2 -1
  9. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +258 -111
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +6 -7
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +73 -0
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +87 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -2
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  16. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +7 -0
  17. data/app/pb_kits/playbook/utilities/validEmojiChecker.ts +6 -0
  18. data/dist/menu.yml +110 -281
  19. data/dist/playbook-rails.js +6 -6
  20. data/lib/playbook/pb_doc_helper.rb +28 -61
  21. data/lib/playbook/version.rb +2 -2
  22. metadata +5 -2
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx ADDED
@@ -0,0 +1,87 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+
4
+ const treeData = [
5
+ {
6
+ label: "Power Home Remodeling",
7
+ value: "Power Home Remodeling",
8
+ id: "powerhome2",
9
+ expanded: true,
10
+ children: [
11
+ {
12
+ label: "People",
13
+ value: "People",
14
+ id: "people2",
15
+ expanded: true,
16
+ children: [
17
+ {
18
+ label: "Talent Acquisition",
19
+ value: "Talent Acquisition",
20
+ id: "talent2",
21
+ },
22
+ {
23
+ label: "Business Affairs",
24
+ value: "Business Affairs",
25
+ id: "business2",
26
+ children: [
27
+ {
28
+ label: "Initiatives",
29
+ value: "Initiatives",
30
+ id: "initiative2",
31
+ },
32
+ {
33
+ label: "Learning & Development",
34
+ value: "Learning & Development",
35
+ id: "development2",
36
+ },
37
+ ],
38
+ },
39
+ {
40
+ label: "People Experience",
41
+ value: "People Experience",
42
+ id: "experience2",
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ label: "Contact Center",
48
+ value: "Contact Center",
49
+ id: "contact2",
50
+ children: [
51
+ {
52
+ label: "Appointment Management",
53
+ value: "Appointment Management",
54
+ id: "appointment2",
55
+ },
56
+ {
57
+ label: "Customer Service",
58
+ value: "Customer Service",
59
+ id: "customer2",
60
+ },
61
+ {
62
+ label: "Energy",
63
+ value: "Energy",
64
+ id: "energy2",
65
+ },
66
+ ],
67
+ },
68
+ ],
69
+ },
70
+ ];
71
+
72
+ const MultiLevelSelectSingle = (props) => {
73
+ return (
74
+ <div>
75
+ <MultiLevelSelect
76
+ id="multiselect-single"
77
+ inputName="Power"
78
+ onSelect={(selectedNode) => console.log("Selected Node", selectedNode)}
79
+ treeData={treeData}
80
+ variant="single"
81
+ {...props}
82
+ />
83
+ </div>
84
+ )
85
+ };
86
+
87
+ export default MultiLevelSelectSingle;
data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml CHANGED
@@ -1,12 +1,13 @@
1
1
  examples:
2
2
  rails:
3
3
  - multi_level_select_default: Default
4
+ - multi_level_select_single: Single Select
4
5
  - multi_level_select_return_all_selected: Return All Selected
5
6
  - multi_level_select_selected_ids: Selected Ids
6
7
  - multi_level_select_with_form: With Form
7
-
8
+
8
9
  react:
9
10
  - multi_level_select_default: Default
11
+ - multi_level_select_single: Single Select
10
12
  - multi_level_select_return_all_selected: Return All Selected
11
13
  - multi_level_select_selected_ids: Selected Ids
12
-
data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
2
+ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
2
3
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
3
- export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
4
+ export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb CHANGED
@@ -14,6 +14,11 @@ module Playbook
14
14
  prop :input_display, type: Playbook::Props::Enum,
15
15
  values: %w[pills none],
16
16
  default: "pills"
17
+ prop :input_name, type: Playbook::Props::String,
18
+ default: ""
19
+ prop :variant, type: Playbook::Props::Enum,
20
+ values: %w[multi single],
21
+ default: "multi"
17
22
 
18
23
  def classname
19
24
  generate_classname("pb_multi_level_select")
@@ -27,6 +32,8 @@ module Playbook
27
32
  treeData: tree_data,
28
33
  returnAllSelected: return_all_selected,
29
34
  selectedIds: selected_ids,
35
+ input_name: input_name,
36
+ variant: variant,
30
37
  }
31
38
  end
32
39
  end
data/app/pb_kits/playbook/utilities/validEmojiChecker.ts ADDED
@@ -0,0 +1,6 @@
1
+ export const isValidEmoji = (emoji: string) => {
2
+ // Using regular expression to check if the string is a valid emoji/emoji Unicode
3
+ const emojiRegex = /^(\p{Emoji}|\uFE0F|\u200D|\u20E3)+$/u;
4
+ return emojiRegex.test(emoji);
5
+ };
6
+
data/dist/menu.yml CHANGED
@@ -1,282 +1,111 @@
1
- web: &web ["rails", "react"]
2
- all: &all ["rails", "react", "swift"]
3
- rails_only: &rails_only ["rails"]
4
- react_only: &react_only ["react"]
5
-
6
1
  kits:
7
- - name: "avatars"
8
- components:
9
- - name: "avatar"
10
- platforms: *all
11
- - name: "avatar_action_button"
12
- platforms: *web
13
- - name: "multiple_users"
14
- platforms: *web
15
- - name: "multiple_users_stacked"
16
- platforms: *web
17
- - name: "user"
18
- platforms: *web
19
- - name: "background"
20
- components:
21
- - name: "background"
22
- platforms: *web
23
- - name: "bread_crumbs"
24
- components:
25
- - name: "bread_crumbs"
26
- platforms: *web
27
- - name: "buttons"
28
- components:
29
- - name: "button"
30
- platforms: *web
31
- - name: "button_toolbar"
32
- platforms: *web
33
- - name: "circle_icon_button"
34
- platforms: *web
35
- - name: "card"
36
- components:
37
- - name: "card"
38
- platforms: *all
39
- - name: "collapsible"
40
- components:
41
- - name: "collapsible"
42
- platforms: *web
43
- - name: "charts_and_graphs"
44
- components:
45
- - name: "bar_graph"
46
- platforms: *web
47
- - name: "circle_chart"
48
- platforms: *web
49
- - name: "distribution_bar"
50
- platforms: *web
51
- - name: "gauge"
52
- platforms: *web
53
- - name: "legend"
54
- platforms: *web
55
- - name: "line_graph"
56
- platforms: *web
57
- - name: "treemap_chart"
58
- platforms: *web
59
- - name: "dialog"
60
- components:
61
- - name: "dialog"
62
- platforms: *web
63
- - name: "filter"
64
- components:
65
- - name: "filter"
66
- platforms: *web
67
- - name: "fixed_confirmation_toast"
68
- components:
69
- - name: "fixed_confirmation_toast"
70
- platforms: *web
71
- - name: "forms"
72
- components:
73
- - name: "checkbox"
74
- platforms: *web
75
- - name: "date_picker"
76
- platforms: *web
77
- - name: "file_upload"
78
- platforms: *web
79
- - name: "form"
80
- platforms: *rails_only
81
- - name: "form_group"
82
- platforms: *web
83
- - name: "form_pill"
84
- platforms: *web
85
- - name: "multi_level_select"
86
- platforms: *web
87
- - name: "passphrase"
88
- platforms: *web
89
- - name: "phone_number_input"
90
- platforms: *web
91
- - name: "radio"
92
- platforms: *all
93
- - name: "rich_text_editor"
94
- platforms: *web
95
- - name: "select"
96
- platforms: *web
97
- - name: "selectable_card"
98
- platforms: *web
99
- - name: "selectable_card_icon"
100
- platforms: *web
101
- - name: "selectable_icon"
102
- platforms: *web
103
- - name: "selectable_list"
104
- platforms: *web
105
- - name: "text_input"
106
- platforms: *web
107
- - name: "textarea"
108
- platforms: *web
109
- - name: "toggle"
110
- platforms: *web
111
- - name: "typeahead"
112
- platforms: *web
113
- - name: "highlight"
114
- components:
115
- - name: "highlight"
116
- platforms: *web
117
- - name: "icon"
118
- components:
119
- - name: "icon"
120
- platforms: *web
121
- - name: "icon_circle"
122
- components:
123
- - name: "icon_circle"
124
- platforms: *web
125
- - name: "icon_stat_value"
126
- components:
127
- - name: "icon_stat_value"
128
- platforms: *web
129
- - name: "icon_value"
130
- components:
131
- - name: "icon_value"
132
- platforms: *web
133
- - name: "image"
134
- components:
135
- - name: "image"
136
- platforms: *web
137
- - name: "layouts"
138
- components:
139
- - name: "flex"
140
- platforms: *web
141
- - name: "layout"
142
- platforms: *web
143
- - name: "lightbox"
144
- components:
145
- - name: "lightbox"
146
- platforms: *react_only
147
- - name: "list"
148
- components:
149
- - name: "list"
150
- platforms: *web
151
- - name: "loading_inline"
152
- components:
153
- - name: "loading_inline"
154
- platforms: *web
155
- - name: "map"
156
- components:
157
- - name: "map"
158
- platforms: *react_only
159
- - name: "nav"
160
- components:
161
- - name: "nav"
162
- platforms: *web
163
- - name: "pagination"
164
- components:
165
- - name: "pagination"
166
- platforms: *rails_only
167
- - name: "popover"
168
- components:
169
- - name: "popover"
170
- platforms: *web
171
- - name: "progress"
172
- components:
173
- - name: "progress_pills"
174
- platforms: *web
175
- - name: "progress_simple"
176
- platforms: *web
177
- - name: "progress_step"
178
- platforms: *web
179
- - name: "section_separator"
180
- components:
181
- - name: "section_separator"
182
- platforms: *web
183
- - name: "star_rating"
184
- components:
185
- - name: "star_rating"
186
- platforms: *web
187
- - name: "table"
188
- components:
189
- - name: "table"
190
- platforms: *web
191
- - name: "tags"
192
- components:
193
- - name: "tags"
194
- platforms: *web
195
- - name: "badge"
196
- platforms: *web
197
- - name: "hashtag"
198
- platforms: *web
199
- - name: "pill"
200
- platforms: *all
201
- - name: "timeline"
202
- components:
203
- - name: "timeline"
204
- platforms: *web
205
- - name: "time_and_date"
206
- components:
207
- - name: "date"
208
- platforms: *web
209
- - name: "date_range_inline"
210
- platforms: *web
211
- - name: "date_range_stacked"
212
- platforms: *web
213
- - name: "date_stacked"
214
- platforms: *web
215
- - name: "date_time"
216
- platforms: *web
217
- - name: "date_time_stacked"
218
- platforms: *web
219
- - name: "date_year_stacked"
220
- platforms: *web
221
- - name: "time"
222
- platforms: *web
223
- - name: "time_range_inline"
224
- platforms: *web
225
- - name: "time_stacked"
226
- platforms: *web
227
- - name: "timestamp"
228
- platforms: *all
229
- - name: "weekday_stacked"
230
- platforms: *web
231
- - name: "tooltip"
232
- components:
233
- - name: "tooltip"
234
- platforms: *web
235
- - name: "typography"
236
- components:
237
- - name: "body"
238
- platforms: *web
239
- - name: "caption"
240
- platforms: *web
241
- - name: "detail"
242
- platforms: *web
243
- - name: "title"
244
- platforms: *web
245
- - name: "typography_patterns"
246
- components:
247
- - name: "contact"
248
- platforms: *web
249
- - name: "currency"
250
- platforms: *web
251
- - name: "dashboard_value"
252
- platforms: *web
253
- - name: "home_address_street"
254
- platforms: *web
255
- - name: "label_pill"
256
- platforms: *web
257
- - name: "label_value"
258
- platforms: *web
259
- - name: "message"
260
- platforms: *web
261
- - name: "person"
262
- platforms: *web
263
- - name: "person_contact"
264
- platforms: *web
265
- - name: "source"
266
- platforms: *web
267
- - name: "stat_change"
268
- platforms: *web
269
- - name: "stat_value"
270
- platforms: *web
271
- - name: "title_count"
272
- platforms: *web
273
- - name: "title_detail"
274
- platforms: *web
275
- - name: "user_badge"
276
- components:
277
- - name: "user_badge"
278
- platforms: *web
279
- - name: "walkthrough"
280
- components:
281
- - name: "walkthrough"
282
- platforms: *web
2
+ - avatars:
3
+ - avatar
4
+ - avatar_action_button
5
+ - multiple_users
6
+ - multiple_users_stacked
7
+ - user
8
+ - background
9
+ - bread_crumbs
10
+ - buttons:
11
+ - button
12
+ - button_toolbar
13
+ - circle_icon_button
14
+ - card
15
+ - collapsible
16
+ - charts_and_graphs:
17
+ - bar_graph
18
+ - circle_chart
19
+ - distribution_bar
20
+ - gauge
21
+ - legend
22
+ - line_graph
23
+ - treemap_chart
24
+ - dialog
25
+ - filter
26
+ - fixed_confirmation_toast
27
+ - forms:
28
+ - checkbox
29
+ - date_picker
30
+ - file_upload
31
+ - form
32
+ - form_group
33
+ - form_pill
34
+ - multi_level_select
35
+ - passphrase
36
+ - phone_number_input
37
+ - radio
38
+ - rich_text_editor
39
+ - select
40
+ - selectable_card
41
+ - selectable_card_icon
42
+ - selectable_icon
43
+ - selectable_list
44
+ - text_input
45
+ - textarea
46
+ - toggle
47
+ - typeahead
48
+ - highlight
49
+ - icon
50
+ - icon_circle
51
+ - icon_stat_value
52
+ - icon_value
53
+ - image
54
+ - layouts:
55
+ - flex
56
+ - layout
57
+ - lightbox
58
+ - list
59
+ - loading_inline
60
+ - map
61
+ - nav
62
+ - tags:
63
+ - badge
64
+ - hashtag
65
+ - pill
66
+ - pagination
67
+ - popover
68
+ - progress:
69
+ - progress_pills
70
+ - progress_simple
71
+ - progress_step
72
+ - section_separator
73
+ - star_rating
74
+ - table
75
+ - timeline
76
+ - time_and_date:
77
+ - date
78
+ - date_range_inline
79
+ - date_range_stacked
80
+ - date_stacked
81
+ - date_time
82
+ - date_time_stacked
83
+ - date_year_stacked
84
+ - time
85
+ - time_range_inline
86
+ - time_stacked
87
+ - timestamp
88
+ - weekday_stacked
89
+ - tooltip
90
+ - typography:
91
+ - body
92
+ - caption
93
+ - detail
94
+ - title
95
+ - typography_patterns:
96
+ - contact
97
+ - currency
98
+ - dashboard_value
99
+ - home_address_street
100
+ - label_pill
101
+ - label_value
102
+ - message
103
+ - person
104
+ - person_contact
105
+ - source
106
+ - stat_change
107
+ - stat_value
108
+ - title_count
109
+ - title_detail
110
+ - user_badge
111
+ - walkthrough