playbook_ui 14.6.2.pre.alpha.PLAY1607dependencydisplayymlupdate4271 → 14.6.2.pre.alpha.PLAY15814348

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