primer_view_components 0.0.45 → 0.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +194 -0
  3. data/app/components/primer/{auto_complete_component.d.ts → auto_complete/auto_component.d.ts} +0 -0
  4. data/app/components/primer/{auto_complete_component.js → auto_complete/auto_component.js} +0 -0
  5. data/app/components/primer/base_component.rb +36 -7
  6. data/app/components/primer/beta/auto_complete.rb +159 -0
  7. data/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
  8. data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.html.erb +0 -0
  9. data/app/components/primer/beta/auto_complete/auto_complete.js +1 -0
  10. data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.ts +0 -0
  11. data/app/components/primer/beta/auto_complete/item.rb +44 -0
  12. data/app/components/primer/beta/avatar.rb +77 -0
  13. data/app/components/primer/{avatar_stack_component.html.erb → beta/avatar_stack.html.erb} +0 -0
  14. data/app/components/primer/beta/avatar_stack.rb +92 -0
  15. data/app/components/primer/border_box_component.rb +3 -0
  16. data/app/components/primer/component.rb +9 -1
  17. data/app/components/primer/details_component.rb +12 -8
  18. data/app/components/primer/image_crop.html.erb +4 -4
  19. data/app/components/primer/image_crop.rb +1 -1
  20. data/app/components/primer/markdown.rb +9 -9
  21. data/app/components/primer/menu_component.rb +7 -3
  22. data/app/components/primer/navigation/tab_component.rb +34 -6
  23. data/app/components/primer/popover_component.rb +6 -3
  24. data/app/components/primer/primer.d.ts +1 -1
  25. data/app/components/primer/primer.js +1 -1
  26. data/app/components/primer/primer.ts +1 -1
  27. data/app/components/primer/tab_nav_component.rb +9 -6
  28. data/app/components/primer/timeline_item_component.rb +2 -2
  29. data/app/components/primer/tooltip.rb +1 -1
  30. data/app/components/primer/truncate.rb +6 -1
  31. data/app/components/primer/underline_nav_component.rb +13 -6
  32. data/{app/lib → lib}/primer/classify.rb +12 -39
  33. data/{app/lib → lib}/primer/classify/cache.rb +6 -20
  34. data/{app/lib → lib}/primer/classify/flex.rb +0 -0
  35. data/{app/lib → lib}/primer/classify/functional_background_colors.rb +2 -0
  36. data/{app/lib → lib}/primer/classify/functional_border_colors.rb +2 -0
  37. data/{app/lib → lib}/primer/classify/functional_colors.rb +0 -0
  38. data/{app/lib → lib}/primer/classify/functional_text_colors.rb +2 -0
  39. data/{app/lib → lib}/primer/classify/grid.rb +0 -0
  40. data/{app/lib → lib}/primer/classify/utilities.rb +54 -22
  41. data/{app/lib → lib}/primer/classify/utilities.yml +124 -0
  42. data/lib/primer/view_components.rb +35 -6
  43. data/lib/primer/view_components/constants.rb +55 -0
  44. data/lib/primer/view_components/linters/argument_mappers/base.rb +39 -0
  45. data/lib/primer/view_components/linters/argument_mappers/button.rb +35 -44
  46. data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb +25 -0
  47. data/lib/primer/view_components/linters/argument_mappers/label.rb +56 -0
  48. data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +1 -2
  49. data/lib/primer/view_components/linters/autocorrectable.rb +30 -0
  50. data/lib/primer/view_components/linters/button_component_migration_counter.rb +9 -23
  51. data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +21 -0
  52. data/lib/primer/view_components/linters/helpers.rb +56 -38
  53. data/lib/primer/view_components/linters/label_component_migration_counter.rb +25 -0
  54. data/lib/primer/view_components/statuses.rb +14 -0
  55. data/lib/primer/view_components/version.rb +1 -1
  56. data/lib/rubocop/config/default.yml +12 -0
  57. data/lib/rubocop/cop/primer.rb +4 -0
  58. data/lib/rubocop/cop/primer/no_tag_memoize.rb +42 -0
  59. data/lib/rubocop/cop/primer/system_argument_instead_of_class.rb +75 -0
  60. data/lib/tasks/constants.rake +12 -0
  61. data/lib/tasks/docs.rake +89 -34
  62. data/lib/tasks/utilities.rake +9 -11
  63. data/lib/yard/docs_helper.rb +12 -3
  64. data/static/arguments.yml +977 -0
  65. data/static/assets/view-components.svg +18 -0
  66. data/static/classes.yml +174 -0
  67. data/static/constants.json +628 -0
  68. data/static/statuses.json +5 -5
  69. metadata +44 -27
  70. data/app/components/primer/auto_complete.rb +0 -156
  71. data/app/components/primer/auto_complete/item.rb +0 -42
  72. data/app/components/primer/avatar_component.rb +0 -75
  73. data/app/components/primer/avatar_stack_component.rb +0 -84
  74. data/app/components/primer/details_menu_component.d.ts +0 -1
  75. data/app/components/primer/details_menu_component.js +0 -1
data/lib/tasks/docs.rake CHANGED
@@ -32,10 +32,10 @@ namespace :docs do
32
32
  Primer::OcticonSymbolsComponent,
33
33
  Primer::ImageCrop,
34
34
  Primer::IconButton,
35
- Primer::AutoComplete,
36
- Primer::AutoComplete::Item,
37
- Primer::AvatarComponent,
38
- Primer::AvatarStackComponent,
35
+ Primer::Beta::AutoComplete,
36
+ Primer::Beta::AutoComplete::Item,
37
+ Primer::Beta::Avatar,
38
+ Primer::Beta::AvatarStack,
39
39
  Primer::BaseButton,
40
40
  Primer::BlankslateComponent,
41
41
  Primer::BorderBoxComponent,
@@ -81,7 +81,7 @@ namespace :docs do
81
81
  Primer::Dropdown,
82
82
  Primer::LocalTime,
83
83
  Primer::ImageCrop,
84
- Primer::AutoComplete,
84
+ Primer::Beta::AutoComplete,
85
85
  Primer::ClipboardCopy,
86
86
  Primer::TabContainerComponent,
87
87
  Primer::TabNavComponent,
@@ -97,28 +97,31 @@ namespace :docs do
97
97
 
98
98
  errors = []
99
99
 
100
- components.each do |component|
100
+ # Deletes docs before regenerating them, guaranteeing that we don't keep stale docs.
101
+ FileUtils.rm_rf(Dir.glob("docs/content/components/**/*.md"))
102
+
103
+ components.sort_by(&:name).each do |component|
101
104
  documentation = registry.get(component.name)
102
105
 
103
- # Primer::AvatarComponent => Avatar
104
- short_name = component.name.gsub(/Primer|::|Component/, "")
106
+ data = docs_metadata(component)
105
107
 
106
- path = Pathname.new("docs/content/components/#{short_name.downcase}.md")
108
+ path = Pathname.new(data[:path])
107
109
  path.dirname.mkdir unless path.dirname.exist?
108
110
  File.open(path, "w") do |f|
109
111
  f.puts("---")
110
- f.puts("title: #{short_name}")
111
- f.puts("status: #{component.status.to_s.capitalize}")
112
- f.puts("source: https://github.com/primer/view_components/tree/main/app/components/primer/#{component.to_s.demodulize.underscore}.rb")
113
- f.puts("storybook: https://primer.style/view-components/stories/?path=/story/primer-#{short_name.underscore.dasherize}-component")
112
+ f.puts("title: #{data[:title]}")
113
+ f.puts("componentId: #{data[:component_id]}")
114
+ f.puts("status: #{data[:status]}")
115
+ f.puts("source: #{data[:source]}")
116
+ f.puts("storybook: #{data[:storybook]}")
114
117
  f.puts("---")
115
118
  f.puts
116
- f.puts("import Example from '../../src/@primer/gatsby-theme-doctocat/components/example'")
119
+ f.puts("import Example from '#{data[:example_path]}'")
117
120
 
118
121
  initialize_method = documentation.meths.find(&:constructor?)
119
122
 
120
123
  if js_components.include?(component)
121
- f.puts("import RequiresJSFlash from '../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash'")
124
+ f.puts("import RequiresJSFlash from '#{data[:require_js_path]}'")
122
125
  f.puts
123
126
  f.puts("<RequiresJSFlash />")
124
127
  end
@@ -176,15 +179,15 @@ namespace :docs do
176
179
  "name" => tag.name,
177
180
  "type" => tag.types.join(", "),
178
181
  "default" => default_value,
179
- "description" => view_context.render(inline: tag.text)
182
+ "description" => view_context.render(inline: tag.text.squish)
180
183
  }
181
184
 
182
- f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text)} |")
185
+ f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text.squish)} |")
183
186
  end
184
187
 
185
188
  component_args = {
186
- "component" => short_name,
187
- "source" => "https://github.com/primer/view_components/tree/main/app/components/primer/#{component.to_s.demodulize.underscore}.rb",
189
+ "component" => data[:title],
190
+ "source" => data[:source],
188
191
  "parameters" => args
189
192
  }
190
193
 
@@ -225,23 +228,12 @@ namespace :docs do
225
228
  f.puts("## Examples")
226
229
 
227
230
  initialize_method.tags(:example).each do |tag|
228
- name = tag.name
229
- description = nil
230
- code = nil
231
-
232
- if tag.text.include?("@description")
233
- splitted = tag.text.split(/@description|@code/)
234
- description = splitted.second.gsub(/^[ \t]{2}/, "").strip
235
- code = splitted.last.gsub(/^[ \t]{2}/, "").strip
236
- else
237
- code = tag.text
238
- end
239
-
231
+ name, description, code = parse_example_tag(tag)
240
232
  f.puts
241
233
  f.puts("### #{name}")
242
234
  if description
243
235
  f.puts
244
- f.puts(description)
236
+ f.puts(view_context.render(inline: description.squish))
245
237
  end
246
238
  f.puts
247
239
  html = view_context.render(inline: code)
@@ -328,13 +320,14 @@ namespace :docs do
328
320
  f.puts(" class #{short_name}Preview < ViewComponent::Preview")
329
321
 
330
322
  yard_example_tags.each_with_index do |tag, index|
331
- 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
332
325
  f.puts(" def #{method_name}; end")
333
326
  f.puts unless index == yard_example_tags.size - 1
334
327
  path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
335
328
  path.dirname.mkdir unless path.dirname.exist?
336
329
  File.open(path, "w") do |view_file|
337
- view_file.puts(tag.text.to_s)
330
+ view_file.puts(code.to_s)
338
331
  end
339
332
  end
340
333
 
@@ -346,6 +339,7 @@ namespace :docs do
346
339
  end
347
340
 
348
341
  def generate_yard_registry
342
+ ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
349
343
  require File.expand_path("./../../demo/config/environment.rb", __dir__)
350
344
  require "primer/view_components"
351
345
  require "yard/docs_helper"
@@ -371,6 +365,22 @@ namespace :docs do
371
365
  registry
372
366
  end
373
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
+
374
384
  def pretty_default_value(tag, component)
375
385
  params = tag.object.parameters.find { |param| [tag.name.to_s, tag.name.to_s + ":"].include?(param[0]) }
376
386
  default = tag.defaults&.first || params&.second
@@ -384,4 +394,49 @@ namespace :docs do
384
394
 
385
395
  pretty_value(constant_value)
386
396
  end
397
+
398
+ def docs_metadata(component)
399
+ (status_module, short_name) = status_module_and_short_name(component)
400
+ status_path = status_module.nil? ? "" : "#{status_module}/"
401
+ status = component.status.to_s
402
+
403
+ {
404
+ title: short_name,
405
+ component_id: short_name.underscore,
406
+ status: status.capitalize,
407
+ source: source_url(component),
408
+ storybook: storybook_url(component),
409
+ path: "docs/content/components/#{status_path}#{short_name.downcase}.md",
410
+ example_path: example_path(component),
411
+ require_js_path: require_js_path(component)
412
+ }
413
+ end
414
+
415
+ def source_url(component)
416
+ path = component.name.split("::").map(&:underscore).join("/")
417
+
418
+ "https://github.com/primer/view_components/tree/main/app/components/#{path}.rb"
419
+ end
420
+
421
+ def storybook_url(component)
422
+ path = component.name.split("::").map { |n| n.underscore.dasherize }.join("-")
423
+
424
+ "https://primer.style/view-components/stories/?path=/story/#{path}"
425
+ end
426
+
427
+ def example_path(component)
428
+ example_path = "../../src/@primer/gatsby-theme-doctocat/components/example"
429
+ example_path = "../#{example_path}" if status_module?(component)
430
+ example_path
431
+ end
432
+
433
+ def require_js_path(component)
434
+ require_js_path = "../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash"
435
+ require_js_path = "../#{require_js_path}" if status_module?(component)
436
+ require_js_path
437
+ end
438
+
439
+ def status_module?(component)
440
+ (%w[Alpha Beta] & component.name.split("::")).any?
441
+ end
387
442
  end
@@ -5,23 +5,21 @@ 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[
11
- hide
12
+ anim
13
+ d
12
14
  float
15
+ hide
13
16
  m mt mr mb ml mx my
14
17
  p pt pr pb pl px py
18
+ position
19
+ wb
20
+ v
15
21
  ].freeze
16
22
 
17
- # Replacements for some classnames that end up being a different argument key
18
- REPLACEMENT_KEYS = {
19
- "^v-align" => "vertical_align",
20
- "^d" => "display",
21
- "^wb" => "word_break",
22
- "^v" => "visibility"
23
- }.freeze
24
-
25
23
  BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
26
24
 
27
25
  css_data =
@@ -46,7 +44,7 @@ namespace :utilities do
46
44
  key = ""
47
45
 
48
46
  # Look for a replacement key
49
- REPLACEMENT_KEYS.each do |k, v|
47
+ Primer::Classify::Utilities::REPLACEMENT_KEYS.each do |k, v|
50
48
  next unless classname.match?(Regexp.new(k))
51
49
 
52
50
  key = v
@@ -92,7 +90,7 @@ namespace :utilities do
92
90
  x.transform_values { |y| y.reverse.drop_while(&:nil?).reverse }
93
91
  end
94
92
 
95
- File.open("app/lib/primer/classify/utilities.yml", "w") do |f|
93
+ File.open("lib/primer/classify/utilities.yml", "w") do |f|
96
94
  f.puts YAML.dump(output)
97
95
  end
98
96
  end
@@ -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|::|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)"