playbook_ui_docs 13.26.0 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +71 -0
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +77 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +71 -0
  9. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +77 -0
  10. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  11. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
  12. data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +3 -3
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
  24. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +9 -2
  25. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
  26. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
  27. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
  28. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
  29. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
  30. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
  31. data/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json +278 -0
  32. data/dist/menu.yml +1 -1
  33. data/dist/playbook-doc.js +9 -9
  34. metadata +23 -8
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
@@ -0,0 +1,47 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "🇺🇸",
8
+ id: "United-states"
9
+ },
10
+ {
11
+ label: "Canada",
12
+ value: "Canada",
13
+ areaCode: "+1",
14
+ icon: "🇨🇦",
15
+ id: "canada"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "🇵🇰",
22
+ id: "pakistan"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options}) do %>
29
+ <%= pb_rails("dropdown/dropdown_trigger") do %>
30
+ <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
31
+ <% end %>
32
+ <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
33
+ <% options.each do |option| %>
34
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
35
+ <%= pb_rails("flex/flex_item") do %>
36
+ <%= pb_rails("flex") do %>
37
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
38
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
39
+ <% end %>
40
+ <% end %>
41
+ <%= pb_rails("flex/flex_item") do %>
42
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
43
+ <% end %>
44
+ <% end %>
45
+ <% end %>
46
+ <% end %>
47
+ <% end %>
@@ -0,0 +1,10 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
+ ]
7
+
8
+ %>
9
+
10
+ <%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
@@ -1,6 +1,13 @@
1
1
  examples:
2
-
3
-
2
+ rails:
3
+ - dropdown_default: Default
4
+ - dropdown_subcomponent_structure: Subcomponent Structure
5
+ - dropdown_with_label: With Label
6
+ - dropdown_with_custom_options: Custom Options
7
+ - dropdown_with_custom_display: Custom Display
8
+ - dropdown_with_custom_trigger: Custom Trigger
9
+ - dropdown_with_custom_padding: Custom Padding for Dropdown Options
10
+
4
11
  react:
5
12
  - dropdown_default: Default
6
13
  - dropdown_subcomponent_structure: Subcomponent Structure
@@ -0,0 +1,13 @@
1
+ <%= pb_rails("loading_inline", props: {
2
+ text: "Saving"
3
+ }) %>
4
+
5
+ <%= pb_rails("loading_inline", props: {
6
+ align: "center",
7
+ text: "Saving"
8
+ }) %>
9
+
10
+ <%= pb_rails("loading_inline", props: {
11
+ align: "right",
12
+ text: "Saving",
13
+ }) %>
@@ -0,0 +1,26 @@
1
+ import React from 'react'
2
+
3
+ import LoadingInline from '../_loading_inline'
4
+
5
+ const LoadingInlineCustom = (props) => {
6
+ return (
7
+ <div>
8
+ <LoadingInline
9
+ text=' Saving'
10
+ {...props}
11
+ />
12
+ <LoadingInline
13
+ align="center"
14
+ text=' Saving'
15
+ {...props}
16
+ />
17
+ <LoadingInline
18
+ align="right"
19
+ text=' Saving'
20
+ {...props}
21
+ />
22
+ </div>
23
+ )
24
+ }
25
+
26
+ export default LoadingInlineCustom
@@ -1,9 +1,9 @@
1
1
  <%= pb_rails("loading_inline") %>
2
2
 
3
3
  <%= pb_rails("loading_inline", props: {
4
- align: "center"
4
+ align: "center"
5
5
  }) %>
6
6
 
7
7
  <%= pb_rails("loading_inline", props: {
8
- align: "right"
8
+ align: "right"
9
9
  }) %>
@@ -2,7 +2,7 @@ import React from 'react'
2
2
 
3
3
  import LoadingInline from '../_loading_inline'
4
4
 
5
- const LoadingInlineLight = (props) => {
5
+ const LoadingInlineDefault = (props) => {
6
6
  return (
7
7
  <div>
8
8
  <LoadingInline
@@ -20,4 +20,4 @@ const LoadingInlineLight = (props) => {
20
20
  )
21
21
  }
22
22
 
23
- export default LoadingInlineLight
23
+ export default LoadingInlineDefault
@@ -1,9 +1,11 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
- - loading_inline_light: Light
4
+ - loading_inline_default: Default
5
+ - loading_inline_custom: Custom Text
5
6
 
6
7
 
7
8
 
8
9
  react:
9
- - loading_inline_light: Default
10
+ - loading_inline_default: Default
11
+ - loading_inline_custom: Custom Text
@@ -1 +1,2 @@
1
- export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
1
+ export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
2
+ export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
@@ -0,0 +1,278 @@
1
+ [
2
+ {
3
+ "year": "2021",
4
+ "quarter": null,
5
+ "month": null,
6
+ "day": null,
7
+ "newEnrollments": "20",
8
+ "scheduledMeetings": "10",
9
+ "attendanceRate": "51%",
10
+ "completedClasses": "3",
11
+ "classCompletionRate": "33%",
12
+ "graduatedStudents": "19",
13
+ "children": [
14
+ {
15
+ "year": "2021",
16
+ "quarter": "Q1",
17
+ "month": null,
18
+ "day": null,
19
+ "newEnrollments": "2",
20
+ "scheduledMeetings": "35",
21
+ "attendanceRate": "32%",
22
+ "completedClasses": "15",
23
+ "classCompletionRate": "52%",
24
+ "graduatedStudents": "36",
25
+ "children": [
26
+ {
27
+ "year": "2021",
28
+ "quarter": "Q1",
29
+ "month": "January",
30
+ "day": null,
31
+ "newEnrollments": "16",
32
+ "scheduledMeetings": "20",
33
+ "attendanceRate": "11%",
34
+ "completedClasses": "13",
35
+ "classCompletionRate": "47%",
36
+ "graduatedStudents": "28",
37
+ "children": [
38
+ {
39
+ "year": "2021",
40
+ "quarter": "Q1",
41
+ "month": "January",
42
+ "day": "10",
43
+ "newEnrollments": "34",
44
+ "scheduledMeetings": "28",
45
+ "attendanceRate": "97%",
46
+ "completedClasses": "20",
47
+ "classCompletionRate": "15%",
48
+ "graduatedStudents": "17"
49
+ },
50
+ {
51
+ "year": "2021",
52
+ "quarter": "Q1",
53
+ "month": "January",
54
+ "day": "20",
55
+ "newEnrollments": "43",
56
+ "scheduledMeetings": "23",
57
+ "attendanceRate": "66%",
58
+ "completedClasses": "26",
59
+ "classCompletionRate": "47%",
60
+ "graduatedStudents": "9"
61
+ }
62
+ ]
63
+ },
64
+ {
65
+ "year": "2021",
66
+ "quarter": "Q1",
67
+ "month": "February",
68
+ "day": null,
69
+ "newEnrollments": "20",
70
+ "scheduledMeetings": "41",
71
+ "attendanceRate": "95%",
72
+ "completedClasses": "26",
73
+ "classCompletionRate": "83%",
74
+ "graduatedStudents": "43",
75
+ "children": [
76
+ {
77
+ "year": "2021",
78
+ "quarter": "Q1",
79
+ "month": "February",
80
+ "day": "15",
81
+ "newEnrollments": "19",
82
+ "scheduledMeetings": "35",
83
+ "attendanceRate": "69%",
84
+ "completedClasses": "8",
85
+ "classCompletionRate": "75%",
86
+ "graduatedStudents": "23"
87
+ }
88
+ ]
89
+ }
90
+ ]
91
+ }
92
+ ]
93
+ },
94
+ {
95
+ "year": "2022",
96
+ "quarter": null,
97
+ "month": null,
98
+ "day": null,
99
+ "newEnrollments": "25",
100
+ "scheduledMeetings": "17",
101
+ "attendanceRate": "75%",
102
+ "completedClasses": "5",
103
+ "classCompletionRate": "45%",
104
+ "graduatedStudents": "32",
105
+ "children": [
106
+ {
107
+ "year": "2022",
108
+ "quarter": "Q1",
109
+ "month": null,
110
+ "day": null,
111
+ "newEnrollments": "2",
112
+ "scheduledMeetings": "35",
113
+ "attendanceRate": "32%",
114
+ "completedClasses": "15",
115
+ "classCompletionRate": "52%",
116
+ "graduatedStudents": "36",
117
+ "children": [
118
+ {
119
+ "year": "2022",
120
+ "quarter": "Q1",
121
+ "month": "January",
122
+ "day": null,
123
+ "newEnrollments": "16",
124
+ "scheduledMeetings": "20",
125
+ "attendanceRate": "11%",
126
+ "completedClasses": "13",
127
+ "classCompletionRate": "47%",
128
+ "graduatedStudents": "28",
129
+ "children": [
130
+ {
131
+ "year": "2022",
132
+ "quarter": "Q1",
133
+ "month": "January",
134
+ "day": "15",
135
+ "newEnrollments": "34",
136
+ "scheduledMeetings": "28",
137
+ "attendanceRate": "97%",
138
+ "completedClasses": "20",
139
+ "classCompletionRate": "15%",
140
+ "graduatedStudents": "17"
141
+ },
142
+ {
143
+ "year": "2022",
144
+ "quarter": "Q1",
145
+ "month": "January",
146
+ "day": "25",
147
+ "newEnrollments": "43",
148
+ "scheduledMeetings": "23",
149
+ "attendanceRate": "66%",
150
+ "completedClasses": "26",
151
+ "classCompletionRate": "47%",
152
+ "graduatedStudents": "9"
153
+ }
154
+ ]
155
+ },
156
+ {
157
+ "year": "2022",
158
+ "quarter": "Q1",
159
+ "month": "May",
160
+ "day": null,
161
+ "newEnrollments": "20",
162
+ "scheduledMeetings": "41",
163
+ "attendanceRate": "95%",
164
+ "completedClasses": "26",
165
+ "classCompletionRate": "83%",
166
+ "graduatedStudents": "43",
167
+ "children": [
168
+ {
169
+ "year": "2022",
170
+ "quarter": "Q1",
171
+ "month": "May",
172
+ "day": "2",
173
+ "newEnrollments": "19",
174
+ "scheduledMeetings": "35",
175
+ "attendanceRate": "69%",
176
+ "completedClasses": "8",
177
+ "classCompletionRate": "75%",
178
+ "graduatedStudents": "23"
179
+ }
180
+ ]
181
+ }
182
+ ]
183
+ }
184
+ ]
185
+ },
186
+ {
187
+ "year": "2023",
188
+ "quarter": null,
189
+ "month": null,
190
+ "day": null,
191
+ "newEnrollments": "10",
192
+ "scheduledMeetings": "15",
193
+ "attendanceRate": "65%",
194
+ "completedClasses": "4",
195
+ "classCompletionRate": "49%",
196
+ "graduatedStudents": "29",
197
+ "children": [
198
+ {
199
+ "year": "2023",
200
+ "quarter": "Q1",
201
+ "month": null,
202
+ "day": null,
203
+ "newEnrollments": "2",
204
+ "scheduledMeetings": "35",
205
+ "attendanceRate": "32%",
206
+ "completedClasses": "15",
207
+ "classCompletionRate": "52%",
208
+ "graduatedStudents": "36",
209
+ "children": [
210
+ {
211
+ "year": "2023",
212
+ "quarter": "Q1",
213
+ "month": "March",
214
+ "day": null,
215
+ "newEnrollments": "16",
216
+ "scheduledMeetings": "20",
217
+ "attendanceRate": "11%",
218
+ "completedClasses": "13",
219
+ "classCompletionRate": "47%",
220
+ "graduatedStudents": "28",
221
+ "children": [
222
+ {
223
+ "year": "2023",
224
+ "quarter": "Q1",
225
+ "month": "March",
226
+ "day": "10",
227
+ "newEnrollments": "34",
228
+ "scheduledMeetings": "28",
229
+ "attendanceRate": "97%",
230
+ "completedClasses": "20",
231
+ "classCompletionRate": "15%",
232
+ "graduatedStudents": "17"
233
+ },
234
+ {
235
+ "year": "2023",
236
+ "quarter": "Q1",
237
+ "month": "March",
238
+ "day": "11",
239
+ "newEnrollments": "43",
240
+ "scheduledMeetings": "23",
241
+ "attendanceRate": "66%",
242
+ "completedClasses": "26",
243
+ "classCompletionRate": "47%",
244
+ "graduatedStudents": "9"
245
+ }
246
+ ]
247
+ },
248
+ {
249
+ "year": "2023",
250
+ "quarter": "Q1",
251
+ "month": "April",
252
+ "day": null,
253
+ "newEnrollments": "20",
254
+ "scheduledMeetings": "41",
255
+ "attendanceRate": "95%",
256
+ "completedClasses": "26",
257
+ "classCompletionRate": "83%",
258
+ "graduatedStudents": "43",
259
+ "children": [
260
+ {
261
+ "year": "2023",
262
+ "quarter": "Q1",
263
+ "month": "April",
264
+ "day": "15",
265
+ "newEnrollments": "19",
266
+ "scheduledMeetings": "35",
267
+ "attendanceRate": "69%",
268
+ "completedClasses": "8",
269
+ "classCompletionRate": "75%",
270
+ "graduatedStudents": "23"
271
+ }
272
+ ]
273
+ }
274
+ ]
275
+ }
276
+ ]
277
+ }
278
+ ]
data/dist/menu.yml CHANGED
@@ -53,7 +53,7 @@ kits:
53
53
  description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
54
54
  status: "stable"
55
55
  - name: "advanced_table"
56
- platforms: *react_only
56
+ platforms: *web
57
57
  description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
58
58
  status: "stable"
59
59
  - name: "list"