playbook_ui_docs 13.13.0.pre.alpha.play10221678 → 13.13.0.pre.alpha.play10821726

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +5 -4
  3. data/app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md +14 -0
  4. data/app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md +6 -0
  5. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md +14 -0
  6. data/app/pb_kits/playbook/pb_contact/docs/example.yml +6 -0
  7. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +11 -0
  8. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +16 -0
  9. data/app/pb_kits/playbook/pb_date/docs/_date_props_swift.md +8 -0
  10. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled_swift.md +11 -0
  11. data/app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md +14 -0
  12. data/app/pb_kits/playbook/pb_date/docs/example.yml +7 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx +2 -2
  14. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  15. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
  16. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -4
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -4
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +4 -2
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default_swift.md +18 -0
  21. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis_swift.md +34 -0
  22. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link_swift.md +18 -0
  23. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified_swift.md +13 -0
  24. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_props_swift.md +14 -0
  25. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +6 -0
  26. data/dist/menu.yml +240 -168
  27. data/dist/playbook-doc.js +6 -6
  28. metadata +15 -8
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.html.erb +0 -29
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.jsx +0 -34
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.md +0 -7
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb +0 -28
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.jsx +0 -34
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.md +0 -1
data/dist/menu.yml CHANGED
@@ -7,279 +7,351 @@ react_only: &react_only ["react"]
7
7
  swift_only: &swift_only ["swift"]
8
8
 
9
9
  kits:
10
- - name: "avatars"
10
+ - name: alerts_and_dialogs
11
+ description:
11
12
  components:
12
- - name: "avatar"
13
- platforms: *all
14
- - name: "avatar_action_button"
15
- platforms: *web
16
- - name: "multiple_users"
17
- platforms: *web
18
- - name: "multiple_users_stacked"
13
+ - name: "dialog"
19
14
  platforms: *web
20
- - name: "user"
15
+ description:
16
+ - name: "fixed_confirmation_toast"
21
17
  platforms: *web
22
- - name: "background"
23
- components:
24
- - name: "background"
18
+ 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.
19
+ - name: "popover"
25
20
  platforms: *web
26
- - name: "bread_crumbs"
27
- components:
28
- - name: "bread_crumbs"
21
+ 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.
22
+ - name: "tooltip"
29
23
  platforms: *web
30
- - name: "buttons"
24
+ description:
25
+ - name: buttons
26
+ 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
27
  components:
32
28
  - name: "button"
33
29
  platforms: *web
30
+ description:
34
31
  - name: "button_toolbar"
35
32
  platforms: *web
33
+ description: This kit should primarily hold the most commonly used buttons.
36
34
  - name: "circle_icon_button"
37
35
  platforms: *web
38
- - name: "card"
39
- components:
40
- - name: "card"
41
- platforms: *all
42
- - name: "collapsible"
36
+ description: When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text.
37
+ - name: data_visualization
38
+ description:
43
39
  components:
44
- - name: "collapsible"
40
+ - name: "map"
41
+ platforms: *react_only
42
+ description: This kit provides a wrapping class to place around the MapLibre library.
43
+ - name: "table"
45
44
  platforms: *web
46
- - name: "charts_and_graphs"
47
- components:
48
- - name: "bar_graph"
45
+ description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
46
+ - name: "list"
49
47
  platforms: *web
50
- - name: "circle_chart"
48
+ description: Lists display a vertical set of related content.
49
+ - name: "filter"
51
50
  platforms: *web
51
+ 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.
52
52
  - name: "distribution_bar"
53
53
  platforms: *web
54
+ description: Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers.
55
+ - name: "legend"
56
+ platforms: *web
57
+ description: A key used to compare the variables and their value in any given graph.
54
58
  - name: "gauge"
55
59
  platforms: *web
56
- - name: "legend"
60
+ description:
61
+ - name: "bar_graph"
62
+ platforms: *web
63
+ description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.
64
+ - name: "circle_chart"
57
65
  platforms: *web
66
+ description:
58
67
  - name: "line_graph"
59
68
  platforms: *web
69
+ description: Line graphs are used to show changes in data over time.
60
70
  - name: "treemap_chart"
61
71
  platforms: *web
62
- - name: "dialog"
72
+ 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.
73
+ - name: date_and_time_text_patterns
74
+ description: ""
63
75
  components:
64
- - name: "dialog"
76
+ - name: "date"
65
77
  platforms: *web
66
- - name: "filter"
67
- components:
68
- - name: "filter"
78
+ description: Use to display the date. Year will not display if it is the current year.
79
+ - name: "date_range_inline"
69
80
  platforms: *web
70
- - name: "fixed_confirmation_toast"
71
- components:
72
- - name: "fixed_confirmation_toast"
81
+ description: Use to display a date range. Year will not show if it is the current year.
82
+ - name: "date_range_stacked"
83
+ platforms: *web
84
+ description:
85
+ - name: "date_stacked"
86
+ platforms: *web
87
+ description: Use to display the date, stacking month and day. Year will not show if it is the current year.
88
+ - name: "date_time"
89
+ platforms: *web
90
+ 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".
91
+ - name: "date_time_stacked"
92
+ platforms: *web
93
+ description:
94
+ - name: "date_year_stacked"
95
+ platforms: *web
96
+ description: This kit is a simple option for displaying dates in a month, day and the year format.
97
+ - name: "time"
98
+ platforms: *web
99
+ description: This kit consist of large display and table display format. It includes and icon, and a time zone.
100
+ - name: "time_range_inline"
101
+ platforms: *web
102
+ description:
103
+ - name: "time_stacked"
104
+ platforms: *web
105
+ description:
106
+ - name: "timestamp"
107
+ platforms: *all
108
+ description: This low profile kit displays time. Elapsed, current, future, or otherwise.
109
+ - name: "weekday_stacked"
73
110
  platforms: *web
74
- - name: "forms"
111
+ description:
112
+ - name: form_and_dashboard_text_patterns
113
+ description: ""
75
114
  components:
76
- - name: "checkbox"
115
+ - name: "contact"
77
116
  platforms: *web
78
- - name: "date_picker"
117
+ description: Use to display customer's or user's contact information.
118
+ - name: "currency"
119
+ platforms: *web
120
+ 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.
121
+ - name: "home_address_street"
122
+ platforms: *web
123
+ 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.
124
+ - name: "label_pill"
125
+ platforms: *web
126
+ description: This kit combines the caption and pill kit with all its variants.
127
+ - name: "label_value"
128
+ platforms: *web
129
+ description: This kit can be very versatile when used to display text data.
130
+ - name: "person"
131
+ platforms: *web
132
+ description: This kit is broken down into a first name last name format with normal and bold weighted text.
133
+ - name: "person_contact"
134
+ platforms: *web
135
+ description: This kit can be used to display a person contact information.
136
+ - name: "source"
137
+ platforms: *web
138
+ description: General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.
139
+ - name: "dashboard_value"
140
+ platforms: *web
141
+ description: Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use Currency Kit.
142
+ - name: "stat_change"
143
+ platforms: *web
144
+ description: Displays the increase, decrease, or neutral change in data.
145
+ - name: "stat_value"
79
146
  platforms: *web
147
+ 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.
148
+ - name: "title_count"
149
+ platforms: *web
150
+ 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.
151
+ - name: "title_detail"
152
+ platforms: *web
153
+ description: This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.
154
+ - name: form_elements
155
+ description:
156
+ components:
80
157
  - name: "file_upload"
81
158
  platforms: *web
82
- - name: "form"
83
- platforms: *rails_only
84
- - name: "form_group"
159
+ description:
160
+ - name: "toggle"
85
161
  platforms: *web
162
+ description: Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.
86
163
  - name: "form_pill"
87
164
  platforms: *web
88
- - name: "multi_level_select"
165
+ description:
166
+ - name: "form"
167
+ platforms: *rails_only
168
+ description: The form kit provides consumers with a convenient, consistently styled <form> wrapper.
169
+ - name: "form_group"
89
170
  platforms: *web
171
+ description:
172
+ - name: form_input
173
+ description: ""
174
+ components:
90
175
  - name: "passphrase"
91
176
  platforms: *web
177
+ description:
92
178
  - name: "phone_number_input"
93
179
  platforms: *web
94
- - name: "radio"
95
- platforms: *all
180
+ description:
181
+ - name: "text_input"
182
+ platforms: *web
183
+ description: Area where user can enter small amount of text. Commonly used in forms.
96
184
  - name: "rich_text_editor"
97
185
  platforms: *web
98
- - name: "select"
186
+ description:
187
+ - name: "textarea"
99
188
  platforms: *web
100
- - name: "selectable_card"
189
+ description: Area where user can enter larger amounts of text. Commonly used in forms.
190
+ - name: "typeahead"
101
191
  platforms: *web
102
- - name: "selectable_card_icon"
192
+ description: Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.
193
+ - name: form_selection
194
+ description:
195
+ components:
196
+ - name: "date_picker"
103
197
  platforms: *web
104
- - name: "selectable_icon"
198
+ 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.
199
+ - name: "multi_level_select"
105
200
  platforms: *web
106
- - name: "selectable_list"
201
+ description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
202
+ - name: "select"
107
203
  platforms: *web
108
- - name: "text_input"
204
+ description: Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.
205
+ - name: "selectable_card"
109
206
  platforms: *web
110
- - name: "textarea"
207
+ description: Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.
208
+ - name: "selectable_card_icon"
111
209
  platforms: *web
112
- - name: "toggle"
210
+ description:
211
+ - name: "selectable_icon"
113
212
  platforms: *web
114
- - name: "typeahead"
213
+ description:
214
+ - name: "radio"
215
+ platforms: *all
216
+ description: Radio is a control that allows the user to only choose one predefined option.
217
+ - name: "checkbox"
115
218
  platforms: *web
116
- - name: "highlight"
117
- components:
118
- - name: "highlight"
219
+ description: Checkbox is used for a list of selections that are meant to have one or more options checked.
220
+ - name: "selectable_list"
119
221
  platforms: *web
120
- - name: "icon"
222
+ description:
223
+ - name: icons_and_images
224
+ description: ""
121
225
  components:
122
226
  - name: "icon"
123
227
  platforms: *web
124
- - name: "icon_circle"
125
- components:
228
+ 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.
126
229
  - name: "icon_circle"
127
230
  platforms: *web
128
- - name: "icon_stat_value"
129
- components:
231
+ description: Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.
130
232
  - name: "icon_stat_value"
131
233
  platforms: *web
132
- - name: "icon_value"
133
- components:
234
+ description:
134
235
  - name: "icon_value"
135
236
  platforms: *web
136
- - name: "image"
137
- components:
237
+ description: Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value.
238
+ - name: "user_badge"
239
+ platforms: *web
240
+ 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.
138
241
  - name: "image"
139
242
  platforms: *web
140
- - name: "layouts"
243
+ description: A responsive image component.
244
+ - name: "lightbox"
245
+ platforms: *react_only
246
+ description: The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen.
247
+ - name: "star_rating"
248
+ platforms: *web
249
+ 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.
250
+ - name: layout_and_structure
251
+ description:
141
252
  components:
142
253
  - name: "flex"
143
254
  platforms: *web
255
+ description: This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
144
256
  - name: "layout"
145
257
  platforms: *web
146
- - name: "lightbox"
147
- components:
148
- - name: "lightbox"
149
- platforms: *react_only
150
- - name: "list"
151
- components:
152
- - name: "list"
258
+ description: Layouts used for positioning content inside of pages, cards, or containers.
259
+ - name: "card"
260
+ platforms: *all
261
+ description:
262
+ - name: "section_separator"
153
263
  platforms: *web
154
- - name: "loading_inline"
155
- components:
156
- - name: "loading_inline"
264
+ description: Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
265
+ - name: "background"
157
266
  platforms: *web
158
- - name: "map"
267
+ description: The background kit is used for adding a background to a page or to any container.
268
+ - name: "collapsible"
269
+ platforms: *web
270
+ description:
271
+ - name: message_text_patterns
272
+ description:
159
273
  components:
160
- - name: "map"
161
- platforms: *react_only
162
- - name: "nav"
274
+ - name: "highlight"
275
+ platforms: *web
276
+ description: Highlight is used to pick out or emphasize content.
277
+ - name: "message"
278
+ platforms: *web
279
+ 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.
280
+ - name: navigation
281
+ description:
163
282
  components:
283
+ - name: "bread_crumbs"
284
+ platforms: *web
285
+ description: BreadCrumbs can be used for keeping a user aware of their route location.
164
286
  - name: "nav"
165
287
  platforms: *web
166
- - name: "pagination"
167
- components:
288
+ 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.
168
289
  - name: "pagination"
169
290
  platforms: *rails_only
170
- - name: "popover"
291
+ description:
292
+ - name: state_and_progress_indicators
293
+ description:
171
294
  components:
172
- - name: "popover"
295
+ - name: "loading_inline"
173
296
  platforms: *web
174
- - name: "progress"
175
- components:
297
+ description: The loading kit is used to indicate to users that a page is still loading, or an action is still being processed.
176
298
  - name: "progress_pills"
177
299
  platforms: *web
300
+ 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.
178
301
  - name: "progress_simple"
179
302
  platforms: *web
303
+ description: Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
180
304
  - name: "progress_step"
181
305
  platforms: *web
182
- - name: "section_separator"
183
- components:
184
- - name: "section_separator"
185
- platforms: *web
186
- - name: "star_rating"
187
- components:
188
- - name: "star_rating"
306
+ 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."
307
+ - name: "walkthrough"
189
308
  platforms: *web
190
- - name: "table"
191
- components:
192
- - name: "table"
309
+ description:
310
+ - name: "timeline"
193
311
  platforms: *web
194
- - name: "tags"
312
+ description: The timeline kit can use two different line styles in the same timeline - solid and dotted line styles.
313
+ - name: tags
314
+ description:
195
315
  components:
196
- - name: "tags"
197
- platforms: *web
198
316
  - name: "badge"
199
317
  platforms: *web
200
- - name: "hashtag"
201
- platforms: *web
318
+ description: Badges can be used for notification, tags, and status. They are used for count and numbers.
202
319
  - name: "pill"
203
320
  platforms: *all
204
- - name: "timeline"
205
- components:
206
- - name: "timeline"
207
- platforms: *web
208
- - name: "time_and_date"
209
- components:
210
- - name: "date"
211
- platforms: *web
212
- - name: "date_range_inline"
213
- platforms: *web
214
- - name: "date_range_stacked"
215
- platforms: *web
216
- - name: "date_stacked"
217
- platforms: *web
218
- - name: "date_time"
219
- platforms: *web
220
- - name: "date_time_stacked"
221
- platforms: *web
222
- - name: "date_year_stacked"
223
- platforms: *web
224
- - name: "time"
225
- platforms: *web
226
- - name: "time_range_inline"
227
- platforms: *web
228
- - name: "time_stacked"
229
- platforms: *web
230
- - name: "timestamp"
231
- platforms: *all
232
- - name: "weekday_stacked"
233
- platforms: *web
234
- - name: "tooltip"
235
- components:
236
- - name: "tooltip"
321
+ description: A pill uses both a keyword and a specific color to categorize an item.
322
+ - name: "hashtag"
237
323
  platforms: *web
238
- - name: "typography"
324
+ description: Hashtag is used to display home, project and other forms of IDs. They can be used as a link.
325
+ - name: typography
326
+ description: ""
239
327
  components:
240
328
  - name: "body"
241
329
  platforms: *web
330
+ 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".
242
331
  - name: "caption"
243
332
  platforms: *web
333
+ 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.
244
334
  - name: "detail"
245
335
  platforms: *web
336
+ description: Used for tables or designs with large amounts of data or text.
246
337
  - name: "title"
247
338
  platforms: *web
248
- - name: "typography_patterns"
339
+ 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.
340
+ - name: user
341
+ description:
249
342
  components:
250
- - name: "contact"
251
- platforms: *web
252
- - name: "currency"
253
- platforms: *web
254
- - name: "dashboard_value"
255
- platforms: *web
256
- - name: "home_address_street"
257
- platforms: *web
258
- - name: "label_pill"
259
- platforms: *web
260
- - name: "label_value"
261
- platforms: *web
262
- - name: "message"
263
- platforms: *web
264
- - name: "person"
265
- platforms: *web
266
- - name: "person_contact"
267
- platforms: *web
268
- - name: "source"
269
- platforms: *web
270
- - name: "stat_change"
271
- platforms: *web
272
- - name: "stat_value"
273
- platforms: *web
274
- - name: "title_count"
343
+ - name: "avatar"
344
+ platforms: *all
345
+ 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.
346
+ - name: "avatar_action_button"
275
347
  platforms: *web
276
- - name: "title_detail"
348
+ description:
349
+ - name: "multiple_users"
277
350
  platforms: *web
278
- - name: "user_badge"
279
- components:
280
- - name: "user_badge"
351
+ description: The multiple users kit is used to show that more than one user is associated to an action or item.
352
+ - name: "multiple_users_stacked"
281
353
  platforms: *web
282
- - name: "walkthrough"
283
- components:
284
- - name: "walkthrough"
354
+ 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.
355
+ - name: "user"
285
356
  platforms: *web
357
+ 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.