playbook_ui 16.4.0.pre.alpha.testingmetadata15452 → 16.4.0.pre.alpha.testingmetadata15488
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_pb_bar_graph/kit.schema.json +29 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/kit.schema.json +29 -0
- data/app/pb_kits/playbook/pb_pb_gauge_chart/kit.schema.json +29 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/kit.schema.json +29 -0
- data/app/pb_kits/playbook/utilities/global-props.schema.json +114 -64
- data/dist/menu.yml +1 -1048
- data/lib/playbook/version.rb +1 -1
- metadata +5 -1
data/dist/menu.yml
CHANGED
|
@@ -97,26 +97,6 @@ kits:
|
|
|
97
97
|
icons_used: true
|
|
98
98
|
react_rendered: false
|
|
99
99
|
enhanced_element_used: true
|
|
100
|
-
schema_path: pb_dialog/kit.schema.json
|
|
101
|
-
props_summary:
|
|
102
|
-
- opened: boolean (required)
|
|
103
|
-
- size: "sm | md | lg | xl | status_size | content"
|
|
104
|
-
- title: string
|
|
105
|
-
- text: string
|
|
106
|
-
- status: "info | caution | delete | error | success"
|
|
107
|
-
- closeable: boolean
|
|
108
|
-
- placement: "left | center | right"
|
|
109
|
-
- confirmButton: string
|
|
110
|
-
- cancelButton: string
|
|
111
|
-
- onClose: function
|
|
112
|
-
- onConfirm: function
|
|
113
|
-
- onCancel: function
|
|
114
|
-
- loading: boolean
|
|
115
|
-
- fullHeight: boolean
|
|
116
|
-
related_components:
|
|
117
|
-
- popover
|
|
118
|
-
- fixed_confirmation_toast
|
|
119
|
-
- overlay
|
|
120
100
|
subcomponents:
|
|
121
101
|
- Dialog.Header
|
|
122
102
|
- Dialog.Body
|
|
@@ -131,18 +111,6 @@ kits:
|
|
|
131
111
|
icons_used: true
|
|
132
112
|
react_rendered: false
|
|
133
113
|
enhanced_element_used: true
|
|
134
|
-
schema_path: pb_fixed_confirmation_toast/kit.schema.json
|
|
135
|
-
props_summary:
|
|
136
|
-
- status: "success | error | neutral | tip"
|
|
137
|
-
- text: string
|
|
138
|
-
- closeable: boolean
|
|
139
|
-
- autoClose: number (ms)
|
|
140
|
-
- horizontal: "left | center | right"
|
|
141
|
-
- vertical: "top | bottom"
|
|
142
|
-
- onClose: function
|
|
143
|
-
related_components:
|
|
144
|
-
- dialog
|
|
145
|
-
- tooltip
|
|
146
114
|
- name: popover
|
|
147
115
|
platforms: *1
|
|
148
116
|
description: A popover is a way to toggle content on top of other content. It
|
|
@@ -152,18 +120,6 @@ kits:
|
|
|
152
120
|
icons_used: false
|
|
153
121
|
react_rendered: false
|
|
154
122
|
enhanced_element_used: true
|
|
155
|
-
schema_path: pb_popover/kit.schema.json
|
|
156
|
-
props_summary:
|
|
157
|
-
- reference: React.RefObject (required)
|
|
158
|
-
- show: boolean
|
|
159
|
-
- placement: "top | bottom | left | right | top-start | top-end | bottom-start | bottom-end"
|
|
160
|
-
- offset: boolean
|
|
161
|
-
- closeOnClick: "inside | outside | any | none"
|
|
162
|
-
- shouldClosePopover: function
|
|
163
|
-
related_components:
|
|
164
|
-
- dialog
|
|
165
|
-
- tooltip
|
|
166
|
-
- dropdown
|
|
167
123
|
- name: tooltip
|
|
168
124
|
platforms: *1
|
|
169
125
|
description: Small overlay providing contextual information on hover or focus.
|
|
@@ -171,16 +127,6 @@ kits:
|
|
|
171
127
|
icons_used: false
|
|
172
128
|
react_rendered: false
|
|
173
129
|
enhanced_element_used: true
|
|
174
|
-
schema_path: pb_tooltip/kit.schema.json
|
|
175
|
-
props_summary:
|
|
176
|
-
- text: string (required)
|
|
177
|
-
- placement: "top | bottom | left | right"
|
|
178
|
-
- trigger: string
|
|
179
|
-
- delay: "{ open: number, close: number }"
|
|
180
|
-
- interaction: boolean
|
|
181
|
-
related_components:
|
|
182
|
-
- popover
|
|
183
|
-
- copy_button
|
|
184
130
|
- category: buttons
|
|
185
131
|
description: Buttons are used primarily for actions, such as “Save” and “Cancel”.
|
|
186
132
|
Link Buttons are used for less important or less commonly used actions, such as
|
|
@@ -193,22 +139,6 @@ kits:
|
|
|
193
139
|
icons_used: true
|
|
194
140
|
react_rendered: false
|
|
195
141
|
enhanced_element_used: true
|
|
196
|
-
schema_path: pb_button/kit.schema.json
|
|
197
|
-
props_summary:
|
|
198
|
-
- variant: "primary | secondary | link | danger | reaction"
|
|
199
|
-
- size: "sm | md | lg"
|
|
200
|
-
- disabled: boolean
|
|
201
|
-
- loading: boolean
|
|
202
|
-
- icon: string
|
|
203
|
-
- iconRight: boolean
|
|
204
|
-
- fullWidth: boolean
|
|
205
|
-
- link: string
|
|
206
|
-
- htmlType: "submit | reset | button"
|
|
207
|
-
related_components:
|
|
208
|
-
- icon_button
|
|
209
|
-
- circle_icon_button
|
|
210
|
-
- button_toolbar
|
|
211
|
-
- link
|
|
212
142
|
- name: button_toolbar
|
|
213
143
|
platforms: *1
|
|
214
144
|
description: This kit should primarily hold the most commonly used buttons.
|
|
@@ -216,13 +146,6 @@ kits:
|
|
|
216
146
|
icons_used: false
|
|
217
147
|
react_rendered: false
|
|
218
148
|
enhanced_element_used: false
|
|
219
|
-
schema_path: pb_button_toolbar/kit.schema.json
|
|
220
|
-
props_summary:
|
|
221
|
-
- orientation: "horizontal | vertical"
|
|
222
|
-
- variant: "primary | secondary"
|
|
223
|
-
related_components:
|
|
224
|
-
- button
|
|
225
|
-
- icon_button
|
|
226
149
|
- name: circle_icon_button
|
|
227
150
|
platforms: *1
|
|
228
151
|
description: When using Icon Circle Button, the icon must be clear a clear indication
|
|
@@ -231,32 +154,12 @@ kits:
|
|
|
231
154
|
icons_used: true
|
|
232
155
|
react_rendered: false
|
|
233
156
|
enhanced_element_used: false
|
|
234
|
-
schema_path: pb_circle_icon_button/kit.schema.json
|
|
235
|
-
props_summary:
|
|
236
|
-
- icon: string (required)
|
|
237
|
-
- variant: "primary | secondary | link"
|
|
238
|
-
- disabled: boolean
|
|
239
|
-
- link: string
|
|
240
|
-
related_components:
|
|
241
|
-
- button
|
|
242
|
-
- icon_button
|
|
243
|
-
- icon_circle
|
|
244
157
|
- name: icon_button
|
|
245
158
|
platforms: *1
|
|
246
159
|
status: deprecated
|
|
247
160
|
icons_used: true
|
|
248
161
|
react_rendered: false
|
|
249
162
|
enhanced_element_used: false
|
|
250
|
-
deprecated_note: Use Button with icon prop or CircleIconButton instead
|
|
251
|
-
schema_path: pb_icon_button/kit.schema.json
|
|
252
|
-
props_summary:
|
|
253
|
-
- icon: string (required)
|
|
254
|
-
- variant: "default | inline"
|
|
255
|
-
- onClick: function
|
|
256
|
-
- disabled: boolean
|
|
257
|
-
related_components:
|
|
258
|
-
- button
|
|
259
|
-
- circle_icon_button
|
|
260
163
|
- name: copy_button
|
|
261
164
|
platforms: *1
|
|
262
165
|
description: Button that copies text to clipboard with visual feedback.
|
|
@@ -264,15 +167,6 @@ kits:
|
|
|
264
167
|
icons_used: false
|
|
265
168
|
react_rendered: false
|
|
266
169
|
enhanced_element_used: true
|
|
267
|
-
schema_path: pb_copy_button/kit.schema.json
|
|
268
|
-
props_summary:
|
|
269
|
-
- text: string (required)
|
|
270
|
-
- from: string
|
|
271
|
-
- tooltipPlacement: "top | bottom | left | right"
|
|
272
|
-
- tooltipText: string
|
|
273
|
-
related_components:
|
|
274
|
-
- button
|
|
275
|
-
- tooltip
|
|
276
170
|
- category: data_visualization
|
|
277
171
|
description: Components for displaying data in tables, lists, charts, and graphs.
|
|
278
172
|
components:
|
|
@@ -283,13 +177,6 @@ kits:
|
|
|
283
177
|
icons_used: true
|
|
284
178
|
react_rendered: true
|
|
285
179
|
enhanced_element_used: false
|
|
286
|
-
schema_path: pb_map/kit.schema.json
|
|
287
|
-
props_summary:
|
|
288
|
-
- zoomBtns: boolean
|
|
289
|
-
- flyTo: boolean
|
|
290
|
-
- scrollZoom: boolean
|
|
291
|
-
related_components:
|
|
292
|
-
- image
|
|
293
180
|
- name: table
|
|
294
181
|
platforms: *1
|
|
295
182
|
description: Tables display a collection of structured data and typically have
|
|
@@ -298,18 +185,6 @@ kits:
|
|
|
298
185
|
icons_used: false
|
|
299
186
|
react_rendered: false
|
|
300
187
|
enhanced_element_used: true
|
|
301
|
-
schema_path: pb_table/kit.schema.json
|
|
302
|
-
props_summary:
|
|
303
|
-
- size: "sm | md | lg"
|
|
304
|
-
- responsive: "none | scroll | collapse"
|
|
305
|
-
- singleLine: boolean
|
|
306
|
-
- sticky: boolean
|
|
307
|
-
- striped: boolean
|
|
308
|
-
- verticalBorder: boolean
|
|
309
|
-
related_components:
|
|
310
|
-
- advanced_table
|
|
311
|
-
- list
|
|
312
|
-
- filter
|
|
313
188
|
subcomponents:
|
|
314
189
|
- Table.Head
|
|
315
190
|
- Table.Body
|
|
@@ -322,15 +197,6 @@ kits:
|
|
|
322
197
|
icons_used: true
|
|
323
198
|
react_rendered: false
|
|
324
199
|
enhanced_element_used: false
|
|
325
|
-
schema_path: pb_list/kit.schema.json
|
|
326
|
-
props_summary:
|
|
327
|
-
- ordered: boolean
|
|
328
|
-
- borderless: boolean
|
|
329
|
-
- size: "default | small"
|
|
330
|
-
- xpadding: boolean
|
|
331
|
-
related_components:
|
|
332
|
-
- table
|
|
333
|
-
- nav
|
|
334
200
|
- name: filter
|
|
335
201
|
platforms: *1
|
|
336
202
|
description: This kit can be implemented in a variety of ways. To see examples
|
|
@@ -340,16 +206,6 @@ kits:
|
|
|
340
206
|
icons_used: true
|
|
341
207
|
react_rendered: false
|
|
342
208
|
enhanced_element_used: false
|
|
343
|
-
schema_path: pb_filter/kit.schema.json
|
|
344
|
-
props_summary:
|
|
345
|
-
- filters: array
|
|
346
|
-
- sortOptions: array
|
|
347
|
-
- template: "default | single | none"
|
|
348
|
-
- results: number
|
|
349
|
-
related_components:
|
|
350
|
-
- table
|
|
351
|
-
- typeahead
|
|
352
|
-
- select
|
|
353
209
|
- name: distribution_bar
|
|
354
210
|
platforms: *1
|
|
355
211
|
description: Can be used in the same way a pie chart can be used. By default,
|
|
@@ -358,14 +214,6 @@ kits:
|
|
|
358
214
|
icons_used: false
|
|
359
215
|
react_rendered: true
|
|
360
216
|
enhanced_element_used: false
|
|
361
|
-
schema_path: pb_distribution_bar/kit.schema.json
|
|
362
|
-
props_summary:
|
|
363
|
-
- widths: "array (required)"
|
|
364
|
-
- colors: array
|
|
365
|
-
- size: "sm | md | lg"
|
|
366
|
-
related_components:
|
|
367
|
-
- legend
|
|
368
|
-
- progress_simple
|
|
369
217
|
- name: legend
|
|
370
218
|
platforms: *1
|
|
371
219
|
description: A key used to compare the variables and their value in any given
|
|
@@ -374,13 +222,6 @@ kits:
|
|
|
374
222
|
icons_used: false
|
|
375
223
|
react_rendered: false
|
|
376
224
|
enhanced_element_used: false
|
|
377
|
-
schema_path: pb_legend/kit.schema.json
|
|
378
|
-
props_summary:
|
|
379
|
-
- color: string (required)
|
|
380
|
-
- text: string (required)
|
|
381
|
-
related_components:
|
|
382
|
-
- distribution_bar
|
|
383
|
-
- pb_circle_chart
|
|
384
225
|
- name: pb_gauge_chart
|
|
385
226
|
platforms: web
|
|
386
227
|
description: Circular gauge chart for displaying a single value within a range.
|
|
@@ -388,9 +229,6 @@ kits:
|
|
|
388
229
|
icons_used: false
|
|
389
230
|
react_rendered: true
|
|
390
231
|
enhanced_element_used: false
|
|
391
|
-
related_components:
|
|
392
|
-
- pb_circle_chart
|
|
393
|
-
- progress_simple
|
|
394
232
|
- name: pb_bar_graph
|
|
395
233
|
description: Bar graphs are used to compare data. Bar graphs are not typically
|
|
396
234
|
used to show percentages.
|
|
@@ -399,9 +237,6 @@ kits:
|
|
|
399
237
|
icons_used: false
|
|
400
238
|
react_rendered: true
|
|
401
239
|
enhanced_element_used: false
|
|
402
|
-
related_components:
|
|
403
|
-
- pb_line_graph
|
|
404
|
-
- legend
|
|
405
240
|
- name: pb_circle_chart
|
|
406
241
|
platforms: web
|
|
407
242
|
description: Circular chart for displaying proportional data.
|
|
@@ -409,9 +244,6 @@ kits:
|
|
|
409
244
|
icons_used: false
|
|
410
245
|
react_rendered: true
|
|
411
246
|
enhanced_element_used: false
|
|
412
|
-
related_components:
|
|
413
|
-
- distribution_bar
|
|
414
|
-
- legend
|
|
415
247
|
- name: pb_line_graph
|
|
416
248
|
platforms: web
|
|
417
249
|
description: Line graph for displaying data trends over time.
|
|
@@ -419,9 +251,6 @@ kits:
|
|
|
419
251
|
icons_used: false
|
|
420
252
|
react_rendered: true
|
|
421
253
|
enhanced_element_used: false
|
|
422
|
-
related_components:
|
|
423
|
-
- pb_bar_graph
|
|
424
|
-
- legend
|
|
425
254
|
- category: date_and_time_text_patterns
|
|
426
255
|
description: Components for displaying dates and times in various formats.
|
|
427
256
|
components:
|
|
@@ -433,16 +262,6 @@ kits:
|
|
|
433
262
|
icons_used: true
|
|
434
263
|
react_rendered: false
|
|
435
264
|
enhanced_element_used: false
|
|
436
|
-
schema_path: pb_date/kit.schema.json
|
|
437
|
-
props_summary:
|
|
438
|
-
- value: "Date | string (required)"
|
|
439
|
-
- size: "sm | md | lg"
|
|
440
|
-
- showIcon: boolean
|
|
441
|
-
- showDayOfWeek: boolean
|
|
442
|
-
related_components:
|
|
443
|
-
- date_stacked
|
|
444
|
-
- date_time
|
|
445
|
-
- timestamp
|
|
446
265
|
- name: date_range_inline
|
|
447
266
|
platforms: *1
|
|
448
267
|
description: Use to display a date range. Year will not show if it is the current
|
|
@@ -451,15 +270,6 @@ kits:
|
|
|
451
270
|
icons_used: true
|
|
452
271
|
react_rendered: false
|
|
453
272
|
enhanced_element_used: false
|
|
454
|
-
schema_path: pb_date_range_inline/kit.schema.json
|
|
455
|
-
props_summary:
|
|
456
|
-
- startDate: "Date | string (required)"
|
|
457
|
-
- endDate: "Date | string (required)"
|
|
458
|
-
- size: "sm | xs"
|
|
459
|
-
- icon: boolean
|
|
460
|
-
related_components:
|
|
461
|
-
- date_range_stacked
|
|
462
|
-
- date
|
|
463
273
|
- name: date_range_stacked
|
|
464
274
|
platforms: *1
|
|
465
275
|
description: Displays a date range in a vertical stacked format.
|
|
@@ -467,14 +277,6 @@ kits:
|
|
|
467
277
|
icons_used: true
|
|
468
278
|
react_rendered: false
|
|
469
279
|
enhanced_element_used: false
|
|
470
|
-
schema_path: pb_date_range_stacked/kit.schema.json
|
|
471
|
-
props_summary:
|
|
472
|
-
- startDate: "Date | string (required)"
|
|
473
|
-
- endDate: "Date | string (required)"
|
|
474
|
-
- size: "sm | md"
|
|
475
|
-
related_components:
|
|
476
|
-
- date_range_inline
|
|
477
|
-
- date_stacked
|
|
478
280
|
- name: date_stacked
|
|
479
281
|
platforms: *1
|
|
480
282
|
description: Use to display the date, stacking month and day. Year will not show
|
|
@@ -483,15 +285,6 @@ kits:
|
|
|
483
285
|
icons_used: false
|
|
484
286
|
react_rendered: false
|
|
485
287
|
enhanced_element_used: false
|
|
486
|
-
schema_path: pb_date_stacked/kit.schema.json
|
|
487
|
-
props_summary:
|
|
488
|
-
- date: "Date | string (required)"
|
|
489
|
-
- size: "sm | md"
|
|
490
|
-
- bold: boolean
|
|
491
|
-
- reverse: boolean
|
|
492
|
-
related_components:
|
|
493
|
-
- date
|
|
494
|
-
- date_year_stacked
|
|
495
288
|
- name: date_time
|
|
496
289
|
platforms: *1
|
|
497
290
|
description: Date Time is a composite kit that leverages the Date and Time kits.
|
|
@@ -500,16 +293,6 @@ kits:
|
|
|
500
293
|
icons_used: false
|
|
501
294
|
react_rendered: false
|
|
502
295
|
enhanced_element_used: false
|
|
503
|
-
schema_path: pb_date_time/kit.schema.json
|
|
504
|
-
props_summary:
|
|
505
|
-
- datetime: "Date | string (required)"
|
|
506
|
-
- timezone: string
|
|
507
|
-
- showTimezone: boolean
|
|
508
|
-
- size: "sm | md"
|
|
509
|
-
related_components:
|
|
510
|
-
- date
|
|
511
|
-
- time
|
|
512
|
-
- timestamp
|
|
513
296
|
- name: date_time_stacked
|
|
514
297
|
platforms: *1
|
|
515
298
|
description: Displays date and time in a vertical stacked format.
|
|
@@ -517,15 +300,6 @@ kits:
|
|
|
517
300
|
icons_used: false
|
|
518
301
|
react_rendered: false
|
|
519
302
|
enhanced_element_used: false
|
|
520
|
-
schema_path: pb_date_time_stacked/kit.schema.json
|
|
521
|
-
props_summary:
|
|
522
|
-
- datetime: "Date | string (required)"
|
|
523
|
-
- timezone: string
|
|
524
|
-
- showTimezone: boolean
|
|
525
|
-
related_components:
|
|
526
|
-
- date_time
|
|
527
|
-
- date_stacked
|
|
528
|
-
- time_stacked
|
|
529
303
|
- name: date_year_stacked
|
|
530
304
|
platforms: *1
|
|
531
305
|
description: This kit is a simple option for displaying dates in a month, day
|
|
@@ -534,13 +308,6 @@ kits:
|
|
|
534
308
|
icons_used: false
|
|
535
309
|
react_rendered: false
|
|
536
310
|
enhanced_element_used: false
|
|
537
|
-
schema_path: pb_date_year_stacked/kit.schema.json
|
|
538
|
-
props_summary:
|
|
539
|
-
- date: "Date | string (required)"
|
|
540
|
-
- align: "left | center | right"
|
|
541
|
-
related_components:
|
|
542
|
-
- date_stacked
|
|
543
|
-
- date
|
|
544
311
|
- name: time
|
|
545
312
|
platforms: *1
|
|
546
313
|
description: This kit consist of large display and table display format. It includes
|
|
@@ -549,17 +316,6 @@ kits:
|
|
|
549
316
|
icons_used: true
|
|
550
317
|
react_rendered: false
|
|
551
318
|
enhanced_element_used: false
|
|
552
|
-
schema_path: pb_time/kit.schema.json
|
|
553
|
-
props_summary:
|
|
554
|
-
- time: "Date | string (required)"
|
|
555
|
-
- showTimezone: boolean
|
|
556
|
-
- timezone: string
|
|
557
|
-
- showIcon: boolean
|
|
558
|
-
- size: "md | sm"
|
|
559
|
-
related_components:
|
|
560
|
-
- time_stacked
|
|
561
|
-
- timestamp
|
|
562
|
-
- date_time
|
|
563
319
|
- name: time_range_inline
|
|
564
320
|
platforms: *1
|
|
565
321
|
description: Displays a time range in an inline format.
|
|
@@ -567,15 +323,6 @@ kits:
|
|
|
567
323
|
icons_used: true
|
|
568
324
|
react_rendered: false
|
|
569
325
|
enhanced_element_used: false
|
|
570
|
-
schema_path: pb_time_range_inline/kit.schema.json
|
|
571
|
-
props_summary:
|
|
572
|
-
- startTime: "Date | string (required)"
|
|
573
|
-
- endTime: "Date | string (required)"
|
|
574
|
-
- timezone: string
|
|
575
|
-
- icon: boolean
|
|
576
|
-
related_components:
|
|
577
|
-
- time
|
|
578
|
-
- date_range_inline
|
|
579
326
|
- name: time_stacked
|
|
580
327
|
platforms: *1
|
|
581
328
|
description: Displays time in a vertical stacked format.
|
|
@@ -583,14 +330,6 @@ kits:
|
|
|
583
330
|
icons_used: false
|
|
584
331
|
react_rendered: false
|
|
585
332
|
enhanced_element_used: false
|
|
586
|
-
schema_path: pb_time_stacked/kit.schema.json
|
|
587
|
-
props_summary:
|
|
588
|
-
- time: "Date | string (required)"
|
|
589
|
-
- timezone: string
|
|
590
|
-
- showTimezone: boolean
|
|
591
|
-
related_components:
|
|
592
|
-
- time
|
|
593
|
-
- date_time_stacked
|
|
594
333
|
- name: timestamp
|
|
595
334
|
platforms: *3
|
|
596
335
|
description: This low profile kit displays time. Elapsed, current, future, or
|
|
@@ -599,18 +338,6 @@ kits:
|
|
|
599
338
|
icons_used: false
|
|
600
339
|
react_rendered: false
|
|
601
340
|
enhanced_element_used: false
|
|
602
|
-
schema_path: pb_timestamp/kit.schema.json
|
|
603
|
-
props_summary:
|
|
604
|
-
- timestamp: "Date | string (required)"
|
|
605
|
-
- timezone: string
|
|
606
|
-
- showTimezone: boolean
|
|
607
|
-
- align: "left | center | right"
|
|
608
|
-
- showDate: boolean
|
|
609
|
-
- showUser: boolean
|
|
610
|
-
related_components:
|
|
611
|
-
- time
|
|
612
|
-
- date_time
|
|
613
|
-
- message
|
|
614
341
|
- name: weekday_stacked
|
|
615
342
|
platforms: *1
|
|
616
343
|
description: Displays day of week and date in a stacked format.
|
|
@@ -618,14 +345,6 @@ kits:
|
|
|
618
345
|
icons_used: false
|
|
619
346
|
react_rendered: false
|
|
620
347
|
enhanced_element_used: false
|
|
621
|
-
schema_path: pb_weekday_stacked/kit.schema.json
|
|
622
|
-
props_summary:
|
|
623
|
-
- date: "Date | string (required)"
|
|
624
|
-
- align: "left | center | right"
|
|
625
|
-
- variant: "day_only | expanded | month_day"
|
|
626
|
-
related_components:
|
|
627
|
-
- date_stacked
|
|
628
|
-
- date
|
|
629
348
|
- category: form_and_dashboard_text_patterns
|
|
630
349
|
description: Components for displaying structured data on forms and dashboards.
|
|
631
350
|
components:
|
|
@@ -636,14 +355,6 @@ kits:
|
|
|
636
355
|
icons_used: true
|
|
637
356
|
react_rendered: false
|
|
638
357
|
enhanced_element_used: false
|
|
639
|
-
schema_path: pb_contact/kit.schema.json
|
|
640
|
-
props_summary:
|
|
641
|
-
- contactType: "cell | email | work | wrong-phone | home | work-cell"
|
|
642
|
-
- contactValue: string (required)
|
|
643
|
-
- contactDetail: string
|
|
644
|
-
related_components:
|
|
645
|
-
- person_contact
|
|
646
|
-
- icon_value
|
|
647
358
|
- name: currency
|
|
648
359
|
platforms: *1
|
|
649
360
|
description: Use to display monetary amounts, typically on dashboards or other
|
|
@@ -653,18 +364,6 @@ kits:
|
|
|
653
364
|
icons_used: false
|
|
654
365
|
react_rendered: false
|
|
655
366
|
enhanced_element_used: false
|
|
656
|
-
schema_path: pb_currency/kit.schema.json
|
|
657
|
-
props_summary:
|
|
658
|
-
- amount: string (required)
|
|
659
|
-
- label: string
|
|
660
|
-
- unit: string
|
|
661
|
-
- size: "sm | md | lg"
|
|
662
|
-
- align: "left | center | right"
|
|
663
|
-
- symbol: string
|
|
664
|
-
- decimals: "default | matching"
|
|
665
|
-
related_components:
|
|
666
|
-
- stat_value
|
|
667
|
-
- dashboard_value
|
|
668
367
|
- name: home_address_street
|
|
669
368
|
platforms: *1
|
|
670
369
|
description: This kit can be used to display the address for a homeowner/project.
|
|
@@ -674,18 +373,6 @@ kits:
|
|
|
674
373
|
icons_used: false
|
|
675
374
|
react_rendered: false
|
|
676
375
|
enhanced_element_used: false
|
|
677
|
-
schema_path: pb_home_address_street/kit.schema.json
|
|
678
|
-
props_summary:
|
|
679
|
-
- address: string (required)
|
|
680
|
-
- addressCont: string
|
|
681
|
-
- city: string (required)
|
|
682
|
-
- homeId: string
|
|
683
|
-
- homeUrl: string
|
|
684
|
-
- state: string
|
|
685
|
-
- zipcode: string
|
|
686
|
-
related_components:
|
|
687
|
-
- contact
|
|
688
|
-
- source
|
|
689
376
|
- name: label_pill
|
|
690
377
|
platforms: *1
|
|
691
378
|
description: This kit combines the caption and pill kit with all its variants.
|
|
@@ -693,15 +380,6 @@ kits:
|
|
|
693
380
|
icons_used: false
|
|
694
381
|
react_rendered: false
|
|
695
382
|
enhanced_element_used: false
|
|
696
|
-
schema_path: pb_label_pill/kit.schema.json
|
|
697
|
-
props_summary:
|
|
698
|
-
- label: string (required)
|
|
699
|
-
- pillValue: string (required)
|
|
700
|
-
- variant: "neutral | success | warning | error | info | primary"
|
|
701
|
-
related_components:
|
|
702
|
-
- pill
|
|
703
|
-
- caption
|
|
704
|
-
- badge
|
|
705
383
|
- name: label_value
|
|
706
384
|
platforms: *1
|
|
707
385
|
description: This kit can be very versatile when used to display text data.
|
|
@@ -709,15 +387,6 @@ kits:
|
|
|
709
387
|
icons_used: true
|
|
710
388
|
react_rendered: false
|
|
711
389
|
enhanced_element_used: false
|
|
712
|
-
schema_path: pb_label_value/kit.schema.json
|
|
713
|
-
props_summary:
|
|
714
|
-
- label: string (required)
|
|
715
|
-
- value: string
|
|
716
|
-
- variant: "default | details"
|
|
717
|
-
- icon: string
|
|
718
|
-
related_components:
|
|
719
|
-
- title_detail
|
|
720
|
-
- title_value
|
|
721
390
|
- name: person
|
|
722
391
|
platforms: *1
|
|
723
392
|
description: This kit is broken down into a first name last name format with normal
|
|
@@ -726,13 +395,6 @@ kits:
|
|
|
726
395
|
icons_used: false
|
|
727
396
|
react_rendered: false
|
|
728
397
|
enhanced_element_used: false
|
|
729
|
-
schema_path: pb_person/kit.schema.json
|
|
730
|
-
props_summary:
|
|
731
|
-
- firstName: string (required)
|
|
732
|
-
- lastName: string
|
|
733
|
-
related_components:
|
|
734
|
-
- person_contact
|
|
735
|
-
- user
|
|
736
398
|
- name: person_contact
|
|
737
399
|
platforms: *1
|
|
738
400
|
description: This kit can be used to display a person contact information.
|
|
@@ -740,15 +402,6 @@ kits:
|
|
|
740
402
|
icons_used: false
|
|
741
403
|
react_rendered: false
|
|
742
404
|
enhanced_element_used: false
|
|
743
|
-
schema_path: pb_person_contact/kit.schema.json
|
|
744
|
-
props_summary:
|
|
745
|
-
- firstName: string (required)
|
|
746
|
-
- lastName: string
|
|
747
|
-
- contacts: "array (required)"
|
|
748
|
-
related_components:
|
|
749
|
-
- person
|
|
750
|
-
- contact
|
|
751
|
-
- user
|
|
752
405
|
- name: source
|
|
753
406
|
platforms: *1
|
|
754
407
|
description: General use is to describe the discovery of businesses, customers,
|
|
@@ -757,15 +410,6 @@ kits:
|
|
|
757
410
|
icons_used: true
|
|
758
411
|
react_rendered: false
|
|
759
412
|
enhanced_element_used: false
|
|
760
|
-
schema_path: pb_source/kit.schema.json
|
|
761
|
-
props_summary:
|
|
762
|
-
- source: string (required)
|
|
763
|
-
- type: string
|
|
764
|
-
- user: object
|
|
765
|
-
- hideIcon: boolean
|
|
766
|
-
related_components:
|
|
767
|
-
- user
|
|
768
|
-
- icon_value
|
|
769
413
|
- name: dashboard_value
|
|
770
414
|
platforms: *1
|
|
771
415
|
description: Use in dashboards to give the viewer a quick overview of important
|
|
@@ -774,17 +418,6 @@ kits:
|
|
|
774
418
|
icons_used: false
|
|
775
419
|
react_rendered: false
|
|
776
420
|
enhanced_element_used: false
|
|
777
|
-
schema_path: pb_dashboard_value/kit.schema.json
|
|
778
|
-
props_summary:
|
|
779
|
-
- statLabel: string
|
|
780
|
-
- statValue: string | object (required)
|
|
781
|
-
- statChange: object
|
|
782
|
-
- size: "sm | md | lg"
|
|
783
|
-
- align: "left | center | right"
|
|
784
|
-
related_components:
|
|
785
|
-
- stat_value
|
|
786
|
-
- stat_change
|
|
787
|
-
- currency
|
|
788
421
|
- name: stat_change
|
|
789
422
|
platforms: *1
|
|
790
423
|
description: Displays the increase, decrease, or neutral change in data.
|
|
@@ -792,14 +425,6 @@ kits:
|
|
|
792
425
|
icons_used: true
|
|
793
426
|
react_rendered: false
|
|
794
427
|
enhanced_element_used: false
|
|
795
|
-
schema_path: pb_stat_change/kit.schema.json
|
|
796
|
-
props_summary:
|
|
797
|
-
- "change: increase | decrease | neutral (required)"
|
|
798
|
-
- "value: string | number (required)"
|
|
799
|
-
- "icon: string"
|
|
800
|
-
related_components:
|
|
801
|
-
- stat_value
|
|
802
|
-
- dashboard_value
|
|
803
428
|
- name: stat_value
|
|
804
429
|
platforms: *1
|
|
805
430
|
description: This kit was cerated for the main use as a dashboard display for
|
|
@@ -808,15 +433,6 @@ kits:
|
|
|
808
433
|
icons_used: false
|
|
809
434
|
react_rendered: false
|
|
810
435
|
enhanced_element_used: false
|
|
811
|
-
schema_path: pb_stat_value/kit.schema.json
|
|
812
|
-
props_summary:
|
|
813
|
-
- value: string | number (required)
|
|
814
|
-
- unit: string
|
|
815
|
-
- size: "sm | md | lg"
|
|
816
|
-
related_components:
|
|
817
|
-
- stat_change
|
|
818
|
-
- dashboard_value
|
|
819
|
-
- currency
|
|
820
436
|
- name: title_count
|
|
821
437
|
platforms: *1
|
|
822
438
|
description: This kits consists of title kit and body text. It is used to display
|
|
@@ -826,15 +442,6 @@ kits:
|
|
|
826
442
|
icons_used: false
|
|
827
443
|
react_rendered: false
|
|
828
444
|
enhanced_element_used: false
|
|
829
|
-
schema_path: pb_title_count/kit.schema.json
|
|
830
|
-
props_summary:
|
|
831
|
-
- count: number (required)
|
|
832
|
-
- title: string (required)
|
|
833
|
-
- size: "sm | md | lg"
|
|
834
|
-
- align: "left | center | right"
|
|
835
|
-
related_components:
|
|
836
|
-
- title_detail
|
|
837
|
-
- stat_value
|
|
838
445
|
- name: title_detail
|
|
839
446
|
platforms: *1
|
|
840
447
|
description: This kit can be used in many versatile ways. It consist of a title
|
|
@@ -843,14 +450,6 @@ kits:
|
|
|
843
450
|
icons_used: false
|
|
844
451
|
react_rendered: false
|
|
845
452
|
enhanced_element_used: false
|
|
846
|
-
schema_path: pb_title_detail/kit.schema.json
|
|
847
|
-
props_summary:
|
|
848
|
-
- title: string (required)
|
|
849
|
-
- detail: string
|
|
850
|
-
- align: "left | center | right"
|
|
851
|
-
related_components:
|
|
852
|
-
- title_count
|
|
853
|
-
- label_value
|
|
854
453
|
- category: form_elements
|
|
855
454
|
description: Form wrapper components and specialized form controls.
|
|
856
455
|
components:
|
|
@@ -861,16 +460,6 @@ kits:
|
|
|
861
460
|
icons_used: false
|
|
862
461
|
react_rendered: false
|
|
863
462
|
enhanced_element_used: false
|
|
864
|
-
schema_path: pb_file_upload/kit.schema.json
|
|
865
|
-
props_summary:
|
|
866
|
-
- accept: "string | string[]"
|
|
867
|
-
- maxSize: number
|
|
868
|
-
- onFilesAccepted: function
|
|
869
|
-
- onFilesRejected: function
|
|
870
|
-
- customMessage: string
|
|
871
|
-
related_components:
|
|
872
|
-
- form
|
|
873
|
-
- button
|
|
874
463
|
- name: toggle
|
|
875
464
|
platforms: *1
|
|
876
465
|
description: Physical switch that allows users to turn things on or off. Used
|
|
@@ -879,15 +468,6 @@ kits:
|
|
|
879
468
|
icons_used: false
|
|
880
469
|
react_rendered: false
|
|
881
470
|
enhanced_element_used: false
|
|
882
|
-
schema_path: pb_toggle/kit.schema.json
|
|
883
|
-
props_summary:
|
|
884
|
-
- checked: boolean
|
|
885
|
-
- onChange: function
|
|
886
|
-
- size: "sm | md"
|
|
887
|
-
- name: string
|
|
888
|
-
related_components:
|
|
889
|
-
- checkbox
|
|
890
|
-
- radio
|
|
891
471
|
- name: form_pill
|
|
892
472
|
platforms: *1
|
|
893
473
|
description: Pill-shaped form elements for tags, selections, or filters.
|
|
@@ -895,18 +475,6 @@ kits:
|
|
|
895
475
|
icons_used: true
|
|
896
476
|
react_rendered: false
|
|
897
477
|
enhanced_element_used: false
|
|
898
|
-
schema_path: pb_form_pill/kit.schema.json
|
|
899
|
-
props_summary:
|
|
900
|
-
- text: string (required)
|
|
901
|
-
- name: string
|
|
902
|
-
- variant: "primary | neutral"
|
|
903
|
-
- icon: string
|
|
904
|
-
- size: "small | big"
|
|
905
|
-
- closeProps: object
|
|
906
|
-
related_components:
|
|
907
|
-
- pill
|
|
908
|
-
- typeahead
|
|
909
|
-
- multi_level_select
|
|
910
478
|
- name: form
|
|
911
479
|
platforms: *4
|
|
912
480
|
description: The form kit provides consumers with a convenient, consistently styled
|
|
@@ -915,14 +483,6 @@ kits:
|
|
|
915
483
|
icons_used: false
|
|
916
484
|
react_rendered: false
|
|
917
485
|
enhanced_element_used: true
|
|
918
|
-
schema_path: pb_form/kit.schema.json
|
|
919
|
-
props_summary:
|
|
920
|
-
- action: string
|
|
921
|
-
- method: "get | post | patch | put | delete"
|
|
922
|
-
related_components:
|
|
923
|
-
- form_group
|
|
924
|
-
- text_input
|
|
925
|
-
- button
|
|
926
486
|
- name: form_group
|
|
927
487
|
platforms: *1
|
|
928
488
|
description: Groups related form fields together with optional labels.
|
|
@@ -930,13 +490,6 @@ kits:
|
|
|
930
490
|
icons_used: false
|
|
931
491
|
react_rendered: false
|
|
932
492
|
enhanced_element_used: false
|
|
933
|
-
schema_path: pb_form_group/kit.schema.json
|
|
934
|
-
props_summary:
|
|
935
|
-
- fullWidth: boolean
|
|
936
|
-
related_components:
|
|
937
|
-
- form
|
|
938
|
-
- text_input
|
|
939
|
-
- select
|
|
940
493
|
- category: form_input
|
|
941
494
|
description: Components for text-based user input in forms.
|
|
942
495
|
components:
|
|
@@ -947,18 +500,6 @@ kits:
|
|
|
947
500
|
icons_used: true
|
|
948
501
|
react_rendered: true
|
|
949
502
|
enhanced_element_used: false
|
|
950
|
-
schema_path: pb_passphrase/kit.schema.json
|
|
951
|
-
props_summary:
|
|
952
|
-
- label: string
|
|
953
|
-
- value: string
|
|
954
|
-
- onChange: function
|
|
955
|
-
- showTipsBelow: "always | xs | sm | md | lg | xl"
|
|
956
|
-
- tips: "string[]"
|
|
957
|
-
- confirmation: boolean
|
|
958
|
-
- minLength: number
|
|
959
|
-
related_components:
|
|
960
|
-
- text_input
|
|
961
|
-
- form
|
|
962
503
|
- name: phone_number_input
|
|
963
504
|
platforms: *1
|
|
964
505
|
description: International phone number input with country code selection and formatting.
|
|
@@ -966,18 +507,6 @@ kits:
|
|
|
966
507
|
icons_used: false
|
|
967
508
|
react_rendered: true
|
|
968
509
|
enhanced_element_used: false
|
|
969
|
-
schema_path: pb_phone_number_input/kit.schema.json
|
|
970
|
-
props_summary:
|
|
971
|
-
- initialCountry: string
|
|
972
|
-
- preferredCountries: "string[]"
|
|
973
|
-
- onlyCountries: "string[]"
|
|
974
|
-
- value: string
|
|
975
|
-
- onChange: function
|
|
976
|
-
- label: string
|
|
977
|
-
- required: boolean
|
|
978
|
-
related_components:
|
|
979
|
-
- text_input
|
|
980
|
-
- form
|
|
981
510
|
- name: text_input
|
|
982
511
|
platforms: *1
|
|
983
512
|
description: Area where user can enter small amount of text. Commonly used in
|
|
@@ -986,22 +515,6 @@ kits:
|
|
|
986
515
|
icons_used: true
|
|
987
516
|
react_rendered: false
|
|
988
517
|
enhanced_element_used: false
|
|
989
|
-
schema_path: pb_text_input/kit.schema.json
|
|
990
|
-
props_summary:
|
|
991
|
-
- type: "text | email | password | number | tel | url | search"
|
|
992
|
-
- label: string
|
|
993
|
-
- placeholder: string
|
|
994
|
-
- value: string
|
|
995
|
-
- onChange: function
|
|
996
|
-
- error: string
|
|
997
|
-
- disabled: boolean
|
|
998
|
-
- required: boolean
|
|
999
|
-
- addOn: "{ icon: string, alignment: left | right }"
|
|
1000
|
-
related_components:
|
|
1001
|
-
- textarea
|
|
1002
|
-
- select
|
|
1003
|
-
- form
|
|
1004
|
-
- passphrase
|
|
1005
518
|
- name: rich_text_editor
|
|
1006
519
|
platforms: *1
|
|
1007
520
|
description: Full-featured text editor with formatting options.
|
|
@@ -1010,17 +523,6 @@ kits:
|
|
|
1010
523
|
icons_used: true
|
|
1011
524
|
react_rendered: true
|
|
1012
525
|
enhanced_element_used: false
|
|
1013
|
-
schema_path: pb_rich_text_editor/kit.schema.json
|
|
1014
|
-
props_summary:
|
|
1015
|
-
- onChange: function
|
|
1016
|
-
- template: string
|
|
1017
|
-
- placeholder: string
|
|
1018
|
-
- focus: boolean
|
|
1019
|
-
- simple: boolean
|
|
1020
|
-
- sticky: boolean
|
|
1021
|
-
related_components:
|
|
1022
|
-
- textarea
|
|
1023
|
-
- form
|
|
1024
526
|
- name: textarea
|
|
1025
527
|
platforms: *1
|
|
1026
528
|
description: Area where user can enter larger amounts of text. Commonly used in
|
|
@@ -1029,22 +531,6 @@ kits:
|
|
|
1029
531
|
icons_used: false
|
|
1030
532
|
react_rendered: false
|
|
1031
533
|
enhanced_element_used: true
|
|
1032
|
-
schema_path: pb_textarea/kit.schema.json
|
|
1033
|
-
props_summary:
|
|
1034
|
-
- label: string
|
|
1035
|
-
- placeholder: string
|
|
1036
|
-
- value: string
|
|
1037
|
-
- onChange: function
|
|
1038
|
-
- rows: number
|
|
1039
|
-
- resize: "none | both | horizontal | vertical | auto"
|
|
1040
|
-
- characterCount: string
|
|
1041
|
-
- maxCharacters: string
|
|
1042
|
-
- error: string
|
|
1043
|
-
- required: boolean
|
|
1044
|
-
related_components:
|
|
1045
|
-
- text_input
|
|
1046
|
-
- rich_text_editor
|
|
1047
|
-
- form
|
|
1048
534
|
- name: typeahead
|
|
1049
535
|
platforms: *1
|
|
1050
536
|
description: Typeahead is auto suggestion or completion based on what the user
|
|
@@ -1053,21 +539,6 @@ kits:
|
|
|
1053
539
|
icons_used: true
|
|
1054
540
|
react_rendered: true
|
|
1055
541
|
enhanced_element_used: true
|
|
1056
|
-
schema_path: pb_typeahead/kit.schema.json
|
|
1057
|
-
props_summary:
|
|
1058
|
-
- options: "array (required)"
|
|
1059
|
-
- label: string
|
|
1060
|
-
- placeholder: string
|
|
1061
|
-
- async: boolean
|
|
1062
|
-
- loadOptions: function
|
|
1063
|
-
- isMulti: boolean
|
|
1064
|
-
- createable: boolean
|
|
1065
|
-
- getOptionLabel: function
|
|
1066
|
-
- getOptionValue: function
|
|
1067
|
-
related_components:
|
|
1068
|
-
- select
|
|
1069
|
-
- dropdown
|
|
1070
|
-
- multi_level_select
|
|
1071
542
|
- category: form_selection
|
|
1072
543
|
description: Components for selecting options, dates, and making choices in forms.
|
|
1073
544
|
components:
|
|
@@ -1080,21 +551,6 @@ kits:
|
|
|
1080
551
|
icons_used: true
|
|
1081
552
|
react_rendered: false
|
|
1082
553
|
enhanced_element_used: false
|
|
1083
|
-
schema_path: pb_date_picker/kit.schema.json
|
|
1084
|
-
props_summary:
|
|
1085
|
-
- pickerId: string (required)
|
|
1086
|
-
- mode: "single | multiple | range"
|
|
1087
|
-
- defaultDate: "string | Date"
|
|
1088
|
-
- minDate: "string | Date"
|
|
1089
|
-
- maxDate: "string | Date"
|
|
1090
|
-
- enableTime: boolean
|
|
1091
|
-
- allowInput: boolean
|
|
1092
|
-
- placeholder: string
|
|
1093
|
-
- label: string
|
|
1094
|
-
- onChange: function
|
|
1095
|
-
related_components:
|
|
1096
|
-
- time_picker
|
|
1097
|
-
- text_input
|
|
1098
554
|
- name: dropdown
|
|
1099
555
|
platforms: *1
|
|
1100
556
|
description: Customizable dropdown menu with trigger element and various option configurations.
|
|
@@ -1102,19 +558,6 @@ kits:
|
|
|
1102
558
|
icons_used: true
|
|
1103
559
|
react_rendered: false
|
|
1104
560
|
enhanced_element_used: true
|
|
1105
|
-
schema_path: pb_dropdown/kit.schema.json
|
|
1106
|
-
props_summary:
|
|
1107
|
-
- options: "array"
|
|
1108
|
-
- label: string
|
|
1109
|
-
- onSelect: function
|
|
1110
|
-
- separators: boolean
|
|
1111
|
-
- triggerRef: React.RefObject
|
|
1112
|
-
- autocomplete: boolean
|
|
1113
|
-
related_components:
|
|
1114
|
-
- select
|
|
1115
|
-
- popover
|
|
1116
|
-
- typeahead
|
|
1117
|
-
- multi_level_select
|
|
1118
561
|
subcomponents:
|
|
1119
562
|
- Dropdown.Trigger
|
|
1120
563
|
- Dropdown.Container
|
|
@@ -1127,18 +570,6 @@ kits:
|
|
|
1127
570
|
icons_used: true
|
|
1128
571
|
react_rendered: true
|
|
1129
572
|
enhanced_element_used: false
|
|
1130
|
-
schema_path: pb_multi_level_select/kit.schema.json
|
|
1131
|
-
props_summary:
|
|
1132
|
-
- treeData: "array (required)"
|
|
1133
|
-
- onSelect: function
|
|
1134
|
-
- returnAllSelected: boolean
|
|
1135
|
-
- variant: "multi | single"
|
|
1136
|
-
- inputDisplay: "pills | none"
|
|
1137
|
-
- selectedIds: "string[]"
|
|
1138
|
-
related_components:
|
|
1139
|
-
- dropdown
|
|
1140
|
-
- typeahead
|
|
1141
|
-
- checkbox
|
|
1142
573
|
- name: select
|
|
1143
574
|
platforms: *1
|
|
1144
575
|
description: Select displays multiple options for a user to pick from in a dropdown
|
|
@@ -1147,21 +578,6 @@ kits:
|
|
|
1147
578
|
icons_used: true
|
|
1148
579
|
react_rendered: false
|
|
1149
580
|
enhanced_element_used: true
|
|
1150
|
-
schema_path: pb_select/kit.schema.json
|
|
1151
|
-
props_summary:
|
|
1152
|
-
- options: "array (required)"
|
|
1153
|
-
- label: string
|
|
1154
|
-
- blank_selection: string
|
|
1155
|
-
- disabled: boolean
|
|
1156
|
-
- required: boolean
|
|
1157
|
-
- error: string
|
|
1158
|
-
- multiple: boolean
|
|
1159
|
-
- name: string
|
|
1160
|
-
- onChange: function
|
|
1161
|
-
related_components:
|
|
1162
|
-
- dropdown
|
|
1163
|
-
- typeahead
|
|
1164
|
-
- radio
|
|
1165
581
|
- name: selectable_card
|
|
1166
582
|
platforms: *1
|
|
1167
583
|
description: Cards for information/content that can be selected. There is design
|
|
@@ -1170,21 +586,6 @@ kits:
|
|
|
1170
586
|
icons_used: true
|
|
1171
587
|
react_rendered: false
|
|
1172
588
|
enhanced_element_used: false
|
|
1173
|
-
schema_path: pb_selectable_card/kit.schema.json
|
|
1174
|
-
props_summary:
|
|
1175
|
-
- checked: boolean
|
|
1176
|
-
- disabled: boolean
|
|
1177
|
-
- icon: boolean
|
|
1178
|
-
- inputId: string
|
|
1179
|
-
- multi: boolean
|
|
1180
|
-
- name: string
|
|
1181
|
-
- onChange: function
|
|
1182
|
-
- variant: "default | displayInput"
|
|
1183
|
-
related_components:
|
|
1184
|
-
- card
|
|
1185
|
-
- checkbox
|
|
1186
|
-
- radio
|
|
1187
|
-
- selectable_card_icon
|
|
1188
589
|
- name: selectable_card_icon
|
|
1189
590
|
platforms: *1
|
|
1190
591
|
description: Selectable card variant with icon display for visual selection options.
|
|
@@ -1192,18 +593,6 @@ kits:
|
|
|
1192
593
|
icons_used: false
|
|
1193
594
|
react_rendered: false
|
|
1194
595
|
enhanced_element_used: false
|
|
1195
|
-
schema_path: pb_selectable_card_icon/kit.schema.json
|
|
1196
|
-
props_summary:
|
|
1197
|
-
- icon: string (required)
|
|
1198
|
-
- titleText: string
|
|
1199
|
-
- bodyText: string
|
|
1200
|
-
- checked: boolean
|
|
1201
|
-
- inputId: string
|
|
1202
|
-
- name: string
|
|
1203
|
-
related_components:
|
|
1204
|
-
- selectable_card
|
|
1205
|
-
- selectable_icon
|
|
1206
|
-
- icon
|
|
1207
596
|
- name: selectable_icon
|
|
1208
597
|
platforms: *1
|
|
1209
598
|
description: Icon-based selection input for compact visual choices.
|
|
@@ -1211,19 +600,6 @@ kits:
|
|
|
1211
600
|
icons_used: true
|
|
1212
601
|
react_rendered: false
|
|
1213
602
|
enhanced_element_used: false
|
|
1214
|
-
schema_path: pb_selectable_icon/kit.schema.json
|
|
1215
|
-
props_summary:
|
|
1216
|
-
- icon: string (required)
|
|
1217
|
-
- checked: boolean
|
|
1218
|
-
- disabled: boolean
|
|
1219
|
-
- inputId: string
|
|
1220
|
-
- name: string
|
|
1221
|
-
- onChange: function
|
|
1222
|
-
- text: string
|
|
1223
|
-
related_components:
|
|
1224
|
-
- selectable_card_icon
|
|
1225
|
-
- icon
|
|
1226
|
-
- checkbox
|
|
1227
603
|
- name: radio
|
|
1228
604
|
platforms: *3
|
|
1229
605
|
description: Radio is a control that allows the user to only choose one predefined
|
|
@@ -1232,19 +608,6 @@ kits:
|
|
|
1232
608
|
icons_used: false
|
|
1233
609
|
react_rendered: false
|
|
1234
610
|
enhanced_element_used: false
|
|
1235
|
-
schema_path: pb_radio/kit.schema.json
|
|
1236
|
-
props_summary:
|
|
1237
|
-
- checked: boolean
|
|
1238
|
-
- disabled: boolean
|
|
1239
|
-
- label: string
|
|
1240
|
-
- name: string (required)
|
|
1241
|
-
- value: string
|
|
1242
|
-
- onChange: function
|
|
1243
|
-
- orientation: "vertical | horizontal"
|
|
1244
|
-
related_components:
|
|
1245
|
-
- checkbox
|
|
1246
|
-
- select
|
|
1247
|
-
- selectable_card
|
|
1248
611
|
- name: checkbox
|
|
1249
612
|
platforms: *1
|
|
1250
613
|
description: Checkbox is used for a list of selections that are meant to have
|
|
@@ -1253,21 +616,6 @@ kits:
|
|
|
1253
616
|
icons_used: true
|
|
1254
617
|
react_rendered: false
|
|
1255
618
|
enhanced_element_used: true
|
|
1256
|
-
schema_path: pb_checkbox/kit.schema.json
|
|
1257
|
-
props_summary:
|
|
1258
|
-
- checked: boolean
|
|
1259
|
-
- disabled: boolean
|
|
1260
|
-
- label: string
|
|
1261
|
-
- name: string
|
|
1262
|
-
- value: string
|
|
1263
|
-
- onChange: function
|
|
1264
|
-
- indeterminate: boolean
|
|
1265
|
-
- error: boolean
|
|
1266
|
-
related_components:
|
|
1267
|
-
- radio
|
|
1268
|
-
- toggle
|
|
1269
|
-
- selectable_card
|
|
1270
|
-
- multi_level_select
|
|
1271
619
|
- name: selectable_list
|
|
1272
620
|
platforms: *1
|
|
1273
621
|
description: List of items that can be selected, supporting single or multiple selection.
|
|
@@ -1275,14 +623,6 @@ kits:
|
|
|
1275
623
|
icons_used: false
|
|
1276
624
|
react_rendered: false
|
|
1277
625
|
enhanced_element_used: false
|
|
1278
|
-
schema_path: pb_selectable_list/kit.schema.json
|
|
1279
|
-
props_summary:
|
|
1280
|
-
- variant: "radio | checkbox"
|
|
1281
|
-
- children: ReactNode
|
|
1282
|
-
related_components:
|
|
1283
|
-
- radio
|
|
1284
|
-
- checkbox
|
|
1285
|
-
- list
|
|
1286
626
|
- name: time_picker
|
|
1287
627
|
platforms: web
|
|
1288
628
|
description: A time picker component that allows users to select a time independently of the date.
|
|
@@ -1290,17 +630,6 @@ kits:
|
|
|
1290
630
|
icons_used: true
|
|
1291
631
|
react_rendered: true
|
|
1292
632
|
enhanced_element_used: true
|
|
1293
|
-
schema_path: pb_time_picker/kit.schema.json
|
|
1294
|
-
props_summary:
|
|
1295
|
-
- pickerId: string (required)
|
|
1296
|
-
- defaultValue: string
|
|
1297
|
-
- minTime: string
|
|
1298
|
-
- maxTime: string
|
|
1299
|
-
- onChange: function
|
|
1300
|
-
- label: string
|
|
1301
|
-
related_components:
|
|
1302
|
-
- date_picker
|
|
1303
|
-
- text_input
|
|
1304
633
|
- category: icons_and_images
|
|
1305
634
|
description: Components for displaying icons, images, and visual media.
|
|
1306
635
|
components:
|
|
@@ -1312,18 +641,6 @@ kits:
|
|
|
1312
641
|
icons_used: true
|
|
1313
642
|
react_rendered: false
|
|
1314
643
|
enhanced_element_used: false
|
|
1315
|
-
schema_path: pb_icon/kit.schema.json
|
|
1316
|
-
props_summary:
|
|
1317
|
-
- icon: string (required)
|
|
1318
|
-
- size: "xs | sm | 1x | lg | 2x | 3x | 4x | 5x"
|
|
1319
|
-
- rotation: "90 | 180 | 270"
|
|
1320
|
-
- flip: "horizontal | vertical | both"
|
|
1321
|
-
- spin: boolean
|
|
1322
|
-
- fontStyle: "far | fas | fab | fak"
|
|
1323
|
-
related_components:
|
|
1324
|
-
- icon_circle
|
|
1325
|
-
- icon_value
|
|
1326
|
-
- circle_icon_button
|
|
1327
644
|
- name: icon_circle
|
|
1328
645
|
platforms: *1
|
|
1329
646
|
description: Similar to Icon, Icon Circle is a graphical symbol within a circle
|
|
@@ -1332,15 +649,6 @@ kits:
|
|
|
1332
649
|
icons_used: true
|
|
1333
650
|
react_rendered: false
|
|
1334
651
|
enhanced_element_used: false
|
|
1335
|
-
schema_path: pb_icon_circle/kit.schema.json
|
|
1336
|
-
props_summary:
|
|
1337
|
-
- icon: string (required)
|
|
1338
|
-
- size: "xs | sm | md | lg | xl"
|
|
1339
|
-
- variant: "default | royal | blue | purple | teal | red | yellow | green"
|
|
1340
|
-
related_components:
|
|
1341
|
-
- icon
|
|
1342
|
-
- circle_icon_button
|
|
1343
|
-
- avatar
|
|
1344
652
|
- name: icon_stat_value
|
|
1345
653
|
platforms: *1
|
|
1346
654
|
description: Displays a statistic value with an associated icon.
|
|
@@ -1348,14 +656,6 @@ kits:
|
|
|
1348
656
|
icons_used: true
|
|
1349
657
|
react_rendered: false
|
|
1350
658
|
enhanced_element_used: false
|
|
1351
|
-
schema_path: pb_icon_stat_value/kit.schema.json
|
|
1352
|
-
props_summary:
|
|
1353
|
-
- icon: string (required)
|
|
1354
|
-
- text: string (required)
|
|
1355
|
-
- size: "sm | md | lg"
|
|
1356
|
-
related_components:
|
|
1357
|
-
- stat_value
|
|
1358
|
-
- icon_value
|
|
1359
659
|
- name: icon_value
|
|
1360
660
|
platforms: *1
|
|
1361
661
|
description: Icon Value leverages our icon kit, to display a value of some sort
|
|
@@ -1364,14 +664,6 @@ kits:
|
|
|
1364
664
|
icons_used: true
|
|
1365
665
|
react_rendered: false
|
|
1366
666
|
enhanced_element_used: false
|
|
1367
|
-
schema_path: pb_icon_value/kit.schema.json
|
|
1368
|
-
props_summary:
|
|
1369
|
-
- icon: string (required)
|
|
1370
|
-
- text: string (required)
|
|
1371
|
-
- align: "left | center | right"
|
|
1372
|
-
related_components:
|
|
1373
|
-
- icon
|
|
1374
|
-
- label_value
|
|
1375
667
|
- name: user_badge
|
|
1376
668
|
platforms: *1
|
|
1377
669
|
description: This kit was created to display employee icons related to a Nitro
|
|
@@ -1380,13 +672,6 @@ kits:
|
|
|
1380
672
|
icons_used: false
|
|
1381
673
|
react_rendered: false
|
|
1382
674
|
enhanced_element_used: false
|
|
1383
|
-
schema_path: pb_user_badge/kit.schema.json
|
|
1384
|
-
props_summary:
|
|
1385
|
-
- badge: "pvi | million-dollar"
|
|
1386
|
-
- size: "sm | md | lg"
|
|
1387
|
-
related_components:
|
|
1388
|
-
- badge
|
|
1389
|
-
- user
|
|
1390
675
|
- name: image
|
|
1391
676
|
platforms: *1
|
|
1392
677
|
description: A responsive image component.
|
|
@@ -1394,15 +679,6 @@ kits:
|
|
|
1394
679
|
icons_used: false
|
|
1395
680
|
react_rendered: false
|
|
1396
681
|
enhanced_element_used: false
|
|
1397
|
-
schema_path: pb_image/kit.schema.json
|
|
1398
|
-
props_summary:
|
|
1399
|
-
- url: string (required)
|
|
1400
|
-
- alt: string
|
|
1401
|
-
- size: "xs | sm | md | lg | xl | none"
|
|
1402
|
-
- rounded: boolean
|
|
1403
|
-
related_components:
|
|
1404
|
-
- avatar
|
|
1405
|
-
- lightbox
|
|
1406
682
|
- name: lightbox
|
|
1407
683
|
platforms: *2
|
|
1408
684
|
description: The Lightbox kit is a popup window overlay that will appear on top
|
|
@@ -1411,14 +687,6 @@ kits:
|
|
|
1411
687
|
icons_used: false
|
|
1412
688
|
react_rendered: false
|
|
1413
689
|
enhanced_element_used: false
|
|
1414
|
-
schema_path: pb_lightbox/kit.schema.json
|
|
1415
|
-
props_summary:
|
|
1416
|
-
- photos: "array (required)"
|
|
1417
|
-
- initialPhoto: number
|
|
1418
|
-
- onClose: function
|
|
1419
|
-
related_components:
|
|
1420
|
-
- image
|
|
1421
|
-
- dialog
|
|
1422
690
|
- name: star_rating
|
|
1423
691
|
platforms: *1
|
|
1424
692
|
description: A component to view other people’s opinions and experiences. Use
|
|
@@ -1428,15 +696,6 @@ kits:
|
|
|
1428
696
|
icons_used: true
|
|
1429
697
|
react_rendered: false
|
|
1430
698
|
enhanced_element_used: true
|
|
1431
|
-
schema_path: pb_star_rating/kit.schema.json
|
|
1432
|
-
props_summary:
|
|
1433
|
-
- rating: number (required)
|
|
1434
|
-
- denominator: number
|
|
1435
|
-
- layoutOption: "default | onestar | number"
|
|
1436
|
-
- size: "sm | md | lg"
|
|
1437
|
-
related_components:
|
|
1438
|
-
- icon
|
|
1439
|
-
- badge
|
|
1440
699
|
- category: layout_and_structure
|
|
1441
700
|
description: Components for structuring and organizing page layouts and content containers.
|
|
1442
701
|
components:
|
|
@@ -1448,18 +707,6 @@ kits:
|
|
|
1448
707
|
icons_used: false
|
|
1449
708
|
react_rendered: false
|
|
1450
709
|
enhanced_element_used: false
|
|
1451
|
-
schema_path: pb_flex/kit.schema.json
|
|
1452
|
-
props_summary:
|
|
1453
|
-
- orientation: "row | column"
|
|
1454
|
-
- justify: "start | center | end | spaceBetween | spaceAround | spaceEvenly"
|
|
1455
|
-
- align: "start | center | end | stretch | baseline"
|
|
1456
|
-
- wrap: boolean
|
|
1457
|
-
- gap: "none | xxs | xs | sm | md | lg | xl"
|
|
1458
|
-
- inline: boolean
|
|
1459
|
-
related_components:
|
|
1460
|
-
- layout
|
|
1461
|
-
- card
|
|
1462
|
-
- body
|
|
1463
710
|
- name: layout
|
|
1464
711
|
platforms: *1
|
|
1465
712
|
description: Layouts used for positioning content inside of pages, cards, or containers.
|
|
@@ -1467,17 +714,6 @@ kits:
|
|
|
1467
714
|
icons_used: false
|
|
1468
715
|
react_rendered: false
|
|
1469
716
|
enhanced_element_used: false
|
|
1470
|
-
schema_path: pb_layout/kit.schema.json
|
|
1471
|
-
props_summary:
|
|
1472
|
-
- variant: "light | dark | transparent"
|
|
1473
|
-
- size: "xs | sm | md | lg | xl"
|
|
1474
|
-
- position: "left | right"
|
|
1475
|
-
- collapse: "xs | sm | md | lg | xl"
|
|
1476
|
-
- full: boolean
|
|
1477
|
-
related_components:
|
|
1478
|
-
- flex
|
|
1479
|
-
- card
|
|
1480
|
-
- background
|
|
1481
717
|
- name: card
|
|
1482
718
|
platforms: *3
|
|
1483
719
|
description: Content container with optional header, body sections, and various styling options.
|
|
@@ -1485,20 +721,6 @@ kits:
|
|
|
1485
721
|
icons_used: true
|
|
1486
722
|
react_rendered: false
|
|
1487
723
|
enhanced_element_used: false
|
|
1488
|
-
schema_path: pb_card/kit.schema.json
|
|
1489
|
-
props_summary:
|
|
1490
|
-
- borderRadius: "none | xs | sm | md | lg | xl | rounded"
|
|
1491
|
-
- borderNone: boolean
|
|
1492
|
-
- background: "none | white | light | dark | product colors"
|
|
1493
|
-
- padding: "none | xxs | xs | sm | md | lg | xl"
|
|
1494
|
-
- selected: boolean
|
|
1495
|
-
- highlight: "{ position: side | top, color: string }"
|
|
1496
|
-
- tag: "div | section | footer | header | article | aside | main | nav"
|
|
1497
|
-
related_components:
|
|
1498
|
-
- selectable_card
|
|
1499
|
-
- flex
|
|
1500
|
-
- body
|
|
1501
|
-
- title
|
|
1502
724
|
subcomponents:
|
|
1503
725
|
- Card.Header
|
|
1504
726
|
- Card.Body
|
|
@@ -1510,14 +732,6 @@ kits:
|
|
|
1510
732
|
icons_used: false
|
|
1511
733
|
react_rendered: false
|
|
1512
734
|
enhanced_element_used: false
|
|
1513
|
-
schema_path: pb_section_separator/kit.schema.json
|
|
1514
|
-
props_summary:
|
|
1515
|
-
- variant: "card | background"
|
|
1516
|
-
- text: string
|
|
1517
|
-
- orientation: "horizontal | vertical"
|
|
1518
|
-
related_components:
|
|
1519
|
-
- card
|
|
1520
|
-
- flex
|
|
1521
735
|
- name: background
|
|
1522
736
|
platforms: *1
|
|
1523
737
|
description: The background kit is used for adding a background to a page or to
|
|
@@ -1526,14 +740,6 @@ kits:
|
|
|
1526
740
|
icons_used: false
|
|
1527
741
|
react_rendered: false
|
|
1528
742
|
enhanced_element_used: false
|
|
1529
|
-
schema_path: pb_background/kit.schema.json
|
|
1530
|
-
props_summary:
|
|
1531
|
-
- backgroundColor: "gradient | dark | light | white | status colors | category colors | product colors"
|
|
1532
|
-
- imageUrl: string
|
|
1533
|
-
- tag: string
|
|
1534
|
-
related_components:
|
|
1535
|
-
- card
|
|
1536
|
-
- layout
|
|
1537
743
|
- name: collapsible
|
|
1538
744
|
platforms: *1
|
|
1539
745
|
description: Collapsible content that can be expanded or collapsed.
|
|
@@ -1541,16 +747,6 @@ kits:
|
|
|
1541
747
|
icons_used: true
|
|
1542
748
|
react_rendered: false
|
|
1543
749
|
enhanced_element_used: true
|
|
1544
|
-
schema_path: pb_collapsible/kit.schema.json
|
|
1545
|
-
props_summary:
|
|
1546
|
-
- collapsed: boolean
|
|
1547
|
-
- onCollapse: function
|
|
1548
|
-
- icon: "string | string[]"
|
|
1549
|
-
- iconColor: "default | light | lighter | link | error | success"
|
|
1550
|
-
- iconSize: "xs | sm | 1x | lg | 2x | 3x | 4x | 5x"
|
|
1551
|
-
related_components:
|
|
1552
|
-
- card
|
|
1553
|
-
- flex
|
|
1554
750
|
subcomponents:
|
|
1555
751
|
- Collapsible.Main
|
|
1556
752
|
- Collapsible.Content
|
|
@@ -1561,14 +757,6 @@ kits:
|
|
|
1561
757
|
icons_used: false
|
|
1562
758
|
react_rendered: false
|
|
1563
759
|
enhanced_element_used: true
|
|
1564
|
-
schema_path: pb_overlay/kit.schema.json
|
|
1565
|
-
props_summary:
|
|
1566
|
-
- color: "card_light | card_dark | bg_light | bg_dark | opacity"
|
|
1567
|
-
- gradient: boolean
|
|
1568
|
-
- layout: "default | left | right | center | none"
|
|
1569
|
-
related_components:
|
|
1570
|
-
- dialog
|
|
1571
|
-
- popover
|
|
1572
760
|
- name: draggable
|
|
1573
761
|
platforms: *1
|
|
1574
762
|
description: Drag and drop functionality for reordering items.
|
|
@@ -1576,14 +764,6 @@ kits:
|
|
|
1576
764
|
icons_used: false
|
|
1577
765
|
react_rendered: false
|
|
1578
766
|
enhanced_element_used: false
|
|
1579
|
-
schema_path: pb_draggable/kit.schema.json
|
|
1580
|
-
props_summary:
|
|
1581
|
-
- initialItems: array
|
|
1582
|
-
- onReorder: function
|
|
1583
|
-
- dropZoneData: object
|
|
1584
|
-
related_components:
|
|
1585
|
-
- list
|
|
1586
|
-
- table
|
|
1587
767
|
subcomponents:
|
|
1588
768
|
- Draggable.Container
|
|
1589
769
|
- Draggable.Item
|
|
@@ -1597,13 +777,6 @@ kits:
|
|
|
1597
777
|
icons_used: false
|
|
1598
778
|
react_rendered: false
|
|
1599
779
|
enhanced_element_used: false
|
|
1600
|
-
schema_path: pb_highlight/kit.schema.json
|
|
1601
|
-
props_summary:
|
|
1602
|
-
- text: string (required)
|
|
1603
|
-
- highlightedText: "string | string[]"
|
|
1604
|
-
related_components:
|
|
1605
|
-
- body
|
|
1606
|
-
- title
|
|
1607
780
|
- name: message
|
|
1608
781
|
platforms: *1
|
|
1609
782
|
description: This multi kit consist of a an avatar, a status, a caption, a body
|
|
@@ -1612,18 +785,6 @@ kits:
|
|
|
1612
785
|
icons_used: false
|
|
1613
786
|
react_rendered: false
|
|
1614
787
|
enhanced_element_used: false
|
|
1615
|
-
schema_path: pb_message/kit.schema.json
|
|
1616
|
-
props_summary:
|
|
1617
|
-
- avatarUrl: string
|
|
1618
|
-
- avatarName: string
|
|
1619
|
-
- avatarStatus: "online | away | offline"
|
|
1620
|
-
- label: string
|
|
1621
|
-
- message: string
|
|
1622
|
-
- timestamp: string
|
|
1623
|
-
related_components:
|
|
1624
|
-
- avatar
|
|
1625
|
-
- timestamp
|
|
1626
|
-
- body
|
|
1627
788
|
- category: navigation
|
|
1628
789
|
description: Components for navigation, breadcrumbs, and pagination.
|
|
1629
790
|
components:
|
|
@@ -1634,12 +795,6 @@ kits:
|
|
|
1634
795
|
icons_used: false
|
|
1635
796
|
react_rendered: false
|
|
1636
797
|
enhanced_element_used: false
|
|
1637
|
-
schema_path: pb_bread_crumbs/kit.schema.json
|
|
1638
|
-
props_summary:
|
|
1639
|
-
- links: "array (required)"
|
|
1640
|
-
related_components:
|
|
1641
|
-
- nav
|
|
1642
|
-
- link
|
|
1643
798
|
- name: nav
|
|
1644
799
|
platforms: *1
|
|
1645
800
|
description: The nav is a grouped set of links that take the user to another page,
|
|
@@ -1649,25 +804,12 @@ kits:
|
|
|
1649
804
|
icons_used: true
|
|
1650
805
|
react_rendered: false
|
|
1651
806
|
enhanced_element_used: true
|
|
1652
|
-
schema_path: pb_nav/kit.schema.json
|
|
1653
|
-
props_summary:
|
|
1654
|
-
- variant: "normal | subtle | bold"
|
|
1655
|
-
- orientation: "vertical | horizontal"
|
|
1656
|
-
- highlight: boolean
|
|
1657
|
-
- link: string
|
|
1658
|
-
related_components:
|
|
1659
|
-
- bread_crumbs
|
|
1660
|
-
- list
|
|
1661
807
|
subcomponents:
|
|
1662
808
|
- Nav.Item
|
|
1663
809
|
- name: pagination
|
|
1664
810
|
platforms: *4
|
|
1665
811
|
description: Pagination for navigating through multiple pages of content.
|
|
1666
812
|
status: stable
|
|
1667
|
-
schema_path: pb_pagination/kit.schema.json
|
|
1668
|
-
related_components:
|
|
1669
|
-
- table
|
|
1670
|
-
- list
|
|
1671
813
|
- category: state_and_progress_indicators
|
|
1672
814
|
description: Components for showing loading states, progress, and timelines.
|
|
1673
815
|
components:
|
|
@@ -1678,15 +820,6 @@ kits:
|
|
|
1678
820
|
icons_used: false
|
|
1679
821
|
react_rendered: false
|
|
1680
822
|
enhanced_element_used: false
|
|
1681
|
-
schema_path: pb_empty_state/kit.schema.json
|
|
1682
|
-
props_summary:
|
|
1683
|
-
- title: string (required)
|
|
1684
|
-
- description: string
|
|
1685
|
-
- icon: string
|
|
1686
|
-
- image: string
|
|
1687
|
-
related_components:
|
|
1688
|
-
- card
|
|
1689
|
-
- icon_circle
|
|
1690
823
|
- name: loading_inline
|
|
1691
824
|
platforms: *1
|
|
1692
825
|
description: The loading kit is used to indicate to users that a page is still
|
|
@@ -1695,12 +828,6 @@ kits:
|
|
|
1695
828
|
icons_used: true
|
|
1696
829
|
react_rendered: false
|
|
1697
830
|
enhanced_element_used: false
|
|
1698
|
-
schema_path: pb_loading_inline/kit.schema.json
|
|
1699
|
-
props_summary:
|
|
1700
|
-
- align: "left | center | right"
|
|
1701
|
-
related_components:
|
|
1702
|
-
- progress_simple
|
|
1703
|
-
- button
|
|
1704
831
|
- name: progress_pills
|
|
1705
832
|
platforms: *1
|
|
1706
833
|
description: Progress pills indicate a specific point in time of a series of sequential
|
|
@@ -1709,27 +836,11 @@ kits:
|
|
|
1709
836
|
icons_used: false
|
|
1710
837
|
react_rendered: false
|
|
1711
838
|
enhanced_element_used: false
|
|
1712
|
-
schema_path: pb_progress_pills/kit.schema.json
|
|
1713
|
-
props_summary:
|
|
1714
|
-
- active: number (required)
|
|
1715
|
-
- steps: number (required)
|
|
1716
|
-
- title: string
|
|
1717
|
-
related_components:
|
|
1718
|
-
- progress_step
|
|
1719
|
-
- progress_simple
|
|
1720
839
|
- name: progress_simple
|
|
1721
840
|
platforms: *1
|
|
1722
841
|
description: Displays the current progress of an operation flow. User understanding
|
|
1723
842
|
increases when paired with labels or numbers.
|
|
1724
843
|
status: stable
|
|
1725
|
-
schema_path: pb_progress_simple/kit.schema.json
|
|
1726
|
-
props_summary:
|
|
1727
|
-
- percent: number (required)
|
|
1728
|
-
- max: number
|
|
1729
|
-
- value: string
|
|
1730
|
-
related_components:
|
|
1731
|
-
- progress_pills
|
|
1732
|
-
- distribution_bar
|
|
1733
844
|
- name: progress_step
|
|
1734
845
|
platforms: *1
|
|
1735
846
|
description: 'Progress step kit is used to show the progress of a process. There
|
|
@@ -1738,15 +849,6 @@ kits:
|
|
|
1738
849
|
icons_used: true
|
|
1739
850
|
react_rendered: false
|
|
1740
851
|
enhanced_element_used: false
|
|
1741
|
-
schema_path: pb_progress_step/kit.schema.json
|
|
1742
|
-
props_summary:
|
|
1743
|
-
- steps: "array (required)"
|
|
1744
|
-
- icon: boolean
|
|
1745
|
-
- orientation: "horizontal | vertical"
|
|
1746
|
-
- variant: "default | tracker"
|
|
1747
|
-
related_components:
|
|
1748
|
-
- progress_pills
|
|
1749
|
-
- timeline
|
|
1750
852
|
subcomponents:
|
|
1751
853
|
- ProgressStep.Item
|
|
1752
854
|
- name: timeline
|
|
@@ -1757,13 +859,6 @@ kits:
|
|
|
1757
859
|
icons_used: true
|
|
1758
860
|
react_rendered: false
|
|
1759
861
|
enhanced_element_used: false
|
|
1760
|
-
schema_path: pb_timeline/kit.schema.json
|
|
1761
|
-
props_summary:
|
|
1762
|
-
- orientation: "horizontal | vertical"
|
|
1763
|
-
- showDate: boolean
|
|
1764
|
-
related_components:
|
|
1765
|
-
- progress_step
|
|
1766
|
-
- list
|
|
1767
862
|
subcomponents:
|
|
1768
863
|
- Timeline.Item
|
|
1769
864
|
- name: skeleton_loading
|
|
@@ -1773,15 +868,6 @@ kits:
|
|
|
1773
868
|
icons_used: false
|
|
1774
869
|
react_rendered: false
|
|
1775
870
|
enhanced_element_used: false
|
|
1776
|
-
schema_path: pb_skeleton_loading/kit.schema.json
|
|
1777
|
-
props_summary:
|
|
1778
|
-
- borderRadius: "none | xs | sm | md | lg | xl | rounded"
|
|
1779
|
-
- height: string
|
|
1780
|
-
- width: string
|
|
1781
|
-
- gap: "xxs | xs | sm | md | lg | xl"
|
|
1782
|
-
related_components:
|
|
1783
|
-
- loading_inline
|
|
1784
|
-
- card
|
|
1785
871
|
- category: tags
|
|
1786
872
|
description: Components for tags, badges, pills, and status indicators.
|
|
1787
873
|
components:
|
|
@@ -1793,14 +879,6 @@ kits:
|
|
|
1793
879
|
icons_used: true
|
|
1794
880
|
react_rendered: false
|
|
1795
881
|
enhanced_element_used: false
|
|
1796
|
-
schema_path: pb_badge/kit.schema.json
|
|
1797
|
-
props_summary:
|
|
1798
|
-
- text: string (required)
|
|
1799
|
-
- variant: "primary | success | warning | error | info | neutral"
|
|
1800
|
-
- rounded: boolean
|
|
1801
|
-
related_components:
|
|
1802
|
-
- pill
|
|
1803
|
-
- online_status
|
|
1804
882
|
- name: online_status
|
|
1805
883
|
platforms: *1
|
|
1806
884
|
description: Online Status is a small indicator that lets the user know the status
|
|
@@ -1809,13 +887,6 @@ kits:
|
|
|
1809
887
|
icons_used: false
|
|
1810
888
|
react_rendered: false
|
|
1811
889
|
enhanced_element_used: false
|
|
1812
|
-
schema_path: pb_online_status/kit.schema.json
|
|
1813
|
-
props_summary:
|
|
1814
|
-
- "status: online | offline | away (required)"
|
|
1815
|
-
related_components:
|
|
1816
|
-
- badge
|
|
1817
|
-
- avatar
|
|
1818
|
-
- user
|
|
1819
890
|
- name: pill
|
|
1820
891
|
platforms: *3
|
|
1821
892
|
description: A pill uses both a keyword and a specific color to categorize an
|
|
@@ -1824,16 +895,6 @@ kits:
|
|
|
1824
895
|
icons_used: false
|
|
1825
896
|
react_rendered: false
|
|
1826
897
|
enhanced_element_used: false
|
|
1827
|
-
schema_path: pb_pill/kit.schema.json
|
|
1828
|
-
props_summary:
|
|
1829
|
-
- text: string (required)
|
|
1830
|
-
- variant: "primary | warning | error | info | neutral | success"
|
|
1831
|
-
- closeProps: object
|
|
1832
|
-
- textTransform: "none | lowercase"
|
|
1833
|
-
related_components:
|
|
1834
|
-
- badge
|
|
1835
|
-
- label_pill
|
|
1836
|
-
- form_pill
|
|
1837
898
|
- name: hashtag
|
|
1838
899
|
platforms: *1
|
|
1839
900
|
description: Hashtag is used to display home, project and other forms of IDs.
|
|
@@ -1842,14 +903,6 @@ kits:
|
|
|
1842
903
|
icons_used: false
|
|
1843
904
|
react_rendered: false
|
|
1844
905
|
enhanced_element_used: false
|
|
1845
|
-
schema_path: pb_hashtag/kit.schema.json
|
|
1846
|
-
props_summary:
|
|
1847
|
-
- text: string (required)
|
|
1848
|
-
- type: "default | home | project | appointment"
|
|
1849
|
-
- url: string
|
|
1850
|
-
related_components:
|
|
1851
|
-
- pill
|
|
1852
|
-
- home_address_street
|
|
1853
906
|
- category: typography
|
|
1854
907
|
description: Text components for consistent typography throughout the application.
|
|
1855
908
|
components:
|
|
@@ -1862,19 +915,6 @@ kits:
|
|
|
1862
915
|
icons_used: false
|
|
1863
916
|
react_rendered: false
|
|
1864
917
|
enhanced_element_used: false
|
|
1865
|
-
schema_path: pb_body/kit.schema.json
|
|
1866
|
-
props_summary:
|
|
1867
|
-
- color: "default | light | lighter | link"
|
|
1868
|
-
- text: string
|
|
1869
|
-
- tag: "p | span | div | h1 | h2 | h3 | h4 | h5 | h6"
|
|
1870
|
-
- status: "neutral | negative | positive"
|
|
1871
|
-
- highlightedText: "string[]"
|
|
1872
|
-
- highlighting: boolean
|
|
1873
|
-
related_components:
|
|
1874
|
-
- title
|
|
1875
|
-
- caption
|
|
1876
|
-
- detail
|
|
1877
|
-
- highlight
|
|
1878
918
|
- name: caption
|
|
1879
919
|
platforms: *1
|
|
1880
920
|
description: Use to provide supplementary context. Default size is best when providing
|
|
@@ -1884,16 +924,6 @@ kits:
|
|
|
1884
924
|
icons_used: false
|
|
1885
925
|
react_rendered: false
|
|
1886
926
|
enhanced_element_used: false
|
|
1887
|
-
schema_path: pb_caption/kit.schema.json
|
|
1888
|
-
props_summary:
|
|
1889
|
-
- size: "xs | sm | md | lg"
|
|
1890
|
-
- text: string
|
|
1891
|
-
- tag: "div | span | caption | h1 | h2 | h3 | h4 | h5 | h6 | p | label"
|
|
1892
|
-
- variant: "null | link"
|
|
1893
|
-
related_components:
|
|
1894
|
-
- body
|
|
1895
|
-
- detail
|
|
1896
|
-
- title
|
|
1897
927
|
- name: detail
|
|
1898
928
|
platforms: *1
|
|
1899
929
|
description: Used for tables or designs with large amounts of data or text.
|
|
@@ -1901,15 +931,6 @@ kits:
|
|
|
1901
931
|
icons_used: false
|
|
1902
932
|
react_rendered: false
|
|
1903
933
|
enhanced_element_used: false
|
|
1904
|
-
schema_path: pb_detail/kit.schema.json
|
|
1905
|
-
props_summary:
|
|
1906
|
-
- text: string
|
|
1907
|
-
- bold: boolean
|
|
1908
|
-
- color: "default | light | lighter | link"
|
|
1909
|
-
related_components:
|
|
1910
|
-
- body
|
|
1911
|
-
- caption
|
|
1912
|
-
- title
|
|
1913
934
|
- name: title
|
|
1914
935
|
platforms: *1
|
|
1915
936
|
description: Typically used as headers. Follow semantic hierarchy — Title 1s should
|
|
@@ -1919,19 +940,6 @@ kits:
|
|
|
1919
940
|
icons_used: false
|
|
1920
941
|
react_rendered: false
|
|
1921
942
|
enhanced_element_used: false
|
|
1922
|
-
schema_path: pb_title/kit.schema.json
|
|
1923
|
-
props_summary:
|
|
1924
|
-
- size: "1 | 2 | 3 | 4"
|
|
1925
|
-
- text: string
|
|
1926
|
-
- tag: "h1 | h2 | h3 | h4 | h5 | h6 | p | span | div"
|
|
1927
|
-
- variant: "null | link"
|
|
1928
|
-
- bold: boolean
|
|
1929
|
-
- color: "default | light | lighter | link"
|
|
1930
|
-
related_components:
|
|
1931
|
-
- body
|
|
1932
|
-
- caption
|
|
1933
|
-
- detail
|
|
1934
|
-
- highlight
|
|
1935
943
|
- name: link
|
|
1936
944
|
platforms: *1
|
|
1937
945
|
description: Text link for navigation to other pages or sections.
|
|
@@ -1939,19 +947,6 @@ kits:
|
|
|
1939
947
|
icons_used: false
|
|
1940
948
|
react_rendered: false
|
|
1941
949
|
enhanced_element_used: false
|
|
1942
|
-
schema_path: pb_link/kit.schema.json
|
|
1943
|
-
props_summary:
|
|
1944
|
-
- href: string
|
|
1945
|
-
- text: string
|
|
1946
|
-
- underline: boolean
|
|
1947
|
-
- icon: string
|
|
1948
|
-
- iconRight: boolean
|
|
1949
|
-
- target: "_blank | _self | _parent | _top"
|
|
1950
|
-
- tag: "a | h1 | h2 | h3 | h4 | h5 | h6"
|
|
1951
|
-
related_components:
|
|
1952
|
-
- button
|
|
1953
|
-
- nav
|
|
1954
|
-
- bread_crumbs
|
|
1955
950
|
- category: user
|
|
1956
951
|
description: Components for displaying user information, avatars, and user-related data.
|
|
1957
952
|
components:
|
|
@@ -1965,18 +960,6 @@ kits:
|
|
|
1965
960
|
icons_used: true
|
|
1966
961
|
react_rendered: false
|
|
1967
962
|
enhanced_element_used: false
|
|
1968
|
-
schema_path: pb_avatar/kit.schema.json
|
|
1969
|
-
props_summary:
|
|
1970
|
-
- name: string (required)
|
|
1971
|
-
- imageUrl: string
|
|
1972
|
-
- size: "xs | sm | md | lg | xl"
|
|
1973
|
-
- imageAlt: string
|
|
1974
|
-
- status: "online | away | offline"
|
|
1975
|
-
related_components:
|
|
1976
|
-
- user
|
|
1977
|
-
- multiple_users
|
|
1978
|
-
- multiple_users_stacked
|
|
1979
|
-
- online_status
|
|
1980
963
|
- name: multiple_users
|
|
1981
964
|
platforms: *1
|
|
1982
965
|
description: The multiple users kit is used to show that more than one user is
|
|
@@ -1985,14 +968,6 @@ kits:
|
|
|
1985
968
|
icons_used: false
|
|
1986
969
|
react_rendered: false
|
|
1987
970
|
enhanced_element_used: false
|
|
1988
|
-
schema_path: pb_multiple_users/kit.schema.json
|
|
1989
|
-
props_summary:
|
|
1990
|
-
- users: "array (required)"
|
|
1991
|
-
- size: "xs | sm | md | lg | xl"
|
|
1992
|
-
related_components:
|
|
1993
|
-
- avatar
|
|
1994
|
-
- user
|
|
1995
|
-
- multiple_users_stacked
|
|
1996
971
|
- name: multiple_users_stacked
|
|
1997
972
|
platforms: *1
|
|
1998
973
|
description: Multiple users stacked is used in tight spaces, where we need to
|
|
@@ -2001,14 +976,6 @@ kits:
|
|
|
2001
976
|
icons_used: false
|
|
2002
977
|
react_rendered: false
|
|
2003
978
|
enhanced_element_used: false
|
|
2004
|
-
schema_path: pb_multiple_users_stacked/kit.schema.json
|
|
2005
|
-
props_summary:
|
|
2006
|
-
- users: "array (required)"
|
|
2007
|
-
- size: "xs | sm | md | lg | xl"
|
|
2008
|
-
related_components:
|
|
2009
|
-
- avatar
|
|
2010
|
-
- user
|
|
2011
|
-
- multiple_users
|
|
2012
979
|
- name: user
|
|
2013
980
|
platforms: *1
|
|
2014
981
|
description: This kit was created for having a systematic way of displaying users
|
|
@@ -2017,18 +984,4 @@ kits:
|
|
|
2017
984
|
status: stable
|
|
2018
985
|
icons_used: false
|
|
2019
986
|
react_rendered: false
|
|
2020
|
-
enhanced_element_used: false
|
|
2021
|
-
schema_path: pb_user/kit.schema.json
|
|
2022
|
-
props_summary:
|
|
2023
|
-
- name: string (required)
|
|
2024
|
-
- avatar: boolean
|
|
2025
|
-
- avatarUrl: string
|
|
2026
|
-
- orientation: "horizontal | vertical"
|
|
2027
|
-
- size: "sm | md | lg"
|
|
2028
|
-
- title: string
|
|
2029
|
-
- territory: string
|
|
2030
|
-
related_components:
|
|
2031
|
-
- avatar
|
|
2032
|
-
- multiple_users
|
|
2033
|
-
- person
|
|
2034
|
-
- person_contact
|
|
987
|
+
enhanced_element_used: false
|