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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +2 -1
- data/app/pb_kits/playbook/pb_card/_card.tsx +12 -4
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -2
- data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +17 -3
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +16 -6
- data/app/pb_kits/playbook/pb_currency/currency.rb +38 -11
- data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +18 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +3 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
- data/app/pb_kits/playbook/pb_link/_link.scss +66 -0
- data/app/pb_kits/playbook/pb_link/_link.tsx +107 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +30 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +40 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +5 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +25 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +35 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +45 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +5 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +15 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +16 -0
- data/app/pb_kits/playbook/pb_link/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_link/link.html.erb +21 -0
- data/app/pb_kits/playbook/pb_link/link.rb +44 -0
- data/app/pb_kits/playbook/pb_link/link.test.jsx +92 -0
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +67 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +5 -1
- data/app/pb_kits/playbook/tokens/_typography.scss +35 -0
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
- data/dist/chunks/_typeahead-BtdghxJo.js +22 -0
- data/dist/chunks/_weekday_stacked-D1RoR5CN.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +4 -316
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +21 -1
- data/lib/playbook/version.rb +1 -1
- metadata +24 -4
- data/dist/chunks/_typeahead-BV_n6U5W.js +0 -22
- 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
|
-
|
843
|
-
|
844
|
-
|
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
|