primer_view_components 0.0.48 → 0.0.49

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/CHANGELOG.md +43 -0
  3. data/app/components/primer/beta/avatar.rb +1 -1
  4. data/app/components/primer/{avatar_stack_component.html.erb → beta/avatar_stack.html.erb} +0 -0
  5. data/app/components/primer/beta/avatar_stack.rb +92 -0
  6. data/app/components/primer/image_crop.html.erb +4 -4
  7. data/app/components/primer/navigation/tab_component.rb +15 -1
  8. data/app/components/primer/tab_nav_component.rb +4 -3
  9. data/app/components/primer/truncate.rb +1 -1
  10. data/app/components/primer/underline_nav_component.rb +3 -2
  11. data/lib/primer/classify/utilities.rb +33 -12
  12. data/lib/primer/view_components.rb +34 -6
  13. data/lib/primer/view_components/constants.rb +55 -0
  14. data/lib/primer/view_components/linters/argument_mappers/base.rb +39 -0
  15. data/lib/primer/view_components/linters/argument_mappers/button.rb +35 -44
  16. data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb +25 -0
  17. data/lib/primer/view_components/linters/argument_mappers/label.rb +56 -0
  18. data/lib/primer/view_components/linters/autocorrectable.rb +30 -0
  19. data/lib/primer/view_components/linters/button_component_migration_counter.rb +9 -23
  20. data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +21 -0
  21. data/lib/primer/view_components/linters/helpers.rb +42 -41
  22. data/lib/primer/view_components/linters/label_component_migration_counter.rb +25 -0
  23. data/lib/primer/view_components/version.rb +1 -1
  24. data/lib/tasks/constants.rake +12 -0
  25. data/lib/tasks/docs.rake +24 -23
  26. data/lib/tasks/utilities.rake +2 -10
  27. data/lib/yard/docs_helper.rb +12 -3
  28. data/static/arguments.yml +977 -0
  29. data/static/assets/view-components.svg +18 -0
  30. data/static/classes.yml +174 -0
  31. data/static/constants.json +628 -0
  32. data/static/statuses.json +1 -1
  33. metadata +16 -4
  34. data/app/components/primer/avatar_stack_component.rb +0 -90
@@ -5,7 +5,7 @@ module Primer
5
5
  module VERSION
6
6
  MAJOR = 0
7
7
  MINOR = 0
8
- PATCH = 48
8
+ PATCH = 49
9
9
 
10
10
  STRING = [MAJOR, MINOR, PATCH].join(".")
11
11
  end
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ namespace :constants do
4
+ task :dump do
5
+ require File.expand_path("./../../demo/config/environment.rb", __dir__)
6
+ require "primer/view_components"
7
+ # Loads all components for `.descendants` to work properly
8
+ Dir["./app/components/primer/**/*.rb"].sort.each { |file| require file }
9
+
10
+ Primer::ViewComponents.dump_constants
11
+ end
12
+ end
data/lib/tasks/docs.rake CHANGED
@@ -35,7 +35,7 @@ namespace :docs do
35
35
  Primer::Beta::AutoComplete,
36
36
  Primer::Beta::AutoComplete::Item,
37
37
  Primer::Beta::Avatar,
38
- Primer::AvatarStackComponent,
38
+ Primer::Beta::AvatarStack,
39
39
  Primer::BaseButton,
40
40
  Primer::BlankslateComponent,
41
41
  Primer::BorderBoxComponent,
@@ -110,6 +110,7 @@ namespace :docs do
110
110
  File.open(path, "w") do |f|
111
111
  f.puts("---")
112
112
  f.puts("title: #{data[:title]}")
113
+ f.puts("componentId: #{data[:component_id]}")
113
114
  f.puts("status: #{data[:status]}")
114
115
  f.puts("source: #{data[:source]}")
115
116
  f.puts("storybook: #{data[:storybook]}")
@@ -227,23 +228,12 @@ namespace :docs do
227
228
  f.puts("## Examples")
228
229
 
229
230
  initialize_method.tags(:example).each do |tag|
230
- name = tag.name
231
- description = nil
232
- code = nil
233
-
234
- if tag.text.include?("@description")
235
- splitted = tag.text.split(/@description|@code/)
236
- description = splitted.second.gsub(/^[ \t]{2}/, "").strip
237
- code = splitted.last.gsub(/^[ \t]{2}/, "").strip
238
- else
239
- code = tag.text
240
- end
241
-
231
+ name, description, code = parse_example_tag(tag)
242
232
  f.puts
243
233
  f.puts("### #{name}")
244
234
  if description
245
235
  f.puts
246
- f.puts(description)
236
+ f.puts(view_context.render(inline: description.squish))
247
237
  end
248
238
  f.puts
249
239
  html = view_context.render(inline: code)
@@ -330,13 +320,14 @@ namespace :docs do
330
320
  f.puts(" class #{short_name}Preview < ViewComponent::Preview")
331
321
 
332
322
  yard_example_tags.each_with_index do |tag, index|
333
- method_name = tag.name.split("|").first.downcase.parameterize.underscore
323
+ name, _, code = parse_example_tag(tag)
324
+ method_name = name.split("|").first.downcase.parameterize.underscore
334
325
  f.puts(" def #{method_name}; end")
335
326
  f.puts unless index == yard_example_tags.size - 1
336
327
  path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
337
328
  path.dirname.mkdir unless path.dirname.exist?
338
329
  File.open(path, "w") do |view_file|
339
- view_file.puts(tag.text.to_s)
330
+ view_file.puts(code.to_s)
340
331
  end
341
332
  end
342
333
 
@@ -374,6 +365,22 @@ namespace :docs do
374
365
  registry
375
366
  end
376
367
 
368
+ def parse_example_tag(tag)
369
+ name = tag.name
370
+ description = nil
371
+ code = nil
372
+
373
+ if tag.text.include?("@description")
374
+ splitted = tag.text.split(/@description|@code/)
375
+ description = splitted.second.gsub(/^[ \t]{2}/, "").strip
376
+ code = splitted.last.gsub(/^[ \t]{2}/, "").strip
377
+ else
378
+ code = tag.text
379
+ end
380
+
381
+ [name, description, code]
382
+ end
383
+
377
384
  def pretty_default_value(tag, component)
378
385
  params = tag.object.parameters.find { |param| [tag.name.to_s, tag.name.to_s + ":"].include?(param[0]) }
379
386
  default = tag.defaults&.first || params&.second
@@ -388,13 +395,6 @@ namespace :docs do
388
395
  pretty_value(constant_value)
389
396
  end
390
397
 
391
- def status_module_and_short_name(component)
392
- name_with_status = component.name.gsub(/Primer::|Component/, "")
393
-
394
- m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(::)?(?<name>.*)/)
395
- [m[:status]&.downcase, m[:name].gsub("::", "")]
396
- end
397
-
398
398
  def docs_metadata(component)
399
399
  (status_module, short_name) = status_module_and_short_name(component)
400
400
  status_path = status_module.nil? ? "" : "#{status_module}/"
@@ -402,6 +402,7 @@ namespace :docs do
402
402
 
403
403
  {
404
404
  title: short_name,
405
+ component_id: short_name.underscore,
405
406
  status: status.capitalize,
406
407
  source: source_url(component),
407
408
  storybook: storybook_url(component),
@@ -5,6 +5,7 @@ namespace :utilities do
5
5
  require "yaml"
6
6
  require "json"
7
7
  require File.expand_path("./../../demo/config/environment.rb", __dir__)
8
+ require "primer/classify/utilities"
8
9
 
9
10
  # Keys that are looked for to be included in the utilities.yml file
10
11
  SUPPORTED_KEYS = %i[
@@ -19,15 +20,6 @@ namespace :utilities do
19
20
  v
20
21
  ].freeze
21
22
 
22
- # Replacements for some classnames that end up being a different argument key
23
- REPLACEMENT_KEYS = {
24
- "^anim" => "animation",
25
- "^v-align" => "vertical_align",
26
- "^d" => "display",
27
- "^wb" => "word_break",
28
- "^v" => "visibility"
29
- }.freeze
30
-
31
23
  BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
32
24
 
33
25
  css_data =
@@ -52,7 +44,7 @@ namespace :utilities do
52
44
  key = ""
53
45
 
54
46
  # Look for a replacement key
55
- REPLACEMENT_KEYS.each do |k, v|
47
+ Primer::Classify::Utilities::REPLACEMENT_KEYS.each do |k, v|
56
48
  next unless classname.match?(Regexp.new(k))
57
49
 
58
50
  key = v
@@ -29,7 +29,7 @@ module YARD
29
29
  end
30
30
 
31
31
  def link_to_accessibility
32
- "[Accessibility](#system-arguments)"
32
+ "[Accessibility](#accessibility)"
33
33
  end
34
34
 
35
35
  def link_to_system_arguments_docs
@@ -41,8 +41,10 @@ module YARD
41
41
  end
42
42
 
43
43
  def link_to_component(component)
44
- short_name = component.name.gsub(/Primer|::|Alpha|Beta|Component/, "")
45
- "[#{short_name}](/components/#{short_name.downcase})"
44
+ (status_module, short_name) = status_module_and_short_name(component)
45
+ status_path = status_module.nil? ? "" : "#{status_module}/"
46
+
47
+ "[#{short_name}](/components/#{status_path}#{short_name.downcase})"
46
48
  end
47
49
 
48
50
  def link_to_octicons
@@ -53,6 +55,13 @@ module YARD
53
55
  "[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
54
56
  end
55
57
 
58
+ def status_module_and_short_name(component)
59
+ name_with_status = component.name.gsub(/Primer::|Component/, "")
60
+
61
+ m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(::)?(?<name>.*)/)
62
+ [m[:status]&.downcase, m[:name].gsub("::", "")]
63
+ end
64
+
56
65
  def pretty_value(val)
57
66
  case val
58
67
  when nil
@@ -0,0 +1,977 @@
1
+ ---
2
+ - component: ButtonMarketing
3
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb
4
+ parameters:
5
+ - name: scheme
6
+ type: Symbol
7
+ default: "`:default`"
8
+ description: One of `:default`, `:outline`, `:primary`, or `:transparent`.
9
+ - name: variant
10
+ type: Symbol
11
+ default: "`:default`"
12
+ description: One of `:default` and `:large`.
13
+ - name: tag
14
+ type: Symbol
15
+ default: "`:button`"
16
+ description: One of `:a` and `:button`.
17
+ - name: type
18
+ type: Symbol
19
+ default: "`:button`"
20
+ description: One of `:button` and `:submit`.
21
+ - name: system_arguments
22
+ type: Hash
23
+ default: N/A
24
+ description: "[System arguments](/system-arguments)"
25
+ - component: BaseButton
26
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/base_button.rb
27
+ parameters:
28
+ - name: tag
29
+ type: Symbol
30
+ default: "`:button`"
31
+ description: One of `:a`, `:button`, or `:summary`.
32
+ - name: type
33
+ type: Symbol
34
+ default: "`:button`"
35
+ description: One of `:button`, `:reset`, or `:submit`.
36
+ - name: block
37
+ type: Boolean
38
+ default: "`false`"
39
+ description: 'Whether button is full-width with `display: block`.'
40
+ - name: system_arguments
41
+ type: Hash
42
+ default: N/A
43
+ description: "[System arguments](/system-arguments)"
44
+ - component: AutoComplete
45
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb
46
+ parameters:
47
+ - name: src
48
+ type: String
49
+ default: N/A
50
+ description: The route to query.
51
+ - name: input_id
52
+ type: String
53
+ default: N/A
54
+ description: Id of the input element.
55
+ - name: list_id
56
+ type: String
57
+ default: N/A
58
+ description: Id of the list element.
59
+ - name: system_arguments
60
+ type: Hash
61
+ default: N/A
62
+ description: "[System arguments](/system-arguments)"
63
+ - component: AutoCompleteItem
64
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb
65
+ parameters:
66
+ - name: value
67
+ type: String
68
+ default: N/A
69
+ description: Value of the item.
70
+ - name: selected
71
+ type: Boolean
72
+ default: "`false`"
73
+ description: Whether the item is selected.
74
+ - name: disabled
75
+ type: Boolean
76
+ default: "`false`"
77
+ description: Whether the item is disabled.
78
+ - name: system_arguments
79
+ type: Hash
80
+ default: N/A
81
+ description: "[System arguments](/system-arguments)"
82
+ - component: Avatar
83
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb
84
+ parameters:
85
+ - name: src
86
+ type: String
87
+ default: N/A
88
+ description: The source url of the avatar image.
89
+ - name: alt
90
+ type: String
91
+ default: N/A
92
+ description: Passed through to alt on img tag.
93
+ - name: size
94
+ type: Integer
95
+ default: "`20`"
96
+ description: Adds the avatar-small class if less than 24.
97
+ - name: square
98
+ type: Boolean
99
+ default: "`false`"
100
+ description: Used to create a square avatar.
101
+ - name: href
102
+ type: String
103
+ default: "`nil`"
104
+ description: The URL to link to. If used, component will be wrapped by an `<a>`
105
+ tag.
106
+ - name: system_arguments
107
+ type: Hash
108
+ default: N/A
109
+ description: "[System arguments](/system-arguments)"
110
+ - component: AvatarStack
111
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb
112
+ parameters:
113
+ - name: tag
114
+ type: Symbol
115
+ default: "`:div`"
116
+ description: One of `:div` and `:span`.
117
+ - name: align
118
+ type: Symbol
119
+ default: "`:left`"
120
+ description: One of `:left` and `:right`.
121
+ - name: tooltipped
122
+ type: Boolean
123
+ default: "`false`"
124
+ description: Whether to add a tooltip to the stack or not.
125
+ - name: body_arguments
126
+ type: Hash
127
+ default: "`{}`"
128
+ description: Parameters to add to the Body. If `tooltipped` is set, has the same
129
+ arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can
130
+ be changed using `tag:` to one of `:div` and `:span`.
131
+ - name: system_arguments
132
+ type: Hash
133
+ default: N/A
134
+ description: "[System arguments](/system-arguments)"
135
+ - component: Text
136
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
137
+ parameters:
138
+ - name: tag
139
+ type: Symbol
140
+ default: "`:span`"
141
+ description: ''
142
+ - name: system_arguments
143
+ type: Hash
144
+ default: N/A
145
+ description: "[System arguments](/system-arguments)"
146
+ - component: Blankslate
147
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/blankslate_component.rb
148
+ parameters:
149
+ - name: title
150
+ type: String
151
+ default: '`""`'
152
+ description: Text that appears in a larger bold font.
153
+ - name: title_tag
154
+ type: Symbol
155
+ default: "`:h3`"
156
+ description: HTML tag to use for title.
157
+ - name: icon
158
+ type: Symbol
159
+ default: '`""`'
160
+ description: Octicon icon to use at top of component.
161
+ - name: icon_size
162
+ type: Symbol
163
+ default: "`:medium`"
164
+ description: One of `:small` (`16`) and `:medium` (`24`).
165
+ - name: image_src
166
+ type: String
167
+ default: '`""`'
168
+ description: Image to display.
169
+ - name: image_alt
170
+ type: String
171
+ default: '`" "`'
172
+ description: Alt text for image.
173
+ - name: description
174
+ type: String
175
+ default: '`""`'
176
+ description: Text that appears below the title. Typically a whole sentence.
177
+ - name: button_text
178
+ type: String
179
+ default: '`""`'
180
+ description: The text of the button.
181
+ - name: button_url
182
+ type: String
183
+ default: '`""`'
184
+ description: The URL where the user will be taken after clicking the button.
185
+ - name: button_classes
186
+ type: String
187
+ default: '`"btn-primary my-3"`'
188
+ description: Classes to apply to action button
189
+ - name: link_text
190
+ type: String
191
+ default: '`""`'
192
+ description: The text of the link.
193
+ - name: link_url
194
+ type: String
195
+ default: '`""`'
196
+ description: The URL where the user will be taken after clicking the link.
197
+ - name: narrow
198
+ type: Boolean
199
+ default: "`false`"
200
+ description: Adds a maximum width.
201
+ - name: large
202
+ type: Boolean
203
+ default: "`false`"
204
+ description: Increases the font size.
205
+ - name: spacious
206
+ type: Boolean
207
+ default: "`false`"
208
+ description: Adds extra padding.
209
+ - name: system_arguments
210
+ type: Hash
211
+ default: N/A
212
+ description: "[System arguments](/system-arguments)"
213
+ - component: BorderBox
214
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/border_box_component.rb
215
+ parameters:
216
+ - name: padding
217
+ type: Symbol
218
+ default: "`:default`"
219
+ description: One of `:condensed`, `:default`, or `:spacious`.
220
+ - name: system_arguments
221
+ type: Hash
222
+ default: N/A
223
+ description: "[System arguments](/system-arguments)"
224
+ - component: Box
225
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/box_component.rb
226
+ parameters:
227
+ - name: system_arguments
228
+ type: Hash
229
+ default: N/A
230
+ description: "[System arguments](/system-arguments)"
231
+ - component: Breadcrumb
232
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/breadcrumb_component.rb
233
+ parameters:
234
+ - name: system_arguments
235
+ type: Hash
236
+ default: N/A
237
+ description: "[System arguments](/system-arguments)"
238
+ - component: Button
239
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb
240
+ parameters:
241
+ - name: scheme
242
+ type: Symbol
243
+ default: "`:default`"
244
+ description: One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`,
245
+ or `:primary`.
246
+ - name: variant
247
+ type: Symbol
248
+ default: "`:medium`"
249
+ description: One of `:large`, `:medium`, or `:small`.
250
+ - name: tag
251
+ type: Symbol
252
+ default: "`:button`"
253
+ description: One of `:a`, `:button`, or `:summary`.
254
+ - name: type
255
+ type: Symbol
256
+ default: "`:button`"
257
+ description: One of `:button`, `:reset`, or `:submit`.
258
+ - name: group_item
259
+ type: Boolean
260
+ default: "`false`"
261
+ description: Whether button is part of a ButtonGroup.
262
+ - name: block
263
+ type: Boolean
264
+ default: "`false`"
265
+ description: 'Whether button is full-width with `display: block`.'
266
+ - name: caret
267
+ type: Boolean
268
+ default: "`false`"
269
+ description: Whether or not to render a caret.
270
+ - name: system_arguments
271
+ type: Hash
272
+ default: N/A
273
+ description: "[System arguments](/system-arguments)"
274
+ - component: ButtonGroup
275
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/button_group.rb
276
+ parameters:
277
+ - name: variant
278
+ type: Symbol
279
+ default: "`:medium`"
280
+ description: One of `:large`, `:medium`, or `:small`.
281
+ - name: system_arguments
282
+ type: Hash
283
+ default: N/A
284
+ description: "[System arguments](/system-arguments)"
285
+ - component: ClipboardCopy
286
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/clipboard_copy.rb
287
+ parameters:
288
+ - name: aria-label
289
+ type: String
290
+ default: N/A
291
+ description: String that will be read to screenreaders when the component is focused
292
+ - name: value
293
+ type: String
294
+ default: "`nil`"
295
+ description: Text to copy into the users clipboard when they click the component.
296
+ - name: for
297
+ type: String
298
+ default: N/A
299
+ description: Element id from where to get the copied value.
300
+ - name: system_arguments
301
+ type: Hash
302
+ default: N/A
303
+ description: "[System arguments](/system-arguments)"
304
+ - component: CloseButton
305
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/close_button.rb
306
+ parameters:
307
+ - name: type
308
+ type: Symbol
309
+ default: "`:button`"
310
+ description: One of `:button` and `:submit`.
311
+ - name: system_arguments
312
+ type: Hash
313
+ default: N/A
314
+ description: "[System arguments](/system-arguments)"
315
+ - component: Counter
316
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/counter_component.rb
317
+ parameters:
318
+ - name: count
319
+ type: Integer, Float::INFINITY, nil
320
+ default: "`0`"
321
+ description: 'The number to be displayed (e.x. # of issues, pull requests)'
322
+ - name: scheme
323
+ type: Symbol
324
+ default: "`:default`"
325
+ description: Color scheme. One of `:default`, `:primary`, or `:secondary`.
326
+ - name: limit
327
+ type: Integer, nil
328
+ default: "`5_000`"
329
+ description: Maximum value to display. Pass `nil` for no limit. (e.x. if `count`
330
+ == 6,000 and `limit` == 5000, counter will display "5,000+")
331
+ - name: hide_if_zero
332
+ type: Boolean
333
+ default: "`false`"
334
+ description: If true, a `hidden` attribute is added to the counter if `count`
335
+ is zero.
336
+ - name: text
337
+ type: String
338
+ default: '`""`'
339
+ description: Text to display instead of count.
340
+ - name: round
341
+ type: Boolean
342
+ default: "`false`"
343
+ description: Whether to apply our standard rounding logic to value.
344
+ - name: system_arguments
345
+ type: Hash
346
+ default: N/A
347
+ description: "[System arguments](/system-arguments)"
348
+ - component: Details
349
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/details_component.rb
350
+ parameters:
351
+ - name: overlay
352
+ type: Symbol
353
+ default: "`:none`"
354
+ description: Dictates the type of overlay to render with. One of `:dark`, `:default`,
355
+ or `:none`.
356
+ - name: reset
357
+ type: Boolean
358
+ default: "`false`"
359
+ description: Defatuls to false. If set to true, it will remove the default caret
360
+ and remove style from the summary element
361
+ - name: system_arguments
362
+ type: Hash
363
+ default: N/A
364
+ description: "[System arguments](/system-arguments)"
365
+ - component: Dropdown
366
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb
367
+ parameters:
368
+ - name: overlay
369
+ type: Symbol
370
+ default: "`:default`"
371
+ description: One of `:dark`, `:default`, or `:none`.
372
+ - name: with_caret
373
+ type: Boolean
374
+ default: "`false`"
375
+ description: Whether or not a caret should be rendered in the button.
376
+ - name: system_arguments
377
+ type: Hash
378
+ default: N/A
379
+ description: "[System arguments](/system-arguments)"
380
+ - component: DropdownMenu
381
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown_menu_component.rb
382
+ parameters:
383
+ - name: direction
384
+ type: Symbol
385
+ default: "`:se`"
386
+ description: One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`.
387
+ - name: scheme
388
+ type: Symbol
389
+ default: "`:default`"
390
+ description: Pass `:dark` for dark mode theming
391
+ - name: header
392
+ type: String
393
+ default: "`nil`"
394
+ description: Optional string to display as the header
395
+ - name: system_arguments
396
+ type: Hash
397
+ default: N/A
398
+ description: "[System arguments](/system-arguments)"
399
+ - component: Flash
400
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/flash_component.rb
401
+ parameters:
402
+ - name: full
403
+ type: Boolean
404
+ default: "`false`"
405
+ description: Whether the component should take up the full width of the screen.
406
+ - name: spacious
407
+ type: Boolean
408
+ default: "`false`"
409
+ description: Whether to add margin to the bottom of the component.
410
+ - name: dismissible
411
+ type: Boolean
412
+ default: "`false`"
413
+ description: Whether the component can be dismissed with an X button.
414
+ - name: icon
415
+ type: Symbol
416
+ default: "`nil`"
417
+ description: Name of Octicon icon to use.
418
+ - name: scheme
419
+ type: Symbol
420
+ default: "`:default`"
421
+ description: One of `:danger`, `:default`, `:success`, or `:warning`.
422
+ - name: system_arguments
423
+ type: Hash
424
+ default: N/A
425
+ description: "[System arguments](/system-arguments)"
426
+ - component: Flex
427
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb
428
+ parameters:
429
+ - name: justify_content
430
+ type: Symbol
431
+ default: "`JUSTIFY_CONTENT_DEFAULT`"
432
+ description: Use this param to distribute space between and around flex items
433
+ along the main axis of the container. One of `nil`, `:center`, `:flex_end`,
434
+ `:flex_start`, `:space_around`, or `:space_between`.
435
+ - name: inline
436
+ type: Boolean
437
+ default: "`false`"
438
+ description: Defaults to false.
439
+ - name: flex_wrap
440
+ type: Boolean
441
+ default: "`FLEX_WRAP_DEFAULT`"
442
+ description: Defaults to nil.
443
+ - name: align_items
444
+ type: Symbol
445
+ default: "`ALIGN_ITEMS_DEFAULT`"
446
+ description: Use this param to align items on the cross axis. One of `nil`, `:baseline`,
447
+ `:center`, `:end`, `:start`, or `:stretch`.
448
+ - name: direction
449
+ type: Symbol
450
+ default: "`nil`"
451
+ description: Use this param to define the orientation of the main axis (row or
452
+ column). By default, flex items will display in a row. One of `nil`, `:column`,
453
+ `:column_reverse`, `:row`, or `:row_reverse`.
454
+ - name: system_arguments
455
+ type: Hash
456
+ default: N/A
457
+ description: "[System arguments](/system-arguments)"
458
+ - component: FlexItem
459
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_item_component.rb
460
+ parameters:
461
+ - name: flex_auto
462
+ type: Boolean
463
+ default: "`false`"
464
+ description: Fills available space and auto-sizes based on the content. Defaults
465
+ to false
466
+ - name: system_arguments
467
+ type: Hash
468
+ default: N/A
469
+ description: "[System arguments](/system-arguments)"
470
+ - component: Heading
471
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/heading_component.rb
472
+ parameters:
473
+ - name: tag
474
+ type: String
475
+ default: N/A
476
+ description: One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
477
+ - name: system_arguments
478
+ type: Hash
479
+ default: N/A
480
+ description: "[System arguments](/system-arguments)"
481
+ - component: HiddenTextExpander
482
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/hidden_text_expander.rb
483
+ parameters:
484
+ - name: inline
485
+ type: Boolean
486
+ default: "`false`"
487
+ description: Whether or not the expander is inline.
488
+ - name: button_arguments
489
+ type: Hash
490
+ default: "`{}`"
491
+ description: "[System arguments](/system-arguments) for the button element."
492
+ - name: system_arguments
493
+ type: Hash
494
+ default: N/A
495
+ description: "[System arguments](/system-arguments)"
496
+ - component: IconButton
497
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb
498
+ parameters:
499
+ - name: scheme
500
+ type: Symbol
501
+ default: "`:default`"
502
+ description: One of `:danger` and `:default`.
503
+ - name: icon
504
+ type: String
505
+ default: N/A
506
+ description: Name of [Octicon](https://primer.style/octicons/) to use.
507
+ - name: tag
508
+ type: Symbol
509
+ default: N/A
510
+ description: One of `:a`, `:button`, or `:summary`.
511
+ - name: type
512
+ type: Symbol
513
+ default: N/A
514
+ description: One of `:button`, `:reset`, or `:submit`.
515
+ - name: box
516
+ type: Boolean
517
+ default: "`false`"
518
+ description: Whether the button is in a [BorderBox](/components/borderbox). If
519
+ `true`, the button will have the `Box-btn-octicon` class.
520
+ - name: system_arguments
521
+ type: Hash
522
+ default: N/A
523
+ description: "[System arguments](/system-arguments)"
524
+ - component: Image
525
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/image.rb
526
+ parameters:
527
+ - name: src
528
+ type: String
529
+ default: N/A
530
+ description: The source url of the image.
531
+ - name: alt
532
+ type: String
533
+ default: N/A
534
+ description: Specifies an alternate text for the image.
535
+ - name: lazy
536
+ type: Boolean
537
+ default: "`false`"
538
+ description: Whether or not to lazily load the image.
539
+ - name: system_arguments
540
+ type: Hash
541
+ default: N/A
542
+ description: "[System arguments](/system-arguments)"
543
+ - component: ImageCrop
544
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/image_crop.rb
545
+ parameters:
546
+ - name: src
547
+ type: String
548
+ default: N/A
549
+ description: The path of the image to crop.
550
+ - name: rounded
551
+ type: Boolean
552
+ default: "`true`"
553
+ description: If the crop mask should be a circle. Defaults to true.
554
+ - name: system_arguments
555
+ type: Hash
556
+ default: N/A
557
+ description: "[System arguments](/system-arguments)"
558
+ - component: Label
559
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/label_component.rb
560
+ parameters:
561
+ - name: tag
562
+ type: Symbol
563
+ default: "`:span`"
564
+ description: One of `:a`, `:div`, `:span`, or `:summary`.
565
+ - name: title
566
+ type: String
567
+ default: N/A
568
+ description: "`title` attribute for the component element."
569
+ - name: scheme
570
+ type: Symbol
571
+ default: "`nil`"
572
+ description: One of `:danger`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`,
573
+ `:success`, or `:warning`.
574
+ - name: variant
575
+ type: Symbol
576
+ default: "`nil`"
577
+ description: One of `nil`, `:inline`, or `:large`.
578
+ - name: system_arguments
579
+ type: Hash
580
+ default: N/A
581
+ description: "[System arguments](/system-arguments)"
582
+ - component: Layout
583
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb
584
+ parameters:
585
+ - name: responsive
586
+ type: Boolean
587
+ default: "`false`"
588
+ description: Whether to collapse layout to a single column at smaller widths.
589
+ - name: side
590
+ type: Symbol
591
+ default: "`:right`"
592
+ description: Which side to display the sidebar on. One of `:left` and `:right`.
593
+ - name: sidebar_col
594
+ type: Integer
595
+ default: "`3`"
596
+ description: Sidebar column width.
597
+ - name: system_arguments
598
+ type: Hash
599
+ default: N/A
600
+ description: "[System arguments](/system-arguments)"
601
+ - component: Link
602
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/link_component.rb
603
+ parameters:
604
+ - name: tag
605
+ type: String
606
+ default: "`:a`"
607
+ description: One of `:a` and `:span`.
608
+ - name: href
609
+ type: String
610
+ default: "`nil`"
611
+ description: URL to be used for the Link. Required if tag is `:a`. If the requirements
612
+ are not met an error will be raised in non production environments. In production,
613
+ an empty link element will be rendered.
614
+ - name: scheme
615
+ type: Symbol
616
+ default: "`:default`"
617
+ description: One of `:default`, `:primary`, or `:secondary`.
618
+ - name: muted
619
+ type: Boolean
620
+ default: "`false`"
621
+ description: Uses light gray for Link color, and blue on hover.
622
+ - name: underline
623
+ type: Boolean
624
+ default: "`true`"
625
+ description: Whether or not to underline the link.
626
+ - name: system_arguments
627
+ type: Hash
628
+ default: N/A
629
+ description: "[System arguments](/system-arguments)"
630
+ - component: LocalTime
631
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/local_time.rb
632
+ parameters:
633
+ - name: datetime
634
+ type: DateTime
635
+ default: N/A
636
+ description: The date to parse
637
+ - name: initial_text
638
+ type: String
639
+ default: "`nil`"
640
+ description: Text to render before component is initialized
641
+ - name: weekday
642
+ type: Symbol
643
+ default: "`:short`"
644
+ description: One of `:long` and `:short`.
645
+ - name: year
646
+ type: Symbol
647
+ default: "`:numeric`"
648
+ description: One of `:2-digit` and `:numeric`.
649
+ - name: month
650
+ type: Symbol
651
+ default: "`:short`"
652
+ description: One of `:long` and `:short`.
653
+ - name: day
654
+ type: Symbol
655
+ default: "`:numeric`"
656
+ description: One of `:2-digit` and `:numeric`.
657
+ - name: hour
658
+ type: Symbol
659
+ default: "`:numeric`"
660
+ description: One of `:2-digit` and `:numeric`.
661
+ - name: minute
662
+ type: Symbol
663
+ default: "`:numeric`"
664
+ description: One of `:2-digit` and `:numeric`.
665
+ - name: second
666
+ type: Symbol
667
+ default: "`:numeric`"
668
+ description: One of `:2-digit` and `:numeric`.
669
+ - name: time_zone_name
670
+ type: Symbol
671
+ default: "`:short`"
672
+ description: One of `:long` and `:short`.
673
+ - name: system_arguments
674
+ type: Hash
675
+ default: N/A
676
+ description: "[System arguments](/system-arguments)"
677
+ - component: Markdown
678
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/markdown.rb
679
+ parameters:
680
+ - name: tag
681
+ type: Symbol
682
+ default: "`:div`"
683
+ description: One of `:article`, `:div`, or `:td`.
684
+ - name: system_arguments
685
+ type: Hash
686
+ default: N/A
687
+ description: "[System arguments](/system-arguments)"
688
+ - component: Menu
689
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/menu_component.rb
690
+ parameters:
691
+ - name: system_arguments
692
+ type: Hash
693
+ default: N/A
694
+ description: "[System arguments](/system-arguments)"
695
+ - component: NavigationTab
696
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb
697
+ parameters:
698
+ - name: list
699
+ type: Boolean
700
+ default: "`false`"
701
+ description: Whether the Tab is an item in a `<ul>` list.
702
+ - name: selected
703
+ type: Boolean
704
+ default: "`false`"
705
+ description: Whether the Tab is selected or not.
706
+ - name: with_panel
707
+ type: Boolean
708
+ default: "`false`"
709
+ description: Whether the Tab has an associated panel.
710
+ - name: panel_id
711
+ type: String
712
+ default: '`""`'
713
+ description: Only applies if `with_panel` is `true`. Unique id of panel.
714
+ - name: icon_classes
715
+ type: Boolean
716
+ default: '`""`'
717
+ description: Classes that must always be applied to icons.
718
+ - name: wrapper_arguments
719
+ type: Hash
720
+ default: "`{}`"
721
+ description: "[System arguments](/system-arguments) to be used in the `<li>` wrapper
722
+ when the tab is an item in a list."
723
+ - name: system_arguments
724
+ type: Hash
725
+ default: N/A
726
+ description: "[System arguments](/system-arguments)"
727
+ - component: Octicon
728
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/octicon_component.rb
729
+ parameters:
730
+ - name: icon_name
731
+ type: Symbol, String
732
+ default: "`nil`"
733
+ description: Name of [Octicon](https://primer.style/octicons/) to use.
734
+ - name: icon
735
+ type: Symbol, String
736
+ default: "`nil`"
737
+ description: Name of [Octicon](https://primer.style/octicons/) to use.
738
+ - name: size
739
+ type: Symbol
740
+ default: "`:small`"
741
+ description: One of `:small` (`16`) and `:medium` (`24`).
742
+ - name: use_symbol
743
+ type: Boolean
744
+ default: "`false`"
745
+ description: EXPERIMENTAL (May change or be removed) - Set to true when using
746
+ with [OcticonSymbols](/components/octiconsymbols).
747
+ - name: system_arguments
748
+ type: Hash
749
+ default: N/A
750
+ description: "[System arguments](/system-arguments)"
751
+ - component: OcticonSymbols
752
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/octicon_symbols_component.rb
753
+ parameters:
754
+ - name: icons
755
+ type: Array<Hash>
756
+ default: "`[]`"
757
+ description: 'List of icons to render, in the format { symbol: :icon_name, size:
758
+ :small }'
759
+ - component: Popover
760
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/popover_component.rb
761
+ parameters:
762
+ - name: system_arguments
763
+ type: Hash
764
+ default: N/A
765
+ description: "[System arguments](/system-arguments)"
766
+ - component: ProgressBar
767
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/progress_bar_component.rb
768
+ parameters:
769
+ - name: size
770
+ type: Symbol
771
+ default: "`:default`"
772
+ description: One of `:default`, `:large`, or `:small`. Increases height.
773
+ - name: system_arguments
774
+ type: Hash
775
+ default: N/A
776
+ description: "[System arguments](/system-arguments)"
777
+ - component: Spinner
778
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/spinner_component.rb
779
+ parameters:
780
+ - name: size
781
+ type: Symbol
782
+ default: "`:medium`"
783
+ description: One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`.
784
+ - name: style
785
+ type: String
786
+ default: "`box-sizing: content-box; color: var(--color-icon-primary);`"
787
+ description: Custom element styles.
788
+ - name: system_arguments
789
+ type: Hash
790
+ default: N/A
791
+ description: "[System arguments](/system-arguments)"
792
+ - component: State
793
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/state_component.rb
794
+ parameters:
795
+ - name: title
796
+ type: String
797
+ default: N/A
798
+ description: "`title` HTML attribute."
799
+ - name: scheme
800
+ type: Symbol
801
+ default: "`:default`"
802
+ description: Background color. One of `:closed`, `:default`, `:green`, `:merged`,
803
+ `:open`, `:purple`, or `:red`.
804
+ - name: tag
805
+ type: Symbol
806
+ default: "`:span`"
807
+ description: HTML tag for element. One of `:div` and `:span`.
808
+ - name: size
809
+ type: Symbol
810
+ default: "`:default`"
811
+ description: One of `:default` and `:small`.
812
+ - name: system_arguments
813
+ type: Hash
814
+ default: N/A
815
+ description: "[System arguments](/system-arguments)"
816
+ - component: Subhead
817
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/subhead_component.rb
818
+ parameters:
819
+ - name: spacious
820
+ type: Boolean
821
+ default: "`false`"
822
+ description: Whether to add spacing to the Subhead.
823
+ - name: hide_border
824
+ type: Boolean
825
+ default: "`false`"
826
+ description: Whether to hide the border under the heading.
827
+ - name: system_arguments
828
+ type: Hash
829
+ default: N/A
830
+ description: "[System arguments](/system-arguments)"
831
+ - component: TabContainer
832
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/tab_container_component.rb
833
+ parameters:
834
+ - name: system_arguments
835
+ type: Hash
836
+ default: N/A
837
+ description: "[System arguments](/system-arguments)"
838
+ - component: TabNav
839
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/tab_nav_component.rb
840
+ parameters:
841
+ - name: label
842
+ type: String
843
+ default: N/A
844
+ description: Used to set the `aria-label` on the top level `<nav>` element.
845
+ - name: with_panel
846
+ type: Boolean
847
+ default: "`false`"
848
+ description: Whether the TabNav should navigate through pages or panels. When
849
+ true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
850
+ behavior. Additionally, the `tab` slot will render as a button as opposed to
851
+ an anchor.
852
+ - name: body_arguments
853
+ type: Hash
854
+ default: "`{}`"
855
+ description: "[System arguments](/system-arguments) for the body wrapper."
856
+ - name: wrapper_arguments
857
+ type: Hash
858
+ default: "`{}`"
859
+ description: "[System arguments](/system-arguments) for the `TabContainer` wrapper.
860
+ Only applies if `with_panel` is `true`."
861
+ - name: system_arguments
862
+ type: Hash
863
+ default: N/A
864
+ description: "[System arguments](/system-arguments)"
865
+ - component: TimeAgo
866
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/time_ago_component.rb
867
+ parameters:
868
+ - name: time
869
+ type: Time
870
+ default: N/A
871
+ description: The time to be formatted
872
+ - name: micro
873
+ type: Boolean
874
+ default: "`false`"
875
+ description: If true then the text will be formatted in "micro" mode, using as
876
+ few characters as possible
877
+ - name: system_arguments
878
+ type: Hash
879
+ default: N/A
880
+ description: "[System arguments](/system-arguments)"
881
+ - component: TimelineItem
882
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/timeline_item_component.rb
883
+ parameters:
884
+ - name: condensed
885
+ type: Boolean
886
+ default: "`false`"
887
+ description: Reduce the vertical padding and remove the background from the badge
888
+ item. Most commonly used in commits.
889
+ - name: system_arguments
890
+ type: Hash
891
+ default: N/A
892
+ description: "[System arguments](/system-arguments)"
893
+ - component: Tooltip
894
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb
895
+ parameters:
896
+ - name: label
897
+ type: String
898
+ default: N/A
899
+ description: the text to appear in the tooltip
900
+ - name: direction
901
+ type: String
902
+ default: "`:n`"
903
+ description: Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`,
904
+ `:se`, `:sw`, or `:w`.
905
+ - name: align
906
+ type: String
907
+ default: "`:default`"
908
+ description: Align tooltips to the left or right of an element, combined with
909
+ a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`,
910
+ `:right_1`, or `:right_2`.
911
+ - name: multiline
912
+ type: Boolean
913
+ default: "`false`"
914
+ description: Use this when you have long content
915
+ - name: no_delay
916
+ type: Boolean
917
+ default: "`false`"
918
+ description: By default the tooltips have a slight delay before appearing. Set
919
+ true to override this
920
+ - name: system_arguments
921
+ type: Hash
922
+ default: N/A
923
+ description: "[System arguments](/system-arguments)"
924
+ - component: Truncate
925
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb
926
+ parameters:
927
+ - name: tag
928
+ type: Symbol
929
+ default: "`:div`"
930
+ description: One of `:div`, `:p`, `:span`, or `:strong`.
931
+ - name: inline
932
+ type: Boolean
933
+ default: "`false`"
934
+ description: Whether the element is inline (or inline-block).
935
+ - name: expandable
936
+ type: Boolean
937
+ default: "`false`"
938
+ description: Whether the entire string should be revealed on hover. Can only be
939
+ used in conjunction with `inline`.
940
+ - name: max_width
941
+ type: Integer
942
+ default: "`nil`"
943
+ description: Sets the max-width of the text.
944
+ - name: system_arguments
945
+ type: Hash
946
+ default: N/A
947
+ description: "[System arguments](/system-arguments)"
948
+ - component: UnderlineNav
949
+ source: https://github.com/primer/view_components/tree/main/app/components/primer/underline_nav_component.rb
950
+ parameters:
951
+ - name: label
952
+ type: String
953
+ default: N/A
954
+ description: The `aria-label` on top level `<nav>` element.
955
+ - name: with_panel
956
+ type: Boolean
957
+ default: "`false`"
958
+ description: Whether the `UnderlineNav` should navigate through pages or panels.
959
+ When true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
960
+ behavior.
961
+ - name: align
962
+ type: Symbol
963
+ default: "`:left`"
964
+ description: One of `:left` and `:right`. - Defaults to left
965
+ - name: body_arguments
966
+ type: Hash
967
+ default: "`{ tag: BODY_TAG_DEFAULT }`"
968
+ description: "[System arguments](/system-arguments) for the body wrapper."
969
+ - name: wrapper_arguments
970
+ type: Hash
971
+ default: "`{}`"
972
+ description: "[System arguments](/system-arguments) for the `TabContainer` wrapper.
973
+ Only applies if `with_panel` is `true`."
974
+ - name: system_arguments
975
+ type: Hash
976
+ default: N/A
977
+ description: "[System arguments](/system-arguments)"