playbook_ui 14.8.0.pre.alpha.PLAY1615movenegativetoleftofcurrencysign4543 → 14.8.0.pre.alpha.PLAY1658tanstackbump4657

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -4
  5. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +84 -7
  6. data/app/pb_kits/playbook/pb_currency/_currency.tsx +3 -7
  7. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -2
  8. data/app/pb_kits/playbook/pb_currency/currency.rb +1 -17
  9. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -0
  10. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +0 -1
  11. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +0 -4
  12. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  13. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +63 -12
  15. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -1
  16. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +47 -0
  17. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +59 -0
  18. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +3 -0
  19. data/app/pb_kits/playbook/pb_typeahead/index.ts +29 -3
  20. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +5 -2
  21. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
  22. data/app/pb_kits/playbook/tokens/_height.scss +19 -0
  23. data/app/pb_kits/playbook/tokens/exports/_height.module.scss +37 -0
  24. data/app/pb_kits/playbook/utilities/_height.scss +33 -0
  25. data/app/pb_kits/playbook/utilities/_max_width.scss +4 -0
  26. data/app/pb_kits/playbook/utilities/_min_width.scss +1 -1
  27. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  28. data/app/pb_kits/playbook/utilities/globalProps.ts +24 -0
  29. data/dist/chunks/{_typeahead-D0PihN_3.js → _typeahead-C8Q_fFYF.js} +2 -2
  30. data/dist/chunks/_weekday_stacked-BmcCeSXm.js +45 -0
  31. data/dist/chunks/{lib-BC6ESsxG.js → lib-SyD3buPZ.js} +1 -1
  32. data/dist/chunks/{pb_form_validation-B_Z9rEbg.js → pb_form_validation-Dt8UJgrJ.js} +1 -1
  33. data/dist/chunks/vendor.js +1 -1
  34. data/dist/menu.yml +321 -0
  35. data/dist/playbook-doc.js +1 -1
  36. data/dist/playbook-rails-react-bindings.js +1 -1
  37. data/dist/playbook-rails.js +1 -1
  38. data/dist/playbook.css +1 -1
  39. data/lib/playbook/classnames.rb +3 -0
  40. data/lib/playbook/forms/builder/typeahead_field.rb +13 -0
  41. data/lib/playbook/height.rb +29 -0
  42. data/lib/playbook/kit_base.rb +16 -1
  43. data/lib/playbook/max_height.rb +29 -0
  44. data/lib/playbook/min_height.rb +29 -0
  45. data/lib/playbook/version.rb +1 -1
  46. metadata +12 -6
  47. data/dist/chunks/_weekday_stacked-CVx1CzK-.js +0 -45
data/dist/menu.yml CHANGED
@@ -26,6 +26,9 @@ kits:
26
26
  platforms: *1
27
27
  description:
28
28
  status: stable
29
+ icons_used: true
30
+ react_rendered: false
31
+ enhanced_element_used: false
29
32
  - name: fixed_confirmation_toast
30
33
  platforms: *1
31
34
  description: Fixed Confirmation Toast is used as an alert. Success is used when
@@ -33,19 +36,31 @@ kits:
33
36
  and the user cannot proceed. Neutral is used to display information to a user
34
37
  to complete a task.
35
38
  status: stable
39
+ icons_used: true
40
+ react_rendered: false
41
+ enhanced_element_used: true
36
42
  - name: popover
37
43
  platforms: *1
38
44
  description: A popover is a way to toggle content on top of other content. It
39
45
  can be used for small texts, small forms, or even dropdowns. By default, popover
40
46
  will toggle open/closed by simply clicking the trigger element.
41
47
  status: stable
48
+ icons_used: false
49
+ react_rendered: false
50
+ enhanced_element_used: true
42
51
  - name: tooltip
43
52
  platforms: *1
44
53
  description:
45
54
  status: stable
55
+ icons_used: false
56
+ react_rendered: false
57
+ enhanced_element_used: true
46
58
  - name: drawer
47
59
  platforms: *1
48
60
  status: beta
61
+ icons_used: false
62
+ react_rendered: false
63
+ enhanced_element_used: false
49
64
  - category: buttons
50
65
  description: Buttons are used primarily for actions, such as “Save” and “Cancel”.
51
66
  Link Buttons are used for less important or less commonly used actions, such as
@@ -55,15 +70,24 @@ kits:
55
70
  platforms: *1
56
71
  description:
57
72
  status: stable
73
+ icons_used: true
74
+ react_rendered: false
75
+ enhanced_element_used: false
58
76
  - name: button_toolbar
59
77
  platforms: *1
60
78
  description: This kit should primarily hold the most commonly used buttons.
61
79
  status: stable
80
+ icons_used: false
81
+ react_rendered: false
82
+ enhanced_element_used: false
62
83
  - name: circle_icon_button
63
84
  platforms: *1
64
85
  description: When using Icon Circle Button, the icon must be clear a clear indication
65
86
  of what the button does because there is no text.
66
87
  status: stable
88
+ icons_used: true
89
+ react_rendered: false
90
+ enhanced_element_used: false
67
91
  - category: data_visualization
68
92
  description:
69
93
  components:
@@ -71,62 +95,101 @@ kits:
71
95
  platforms: *2
72
96
  description: This kit provides a wrapping class to place around the MapLibre library.
73
97
  status: stable
98
+ icons_used: true
99
+ react_rendered: true
100
+ enhanced_element_used: false
74
101
  - name: table
75
102
  platforms: *1
76
103
  description: Tables display a collection of structured data and typically have
77
104
  the ability to sort, filter, and paginate data.
78
105
  status: stable
106
+ icons_used: false
107
+ react_rendered: false
108
+ enhanced_element_used: true
79
109
  - name: advanced_table
80
110
  platforms: *1
81
111
  description: The Advanced Table can be used to display complex, nested data in
82
112
  a way that allows for expansion and/or sorting.
83
113
  status: stable
114
+ icons_used: true
115
+ react_rendered: false
116
+ enhanced_element_used: true
84
117
  - name: list
85
118
  platforms: *1
86
119
  description: Lists display a vertical set of related content.
87
120
  status: stable
121
+ icons_used: true
122
+ react_rendered: false
123
+ enhanced_element_used: false
88
124
  - name: filter
89
125
  platforms: *1
90
126
  description: This kit can be implemented in a variety of ways. To see examples
91
127
  of how to implement this kit in production visit the /dev_docs/search page in
92
128
  production.
93
129
  status: stable
130
+ icons_used: true
131
+ react_rendered: false
132
+ enhanced_element_used: false
94
133
  - name: distribution_bar
95
134
  platforms: *1
96
135
  description: Can be used in the same way a pie chart can be used. By default,
97
136
  Distribution Bar comparatively represents data without numbers.
98
137
  status: stable
138
+ icons_used: false
139
+ react_rendered: true
140
+ enhanced_element_used: false
99
141
  - name: legend
100
142
  platforms: *1
101
143
  description: A key used to compare the variables and their value in any given
102
144
  graph.
103
145
  status: stable
146
+ icons_used: false
147
+ react_rendered: false
148
+ enhanced_element_used: false
104
149
  - name: gauge
105
150
  platforms: *1
106
151
  description:
107
152
  status: stable
153
+ icons_used: false
154
+ react_rendered: true
155
+ enhanced_element_used: false
108
156
  - name: bar_graph
109
157
  platforms: *1
110
158
  description: Bar graphs are used to compare data. Bar graphs are not typically
111
159
  used to show percentages.
112
160
  status: stable
161
+ icons_used: false
162
+ react_rendered: true
163
+ enhanced_element_used: false
113
164
  - name: circle_chart
114
165
  platforms: *1
115
166
  description:
116
167
  status: stable
168
+ icons_used: false
169
+ react_rendered: true
170
+ enhanced_element_used: false
117
171
  - name: gantt_chart
118
172
  platforms: *2
119
173
  status: beta
174
+ icons_used: false
175
+ react_rendered: false
176
+ enhanced_element_used: false
120
177
  - name: line_graph
121
178
  platforms: *1
122
179
  description: Line graphs are used to show changes in data over time.
123
180
  status: stable
181
+ icons_used: false
182
+ react_rendered: true
183
+ enhanced_element_used: false
124
184
  - name: treemap_chart
125
185
  platforms: *1
126
186
  description: Treemap charts are used to compare the relative size of groups of
127
187
  data. They can also use a nested data structure, allowing a user to drill down
128
188
  into a group to see its constituent data points.
129
189
  status: stable
190
+ icons_used: false
191
+ react_rendered: true
192
+ enhanced_element_used: false
130
193
  - category: date_and_time_text_patterns
131
194
  description: ''
132
195
  components:
@@ -135,55 +198,91 @@ kits:
135
198
  description: Use to display the date. Year will not display if it is the current
136
199
  year.
137
200
  status: stable
201
+ icons_used: true
202
+ react_rendered: false
203
+ enhanced_element_used: false
138
204
  - name: date_range_inline
139
205
  platforms: *1
140
206
  description: Use to display a date range. Year will not show if it is the current
141
207
  year.
142
208
  status: stable
209
+ icons_used: true
210
+ react_rendered: false
211
+ enhanced_element_used: false
143
212
  - name: date_range_stacked
144
213
  platforms: *1
145
214
  description:
146
215
  status: stable
216
+ icons_used: true
217
+ react_rendered: false
218
+ enhanced_element_used: false
147
219
  - name: date_stacked
148
220
  platforms: *1
149
221
  description: Use to display the date, stacking month and day. Year will not show
150
222
  if it is the current year.
151
223
  status: stable
224
+ icons_used: false
225
+ react_rendered: false
226
+ enhanced_element_used: false
152
227
  - name: date_time
153
228
  platforms: *1
154
229
  description: Date Time is a composite kit that leverages the Date and Time kits.
155
230
  The Date Time kit is affected by time zones and defaults to "America/New_York".
231
+ icons_used: false
232
+ react_rendered: false
233
+ enhanced_element_used: false
156
234
  - name: date_time_stacked
157
235
  platforms: *1
158
236
  description:
159
237
  status: stable
238
+ icons_used: false
239
+ react_rendered: false
240
+ enhanced_element_used: false
160
241
  - name: date_year_stacked
161
242
  platforms: *1
162
243
  description: This kit is a simple option for displaying dates in a month, day
163
244
  and the year format.
164
245
  status: stable
246
+ icons_used: false
247
+ react_rendered: false
248
+ enhanced_element_used: false
165
249
  - name: time
166
250
  platforms: *1
167
251
  description: This kit consist of large display and table display format. It includes
168
252
  and icon, and a time zone.
169
253
  status: stable
254
+ icons_used: true
255
+ react_rendered: false
256
+ enhanced_element_used: false
170
257
  - name: time_range_inline
171
258
  platforms: *1
172
259
  description:
173
260
  status: stable
261
+ icons_used: true
262
+ react_rendered: false
263
+ enhanced_element_used: false
174
264
  - name: time_stacked
175
265
  platforms: *1
176
266
  description:
177
267
  status: stable
268
+ icons_used: false
269
+ react_rendered: false
270
+ enhanced_element_used: false
178
271
  - name: timestamp
179
272
  platforms: *3
180
273
  description: This low profile kit displays time. Elapsed, current, future, or
181
274
  otherwise.
182
275
  status: stable
276
+ icons_used: false
277
+ react_rendered: false
278
+ enhanced_element_used: false
183
279
  - name: weekday_stacked
184
280
  platforms: *1
185
281
  description:
186
282
  status: stable
283
+ icons_used: false
284
+ react_rendered: false
285
+ enhanced_element_used: false
187
286
  - category: form_and_dashboard_text_patterns
188
287
  description: ''
189
288
  components:
@@ -191,65 +290,104 @@ kits:
191
290
  platforms: *1
192
291
  description: Use to display customer's or user's contact information.
193
292
  status: stable
293
+ icons_used: true
294
+ react_rendered: false
295
+ enhanced_element_used: false
194
296
  - name: currency
195
297
  platforms: *1
196
298
  description: Use to display monetary amounts, typically on dashboards or other
197
299
  layouts to show an overview or summary. User understanding increase when paired
198
300
  with labels.
199
301
  status: stable
302
+ icons_used: false
303
+ react_rendered: false
304
+ enhanced_element_used: false
200
305
  - name: home_address_street
201
306
  platforms: *1
202
307
  description: This kit can be used to display the address for a homeowner/project.
203
308
  It contains street address, APT format, City, state and zip. A Project hashtag
204
309
  can be used as a prop to link back to a project.
205
310
  status: stable
311
+ icons_used: false
312
+ react_rendered: false
313
+ enhanced_element_used: false
206
314
  - name: label_pill
207
315
  platforms: *1
208
316
  description: This kit combines the caption and pill kit with all its variants.
209
317
  status: stable
318
+ icons_used: false
319
+ react_rendered: false
320
+ enhanced_element_used: false
210
321
  - name: label_value
211
322
  platforms: *1
212
323
  description: This kit can be very versatile when used to display text data.
213
324
  status: stable
325
+ icons_used: true
326
+ react_rendered: false
327
+ enhanced_element_used: false
214
328
  - name: person
215
329
  platforms: *1
216
330
  description: This kit is broken down into a first name last name format with normal
217
331
  and bold weighted text.
218
332
  status: stable
333
+ icons_used: false
334
+ react_rendered: false
335
+ enhanced_element_used: false
219
336
  - name: person_contact
220
337
  platforms: *1
221
338
  description: This kit can be used to display a person contact information.
222
339
  status: stable
340
+ icons_used: false
341
+ react_rendered: false
342
+ enhanced_element_used: false
223
343
  - name: source
224
344
  platforms: *1
225
345
  description: General use is to describe the discovery of businesses, customers,
226
346
  etc. This kit can also be used for other purposes as well.
227
347
  status: stable
348
+ icons_used: true
349
+ react_rendered: false
350
+ enhanced_element_used: false
228
351
  - name: dashboard_value
229
352
  platforms: *1
230
353
  description: Use in dashboards to give the viewer a quick overview of important
231
354
  metrics. If want to show currency, use Currency Kit.
232
355
  status: stable
356
+ icons_used: false
357
+ react_rendered: false
358
+ enhanced_element_used: false
233
359
  - name: stat_change
234
360
  platforms: *1
235
361
  description: Displays the increase, decrease, or neutral change in data.
236
362
  status: stable
363
+ icons_used: true
364
+ react_rendered: false
365
+ enhanced_element_used: false
237
366
  - name: stat_value
238
367
  platforms: *1
239
368
  description: This kit was cerated for the main use as a dashboard display for
240
369
  numbers. A large label is an optional part if it needs more clarity.
241
370
  status: stable
371
+ icons_used: false
372
+ react_rendered: false
373
+ enhanced_element_used: false
242
374
  - name: title_count
243
375
  platforms: *1
244
376
  description: This kits consists of title kit and body text. It is used to display
245
377
  a title and a count (numbers). It has a base size and a large formation for
246
378
  dashboard use.
247
379
  status: stable
380
+ icons_used: false
381
+ react_rendered: false
382
+ enhanced_element_used: false
248
383
  - name: title_detail
249
384
  platforms: *1
250
385
  description: This kit can be used in many versatile ways. It consist of a title
251
386
  4 and light body text kit.
252
387
  status: stable
388
+ icons_used: false
389
+ react_rendered: false
390
+ enhanced_element_used: false
253
391
  - category: form_elements
254
392
  description:
255
393
  components:
@@ -257,24 +395,39 @@ kits:
257
395
  platforms: *1
258
396
  description:
259
397
  status: stable
398
+ icons_used: false
399
+ react_rendered: false
400
+ enhanced_element_used: false
260
401
  - name: toggle
261
402
  platforms: *1
262
403
  description: Physical switch that allows users to turn things on or off. Used
263
404
  for applying system states, presenting binary options and activating a state.
264
405
  status: stable
406
+ icons_used: false
407
+ react_rendered: false
408
+ enhanced_element_used: false
265
409
  - name: form_pill
266
410
  platforms: *1
267
411
  description:
268
412
  status: stable
413
+ icons_used: true
414
+ react_rendered: false
415
+ enhanced_element_used: false
269
416
  - name: form
270
417
  platforms: *4
271
418
  description: The form kit provides consumers with a convenient, consistently styled
272
419
  <form> wrapper.
273
420
  status: stable
421
+ icons_used: false
422
+ react_rendered: false
423
+ enhanced_element_used: true
274
424
  - name: form_group
275
425
  platforms: *1
276
426
  description:
277
427
  status: stable
428
+ icons_used: false
429
+ react_rendered: false
430
+ enhanced_element_used: false
278
431
  - category: form_input
279
432
  description: ''
280
433
  components:
@@ -282,29 +435,47 @@ kits:
282
435
  platforms: *1
283
436
  description:
284
437
  status: stable
438
+ icons_used: true
439
+ react_rendered: true
440
+ enhanced_element_used: false
285
441
  - name: phone_number_input
286
442
  platforms: *1
287
443
  description:
288
444
  status: stable
445
+ icons_used: false
446
+ react_rendered: true
447
+ enhanced_element_used: false
289
448
  - name: text_input
290
449
  platforms: *1
291
450
  description: Area where user can enter small amount of text. Commonly used in
292
451
  forms.
293
452
  status: stable
453
+ icons_used: true
454
+ react_rendered: false
455
+ enhanced_element_used: false
294
456
  - name: rich_text_editor
295
457
  platforms: *1
296
458
  description:
297
459
  status: stable
460
+ icons_used: true
461
+ react_rendered: true
462
+ enhanced_element_used: false
298
463
  - name: textarea
299
464
  platforms: *1
300
465
  description: Area where user can enter larger amounts of text. Commonly used in
301
466
  forms.
302
467
  status: stable
468
+ icons_used: false
469
+ react_rendered: false
470
+ enhanced_element_used: true
303
471
  - name: typeahead
304
472
  platforms: *1
305
473
  description: Typeahead is auto suggestion or completion based on what the user
306
474
  is starting to type, gets refined as the user types more.
307
475
  status: stable
476
+ icons_used: true
477
+ react_rendered: true
478
+ enhanced_element_used: true
308
479
  - category: form_selection
309
480
  description:
310
481
  components:
@@ -314,47 +485,77 @@ kits:
314
485
  Common date picker use cases and features have been adapted into simple prop
315
486
  based configuration detailed in the docs below.
316
487
  status: stable
488
+ icons_used: true
489
+ react_rendered: false
490
+ enhanced_element_used: false
317
491
  - name: dropdown
318
492
  platforms: *1
319
493
  description: ''
320
494
  status: stable
495
+ icons_used: true
496
+ react_rendered: false
497
+ enhanced_element_used: true
321
498
  - name: multi_level_select
322
499
  platforms: *1
323
500
  description: The MultiLevelSelect kit renders a multi leveled select dropdown
324
501
  based on data from the user.
325
502
  status: stable
503
+ icons_used: true
504
+ react_rendered: true
505
+ enhanced_element_used: false
326
506
  - name: select
327
507
  platforms: *1
328
508
  description: Select displays multiple options for a user to pick from in a dropdown
329
509
  menu. User selects one option.
330
510
  status: stable
511
+ icons_used: true
512
+ react_rendered: false
513
+ enhanced_element_used: false
331
514
  - name: selectable_card
332
515
  platforms: *1
333
516
  description: Cards for information/content that can be selected. There is design
334
517
  for unselected and selected states. Typically used as a form element.
335
518
  status: stable
519
+ icons_used: true
520
+ react_rendered: false
521
+ enhanced_element_used: false
336
522
  - name: selectable_card_icon
337
523
  platforms: *1
338
524
  description:
339
525
  status: stable
526
+ icons_used: false
527
+ react_rendered: false
528
+ enhanced_element_used: false
340
529
  - name: selectable_icon
341
530
  platforms: *1
342
531
  description:
343
532
  status: stable
533
+ icons_used: true
534
+ react_rendered: false
535
+ enhanced_element_used: false
344
536
  - name: radio
345
537
  platforms: *3
346
538
  description: Radio is a control that allows the user to only choose one predefined
347
539
  option.
348
540
  status: stable
541
+ icons_used: false
542
+ react_rendered: false
543
+ enhanced_element_used: false
349
544
  - name: checkbox
350
545
  platforms: *1
351
546
  description: Checkbox is used for a list of selections that are meant to have
352
547
  one or more options checked.
353
548
  status: stable
549
+ icons_used: true
550
+ react_rendered: false
551
+ enhanced_element_used: false
354
552
  - name: selectable_list
355
553
  platforms: *1
356
554
  description:
357
555
  status: stable
556
+ icons_used: false
557
+ react_rendered: false
558
+ enhanced_element_used: false
358
559
  - category: icons_and_images
359
560
  description: ''
360
561
  components:
@@ -363,40 +564,64 @@ kits:
363
564
  description: An icon is a graphic symbol that represents an object (ie a file)
364
565
  or a function. They can be used to give the user feedback.
365
566
  status: stable
567
+ icons_used: true
568
+ react_rendered: false
569
+ enhanced_element_used: false
366
570
  - name: icon_circle
367
571
  platforms: *1
368
572
  description: Similar to Icon, Icon Circle is a graphical symbol within a circle
369
573
  used to visually indicate an object or function.
370
574
  status: stable
575
+ icons_used: true
576
+ react_rendered: false
577
+ enhanced_element_used: false
371
578
  - name: icon_stat_value
372
579
  platforms: *1
373
580
  description:
374
581
  status: stable
582
+ icons_used: true
583
+ react_rendered: false
584
+ enhanced_element_used: false
375
585
  - name: icon_value
376
586
  platforms: *1
377
587
  description: Icon Value leverages our icon kit, to display a value of some sort
378
588
  in the interface. Typically, this includes a numerical value.
379
589
  status: stable
590
+ icons_used: true
591
+ react_rendered: false
592
+ enhanced_element_used: false
380
593
  - name: user_badge
381
594
  platforms: *1
382
595
  description: This kit was created to display employee icons related to a Nitro
383
596
  user. Currently there is the PVI logo and the Million Dollar Rep Icon.
384
597
  status: stable
598
+ icons_used: false
599
+ react_rendered: false
600
+ enhanced_element_used: false
385
601
  - name: image
386
602
  platforms: *1
387
603
  description: A responsive image component.
388
604
  status: stable
605
+ icons_used: false
606
+ react_rendered: false
607
+ enhanced_element_used: false
389
608
  - name: lightbox
390
609
  platforms: *2
391
610
  description: The Lightbox kit is a popup window overlay that will appear on top
392
611
  of your webpage and cover the entirety of the screen.
393
612
  status: stable
613
+ icons_used: false
614
+ react_rendered: false
615
+ enhanced_element_used: false
394
616
  - name: star_rating
395
617
  platforms: *1
396
618
  description: A component to view other people’s opinions and experiences. Use
397
619
  when you want to show evaluation or a quick quantitative rating. Most effective
398
620
  when paired with reviews.
399
621
  status: stable
622
+ icons_used: true
623
+ react_rendered: false
624
+ enhanced_element_used: true
400
625
  - category: layout_and_structure
401
626
  description:
402
627
  components:
@@ -405,35 +630,59 @@ kits:
405
630
  description: This kit is used to build most of the complex interfaces. The Flex
406
631
  Kit is used the same way flex box is used.
407
632
  status: stable
633
+ icons_used: false
634
+ react_rendered: false
635
+ enhanced_element_used: false
408
636
  - name: layout
409
637
  platforms: *1
410
638
  description: Layouts used for positioning content inside of pages, cards, or containers.
411
639
  status: stable
640
+ icons_used: false
641
+ react_rendered: false
642
+ enhanced_element_used: false
412
643
  - name: card
413
644
  platforms: *3
414
645
  description:
415
646
  status: stable
647
+ icons_used: true
648
+ react_rendered: false
649
+ enhanced_element_used: false
416
650
  - name: section_separator
417
651
  platforms: *1
418
652
  description: Section separator is a divider line that compartmentalizes content,
419
653
  typically used on cards or white backgrounds.
420
654
  status: stable
655
+ icons_used: false
656
+ react_rendered: false
657
+ enhanced_element_used: false
421
658
  - name: background
422
659
  platforms: *1
423
660
  description: The background kit is used for adding a background to a page or to
424
661
  any container.
425
662
  status: stable
663
+ icons_used: false
664
+ react_rendered: false
665
+ enhanced_element_used: false
426
666
  - name: collapsible
427
667
  platforms: *1
428
668
  description:
429
669
  status: stable
670
+ icons_used: true
671
+ react_rendered: false
672
+ enhanced_element_used: true
430
673
  - name: overlay
431
674
  platforms: *1
432
675
  status: stable
676
+ icons_used: false
677
+ react_rendered: false
678
+ enhanced_element_used: false
433
679
  - name: draggable
434
680
  platforms: *1
435
681
  description:
436
682
  status: stable
683
+ icons_used: false
684
+ react_rendered: false
685
+ enhanced_element_used: false
437
686
  - category: message_text_patterns
438
687
  description:
439
688
  components:
@@ -441,11 +690,17 @@ kits:
441
690
  platforms: *1
442
691
  description: Highlight is used to pick out or emphasize content.
443
692
  status: stable
693
+ icons_used: false
694
+ react_rendered: false
695
+ enhanced_element_used: false
444
696
  - name: message
445
697
  platforms: *1
446
698
  description: This multi kit consist of a an avatar, a status, a caption, a body
447
699
  text, and a time stamp. All which can be optional.
448
700
  status: stable
701
+ icons_used: false
702
+ react_rendered: false
703
+ enhanced_element_used: false
449
704
  - category: navigation
450
705
  description:
451
706
  components:
@@ -453,12 +708,18 @@ kits:
453
708
  platforms: *1
454
709
  description: BreadCrumbs can be used for keeping a user aware of their route location.
455
710
  status: stable
711
+ icons_used: false
712
+ react_rendered: false
713
+ enhanced_element_used: false
456
714
  - name: nav
457
715
  platforms: *1
458
716
  description: The nav is a grouped set of links that take the user to another page,
459
717
  or tab through parts of a page. It comes in horizontal or vertical with several
460
718
  different variants.
461
719
  status: stable
720
+ icons_used: true
721
+ react_rendered: false
722
+ enhanced_element_used: true
462
723
  - name: pagination
463
724
  platforms: *4
464
725
  description:
@@ -471,11 +732,17 @@ kits:
471
732
  description: The loading kit is used to indicate to users that a page is still
472
733
  loading, or an action is still being processed.
473
734
  status: stable
735
+ icons_used: true
736
+ react_rendered: false
737
+ enhanced_element_used: false
474
738
  - name: progress_pills
475
739
  platforms: *1
476
740
  description: Progress pills indicate a specific point in time of a series of sequential
477
741
  steps. They are used to track progress of something over time.
478
742
  status: stable
743
+ icons_used: false
744
+ react_rendered: false
745
+ enhanced_element_used: false
479
746
  - name: progress_simple
480
747
  platforms: *1
481
748
  description: Displays the current progress of an operation flow. User understanding
@@ -485,18 +752,30 @@ kits:
485
752
  description: 'Progress step kit is used to show the progress of a process. There
486
753
  are three types of steps in this kit: completed, active, and inactive.'
487
754
  status: stable
755
+ icons_used: true
756
+ react_rendered: false
757
+ enhanced_element_used: false
488
758
  - name: walkthrough
489
759
  platforms: *1
490
760
  description:
491
761
  status: stable
762
+ icons_used: false
763
+ react_rendered: false
764
+ enhanced_element_used: false
492
765
  - name: timeline
493
766
  platforms: *1
494
767
  description: The timeline kit can use two different line styles in the same timeline
495
768
  - solid and dotted line styles.
496
769
  status: stable
770
+ icons_used: true
771
+ react_rendered: false
772
+ enhanced_element_used: false
497
773
  - name: skeleton_loading
498
774
  platforms: *1
499
775
  status: beta
776
+ icons_used: false
777
+ react_rendered: false
778
+ enhanced_element_used: false
500
779
  - category: tags
501
780
  description:
502
781
  components:
@@ -505,21 +784,33 @@ kits:
505
784
  description: Badges can be used for notification, tags, and status. They are used
506
785
  for count and numbers.
507
786
  status: stable
787
+ icons_used: true
788
+ react_rendered: false
789
+ enhanced_element_used: false
508
790
  - name: online_status
509
791
  platforms: *1
510
792
  description: Online Status is a small indicator that lets the user know the status
511
793
  of a person or item.
512
794
  status: stable
795
+ icons_used: false
796
+ react_rendered: false
797
+ enhanced_element_used: false
513
798
  - name: pill
514
799
  platforms: *3
515
800
  description: A pill uses both a keyword and a specific color to categorize an
516
801
  item.
517
802
  status: stable
803
+ icons_used: false
804
+ react_rendered: false
805
+ enhanced_element_used: false
518
806
  - name: hashtag
519
807
  platforms: *1
520
808
  description: Hashtag is used to display home, project and other forms of IDs.
521
809
  They can be used as a link.
522
810
  status: stable
811
+ icons_used: false
812
+ react_rendered: false
813
+ enhanced_element_used: false
523
814
  - category: typography
524
815
  description: ''
525
816
  components:
@@ -529,25 +820,40 @@ kits:
529
820
  or "lighter" variants to deemphasize text — default style should be followed
530
821
  by "light" followed by "lighter".
531
822
  status: stable
823
+ icons_used: false
824
+ react_rendered: false
825
+ enhanced_element_used: false
532
826
  - name: caption
533
827
  platforms: *1
534
828
  description: Use to provide supplementary context. Default size is best when providing
535
829
  supplementary context to a small section (i.e. label for a text input, label
536
830
  for a paragraph). Use large caption when supplementary text covers more content.
537
831
  status: stable
832
+ icons_used: false
833
+ react_rendered: false
834
+ enhanced_element_used: false
538
835
  - name: detail
539
836
  platforms: *1
540
837
  description: Used for tables or designs with large amounts of data or text.
541
838
  status: stable
839
+ icons_used: false
840
+ react_rendered: false
841
+ enhanced_element_used: false
542
842
  - name: title
543
843
  platforms: *1
544
844
  description: Typically used as headers. Follow semantic hierarchy — Title 1s should
545
845
  be followed by Title 2s followed by Title 3s and so on, without skipping any
546
846
  levels.
547
847
  status: stable
848
+ icons_used: false
849
+ react_rendered: false
850
+ enhanced_element_used: false
548
851
  - name: link
549
852
  platforms: *1
550
853
  status: beta
854
+ icons_used: false
855
+ react_rendered: false
856
+ enhanced_element_used: false
551
857
  - category: user
552
858
  description:
553
859
  components:
@@ -558,23 +864,38 @@ kits:
558
864
  other kits. The only time Avatar should be used instead of the User kit is when
559
865
  you are not going to display the user's name.
560
866
  status: stable
867
+ icons_used: true
868
+ react_rendered: false
869
+ enhanced_element_used: false
561
870
  - name: avatar_action_button
562
871
  platforms: *1
563
872
  description:
564
873
  status: stable
874
+ icons_used: true
875
+ react_rendered: false
876
+ enhanced_element_used: false
565
877
  - name: multiple_users
566
878
  platforms: *1
567
879
  description: The multiple users kit is used to show that more than one user is
568
880
  associated to an action or item.
569
881
  status: stable
882
+ icons_used: false
883
+ react_rendered: false
884
+ enhanced_element_used: false
570
885
  - name: multiple_users_stacked
571
886
  platforms: *1
572
887
  description: Multiple users stacked is used in tight spaces, where we need to
573
888
  indicate that multiple users are associated to a specific action or item.
574
889
  status: stable
890
+ icons_used: false
891
+ react_rendered: false
892
+ enhanced_element_used: false
575
893
  - name: user
576
894
  platforms: *1
577
895
  description: This kit was created for having a systematic way of displaying users
578
896
  with avatar, titles, name and territory. This is a versatile kit with features
579
897
  than can be added to display more info.
580
898
  status: stable
899
+ icons_used: false
900
+ react_rendered: false
901
+ enhanced_element_used: false