playbook_ui 13.16.0 → 13.17.0.pre.alpha.nodealphaupgrade2157

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/_reset.scss +2 -2
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +62 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +127 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/README.md +288 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +95 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +51 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +5 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +63 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +8 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +98 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +246 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +345 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +52 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +49 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +18 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +59 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +18 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +60 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +3 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +52 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +5 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +63 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +3 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +57 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +3 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +61 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +3 -0
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +55 -0
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +1 -0
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -0
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +9 -0
  45. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +72 -0
  46. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  47. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +2 -2
  48. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +1 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  51. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  52. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  53. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  54. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  55. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  57. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  58. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  59. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  60. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  61. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  62. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  63. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  64. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  65. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  66. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  67. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  68. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  69. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  70. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  71. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  72. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +5 -7
  73. data/app/pb_kits/playbook/pb_popover/_popover.tsx +12 -14
  74. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +30 -0
  75. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +57 -0
  76. data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -1
  77. data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
  78. data/app/pb_kits/playbook/pb_popover/popover.test.js +29 -31
  79. data/app/pb_kits/playbook/pb_table/_table.tsx +32 -29
  80. data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb +48 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx +58 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_striped.md +1 -0
  83. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  84. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  86. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +19 -0
  87. data/app/pb_kits/playbook/pb_table/table.rb +7 -1
  88. data/app/pb_kits/playbook/pb_table/table.test.js +5 -0
  89. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  90. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  91. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  92. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  93. data/dist/menu.yml +105 -3
  94. data/dist/playbook-rails.js +14 -6
  95. data/dist/reset.css +1 -2
  96. data/lib/playbook/version.rb +2 -2
  97. metadata +55 -7
@@ -25,12 +25,14 @@ module Playbook
25
25
  default: false
26
26
  prop :vertical_border, type: Playbook::Props::Boolean,
27
27
  default: false
28
+ prop :striped, type: Playbook::Props::Boolean,
29
+ default: false
28
30
 
29
31
  def classname
30
32
  generate_classname(
31
33
  "pb_table", "table-#{size}", single_line_class, dark_class,
32
34
  disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
33
- vertical_border_class, "table-responsive-#{responsive}", separator: " "
35
+ vertical_border_class, striped_class, "table-responsive-#{responsive}", separator: " "
34
36
  )
35
37
  end
36
38
 
@@ -64,6 +66,10 @@ module Playbook
64
66
  sticky ? "sticky-header" : nil
65
67
  end
66
68
 
69
+ def striped_class
70
+ striped ? "striped" : nil
71
+ end
72
+
67
73
  def vertical_border_class
68
74
  vertical_border ? "vertical-border" : nil
69
75
  end
@@ -15,3 +15,8 @@ test("when sticky is true", () => {
15
15
  const kit = renderKit(Table, props, { sticky: true })
16
16
  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card sticky-header table-collapse-sm")
17
17
  })
18
+
19
+ test("when striped is true", () => {
20
+ const kit = renderKit(Table, props, { striped: true })
21
+ expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card striped table-collapse-sm")
22
+ })
@@ -148,7 +148,7 @@
148
148
  .placeholder {
149
149
  position: absolute;
150
150
  margin-right: 2px;
151
- margin-left: 2px;
151
+ margin-left: 10px;
152
152
  top: 50%;
153
153
  transform: translateY(-50%);
154
154
  box-sizing: border-box;
@@ -73,8 +73,10 @@ const TypeaheadWithHighlight = (props) => {
73
73
  Option: (highlightProps: OptionProps) => (
74
74
  <components.Option {...highlightProps}/>
75
75
  ),
76
- SingleValue: ({ data }: any) => (
77
- <span>{data.name}</span>
76
+ SingleValue: ({ ...props }) => (
77
+ <components.SingleValue {...props}>
78
+ <span>{props.data.name}</span>
79
+ </components.SingleValue>
78
80
  )
79
81
  }
80
82
 
@@ -4,6 +4,7 @@ import WebpackerReact from 'webpacker-react'
4
4
 
5
5
  // KIT EXAMPLES
6
6
  import 'pb_form/pb_form_validation'
7
+ import * as AdvancedTable from 'pb_advanced_table/docs'
7
8
  import * as Avatar from 'pb_avatar/docs'
8
9
  import * as AvatarActionButton from 'pb_avatar_action_button/docs'
9
10
  import * as Background from 'pb_background/docs'
@@ -105,6 +106,7 @@ import * as Walkthrough from 'pb_walkthrough/docs'
105
106
  import * as WeekdayStacked from 'pb_weekday_stacked/docs'
106
107
 
107
108
  WebpackerReact.registerComponents({
109
+ ...AdvancedTable,
108
110
  ...Avatar,
109
111
  ...AvatarActionButton,
110
112
  ...Background,
@@ -17,7 +17,7 @@ type AlignContent = {
17
17
  }
18
18
 
19
19
  type AlignItems = {
20
- alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
20
+ alignItems?: Alignment | ("flexStart" | "flexEnd" | "stretch" | "baseline")
21
21
  }
22
22
 
23
23
  type AlignSelf = {
data/dist/menu.yml CHANGED
@@ -13,345 +13,447 @@ kits:
13
13
  - name: "dialog"
14
14
  platforms: *web
15
15
  description:
16
+ status: "stable"
16
17
  - name: "fixed_confirmation_toast"
17
18
  platforms: *web
18
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"
19
21
  - name: "popover"
20
22
  platforms: *web
21
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"
22
25
  - name: "tooltip"
23
26
  platforms: *web
24
27
  description:
28
+ status: "stable"
25
29
  - name: buttons
26
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”.
27
31
  components:
28
32
  - name: "button"
29
33
  platforms: *web
30
34
  description:
35
+ status: "stable"
31
36
  - name: "button_toolbar"
32
37
  platforms: *web
33
38
  description: This kit should primarily hold the most commonly used buttons.
39
+ status: "stable"
34
40
  - name: "circle_icon_button"
35
41
  platforms: *web
36
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"
37
44
  - name: data_visualization
38
45
  description:
39
46
  components:
40
47
  - name: "map"
41
48
  platforms: *react_only
42
49
  description: This kit provides a wrapping class to place around the MapLibre library.
50
+ status: "stable"
43
51
  - name: "table"
44
52
  platforms: *web
45
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: *react_only
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: "beta"
46
59
  - name: "list"
47
60
  platforms: *web
48
61
  description: Lists display a vertical set of related content.
62
+ status: "stable"
49
63
  - name: "filter"
50
64
  platforms: *web
51
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"
52
67
  - name: "distribution_bar"
53
68
  platforms: *web
54
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"
55
71
  - name: "legend"
56
72
  platforms: *web
57
73
  description: A key used to compare the variables and their value in any given graph.
74
+ status: "stable"
58
75
  - name: "gauge"
59
76
  platforms: *web
60
77
  description:
78
+ status: "stable"
61
79
  - name: "bar_graph"
62
80
  platforms: *web
63
81
  description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.
82
+ status: "stable"
64
83
  - name: "circle_chart"
65
84
  platforms: *web
66
85
  description:
86
+ status: "stable"
67
87
  - name: "line_graph"
68
88
  platforms: *web
69
89
  description: Line graphs are used to show changes in data over time.
90
+ status: "stable"
70
91
  - name: "treemap_chart"
71
92
  platforms: *web
72
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"
73
95
  - name: date_and_time_text_patterns
74
96
  description: ""
75
97
  components:
76
98
  - name: "date"
77
99
  platforms: *web
78
100
  description: Use to display the date. Year will not display if it is the current year.
101
+ status: "stable"
79
102
  - name: "date_range_inline"
80
103
  platforms: *web
81
104
  description: Use to display a date range. Year will not show if it is the current year.
105
+ status: "stable"
82
106
  - name: "date_range_stacked"
83
107
  platforms: *web
84
- description:
108
+ description:
109
+ status: "stable"
85
110
  - name: "date_stacked"
86
111
  platforms: *web
87
112
  description: Use to display the date, stacking month and day. Year will not show if it is the current year.
113
+ status: "stable"
88
114
  - name: "date_time"
89
115
  platforms: *web
90
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".
91
117
  - name: "date_time_stacked"
92
118
  platforms: *web
93
119
  description:
120
+ status: "stable"
94
121
  - name: "date_year_stacked"
95
122
  platforms: *web
96
123
  description: This kit is a simple option for displaying dates in a month, day and the year format.
124
+ status: "stable"
97
125
  - name: "time"
98
126
  platforms: *web
99
127
  description: This kit consist of large display and table display format. It includes and icon, and a time zone.
128
+ status: "stable"
100
129
  - name: "time_range_inline"
101
130
  platforms: *web
102
131
  description:
132
+ status: "stable"
103
133
  - name: "time_stacked"
104
134
  platforms: *web
105
135
  description:
136
+ status: "stable"
106
137
  - name: "timestamp"
107
138
  platforms: *all
108
139
  description: This low profile kit displays time. Elapsed, current, future, or otherwise.
140
+ status: "stable"
109
141
  - name: "weekday_stacked"
110
142
  platforms: *web
111
143
  description:
144
+ status: "stable"
112
145
  - name: form_and_dashboard_text_patterns
113
146
  description: ""
114
147
  components:
115
148
  - name: "contact"
116
149
  platforms: *web
117
150
  description: Use to display customer's or user's contact information.
151
+ status: "stable"
118
152
  - name: "currency"
119
153
  platforms: *web
120
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"
121
156
  - name: "home_address_street"
122
157
  platforms: *web
123
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"
124
160
  - name: "label_pill"
125
161
  platforms: *web
126
162
  description: This kit combines the caption and pill kit with all its variants.
163
+ status: "stable"
127
164
  - name: "label_value"
128
165
  platforms: *web
129
166
  description: This kit can be very versatile when used to display text data.
167
+ status: "stable"
130
168
  - name: "person"
131
169
  platforms: *web
132
170
  description: This kit is broken down into a first name last name format with normal and bold weighted text.
171
+ status: "stable"
133
172
  - name: "person_contact"
134
173
  platforms: *web
135
174
  description: This kit can be used to display a person contact information.
175
+ status: "stable"
136
176
  - name: "source"
137
177
  platforms: *web
138
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"
139
180
  - name: "dashboard_value"
140
181
  platforms: *web
141
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"
142
184
  - name: "stat_change"
143
185
  platforms: *web
144
186
  description: Displays the increase, decrease, or neutral change in data.
187
+ status: "stable"
145
188
  - name: "stat_value"
146
189
  platforms: *web
147
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"
148
192
  - name: "title_count"
149
193
  platforms: *web
150
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"
151
196
  - name: "title_detail"
152
197
  platforms: *web
153
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"
154
200
  - name: form_elements
155
201
  description:
156
202
  components:
157
203
  - name: "file_upload"
158
204
  platforms: *web
159
205
  description:
206
+ status: "stable"
160
207
  - name: "toggle"
161
208
  platforms: *web
162
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"
163
211
  - name: "form_pill"
164
212
  platforms: *web
165
213
  description:
214
+ status: "stable"
166
215
  - name: "form"
167
216
  platforms: *rails_only
168
217
  description: The form kit provides consumers with a convenient, consistently styled <form> wrapper.
218
+ status: "stable"
169
219
  - name: "form_group"
170
220
  platforms: *web
171
221
  description:
222
+ status: "stable"
172
223
  - name: form_input
173
224
  description: ""
174
225
  components:
175
226
  - name: "passphrase"
176
227
  platforms: *web
177
228
  description:
229
+ status: "stable"
178
230
  - name: "phone_number_input"
179
231
  platforms: *web
180
232
  description:
233
+ status: "stable"
181
234
  - name: "text_input"
182
235
  platforms: *web
183
236
  description: Area where user can enter small amount of text. Commonly used in forms.
237
+ status: "stable"
184
238
  - name: "rich_text_editor"
185
239
  platforms: *web
186
- description:
240
+ description:
241
+ status: "stable"
187
242
  - name: "textarea"
188
243
  platforms: *web
189
244
  description: Area where user can enter larger amounts of text. Commonly used in forms.
245
+ status: "stable"
190
246
  - name: "typeahead"
191
247
  platforms: *web
192
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"
193
250
  - name: form_selection
194
251
  description:
195
252
  components:
196
253
  - name: "date_picker"
197
254
  platforms: *web
198
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"
199
257
  - name: "multi_level_select"
200
258
  platforms: *web
201
259
  description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
260
+ status: "stable"
202
261
  - name: "select"
203
262
  platforms: *web
204
263
  description: Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.
264
+ status: "stable"
205
265
  - name: "selectable_card"
206
266
  platforms: *web
207
267
  description: Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.
268
+ status: "stable"
208
269
  - name: "selectable_card_icon"
209
270
  platforms: *web
210
271
  description:
272
+ status: "stable"
211
273
  - name: "selectable_icon"
212
274
  platforms: *web
213
275
  description:
276
+ status: "stable"
214
277
  - name: "radio"
215
278
  platforms: *all
216
279
  description: Radio is a control that allows the user to only choose one predefined option.
280
+ status: "stable"
217
281
  - name: "checkbox"
218
282
  platforms: *web
219
283
  description: Checkbox is used for a list of selections that are meant to have one or more options checked.
284
+ status: "stable"
220
285
  - name: "selectable_list"
221
286
  platforms: *web
222
287
  description:
288
+ status: "stable"
223
289
  - name: icons_and_images
224
290
  description: ""
225
291
  components:
226
292
  - name: "icon"
227
293
  platforms: *web
228
294
  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.
295
+ status: "stable"
229
296
  - name: "icon_circle"
230
297
  platforms: *web
231
298
  description: Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.
299
+ status: "stable"
232
300
  - name: "icon_stat_value"
233
301
  platforms: *web
234
302
  description:
303
+ status: "stable"
235
304
  - name: "icon_value"
236
305
  platforms: *web
237
306
  description: Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value.
307
+ status: "stable"
238
308
  - name: "user_badge"
239
309
  platforms: *web
240
310
  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.
311
+ status: "stable"
241
312
  - name: "image"
242
313
  platforms: *web
243
314
  description: A responsive image component.
315
+ status: "stable"
244
316
  - name: "lightbox"
245
317
  platforms: *react_only
246
318
  description: The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen.
319
+ status: "stable"
247
320
  - name: "star_rating"
248
321
  platforms: *web
249
322
  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.
323
+ status: "stable"
250
324
  - name: layout_and_structure
251
325
  description:
252
326
  components:
253
327
  - name: "flex"
254
328
  platforms: *web
255
329
  description: This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
330
+ status: "stable"
256
331
  - name: "layout"
257
332
  platforms: *web
258
333
  description: Layouts used for positioning content inside of pages, cards, or containers.
334
+ status: "stable"
259
335
  - name: "card"
260
336
  platforms: *all
261
337
  description:
338
+ status: "stable"
262
339
  - name: "section_separator"
263
340
  platforms: *web
264
341
  description: Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
342
+ status: "stable"
265
343
  - name: "background"
266
344
  platforms: *web
267
345
  description: The background kit is used for adding a background to a page or to any container.
346
+ status: "stable"
268
347
  - name: "collapsible"
269
348
  platforms: *web
270
349
  description:
350
+ status: "stable"
271
351
  - name: message_text_patterns
272
352
  description:
273
353
  components:
274
354
  - name: "highlight"
275
355
  platforms: *web
276
356
  description: Highlight is used to pick out or emphasize content.
357
+ status: "stable"
277
358
  - name: "message"
278
359
  platforms: *web
279
360
  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.
361
+ status: "stable"
280
362
  - name: navigation
281
363
  description:
282
364
  components:
283
365
  - name: "bread_crumbs"
284
366
  platforms: *web
285
367
  description: BreadCrumbs can be used for keeping a user aware of their route location.
368
+ status: "stable"
286
369
  - name: "nav"
287
370
  platforms: *web
288
371
  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.
372
+ status: "stable"
289
373
  - name: "pagination"
290
374
  platforms: *rails_only
291
375
  description:
376
+ status: "stable"
292
377
  - name: state_and_progress_indicators
293
378
  description:
294
379
  components:
295
380
  - name: "loading_inline"
296
381
  platforms: *web
297
382
  description: The loading kit is used to indicate to users that a page is still loading, or an action is still being processed.
383
+ status: "stable"
298
384
  - name: "progress_pills"
299
385
  platforms: *web
300
386
  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.
387
+ status: "stable"
301
388
  - name: "progress_simple"
302
389
  platforms: *web
303
390
  description: Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
304
391
  - name: "progress_step"
305
392
  platforms: *web
306
393
  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."
394
+ status: "stable"
307
395
  - name: "walkthrough"
308
396
  platforms: *web
309
397
  description:
398
+ status: "stable"
310
399
  - name: "timeline"
311
400
  platforms: *web
312
401
  description: The timeline kit can use two different line styles in the same timeline - solid and dotted line styles.
402
+ status: "stable"
313
403
  - name: tags
314
404
  description:
315
405
  components:
316
406
  - name: "badge"
317
407
  platforms: *web
318
408
  description: Badges can be used for notification, tags, and status. They are used for count and numbers.
409
+ status: "stable"
319
410
  - name: "pill"
320
411
  platforms: *all
321
412
  description: A pill uses both a keyword and a specific color to categorize an item.
413
+ status: "stable"
322
414
  - name: "hashtag"
323
415
  platforms: *web
324
416
  description: Hashtag is used to display home, project and other forms of IDs. They can be used as a link.
417
+ status: "stable"
325
418
  - name: typography
326
419
  description: ""
327
420
  components:
328
421
  - name: "body"
329
422
  platforms: *web
330
423
  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".
424
+ status: "stable"
331
425
  - name: "caption"
332
426
  platforms: *web
333
427
  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.
428
+ status: "stable"
334
429
  - name: "detail"
335
430
  platforms: *web
336
431
  description: Used for tables or designs with large amounts of data or text.
432
+ status: "stable"
337
433
  - name: "title"
338
434
  platforms: *web
339
435
  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.
436
+ status: "stable"
340
437
  - name: user
341
438
  description:
342
439
  components:
343
440
  - name: "avatar"
344
441
  platforms: *all
345
442
  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.
443
+ status: "stable"
346
444
  - name: "avatar_action_button"
347
445
  platforms: *web
348
446
  description:
447
+ status: "stable"
349
448
  - name: "multiple_users"
350
449
  platforms: *web
351
450
  description: The multiple users kit is used to show that more than one user is associated to an action or item.
451
+ status: "stable"
352
452
  - name: "multiple_users_stacked"
353
453
  platforms: *web
354
454
  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.
455
+ status: "stable"
355
456
  - name: "user"
356
457
  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.
458
+ 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.
459
+ status: "stable"