playbook_ui_docs 13.31.0.pre.alpha.PLAY10863204 → 13.31.0.pre.alpha.play1262iconstyles3171

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +1 -4
  3. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +19 -14
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +3 -5
  5. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +3 -7
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +5 -3
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +5 -3
  8. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -9
  9. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  10. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +0 -2
  11. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
  12. data/dist/menu.yml +472 -566
  13. data/dist/playbook-doc.js +4 -4
  14. metadata +2 -2
data/dist/menu.yml CHANGED
@@ -1,568 +1,474 @@
1
- ---
2
- web: &1
3
- - rails
4
- - react
5
- all: &3
6
- - rails
7
- - react
8
- - swift
9
- rails_swift:
10
- - rails
11
- - swift
12
- react_swift:
13
- - swift
14
- - react
15
- rails_only: &4
16
- - rails
17
- react_only: &2
18
- - react
19
- swift_only:
20
- - swift
1
+ web: &web ["rails", "react"]
2
+ all: &all ["rails", "react", "swift"]
3
+ rails_swift: &rails_swift ["rails", "swift"]
4
+ react_swift: &react_swift ["swift", "react"]
5
+ rails_only: &rails_only ["rails"]
6
+ react_only: &react_only ["react"]
7
+ swift_only: &swift_only ["swift"]
8
+
21
9
  kits:
22
- - category: alerts_and_dialogs
23
- description:
24
- components:
25
- - name: dialog
26
- platforms: *1
27
- description:
28
- status: stable
29
- - name: fixed_confirmation_toast
30
- platforms: *1
31
- description: Fixed Confirmation Toast is used as an alert. Success is used when
32
- a user successfully completes an action. Error is used when there is an error
33
- and the user cannot proceed. Neutral is used to display information to a user
34
- to complete a task.
35
- status: stable
36
- - name: popover
37
- platforms: *1
38
- description: A popover is a way to toggle content on top of other content. It
39
- can be used for small texts, small forms, or even dropdowns. By default, popover
40
- will toggle open/closed by simply clicking the trigger element.
41
- status: stable
42
- - name: tooltip
43
- platforms: *1
44
- description:
45
- status: stable
46
- - category: buttons
47
- description: Buttons are used primarily for actions, such as “Save” and “Cancel”.
48
- Link Buttons are used for less important or less commonly used actions, such as
49
- “view shipping settings”.
50
- components:
51
- - name: button
52
- platforms: *1
53
- description:
54
- status: stable
55
- - name: button_toolbar
56
- platforms: *1
57
- description: This kit should primarily hold the most commonly used buttons.
58
- status: stable
59
- - name: circle_icon_button
60
- platforms: *1
61
- description: When using Icon Circle Button, the icon must be clear a clear indication
62
- of what the button does because there is no text.
63
- status: stable
64
- - category: data_visualization
65
- description:
66
- components:
67
- - name: map
68
- platforms: *2
69
- description: This kit provides a wrapping class to place around the MapLibre library.
70
- status: stable
71
- - name: table
72
- platforms: *1
73
- description: Tables display a collection of structured data and typically have
74
- the ability to sort, filter, and paginate data.
75
- status: stable
76
- - name: advanced_table
77
- platforms: *1
78
- description: The Advanced Table can be used to display complex, nested data in
79
- a way that allows for expansion and/or sorting.
80
- status: stable
81
- - name: list
82
- platforms: *1
83
- description: Lists display a vertical set of related content.
84
- status: stable
85
- - name: filter
86
- platforms: *1
87
- description: This kit can be implemented in a variety of ways. To see examples
88
- of how to implement this kit in production visit the /dev_docs/search page in
89
- production.
90
- status: stable
91
- - name: distribution_bar
92
- platforms: *1
93
- description: Can be used in the same way a pie chart can be used. By default,
94
- Distribution Bar comparatively represents data without numbers.
95
- status: stable
96
- - name: legend
97
- platforms: *1
98
- description: A key used to compare the variables and their value in any given
99
- graph.
100
- status: stable
101
- - name: gauge
102
- platforms: *1
103
- description:
104
- status: stable
105
- - name: bar_graph
106
- platforms: *1
107
- description: Bar graphs are used to compare data. Bar graphs are not typically
108
- used to show percentages.
109
- status: stable
110
- - name: circle_chart
111
- platforms: *1
112
- description:
113
- status: stable
114
- - name: line_graph
115
- platforms: *1
116
- description: Line graphs are used to show changes in data over time.
117
- status: stable
118
- - name: treemap_chart
119
- platforms: *1
120
- description: Treemap charts are used to compare the relative size of groups of
121
- data. They can also use a nested data structure, allowing a user to drill down
122
- into a group to see its constituent data points.
123
- status: stable
124
- - category: date_and_time_text_patterns
125
- description: ''
126
- components:
127
- - name: date
128
- platforms: *1
129
- description: Use to display the date. Year will not display if it is the current
130
- year.
131
- status: stable
132
- - name: date_range_inline
133
- platforms: *1
134
- description: Use to display a date range. Year will not show if it is the current
135
- year.
136
- status: stable
137
- - name: date_range_stacked
138
- platforms: *1
139
- description:
140
- status: stable
141
- - name: date_stacked
142
- platforms: *1
143
- description: Use to display the date, stacking month and day. Year will not show
144
- if it is the current year.
145
- status: stable
146
- - name: date_time
147
- platforms: *1
148
- description: Date Time is a composite kit that leverages the Date and Time kits.
149
- The Date Time kit is affected by time zones and defaults to "America/New_York".
150
- - name: date_time_stacked
151
- platforms: *1
152
- description:
153
- status: stable
154
- - name: date_year_stacked
155
- platforms: *1
156
- description: This kit is a simple option for displaying dates in a month, day
157
- and the year format.
158
- status: stable
159
- - name: time
160
- platforms: *1
161
- description: This kit consist of large display and table display format. It includes
162
- and icon, and a time zone.
163
- status: stable
164
- - name: time_range_inline
165
- platforms: *1
166
- description:
167
- status: stable
168
- - name: time_stacked
169
- platforms: *1
170
- description:
171
- status: stable
172
- - name: timestamp
173
- platforms: *3
174
- description: This low profile kit displays time. Elapsed, current, future, or
175
- otherwise.
176
- status: stable
177
- - name: weekday_stacked
178
- platforms: *1
179
- description:
180
- status: stable
181
- - category: form_and_dashboard_text_patterns
182
- description: ''
183
- components:
184
- - name: contact
185
- platforms: *1
186
- description: Use to display customer's or user's contact information.
187
- status: stable
188
- - name: currency
189
- platforms: *1
190
- description: Use to display monetary amounts, typically on dashboards or other
191
- layouts to show an overview or summary. User understanding increase when paired
192
- with labels.
193
- status: stable
194
- - name: home_address_street
195
- platforms: *1
196
- description: This kit can be used to display the address for a homeowner/project.
197
- It contains street address, APT format, City, state and zip. A Project hashtag
198
- can be used as a prop to link back to a project.
199
- status: stable
200
- - name: label_pill
201
- platforms: *1
202
- description: This kit combines the caption and pill kit with all its variants.
203
- status: stable
204
- - name: label_value
205
- platforms: *1
206
- description: This kit can be very versatile when used to display text data.
207
- status: stable
208
- - name: person
209
- platforms: *1
210
- description: This kit is broken down into a first name last name format with normal
211
- and bold weighted text.
212
- status: stable
213
- - name: person_contact
214
- platforms: *1
215
- description: This kit can be used to display a person contact information.
216
- status: stable
217
- - name: source
218
- platforms: *1
219
- description: General use is to describe the discovery of businesses, customers,
220
- etc. This kit can also be used for other purposes as well.
221
- status: stable
222
- - name: dashboard_value
223
- platforms: *1
224
- description: Use in dashboards to give the viewer a quick overview of important
225
- metrics. If want to show currency, use Currency Kit.
226
- status: stable
227
- - name: stat_change
228
- platforms: *1
229
- description: Displays the increase, decrease, or neutral change in data.
230
- status: stable
231
- - name: stat_value
232
- platforms: *1
233
- description: This kit was cerated for the main use as a dashboard display for
234
- numbers. A large label is an optional part if it needs more clarity.
235
- status: stable
236
- - name: title_count
237
- platforms: *1
238
- description: This kits consists of title kit and body text. It is used to display
239
- a title and a count (numbers). It has a base size and a large formation for
240
- dashboard use.
241
- status: stable
242
- - name: title_detail
243
- platforms: *1
244
- description: This kit can be used in many versatile ways. It consist of a title
245
- 4 and light body text kit.
246
- status: stable
247
- - category: form_elements
248
- description:
249
- components:
250
- - name: file_upload
251
- platforms: *1
252
- description:
253
- status: stable
254
- - name: toggle
255
- platforms: *1
256
- description: Physical switch that allows users to turn things on or off. Used
257
- for applying system states, presenting binary options and activating a state.
258
- status: stable
259
- - name: form_pill
260
- platforms: *1
261
- description:
262
- status: stable
263
- - name: form
264
- platforms: *4
265
- description: The form kit provides consumers with a convenient, consistently styled
266
- <form> wrapper.
267
- status: stable
268
- - name: form_group
269
- platforms: *1
270
- description:
271
- status: stable
272
- - category: form_input
273
- description: ''
274
- components:
275
- - name: passphrase
276
- platforms: *1
277
- description:
278
- status: stable
279
- - name: phone_number_input
280
- platforms: *1
281
- description:
282
- status: stable
283
- - name: text_input
284
- platforms: *1
285
- description: Area where user can enter small amount of text. Commonly used in
286
- forms.
287
- status: stable
288
- - name: rich_text_editor
289
- platforms: *1
290
- description:
291
- status: stable
292
- - name: textarea
293
- platforms: *1
294
- description: Area where user can enter larger amounts of text. Commonly used in
295
- forms.
296
- status: stable
297
- - name: typeahead
298
- platforms: *1
299
- description: Typeahead is auto suggestion or completion based on what the user
300
- is starting to type, gets refined as the user types more.
301
- status: stable
302
- - category: form_selection
303
- description:
304
- components:
305
- - name: date_picker
306
- platforms: *1
307
- description: Playbook's date picker is built using flatpickr, a vanilla js library.
308
- Common date picker use cases and features have been adapted into simple prop
309
- based configuration detailed in the docs below.
310
- status: stable
311
- - name: dropdown
312
- platforms: *1
313
- description: ''
314
- status: stable
315
- - name: multi_level_select
316
- platforms: *1
317
- description: The MultiLevelSelect kit renders a multi leveled select dropdown
318
- based on data from the user.
319
- status: stable
320
- - name: select
321
- platforms: *1
322
- description: Select displays multiple options for a user to pick from in a dropdown
323
- menu. User selects one option.
324
- status: stable
325
- - name: selectable_card
326
- platforms: *1
327
- description: Cards for information/content that can be selected. There is design
328
- for unselected and selected states. Typically used as a form element.
329
- status: stable
330
- - name: selectable_card_icon
331
- platforms: *1
332
- description:
333
- status: stable
334
- - name: selectable_icon
335
- platforms: *1
336
- description:
337
- status: stable
338
- - name: radio
339
- platforms: *3
340
- description: Radio is a control that allows the user to only choose one predefined
341
- option.
342
- status: stable
343
- - name: checkbox
344
- platforms: *1
345
- description: Checkbox is used for a list of selections that are meant to have
346
- one or more options checked.
347
- status: stable
348
- - name: selectable_list
349
- platforms: *1
350
- description:
351
- status: stable
352
- - category: icons_and_images
353
- description: ''
354
- components:
355
- - name: icon
356
- platforms: *1
357
- description: An icon is a graphic symbol that represents an object (ie a file)
358
- or a function. They can be used to give the user feedback.
359
- status: stable
360
- - name: icon_circle
361
- platforms: *1
362
- description: Similar to Icon, Icon Circle is a graphical symbol within a circle
363
- used to visually indicate an object or function.
364
- status: stable
365
- - name: icon_stat_value
366
- platforms: *1
367
- description:
368
- status: stable
369
- - name: icon_value
370
- platforms: *1
371
- description: Icon Value leverages our icon kit, to display a value of some sort
372
- in the interface. Typically, this includes a numerical value.
373
- status: stable
374
- - name: user_badge
375
- platforms: *1
376
- description: This kit was created to display employee icons related to a Nitro
377
- user. Currently there is the PVI logo and the Million Dollar Rep Icon.
378
- status: stable
379
- - name: image
380
- platforms: *1
381
- description: A responsive image component.
382
- status: stable
383
- - name: lightbox
384
- platforms: *2
385
- description: The Lightbox kit is a popup window overlay that will appear on top
386
- of your webpage and cover the entirety of the screen.
387
- status: stable
388
- - name: star_rating
389
- platforms: *1
390
- description: A component to view other people’s opinions and experiences. Use
391
- when you want to show evaluation or a quick quantitative rating. Most effective
392
- when paired with reviews.
393
- status: stable
394
- - category: layout_and_structure
395
- description:
396
- components:
397
- - name: flex
398
- platforms: *1
399
- description: This kit is used to build most of the complex interfaces. The Flex
400
- Kit is used the same way flex box is used.
401
- status: stable
402
- - name: layout
403
- platforms: *1
404
- description: Layouts used for positioning content inside of pages, cards, or containers.
405
- status: stable
406
- - name: card
407
- platforms: *3
408
- description:
409
- status: stable
410
- - name: section_separator
411
- platforms: *1
412
- description: Section separator is a divider line that compartmentalizes content,
413
- typically used on cards or white backgrounds.
414
- status: stable
415
- - name: background
416
- platforms: *1
417
- description: The background kit is used for adding a background to a page or to
418
- any container.
419
- status: stable
420
- - name: collapsible
421
- platforms: *1
422
- description:
423
- status: stable
424
- - name: overlay
425
- platforms: *1
426
- status: stable
427
- - name: draggable
428
- platforms: *2
429
- description:
430
- status: beta
431
- - category: message_text_patterns
432
- description:
433
- components:
434
- - name: highlight
435
- platforms: *1
436
- description: Highlight is used to pick out or emphasize content.
437
- status: stable
438
- - name: message
439
- platforms: *1
440
- description: This multi kit consist of a an avatar, a status, a caption, a body
441
- text, and a time stamp. All which can be optional.
442
- status: stable
443
- - category: navigation
444
- description:
445
- components:
446
- - name: bread_crumbs
447
- platforms: *1
448
- description: BreadCrumbs can be used for keeping a user aware of their route location.
449
- status: stable
450
- - name: nav
451
- platforms: *1
452
- description: The nav is a grouped set of links that take the user to another page,
453
- or tab through parts of a page. It comes in horizontal or vertical with several
454
- different variants.
455
- status: stable
456
- - name: pagination
457
- platforms: *4
458
- description:
459
- status: stable
460
- - category: state_and_progress_indicators
461
- description:
462
- components:
463
- - name: loading_inline
464
- platforms: *1
465
- description: The loading kit is used to indicate to users that a page is still
466
- loading, or an action is still being processed.
467
- status: stable
468
- - name: progress_pills
469
- platforms: *1
470
- description: Progress pills indicate a specific point in time of a series of sequential
471
- steps. They are used to track progress of something over time.
472
- status: stable
473
- - name: progress_simple
474
- platforms: *1
475
- description: Displays the current progress of an operation flow. User understanding
476
- increases when paired with labels or numbers.
477
- - name: progress_step
478
- platforms: *1
479
- description: 'Progress step kit is used to show the progress of a process. There
480
- are three types of steps in this kit: completed, active, and inactive.'
481
- status: stable
482
- - name: walkthrough
483
- platforms: *1
484
- description:
485
- status: stable
486
- - name: timeline
487
- platforms: *1
488
- description: The timeline kit can use two different line styles in the same timeline
489
- - solid and dotted line styles.
490
- status: stable
491
- - category: tags
492
- description:
493
- components:
494
- - name: badge
495
- platforms: *1
496
- description: Badges can be used for notification, tags, and status. They are used
497
- for count and numbers.
498
- status: stable
499
- - name: online_status
500
- platforms: *1
501
- description: Online Status is a small indicator that lets the user know the status
502
- of a person or item.
503
- status: stable
504
- - name: pill
505
- platforms: *3
506
- description: A pill uses both a keyword and a specific color to categorize an
507
- item.
508
- status: stable
509
- - name: hashtag
510
- platforms: *1
511
- description: Hashtag is used to display home, project and other forms of IDs.
512
- They can be used as a link.
513
- status: stable
514
- - category: typography
515
- description: ''
516
- components:
517
- - name: body
518
- platforms: *1
519
- description: Default text style for paragraphs. Follow hiearchy when using "light"
520
- or "lighter" variants to deemphasize text — default style should be followed
521
- by "light" followed by "lighter".
522
- status: stable
523
- - name: caption
524
- platforms: *1
525
- description: Use to provide supplementary context. Default size is best when providing
526
- supplementary context to a small section (i.e. label for a text input, label
527
- for a paragraph). Use large caption when supplementary text covers more content.
528
- status: stable
529
- - name: detail
530
- platforms: *1
531
- description: Used for tables or designs with large amounts of data or text.
532
- status: stable
533
- - name: title
534
- platforms: *1
535
- description: Typically used as headers. Follow semantic hierarchy — Title 1s should
536
- be followed by Title 2s followed by Title 3s and so on, without skipping any
537
- levels.
538
- status: stable
539
- - category: user
540
- description:
541
- components:
542
- - name: avatar
543
- platforms: *3
544
- description: Avatar displays a user's picture. This helps aid easy recognition
545
- of the user. This kit is normally not used by itself, but rather used within
546
- other kits. The only time Avatar should be used instead of the User kit is when
547
- you are not going to display the user's name.
548
- status: stable
549
- - name: avatar_action_button
550
- platforms: *1
551
- description:
552
- status: stable
553
- - name: multiple_users
554
- platforms: *1
555
- description: The multiple users kit is used to show that more than one user is
556
- associated to an action or item.
557
- status: stable
558
- - name: multiple_users_stacked
559
- platforms: *1
560
- description: Multiple users stacked is used in tight spaces, where we need to
561
- indicate that multiple users are associated to a specific action or item.
562
- status: stable
10
+ - name: alerts_and_dialogs
11
+ description:
12
+ components:
13
+ - name: "dialog"
14
+ platforms: *web
15
+ description:
16
+ status: "stable"
17
+ - name: "fixed_confirmation_toast"
18
+ platforms: *web
19
+ description: Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
20
+ status: "stable"
21
+ - name: "popover"
22
+ platforms: *web
23
+ description: A popover is a way to toggle content on top of other content. It can be used for small texts, small forms, or even dropdowns. By default, popover will toggle open/closed by simply clicking the trigger element.
24
+ status: "stable"
25
+ - name: "tooltip"
26
+ platforms: *web
27
+ description:
28
+ status: "stable"
29
+ - name: buttons
30
+ description: Buttons are used primarily for actions, such as “Save” and “Cancel”. Link Buttons are used for less important or less commonly used actions, such as “view shipping settings”.
31
+ components:
32
+ - name: "button"
33
+ platforms: *web
34
+ description:
35
+ status: "stable"
36
+ - name: "button_toolbar"
37
+ platforms: *web
38
+ description: This kit should primarily hold the most commonly used buttons.
39
+ status: "stable"
40
+ - name: "circle_icon_button"
41
+ platforms: *web
42
+ description: When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text.
43
+ status: "stable"
44
+ - name: data_visualization
45
+ description:
46
+ components:
47
+ - name: "map"
48
+ platforms: *react_only
49
+ description: This kit provides a wrapping class to place around the MapLibre library.
50
+ status: "stable"
51
+ - name: "table"
52
+ platforms: *web
53
+ description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
54
+ status: "stable"
55
+ - name: "advanced_table"
56
+ platforms: *web
57
+ description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
58
+ status: "stable"
59
+ - name: "list"
60
+ platforms: *web
61
+ description: Lists display a vertical set of related content.
62
+ status: "stable"
63
+ - name: "filter"
64
+ platforms: *web
65
+ description: This kit can be implemented in a variety of ways. To see examples of how to implement this kit in production visit the /dev_docs/search page in production.
66
+ status: "stable"
67
+ - name: "distribution_bar"
68
+ platforms: *web
69
+ description: Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers.
70
+ status: "stable"
71
+ - name: "legend"
72
+ platforms: *web
73
+ description: A key used to compare the variables and their value in any given graph.
74
+ status: "stable"
75
+ - name: "gauge"
76
+ platforms: *web
77
+ description:
78
+ status: "stable"
79
+ - name: "bar_graph"
80
+ platforms: *web
81
+ description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.
82
+ status: "stable"
83
+ - name: "circle_chart"
84
+ platforms: *web
85
+ description:
86
+ status: "stable"
87
+ - name: "line_graph"
88
+ platforms: *web
89
+ description: Line graphs are used to show changes in data over time.
90
+ status: "stable"
91
+ - name: "treemap_chart"
92
+ platforms: *web
93
+ description: Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
94
+ status: "stable"
95
+ - name: date_and_time_text_patterns
96
+ description: ""
97
+ components:
98
+ - name: "date"
99
+ platforms: *web
100
+ description: Use to display the date. Year will not display if it is the current year.
101
+ status: "stable"
102
+ - name: "date_range_inline"
103
+ platforms: *web
104
+ description: Use to display a date range. Year will not show if it is the current year.
105
+ status: "stable"
106
+ - name: "date_range_stacked"
107
+ platforms: *web
108
+ description:
109
+ status: "stable"
110
+ - name: "date_stacked"
111
+ platforms: *web
112
+ description: Use to display the date, stacking month and day. Year will not show if it is the current year.
113
+ status: "stable"
114
+ - name: "date_time"
115
+ platforms: *web
116
+ description: Date Time is a composite kit that leverages the Date and Time kits. The Date Time kit is affected by time zones and defaults to "America/New_York".
117
+ - name: "date_time_stacked"
118
+ platforms: *web
119
+ description:
120
+ status: "stable"
121
+ - name: "date_year_stacked"
122
+ platforms: *web
123
+ description: This kit is a simple option for displaying dates in a month, day and the year format.
124
+ status: "stable"
125
+ - name: "time"
126
+ platforms: *web
127
+ description: This kit consist of large display and table display format. It includes and icon, and a time zone.
128
+ status: "stable"
129
+ - name: "time_range_inline"
130
+ platforms: *web
131
+ description:
132
+ status: "stable"
133
+ - name: "time_stacked"
134
+ platforms: *web
135
+ description:
136
+ status: "stable"
137
+ - name: "timestamp"
138
+ platforms: *all
139
+ description: This low profile kit displays time. Elapsed, current, future, or otherwise.
140
+ status: "stable"
141
+ - name: "weekday_stacked"
142
+ platforms: *web
143
+ description:
144
+ status: "stable"
145
+ - name: form_and_dashboard_text_patterns
146
+ description: ""
147
+ components:
148
+ - name: "contact"
149
+ platforms: *web
150
+ description: Use to display customer's or user's contact information.
151
+ status: "stable"
152
+ - name: "currency"
153
+ platforms: *web
154
+ description: Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels.
155
+ status: "stable"
156
+ - name: "home_address_street"
157
+ platforms: *web
158
+ description: This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project.
159
+ status: "stable"
160
+ - name: "label_pill"
161
+ platforms: *web
162
+ description: This kit combines the caption and pill kit with all its variants.
163
+ status: "stable"
164
+ - name: "label_value"
165
+ platforms: *web
166
+ description: This kit can be very versatile when used to display text data.
167
+ status: "stable"
168
+ - name: "person"
169
+ platforms: *web
170
+ description: This kit is broken down into a first name last name format with normal and bold weighted text.
171
+ status: "stable"
172
+ - name: "person_contact"
173
+ platforms: *web
174
+ description: This kit can be used to display a person contact information.
175
+ status: "stable"
176
+ - name: "source"
177
+ platforms: *web
178
+ description: General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.
179
+ status: "stable"
180
+ - name: "dashboard_value"
181
+ platforms: *web
182
+ description: Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use Currency Kit.
183
+ status: "stable"
184
+ - name: "stat_change"
185
+ platforms: *web
186
+ description: Displays the increase, decrease, or neutral change in data.
187
+ status: "stable"
188
+ - name: "stat_value"
189
+ platforms: *web
190
+ description: This kit was cerated for the main use as a dashboard display for numbers. A large label is an optional part if it needs more clarity.
191
+ status: "stable"
192
+ - name: "title_count"
193
+ platforms: *web
194
+ description: This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use.
195
+ status: "stable"
196
+ - name: "title_detail"
197
+ platforms: *web
198
+ description: This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.
199
+ status: "stable"
200
+ - name: form_elements
201
+ description:
202
+ components:
203
+ - name: "file_upload"
204
+ platforms: *web
205
+ description:
206
+ status: "stable"
207
+ - name: "toggle"
208
+ platforms: *web
209
+ description: Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.
210
+ status: "stable"
211
+ - name: "form_pill"
212
+ platforms: *web
213
+ description:
214
+ status: "stable"
215
+ - name: "form"
216
+ platforms: *rails_only
217
+ description: The form kit provides consumers with a convenient, consistently styled <form> wrapper.
218
+ status: "stable"
219
+ - name: "form_group"
220
+ platforms: *web
221
+ description:
222
+ status: "stable"
223
+ - name: form_input
224
+ description: ""
225
+ components:
226
+ - name: "passphrase"
227
+ platforms: *web
228
+ description:
229
+ status: "stable"
230
+ - name: "phone_number_input"
231
+ platforms: *web
232
+ description:
233
+ status: "stable"
234
+ - name: "text_input"
235
+ platforms: *web
236
+ description: Area where user can enter small amount of text. Commonly used in forms.
237
+ status: "stable"
238
+ - name: "rich_text_editor"
239
+ platforms: *web
240
+ description:
241
+ status: "stable"
242
+ - name: "textarea"
243
+ platforms: *web
244
+ description: Area where user can enter larger amounts of text. Commonly used in forms.
245
+ status: "stable"
246
+ - name: "typeahead"
247
+ platforms: *web
248
+ description: Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.
249
+ status: "stable"
250
+ - name: form_selection
251
+ description:
252
+ components:
253
+ - name: "date_picker"
254
+ platforms: *web
255
+ description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
256
+ status: "stable"
257
+ - name: dropdown
258
+ platforms: *web
259
+ description: ""
260
+ status: "stable"
261
+ - name: "multi_level_select"
262
+ platforms: *web
263
+ description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
264
+ status: "stable"
265
+ - name: "select"
266
+ platforms: *web
267
+ description: Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.
268
+ status: "stable"
269
+ - name: "selectable_card"
270
+ platforms: *web
271
+ description: Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.
272
+ status: "stable"
273
+ - name: "selectable_card_icon"
274
+ platforms: *web
275
+ description:
276
+ status: "stable"
277
+ - name: "selectable_icon"
278
+ platforms: *web
279
+ description:
280
+ status: "stable"
281
+ - name: "radio"
282
+ platforms: *all
283
+ description: Radio is a control that allows the user to only choose one predefined option.
284
+ status: "stable"
285
+ - name: "checkbox"
286
+ platforms: *web
287
+ description: Checkbox is used for a list of selections that are meant to have one or more options checked.
288
+ status: "stable"
289
+ - name: "selectable_list"
290
+ platforms: *web
291
+ description:
292
+ status: "stable"
293
+ - name: icons_and_images
294
+ description: ""
295
+ components:
296
+ - name: "icon"
297
+ platforms: *web
298
+ description: An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.
299
+ status: "stable"
300
+ - name: "icon_circle"
301
+ platforms: *web
302
+ description: Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.
303
+ status: "stable"
304
+ - name: "icon_stat_value"
305
+ platforms: *web
306
+ description:
307
+ status: "stable"
308
+ - name: "icon_value"
309
+ platforms: *web
310
+ description: Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value.
311
+ status: "stable"
312
+ - name: "user_badge"
313
+ platforms: *web
314
+ description: This kit was created to display employee icons related to a Nitro user. Currently there is the PVI logo and the Million Dollar Rep Icon.
315
+ status: "stable"
316
+ - name: "image"
317
+ platforms: *web
318
+ description: A responsive image component.
319
+ status: "stable"
320
+ - name: "lightbox"
321
+ platforms: *react_only
322
+ description: The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen.
323
+ status: "stable"
324
+ - name: "star_rating"
325
+ platforms: *web
326
+ description: A component to view other people’s opinions and experiences. Use when you want to show evaluation or a quick quantitative rating. Most effective when paired with reviews.
327
+ status: "stable"
328
+ - name: layout_and_structure
329
+ description:
330
+ components:
331
+ - name: "flex"
332
+ platforms: *web
333
+ description: This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
334
+ status: "stable"
335
+ - name: "layout"
336
+ platforms: *web
337
+ description: Layouts used for positioning content inside of pages, cards, or containers.
338
+ status: "stable"
339
+ - name: "card"
340
+ platforms: *all
341
+ description:
342
+ status: "stable"
343
+ - name: "section_separator"
344
+ platforms: *web
345
+ description: Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
346
+ status: "stable"
347
+ - name: "background"
348
+ platforms: *web
349
+ description: The background kit is used for adding a background to a page or to any container.
350
+ status: "stable"
351
+ - name: "collapsible"
352
+ platforms: *web
353
+ description:
354
+ status: "stable"
355
+ - name: "overlay"
356
+ platforms: *web
357
+ status: "stable"
358
+ - name: "draggable"
359
+ platforms: *react_only
360
+ description:
361
+ status: "beta"
362
+ - name: message_text_patterns
363
+ description:
364
+ components:
365
+ - name: "highlight"
366
+ platforms: *web
367
+ description: Highlight is used to pick out or emphasize content.
368
+ status: "stable"
369
+ - name: "message"
370
+ platforms: *web
371
+ description: This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
372
+ status: "stable"
373
+ - name: navigation
374
+ description:
375
+ components:
376
+ - name: "bread_crumbs"
377
+ platforms: *web
378
+ description: BreadCrumbs can be used for keeping a user aware of their route location.
379
+ status: "stable"
380
+ - name: "nav"
381
+ platforms: *web
382
+ description: The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants.
383
+ status: "stable"
384
+ - name: "pagination"
385
+ platforms: *rails_only
386
+ description:
387
+ status: "stable"
388
+ - name: state_and_progress_indicators
389
+ description:
390
+ components:
391
+ - name: "loading_inline"
392
+ platforms: *web
393
+ description: The loading kit is used to indicate to users that a page is still loading, or an action is still being processed.
394
+ status: "stable"
395
+ - name: "progress_pills"
396
+ platforms: *web
397
+ description: Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
398
+ status: "stable"
399
+ - name: "progress_simple"
400
+ platforms: *web
401
+ description: Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
402
+ - name: "progress_step"
403
+ platforms: *web
404
+ description: "Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive."
405
+ status: "stable"
406
+ - name: "walkthrough"
407
+ platforms: *web
408
+ description:
409
+ status: "stable"
410
+ - name: "timeline"
411
+ platforms: *web
412
+ description: The timeline kit can use two different line styles in the same timeline - solid and dotted line styles.
413
+ status: "stable"
414
+ - name: tags
415
+ description:
416
+ components:
417
+ - name: "badge"
418
+ platforms: *web
419
+ description: Badges can be used for notification, tags, and status. They are used for count and numbers.
420
+ status: "stable"
421
+ - name: "online_status"
422
+ platforms: *web
423
+ description: Online Status is a small indicator that lets the user know the status of a person or item.
424
+ status: "stable"
425
+ - name: "pill"
426
+ platforms: *all
427
+ description: A pill uses both a keyword and a specific color to categorize an item.
428
+ status: "stable"
429
+ - name: "hashtag"
430
+ platforms: *web
431
+ description: Hashtag is used to display home, project and other forms of IDs. They can be used as a link.
432
+ status: "stable"
433
+ - name: typography
434
+ description: ""
435
+ components:
436
+ - name: "body"
437
+ platforms: *web
438
+ description: Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
439
+ status: "stable"
440
+ - name: "caption"
441
+ platforms: *web
442
+ description: Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.
443
+ status: "stable"
444
+ - name: "detail"
445
+ platforms: *web
446
+ description: Used for tables or designs with large amounts of data or text.
447
+ status: "stable"
448
+ - name: "title"
449
+ platforms: *web
450
+ description: Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
451
+ status: "stable"
563
452
  - name: user
564
- platforms: *1
565
- description: This kit was created for having a systematic way of displaying users
566
- with avatar, titles, name and territory. This is a versatile kit with features
567
- than can be added to display more info.
568
- status: stable
453
+ description:
454
+ components:
455
+ - name: "avatar"
456
+ platforms: *all
457
+ description: Avatar displays a user's picture. This helps aid easy recognition of the user. This kit is normally not used by itself, but rather used within other kits. The only time Avatar should be used instead of the User kit is when you are not going to display the user's name.
458
+ status: "stable"
459
+ - name: "avatar_action_button"
460
+ platforms: *web
461
+ description:
462
+ status: "stable"
463
+ - name: "multiple_users"
464
+ platforms: *web
465
+ description: The multiple users kit is used to show that more than one user is associated to an action or item.
466
+ status: "stable"
467
+ - name: "multiple_users_stacked"
468
+ platforms: *web
469
+ description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
470
+ status: "stable"
471
+ - name: "user"
472
+ platforms: *web
473
+ description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
474
+ status: "stable"