primer_view_components 0.0.45 → 0.0.49

data/lib/tasks/docs.rake

@@ -32,10 +32,10 @@ namespace :docs do
       Primer::OcticonSymbolsComponent,
       Primer::ImageCrop,
       Primer::IconButton,
-      Primer::AutoComplete,
-      Primer::AutoComplete::Item,
-      Primer::AvatarComponent,
-      Primer::AvatarStackComponent,
+      Primer::Beta::AutoComplete,
+      Primer::Beta::AutoComplete::Item,
+      Primer::Beta::Avatar,
+      Primer::Beta::AvatarStack,
       Primer::BaseButton,
       Primer::BlankslateComponent,
       Primer::BorderBoxComponent,
@@ -81,7 +81,7 @@ namespace :docs do
       Primer::Dropdown,
       Primer::LocalTime,
       Primer::ImageCrop,
-      Primer::AutoComplete,
+      Primer::Beta::AutoComplete,
       Primer::ClipboardCopy,
       Primer::TabContainerComponent,
       Primer::TabNavComponent,
@@ -97,28 +97,31 @@ namespace :docs do
 
     errors = []
 
-    components.each do |component|
+    # Deletes docs before regenerating them, guaranteeing that we don't keep stale docs.
+    FileUtils.rm_rf(Dir.glob("docs/content/components/**/*.md"))
+
+    components.sort_by(&:name).each do |component|
       documentation = registry.get(component.name)
 
-      # Primer::AvatarComponent => Avatar
-      short_name = component.name.gsub(/Primer|::|Component/, "")
+      data = docs_metadata(component)
 
-      path = Pathname.new("docs/content/components/#{short_name.downcase}.md")
+      path = Pathname.new(data[:path])
       path.dirname.mkdir unless path.dirname.exist?
       File.open(path, "w") do |f|
         f.puts("---")
-        f.puts("title: #{short_name}")
-        f.puts("status: #{component.status.to_s.capitalize}")
-        f.puts("source: https://github.com/primer/view_components/tree/main/app/components/primer/#{component.to_s.demodulize.underscore}.rb")
-        f.puts("storybook: https://primer.style/view-components/stories/?path=/story/primer-#{short_name.underscore.dasherize}-component")
+        f.puts("title: #{data[:title]}")
+        f.puts("componentId: #{data[:component_id]}")
+        f.puts("status: #{data[:status]}")
+        f.puts("source: #{data[:source]}")
+        f.puts("storybook: #{data[:storybook]}")
         f.puts("---")
         f.puts
-        f.puts("import Example from '../../src/@primer/gatsby-theme-doctocat/components/example'")
+        f.puts("import Example from '#{data[:example_path]}'")
 
         initialize_method = documentation.meths.find(&:constructor?)
 
         if js_components.include?(component)
-          f.puts("import RequiresJSFlash from '../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash'")
+          f.puts("import RequiresJSFlash from '#{data[:require_js_path]}'")
           f.puts
           f.puts("<RequiresJSFlash />")
         end
@@ -176,15 +179,15 @@ namespace :docs do
             "name" => tag.name,
             "type" => tag.types.join(", "),
             "default" => default_value,
-            "description" => view_context.render(inline: tag.text)
+            "description" => view_context.render(inline: tag.text.squish)
           }
 
-          f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text)} |")
+          f.puts("| `#{tag.name}` | `#{tag.types.join(', ')}` | #{default_value} | #{view_context.render(inline: tag.text.squish)} |")
         end
 
         component_args = {
-          "component" => short_name,
-          "source" => "https://github.com/primer/view_components/tree/main/app/components/primer/#{component.to_s.demodulize.underscore}.rb",
+          "component" => data[:title],
+          "source" => data[:source],
           "parameters" => args
         }
 
@@ -225,23 +228,12 @@ namespace :docs do
         f.puts("## Examples")
 
         initialize_method.tags(:example).each do |tag|
-          name = tag.name
-          description = nil
-          code = nil
-
-          if tag.text.include?("@description")
-            splitted = tag.text.split(/@description|@code/)
-            description = splitted.second.gsub(/^[ \t]{2}/, "").strip
-            code = splitted.last.gsub(/^[ \t]{2}/, "").strip
-          else
-            code = tag.text
-          end
-
+          name, description, code = parse_example_tag(tag)
           f.puts
           f.puts("### #{name}")
           if description
             f.puts
-            f.puts(description)
+            f.puts(view_context.render(inline: description.squish))
           end
           f.puts
           html = view_context.render(inline: code)
@@ -328,13 +320,14 @@ namespace :docs do
         f.puts("    class #{short_name}Preview < ViewComponent::Preview")
 
         yard_example_tags.each_with_index do |tag, index|
-          method_name = tag.name.split("|").first.downcase.parameterize.underscore
+          name, _, code = parse_example_tag(tag)
+          method_name = name.split("|").first.downcase.parameterize.underscore
           f.puts("      def #{method_name}; end")
           f.puts unless index == yard_example_tags.size - 1
           path = Pathname.new("demo/test/components/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
           path.dirname.mkdir unless path.dirname.exist?
           File.open(path, "w") do |view_file|
-            view_file.puts(tag.text.to_s)
+            view_file.puts(code.to_s)
           end
         end
 
@@ -346,6 +339,7 @@ namespace :docs do
   end
 
   def generate_yard_registry
+    ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/view_components"
     require "yard/docs_helper"
@@ -371,6 +365,22 @@ namespace :docs do
     registry
   end
 
+  def parse_example_tag(tag)
+    name = tag.name
+    description = nil
+    code = nil
+
+    if tag.text.include?("@description")
+      splitted = tag.text.split(/@description|@code/)
+      description = splitted.second.gsub(/^[ \t]{2}/, "").strip
+      code = splitted.last.gsub(/^[ \t]{2}/, "").strip
+    else
+      code = tag.text
+    end
+
+    [name, description, code]
+  end
+
   def pretty_default_value(tag, component)
     params = tag.object.parameters.find { |param| [tag.name.to_s, tag.name.to_s + ":"].include?(param[0]) }
     default = tag.defaults&.first || params&.second
@@ -384,4 +394,49 @@ namespace :docs do
 
     pretty_value(constant_value)
   end
+
+  def docs_metadata(component)
+    (status_module, short_name) = status_module_and_short_name(component)
+    status_path = status_module.nil? ? "" : "#{status_module}/"
+    status = component.status.to_s
+
+    {
+      title: short_name,
+      component_id: short_name.underscore,
+      status: status.capitalize,
+      source: source_url(component),
+      storybook: storybook_url(component),
+      path: "docs/content/components/#{status_path}#{short_name.downcase}.md",
+      example_path: example_path(component),
+      require_js_path: require_js_path(component)
+    }
+  end
+
+  def source_url(component)
+    path = component.name.split("::").map(&:underscore).join("/")
+
+    "https://github.com/primer/view_components/tree/main/app/components/#{path}.rb"
+  end
+
+  def storybook_url(component)
+    path = component.name.split("::").map { |n| n.underscore.dasherize }.join("-")
+
+    "https://primer.style/view-components/stories/?path=/story/#{path}"
+  end
+
+  def example_path(component)
+    example_path = "../../src/@primer/gatsby-theme-doctocat/components/example"
+    example_path = "../#{example_path}" if status_module?(component)
+    example_path
+  end
+
+  def require_js_path(component)
+    require_js_path = "../../src/@primer/gatsby-theme-doctocat/components/requires-js-flash"
+    require_js_path = "../#{require_js_path}" if status_module?(component)
+    require_js_path
+  end
+
+  def status_module?(component)
+    (%w[Alpha Beta] & component.name.split("::")).any?
+  end
 end

data/lib/tasks/utilities.rake

@@ -5,23 +5,21 @@ namespace :utilities do
     require "yaml"
     require "json"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
+    require "primer/classify/utilities"
 
     # Keys that are looked for to be included in the utilities.yml file
     SUPPORTED_KEYS = %i[
-      hide
+      anim
+      d
       float
+      hide
       m mt mr mb ml mx my
       p pt pr pb pl px py
+      position
+      wb
+      v
     ].freeze
 
-    # Replacements for some classnames that end up being a different argument key
-    REPLACEMENT_KEYS = {
-      "^v-align" => "vertical_align",
-      "^d" => "display",
-      "^wb" => "word_break",
-      "^v" => "visibility"
-    }.freeze
-
     BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
 
     css_data =
@@ -46,7 +44,7 @@ namespace :utilities do
       key = ""
 
       # Look for a replacement key
-      REPLACEMENT_KEYS.each do |k, v|
+      Primer::Classify::Utilities::REPLACEMENT_KEYS.each do |k, v|
         next unless classname.match?(Regexp.new(k))
 
         key = v
@@ -92,7 +90,7 @@ namespace :utilities do
       x.transform_values { |y| y.reverse.drop_while(&:nil?).reverse }
     end
 
-    File.open("app/lib/primer/classify/utilities.yml", "w") do |f|
+    File.open("lib/primer/classify/utilities.yml", "w") do |f|
       f.puts YAML.dump(output)
     end
   end

data/lib/yard/docs_helper.rb

@@ -29,7 +29,7 @@ module YARD
     end
 
     def link_to_accessibility
-      "[Accessibility](#system-arguments)"
+      "[Accessibility](#accessibility)"
     end
 
     def link_to_system_arguments_docs
@@ -41,8 +41,10 @@ module YARD
     end
 
     def link_to_component(component)
-      short_name = component.name.gsub(/Primer|::|Component/, "")
-      "[#{short_name}](/components/#{short_name.downcase})"
+      (status_module, short_name) = status_module_and_short_name(component)
+      status_path = status_module.nil? ? "" : "#{status_module}/"
+
+      "[#{short_name}](/components/#{status_path}#{short_name.downcase})"
     end
 
     def link_to_octicons
@@ -53,6 +55,13 @@ module YARD
       "[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
     end
 
+    def status_module_and_short_name(component)
+      name_with_status = component.name.gsub(/Primer::|Component/, "")
+
+      m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(::)?(?<name>.*)/)
+      [m[:status]&.downcase, m[:name].gsub("::", "")]
+    end
+
     def pretty_value(val)
       case val
       when nil

data/static/arguments.yml

@@ -0,0 +1,977 @@
+---
+- component: ButtonMarketing
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb
+  parameters:
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:default`, `:outline`, `:primary`, or `:transparent`.
+  - name: variant
+    type: Symbol
+    default: "`:default`"
+    description: One of `:default` and `:large`.
+  - name: tag
+    type: Symbol
+    default: "`:button`"
+    description: One of `:a` and `:button`.
+  - name: type
+    type: Symbol
+    default: "`:button`"
+    description: One of `:button` and `:submit`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: BaseButton
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/base_button.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:button`"
+    description: One of `:a`, `:button`, or `:summary`.
+  - name: type
+    type: Symbol
+    default: "`:button`"
+    description: One of `:button`, `:reset`, or `:submit`.
+  - name: block
+    type: Boolean
+    default: "`false`"
+    description: 'Whether button is full-width with `display: block`.'
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: AutoComplete
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb
+  parameters:
+  - name: src
+    type: String
+    default: N/A
+    description: The route to query.
+  - name: input_id
+    type: String
+    default: N/A
+    description: Id of the input element.
+  - name: list_id
+    type: String
+    default: N/A
+    description: Id of the list element.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: AutoCompleteItem
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb
+  parameters:
+  - name: value
+    type: String
+    default: N/A
+    description: Value of the item.
+  - name: selected
+    type: Boolean
+    default: "`false`"
+    description: Whether the item is selected.
+  - name: disabled
+    type: Boolean
+    default: "`false`"
+    description: Whether the item is disabled.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Avatar
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb
+  parameters:
+  - name: src
+    type: String
+    default: N/A
+    description: The source url of the avatar image.
+  - name: alt
+    type: String
+    default: N/A
+    description: Passed through to alt on img tag.
+  - name: size
+    type: Integer
+    default: "`20`"
+    description: Adds the avatar-small class if less than 24.
+  - name: square
+    type: Boolean
+    default: "`false`"
+    description: Used to create a square avatar.
+  - name: href
+    type: String
+    default: "`nil`"
+    description: The URL to link to. If used, component will be wrapped by an `<a>`
+      tag.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: AvatarStack
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:div`"
+    description: One of `:div` and `:span`.
+  - name: align
+    type: Symbol
+    default: "`:left`"
+    description: One of `:left` and `:right`.
+  - name: tooltipped
+    type: Boolean
+    default: "`false`"
+    description: Whether to add a tooltip to the stack or not.
+  - name: body_arguments
+    type: Hash
+    default: "`{}`"
+    description: Parameters to add to the Body. If `tooltipped` is set, has the same
+      arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can
+      be changed using `tag:` to one of `:div` and `:span`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Text
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:span`"
+    description: ''
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Blankslate
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/blankslate_component.rb
+  parameters:
+  - name: title
+    type: String
+    default: '`""`'
+    description: Text that appears in a larger bold font.
+  - name: title_tag
+    type: Symbol
+    default: "`:h3`"
+    description: HTML tag to use for title.
+  - name: icon
+    type: Symbol
+    default: '`""`'
+    description: Octicon icon to use at top of component.
+  - name: icon_size
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:small` (`16`) and `:medium` (`24`).
+  - name: image_src
+    type: String
+    default: '`""`'
+    description: Image to display.
+  - name: image_alt
+    type: String
+    default: '`" "`'
+    description: Alt text for image.
+  - name: description
+    type: String
+    default: '`""`'
+    description: Text that appears below the title. Typically a whole sentence.
+  - name: button_text
+    type: String
+    default: '`""`'
+    description: The text of the button.
+  - name: button_url
+    type: String
+    default: '`""`'
+    description: The URL where the user will be taken after clicking the button.
+  - name: button_classes
+    type: String
+    default: '`"btn-primary my-3"`'
+    description: Classes to apply to action button
+  - name: link_text
+    type: String
+    default: '`""`'
+    description: The text of the link.
+  - name: link_url
+    type: String
+    default: '`""`'
+    description: The URL where the user will be taken after clicking the link.
+  - name: narrow
+    type: Boolean
+    default: "`false`"
+    description: Adds a maximum width.
+  - name: large
+    type: Boolean
+    default: "`false`"
+    description: Increases the font size.
+  - name: spacious
+    type: Boolean
+    default: "`false`"
+    description: Adds extra padding.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: BorderBox
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/border_box_component.rb
+  parameters:
+  - name: padding
+    type: Symbol
+    default: "`:default`"
+    description: One of `:condensed`, `:default`, or `:spacious`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Box
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/box_component.rb
+  parameters:
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Breadcrumb
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/breadcrumb_component.rb
+  parameters:
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Button
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb
+  parameters:
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`,
+      or `:primary`.
+  - name: variant
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:large`, `:medium`, or `:small`.
+  - name: tag
+    type: Symbol
+    default: "`:button`"
+    description: One of `:a`, `:button`, or `:summary`.
+  - name: type
+    type: Symbol
+    default: "`:button`"
+    description: One of `:button`, `:reset`, or `:submit`.
+  - name: group_item
+    type: Boolean
+    default: "`false`"
+    description: Whether button is part of a ButtonGroup.
+  - name: block
+    type: Boolean
+    default: "`false`"
+    description: 'Whether button is full-width with `display: block`.'
+  - name: caret
+    type: Boolean
+    default: "`false`"
+    description: Whether or not to render a caret.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: ButtonGroup
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/button_group.rb
+  parameters:
+  - name: variant
+    type: Symbol
+    default: "`:medium`"
+    description: One of `:large`, `:medium`, or `:small`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: ClipboardCopy
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/clipboard_copy.rb
+  parameters:
+  - name: aria-label
+    type: String
+    default: N/A
+    description: String that will be read to screenreaders when the component is focused
+  - name: value
+    type: String
+    default: "`nil`"
+    description: Text to copy into the users clipboard when they click the component.
+  - name: for
+    type: String
+    default: N/A
+    description: Element id from where to get the copied value.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: CloseButton
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/close_button.rb
+  parameters:
+  - name: type
+    type: Symbol
+    default: "`:button`"
+    description: One of `:button` and `:submit`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Counter
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/counter_component.rb
+  parameters:
+  - name: count
+    type: Integer, Float::INFINITY, nil
+    default: "`0`"
+    description: 'The number to be displayed (e.x. # of issues, pull requests)'
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: Color scheme. One of `:default`, `:primary`, or `:secondary`.
+  - name: limit
+    type: Integer, nil
+    default: "`5_000`"
+    description: Maximum value to display. Pass `nil` for no limit. (e.x. if `count`
+      == 6,000 and `limit` == 5000, counter will display "5,000+")
+  - name: hide_if_zero
+    type: Boolean
+    default: "`false`"
+    description: If true, a `hidden` attribute is added to the counter if `count`
+      is zero.
+  - name: text
+    type: String
+    default: '`""`'
+    description: Text to display instead of count.
+  - name: round
+    type: Boolean
+    default: "`false`"
+    description: Whether to apply our standard rounding logic to value.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Details
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/details_component.rb
+  parameters:
+  - name: overlay
+    type: Symbol
+    default: "`:none`"
+    description: Dictates the type of overlay to render with. One of `:dark`, `:default`,
+      or `:none`.
+  - name: reset
+    type: Boolean
+    default: "`false`"
+    description: Defatuls to false. If set to true, it will remove the default caret
+      and remove style from the summary element
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Dropdown
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb
+  parameters:
+  - name: overlay
+    type: Symbol
+    default: "`:default`"
+    description: One of `:dark`, `:default`, or `:none`.
+  - name: with_caret
+    type: Boolean
+    default: "`false`"
+    description: Whether or not a caret should be rendered in the button.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: DropdownMenu
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown_menu_component.rb
+  parameters:
+  - name: direction
+    type: Symbol
+    default: "`:se`"
+    description: One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: Pass `:dark` for dark mode theming
+  - name: header
+    type: String
+    default: "`nil`"
+    description: Optional string to display as the header
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Flash
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/flash_component.rb
+  parameters:
+  - name: full
+    type: Boolean
+    default: "`false`"
+    description: Whether the component should take up the full width of the screen.
+  - name: spacious
+    type: Boolean
+    default: "`false`"
+    description: Whether to add margin to the bottom of the component.
+  - name: dismissible
+    type: Boolean
+    default: "`false`"
+    description: Whether the component can be dismissed with an X button.
+  - name: icon
+    type: Symbol
+    default: "`nil`"
+    description: Name of Octicon icon to use.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, `:success`, or `:warning`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Flex
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb
+  parameters:
+  - name: justify_content
+    type: Symbol
+    default: "`JUSTIFY_CONTENT_DEFAULT`"
+    description: Use this param to distribute space between and around flex items
+      along the main axis of the container. One of `nil`, `:center`, `:flex_end`,
+      `:flex_start`, `:space_around`, or `:space_between`.
+  - name: inline
+    type: Boolean
+    default: "`false`"
+    description: Defaults to false.
+  - name: flex_wrap
+    type: Boolean
+    default: "`FLEX_WRAP_DEFAULT`"
+    description: Defaults to nil.
+  - name: align_items
+    type: Symbol
+    default: "`ALIGN_ITEMS_DEFAULT`"
+    description: Use this param to align items on the cross axis. One of `nil`, `:baseline`,
+      `:center`, `:end`, `:start`, or `:stretch`.
+  - name: direction
+    type: Symbol
+    default: "`nil`"
+    description: Use this param to define the orientation of the main axis (row or
+      column). By default, flex items will display in a row. One of `nil`, `:column`,
+      `:column_reverse`, `:row`, or `:row_reverse`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: FlexItem
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_item_component.rb
+  parameters:
+  - name: flex_auto
+    type: Boolean
+    default: "`false`"
+    description: Fills available space and auto-sizes based on the content. Defaults
+      to false
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Heading
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/heading_component.rb
+  parameters:
+  - name: tag
+    type: String
+    default: N/A
+    description: One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: HiddenTextExpander
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/hidden_text_expander.rb
+  parameters:
+  - name: inline
+    type: Boolean
+    default: "`false`"
+    description: Whether or not the expander is inline.
+  - name: button_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the button element."
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: IconButton
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb
+  parameters:
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger` and `:default`.
+  - name: icon
+    type: String
+    default: N/A
+    description: Name of [Octicon](https://primer.style/octicons/) to use.
+  - name: tag
+    type: Symbol
+    default: N/A
+    description: One of `:a`, `:button`, or `:summary`.
+  - name: type
+    type: Symbol
+    default: N/A
+    description: One of `:button`, `:reset`, or `:submit`.
+  - name: box
+    type: Boolean
+    default: "`false`"
+    description: Whether the button is in a [BorderBox](/components/borderbox). If
+      `true`, the button will have the `Box-btn-octicon` class.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Image
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/image.rb
+  parameters:
+  - name: src
+    type: String
+    default: N/A
+    description: The source url of the image.
+  - name: alt
+    type: String
+    default: N/A
+    description: Specifies an alternate text for the image.
+  - name: lazy
+    type: Boolean
+    default: "`false`"
+    description: Whether or not to lazily load the image.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: ImageCrop
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/image_crop.rb
+  parameters:
+  - name: src
+    type: String
+    default: N/A
+    description: The path of the image to crop.
+  - name: rounded
+    type: Boolean
+    default: "`true`"
+    description: If the crop mask should be a circle. Defaults to true.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Label
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/label_component.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:span`"
+    description: One of `:a`, `:div`, `:span`, or `:summary`.
+  - name: title
+    type: String
+    default: N/A
+    description: "`title` attribute for the component element."
+  - name: scheme
+    type: Symbol
+    default: "`nil`"
+    description: One of `:danger`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`,
+      `:success`, or `:warning`.
+  - name: variant
+    type: Symbol
+    default: "`nil`"
+    description: One of `nil`, `:inline`, or `:large`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Layout
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb
+  parameters:
+  - name: responsive
+    type: Boolean
+    default: "`false`"
+    description: Whether to collapse layout to a single column at smaller widths.
+  - name: side
+    type: Symbol
+    default: "`:right`"
+    description: Which side to display the sidebar on. One of `:left` and `:right`.
+  - name: sidebar_col
+    type: Integer
+    default: "`3`"
+    description: Sidebar column width.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Link
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/link_component.rb
+  parameters:
+  - name: tag
+    type: String
+    default: "`:a`"
+    description: One of `:a` and `:span`.
+  - name: href
+    type: String
+    default: "`nil`"
+    description: URL to be used for the Link. Required if tag is `:a`. If the requirements
+      are not met an error will be raised in non production environments. In production,
+      an empty link element will be rendered.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:default`, `:primary`, or `:secondary`.
+  - name: muted
+    type: Boolean
+    default: "`false`"
+    description: Uses light gray for Link color, and blue on hover.
+  - name: underline
+    type: Boolean
+    default: "`true`"
+    description: Whether or not to underline the link.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: LocalTime
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/local_time.rb
+  parameters:
+  - name: datetime
+    type: DateTime
+    default: N/A
+    description: The date to parse
+  - name: initial_text
+    type: String
+    default: "`nil`"
+    description: Text to render before component is initialized
+  - name: weekday
+    type: Symbol
+    default: "`:short`"
+    description: One of `:long` and `:short`.
+  - name: year
+    type: Symbol
+    default: "`:numeric`"
+    description: One of `:2-digit` and `:numeric`.
+  - name: month
+    type: Symbol
+    default: "`:short`"
+    description: One of `:long` and `:short`.
+  - name: day
+    type: Symbol
+    default: "`:numeric`"
+    description: One of `:2-digit` and `:numeric`.
+  - name: hour
+    type: Symbol
+    default: "`:numeric`"
+    description: One of `:2-digit` and `:numeric`.
+  - name: minute
+    type: Symbol
+    default: "`:numeric`"
+    description: One of `:2-digit` and `:numeric`.
+  - name: second
+    type: Symbol
+    default: "`:numeric`"
+    description: One of `:2-digit` and `:numeric`.
+  - name: time_zone_name
+    type: Symbol
+    default: "`:short`"
+    description: One of `:long` and `:short`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Markdown
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/markdown.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:div`"
+    description: One of `:article`, `:div`, or `:td`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Menu
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/menu_component.rb
+  parameters:
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: NavigationTab
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb
+  parameters:
+  - name: list
+    type: Boolean
+    default: "`false`"
+    description: Whether the Tab is an item in a `<ul>` list.
+  - name: selected
+    type: Boolean
+    default: "`false`"
+    description: Whether the Tab is selected or not.
+  - name: with_panel
+    type: Boolean
+    default: "`false`"
+    description: Whether the Tab has an associated panel.
+  - name: panel_id
+    type: String
+    default: '`""`'
+    description: Only applies if `with_panel` is `true`. Unique id of panel.
+  - name: icon_classes
+    type: Boolean
+    default: '`""`'
+    description: Classes that must always be applied to icons.
+  - name: wrapper_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) to be used in the `<li>` wrapper
+      when the tab is an item in a list."
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Octicon
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/octicon_component.rb
+  parameters:
+  - name: icon_name
+    type: Symbol, String
+    default: "`nil`"
+    description: Name of [Octicon](https://primer.style/octicons/) to use.
+  - name: icon
+    type: Symbol, String
+    default: "`nil`"
+    description: Name of [Octicon](https://primer.style/octicons/) to use.
+  - name: size
+    type: Symbol
+    default: "`:small`"
+    description: One of `:small` (`16`) and `:medium` (`24`).
+  - name: use_symbol
+    type: Boolean
+    default: "`false`"
+    description: EXPERIMENTAL (May change or be removed) - Set to true when using
+      with [OcticonSymbols](/components/octiconsymbols).
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: OcticonSymbols
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/octicon_symbols_component.rb
+  parameters:
+  - name: icons
+    type: Array<Hash>
+    default: "`[]`"
+    description: 'List of icons to render, in the format { symbol: :icon_name, size:
+      :small }'
+- component: Popover
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/popover_component.rb
+  parameters:
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: ProgressBar
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/progress_bar_component.rb
+  parameters:
+  - name: size
+    type: Symbol
+    default: "`:default`"
+    description: One of `:default`, `:large`, or `:small`. Increases height.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Spinner
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/spinner_component.rb
+  parameters:
+  - name: size
+    type: Symbol
+    default: "`:medium`"
+    description: One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`.
+  - name: style
+    type: String
+    default: "`box-sizing: content-box; color: var(--color-icon-primary);`"
+    description: Custom element styles.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: State
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/state_component.rb
+  parameters:
+  - name: title
+    type: String
+    default: N/A
+    description: "`title` HTML attribute."
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: Background color. One of `:closed`, `:default`, `:green`, `:merged`,
+      `:open`, `:purple`, or `:red`.
+  - name: tag
+    type: Symbol
+    default: "`:span`"
+    description: HTML tag for element. One of `:div` and `:span`.
+  - name: size
+    type: Symbol
+    default: "`:default`"
+    description: One of `:default` and `:small`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Subhead
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/subhead_component.rb
+  parameters:
+  - name: spacious
+    type: Boolean
+    default: "`false`"
+    description: Whether to add spacing to the Subhead.
+  - name: hide_border
+    type: Boolean
+    default: "`false`"
+    description: Whether to hide the border under the heading.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: TabContainer
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/tab_container_component.rb
+  parameters:
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: TabNav
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/tab_nav_component.rb
+  parameters:
+  - name: label
+    type: String
+    default: N/A
+    description: Used to set the `aria-label` on the top level `<nav>` element.
+  - name: with_panel
+    type: Boolean
+    default: "`false`"
+    description: Whether the TabNav should navigate through pages or panels. When
+      true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
+      behavior. Additionally, the `tab` slot will render as a button as opposed to
+      an anchor.
+  - name: body_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the body wrapper."
+  - name: wrapper_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the `TabContainer` wrapper.
+      Only applies if `with_panel` is `true`."
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: TimeAgo
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/time_ago_component.rb
+  parameters:
+  - name: time
+    type: Time
+    default: N/A
+    description: The time to be formatted
+  - name: micro
+    type: Boolean
+    default: "`false`"
+    description: If true then the text will be formatted in "micro" mode, using as
+      few characters as possible
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: TimelineItem
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/timeline_item_component.rb
+  parameters:
+  - name: condensed
+    type: Boolean
+    default: "`false`"
+    description: Reduce the vertical padding and remove the background from the badge
+      item. Most commonly used in commits.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Tooltip
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb
+  parameters:
+  - name: label
+    type: String
+    default: N/A
+    description: the text to appear in the tooltip
+  - name: direction
+    type: String
+    default: "`:n`"
+    description: Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`,
+      `:se`, `:sw`, or `:w`.
+  - name: align
+    type: String
+    default: "`:default`"
+    description: Align tooltips to the left or right of an element, combined with
+      a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`,
+      `:right_1`, or `:right_2`.
+  - name: multiline
+    type: Boolean
+    default: "`false`"
+    description: Use this when you have long content
+  - name: no_delay
+    type: Boolean
+    default: "`false`"
+    description: By default the tooltips have a slight delay before appearing. Set
+      true to override this
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: Truncate
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:div`"
+    description: One of `:div`, `:p`, `:span`, or `:strong`.
+  - name: inline
+    type: Boolean
+    default: "`false`"
+    description: Whether the element is inline (or inline-block).
+  - name: expandable
+    type: Boolean
+    default: "`false`"
+    description: Whether the entire string should be revealed on hover. Can only be
+      used in conjunction with `inline`.
+  - name: max_width
+    type: Integer
+    default: "`nil`"
+    description: Sets the max-width of the text.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: UnderlineNav
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/underline_nav_component.rb
+  parameters:
+  - name: label
+    type: String
+    default: N/A
+    description: The `aria-label` on top level `<nav>` element.
+  - name: with_panel
+    type: Boolean
+    default: "`false`"
+    description: Whether the `UnderlineNav` should navigate through pages or panels.
+      When true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
+      behavior.
+  - name: align
+    type: Symbol
+    default: "`:left`"
+    description: One of `:left` and `:right`. - Defaults to left
+  - name: body_arguments
+    type: Hash
+    default: "`{ tag: BODY_TAG_DEFAULT }`"
+    description: "[System arguments](/system-arguments) for the body wrapper."
+  - name: wrapper_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the `TabContainer` wrapper.
+      Only applies if `with_panel` is `true`."
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"