primer_view_components 0.0.46 → 0.0.47

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19a15f3c293e45a99165f8fe3ceb6967626cabfa15e726cdbcb614223c6e39c5
-  data.tar.gz: 6554eeda36440b40d83ee5b5cd395fd6af3cfc9e35c0ac971e14be31dae5d5bf
+  metadata.gz: 1b0ba62c9f5f11df09d24b40ca5e61e7d618046aba651ad733c8db06c482fe26
+  data.tar.gz: 34c0b8066b85d5392dd241baeb3b654ba47d7de1f360b793ac893750989d99dd
 SHA512:
-  metadata.gz: d480348ff38e2a89907c58c352632bf3462f1bb8a2cd365e70a04318e9843bf7bf5ba9f4d945d4a51601b5d6786afb2db323d7dd237101ad200f62a297e0d299
-  data.tar.gz: dc0876004af2d8e32cb06b8b703ea0290f764c4d53333b3d0c9053bd73e2f8d87facb12f76776c54d03ca4a7a73fd2e41e1b41db0600a32a4039f442db0840f1
+  metadata.gz: 47e1bca34582e4406fcc268ac786a322cc3f99a62789aeece262b91e1ca26a15c145835ad60afbcd85a13b3a37da7a54541aedf8e2af5b60c43d7d6cf6767072
+  data.tar.gz: 2edfb035e82896ea22bec576a98b34eb2e3c18cccf2d3ba18744f7b77135f6a1310b466179025c216d396708fdf5fbe802a2dc436c57d1510632eb9567776df1

data/CHANGELOG.md

@@ -30,6 +30,51 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.47
+
+### Breaking changes
+
+* Restrict tag for `Popover` to `:div` and `Popover` heading slot to headings.
+
+    *Kate Higa*
+
+* Renames:
+  * `Primer::AutoComplete` to `Primer::Beta::AutoComplete`
+  * `Primer::AutoComplete::Item` to `Primer::Beta::AutoComplete::Item`
+  * `Primer::AvatarComponent` to `Primer::Beta::Avatar`
+
+    *Manuel Puyol*
+
+### Misc
+
+* Update `doc_examples_axe_test` to exclude non-standalone components and fix `Markdown` example.
+
+    *Kate Higa*
+
+* Update `DetailsComponent` examples.
+
+    *Manuel Puyol*
+
+* Add linter to suggest system arguments instead of classes.
+
+    *Manuel Puyol*
+
+* Update component generator to create components in the right status module.
+
+    *Manuel Puyol*
+
+* Add example for truncating HTML to `Truncate`.
+
+    *Joel Hawksley*
+
+* Update docs generation to point to the correct file sources.
+
+    *Manuel Puyol*
+
+* Add ENV flag to dump linter data into a file.
+
+    *Manuel Puyol*
+
 ## 0.0.46
 
 ### Updates

data/app/components/primer/avatar_stack_component.rb

@@ -15,8 +15,8 @@ module Primer
     BODY_TAG_OPTIONS = TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
     # Required list of stacked avatars.
     #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
-    renders_many :avatars, Primer::AvatarComponent
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
+    renders_many :avatars, "Primer::Beta::Avatar"
 
     # @example Default
     #   <%= render(Primer::AvatarStackComponent.new) do |c| %>

data/app/components/primer/beta/auto_complete.rb

@@ -0,0 +1,159 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
+    # input field. This list is populated by server search results.
+    # @accessibility
+    #   Always set an accessible label to help the user interact with the component.
+    #
+    #   * Set the `label` slot to render a visible label. Alternatively, associate an existing visible text element
+    #   as a label by setting `aria-labelledby`.
+    #   * If you must use a non-visible label, set `:"aria-label"` on `AutoComplete` and Primer
+    #   will apply it to the correct elements. However, please note that a visible label should almost
+    #   always be used unless there is compelling reason not to. A placeholder is not a label.
+    class AutoComplete < Primer::Component
+      status :beta
+
+      # Optionally render a visible label. See <%= link_to_accessibility %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :label, lambda { |**system_arguments|
+        system_arguments[:for] = @input_id
+        system_arguments[:tag] = :label
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Required input used to search for results
+      #
+      # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :input, lambda { |**system_arguments|
+        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
+        if aria_label.present?
+          system_arguments[:"aria-label"] = aria_label
+          system_arguments[:aria]&.delete(:label)
+        end
+
+        name = system_arguments[:name] || @input_id
+        Input.new(id: @input_id, name: name, **system_arguments)
+      }
+
+      # Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      #
+      renders_one :icon, Primer::OcticonComponent
+
+      # Customizable results list.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :results, lambda { |**system_arguments|
+        system_arguments[:tag] = :ul
+        system_arguments[:id] = @list_id
+        system_arguments[:classes] = class_names(
+          "autocomplete-results",
+          system_arguments[:classes]
+        )
+
+        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
+        system_arguments[:"aria-label"] = aria_label if aria_label.present?
+        system_arguments[:aria]&.delete(:label)
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) do |c| %>
+      #     <% c.label(classes:"").with_content("Fruits") %>
+      #     <% c.input(type: :text) %>
+      #   <% end %>
+      #
+      # @example With `aria-label`
+      #   <%= render(Primer::Beta::AutoComplete.new("aria-label": "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", position: :relative)) do |c| %>
+      #     <% c.input(type: :text) %>
+      #   <% end %>
+      #
+      # @example With `aria-labelledby`
+      #   <%= render(Primer::HeadingComponent.new(tag: :h2, id: "search-1")) { "Search" } %>
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-2", position: :relative)) do |c| %>
+      #     <% c.input("aria-labelledby": "search-1") %>
+      #   <% end %>
+      #
+      # @example With custom classes for the results
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-4", list_id: "fruits-popup-3", position: :relative)) do |c| %>
+      #     <% c.label(classes:"").with_content("Fruits") %>
+      #     <% c.input(type: :text) %>
+      #     <% c.results(classes: "custom-class") do %>
+      #       <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
+      #         Apple
+      #       <% end %>
+      #       <%= render(Primer::Beta::AutoComplete::Item.new(value: "orange")) do |c| %>
+      #         Orange
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With Icon
+      #   <%= render(Primer::Beta::AutoComplete.new(src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
+      #     <% c.label(classes:"").with_content("Fruits") %>
+      #     <% c.input(type: :text) %>
+      #     <% c.icon(icon: :search) %>
+      #   <% end %>
+      #
+      # @param src [String] The route to query.
+      # @param input_id [String] Id of the input element.
+      # @param list_id [String] Id of the list element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src:, list_id:, input_id:, **system_arguments)
+        @list_id = list_id
+        @input_id = input_id
+        @aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label)
+
+        system_arguments.delete(:"aria-label") && system_arguments[:aria]&.delete(:label)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "auto-complete"
+        @system_arguments[:src] = src
+        @system_arguments[:for] = list_id
+      end
+
+      # add `results` without needing to explicitly call it in the view
+      def before_render
+        raise ArgumentError, "Missing `input` slot" if input.blank?
+        raise ArgumentError, "Accessible label is required." if label.blank? && input.missing_label?
+
+        results(classes: "") unless results
+      end
+
+      # This component is part of `Primer::Beta::AutoCompleteComponent` and should not be
+      # used as a standalone component.
+      class Input < Primer::Component
+        DEFAULT_TYPE = :text
+        TYPE_OPTIONS = [DEFAULT_TYPE, :search].freeze
+
+        # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(type: DEFAULT_TYPE, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :input
+
+          @aria_label = system_arguments[:"aria-label"]
+          @aria_labelledby = system_arguments[:"aria-labelledby"] || system_arguments.dig(:aria, :labelledby)
+
+          @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+          @system_arguments[:classes] = class_names(
+            "form-control",
+            system_arguments[:classes]
+          )
+        end
+
+        def missing_label?
+          @aria_label.blank? && @aria_labelledby.blank?
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments))
+        end
+      end
+    end
+  end
+end

data/app/components/primer/beta/auto_complete/auto_complete.d.ts

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

data/app/components/primer/beta/auto_complete/auto_complete.js

@@ -0,0 +1 @@
+import '@github/auto-complete-element';

data/app/components/primer/beta/auto_complete/item.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    class AutoComplete
+      # Use `AutoCompleteItem` to list results of an auto-completed search.
+      class Item < Primer::Component
+        status :beta
+
+        # @example Default
+        #   <%= render(Primer::Beta::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
+        #     Selected
+        #   <% end %>
+        #   <%= render(Primer::Beta::AutoComplete::Item.new(value: "value")) do |c| %>
+        #     Not selected
+        #   <% end %>
+        #
+        # @param value [String] Value of the item.
+        # @param selected [Boolean] Whether the item is selected.
+        # @param disabled [Boolean] Whether the item is disabled.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(value:, selected: false, disabled: false, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :option
+          @system_arguments[:"data-autocomplete-value"] = value
+
+          @system_arguments[:"aria-selected"] = true if selected
+          @system_arguments[:"aria-disabled"] = true if disabled
+
+          @system_arguments[:classes] = class_names(
+            "autocomplete-item",
+            system_arguments[:classes],
+            "disabled" => disabled
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/beta/avatar.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Avatar` can be used to represent users and organizations on GitHub.
+    #
+    # - Use the default round avatar for users, and the `square` argument
+    # for organizations or any other non-human avatars.
+    # - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
+    # - Set `size` to update the height and width of the `Avatar` in pixels.
+    # - To stack multiple avatars together, use <%= link_to_component(Primer::AvatarStackComponent) %>.
+    #
+    # @accessibility
+    #   Images should have text alternatives that describe the information or function represented.
+    #   If the avatar functions as a link, provide alt text that helps convey the function. For instance,
+    #   if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
+    #   rather than `@kittenuser`.
+    #   [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
+    class Avatar < Primer::Component
+      status :beta
+
+      SMALL_THRESHOLD = 24
+
+      # @example Default
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
+      #
+      # @example Square
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
+      #
+      # @example Link
+      #   <%= render(Primer::Beta::Avatar.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
+      #
+      # @example With size
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 28)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 36)) %>
+      #
+      # @param src [String] The source url of the avatar image.
+      # @param alt [String] Passed through to alt on img tag.
+      # @param size [Integer] Adds the avatar-small class if less than 24.
+      # @param square [Boolean] Used to create a square avatar.
+      # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
+        @href = href
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :img
+        @system_arguments[:src] = src
+        @system_arguments[:alt] = alt
+        @system_arguments[:size] = size
+        @system_arguments[:height] = size
+        @system_arguments[:width] = size
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "avatar",
+          "avatar-small" => size < SMALL_THRESHOLD,
+          "circle" => !square,
+          "lh-0" => href # Addresses an overflow issue with linked avatars
+        )
+      end
+
+      def call
+        if @href
+          render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
+            render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
+          end
+        else
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/details_component.rb

@@ -29,7 +29,7 @@ module Primer
 
     # Use the Body slot as the main content to be shown when triggered by the Summary.
     #
-    # @param tag [String] (Primer::DetailsComponent::BODY_TAG_DEFAULT) <%= one_of(Primer::DetailsComponent::BODY_TAG_OPTIONS) %>
+    # @param tag [Symbol] (Primer::DetailsComponent::BODY_TAG_DEFAULT) <%= one_of(Primer::DetailsComponent::BODY_TAG_OPTIONS) %>
     # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
     renders_one :body, lambda { |tag: BODY_TAG_DEFAULT, **system_arguments|
       system_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, tag, BODY_TAG_DEFAULT)
@@ -40,12 +40,12 @@ module Primer
     # @example Default
     #
     #   <%= render Primer::DetailsComponent.new do |c| %>
-    #     component.summary do
-    #       "Summary"
-    #     end
-    #     component.body do
-    #       "Body"
-    #     end
+    #     <% c.summary do %>
+    #       Summary
+    #     <% end %>
+    #     <% c.body do %>
+    #       Body
+    #     <% end %>
     #   <% end %>
     #
     # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>

data/app/components/primer/markdown.rb

@@ -99,17 +99,17 @@ module Primer
     #     <p>And an unordered task list:</p>
     #
     #     <ul>
-    #       <li><input type="checkbox" checked /> Create a sample markdown document</li>
-    #       <li><input type="checkbox"/> Add task lists to it</li>
-    #       <li><input type="checkbox"/> Take a vacation</li>
+    #       <li><input type="checkbox" id="create-markdown" checked /><label for="create-markdown">Create a sample markdown document</label><br></li>
+    #       <li><input type="checkbox" id="tasks-list" checked /><label for="tasks-list">Add tasks list to it</label><br></li>
+    #       <li><input type="checkbox" id="take-vacation" checked /><label for="take-vacation">Take a vacation</label><br></li>
     #     </ul>
     #
     #     <p>And a "mixed" task list:</p>
     #
     #     <ul>
-    #       <li><input type="checkbox"/> Steal underpants</li>
+    #       <li><input type="checkbox"id="steal-underpants"/><label for="steal-underpants">Steal underpants</label></li>
     #       <li>?</li>
-    #       <li><input type="checkbox"/> Profit!</li>
+    #       <li><input type="checkbox"id="profit"/><label for="profit">Profit!</label></li>
     #     </ul>
     #
     #     And a nested list:
@@ -241,9 +241,9 @@ module Primer
     #
     #     <pre><code>var foo = "bar";</code></pre>
     #
-    #     <pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
+    #     <pre tabindex="0"><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
     #
-    #     <pre><code>var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";</code></pre>
+    #     <pre tabindex="0"><code>var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";</code></pre>
     #
     #     <p>Inline code inside table cells should still be distinguishable.</p>
     #
@@ -270,11 +270,11 @@ module Primer
     #
     #     <p>Small images should be shown at their actual size.</p>
     #
-    #     <p><img src="http://placekitten.com/g/300/200/"/></p>
+    #     <p><img alt="kitten" src="http://placekitten.com/g/300/200/"/></p>
     #
     #     <p>Large images should always scale down and fit in the content container.</p>
     #
-    #     <p><img src="http://placekitten.com/g/1200/800/"/></p>
+    #     <p><img alt="kitten" src="http://placekitten.com/g/1200/800/"/></p>
     #
     #     <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
     #   <% end %>

data/app/components/primer/popover_component.rb

@@ -23,12 +23,15 @@ module Primer
       :top_right => "Popover-message--top-right"
     }.freeze
 
+    DEFAULT_HEADING_TAG = :h4
+
     # The heading
     #
+    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :heading, lambda { |**system_arguments|
+    renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
+      system_arguments[:tag] = tag
       system_arguments[:mb] ||= 2
-      system_arguments[:tag] ||= :h4 # rubocop:disable Primer/NoTagMemoize
 
       Primer::HeadingComponent.new(**system_arguments)
     }
@@ -106,7 +109,7 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div # rubocop:disable Primer/NoTagMemoize
+      @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],
         "Popover"

data/app/components/primer/primer.d.ts

@@ -1,4 +1,4 @@
-import './auto_complete/auto_complete';
+import './beta/auto_complete/auto_complete';
 import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.js

@@ -1,4 +1,4 @@
-import './auto_complete/auto_complete';
+import './beta/auto_complete/auto_complete';
 import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.ts

@@ -1,4 +1,4 @@
-import './auto_complete/auto_complete'
+import './beta/auto_complete/auto_complete'
 import './clipboard_copy_component'
 import './tab_container_component'
 import './time_ago_component'

data/app/components/primer/timeline_item_component.rb

@@ -7,14 +7,14 @@ module Primer
 
     # Avatar to be rendered to the left of the Badge.
     #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
     renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
       system_arguments[:classes] = class_names(
         "TimelineItem-avatar",
         system_arguments[:classes]
       )
 
-      Primer::AvatarComponent.new(src: src, size: size, square: square, **system_arguments)
+      Primer::Beta::Avatar.new(src: src, size: size, square: square, **system_arguments)
     }
 
     # Badge that will be connected to other TimelineItems.

data/app/components/primer/truncate.rb

@@ -22,6 +22,11 @@ module Primer
     # @example Custom size
     #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
     #
+    # @example With HTML content
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) do %>
+    #     <span>branch-name-that-is-really-long</span>
+    #   <% end %>
+    #
     # @param tag [Symbol] <%= one_of(Primer::Truncate::TAG_OPTIONS) %>
     # @param inline [Boolean] Whether the element is inline (or inline-block).
     # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.

data/app/components/primer/underline_nav_component.rb

@@ -38,7 +38,7 @@ module Primer
 
     # Use actions for a call to action.
     #
-    # @param tag [String] (Primer::UnderlineNavComponent::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavComponent::ACTIONS_TAG_OPTIONS) %>
+    # @param tag [Symbol] (Primer::UnderlineNavComponent::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavComponent::ACTIONS_TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
       system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)

data/lib/primer/classify.rb

@@ -11,16 +11,6 @@ require_relative "classify/utilities"
 module Primer
   # :nodoc:
   class Classify
-    # Load the utilities.yml file.
-    # Disabling because we want to load symbols, strings, and integers from the .yml file
-    # rubocop:disable Security/YAMLLoad
-    UTILITIES = YAML.load(
-      File.read(
-        File.join(File.dirname(__FILE__), "./classify/utilities.yml")
-      )
-    ).freeze
-    # rubocop:enable Security/YAMLLoad
-
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = %i[text box_shadow].freeze
 
@@ -90,7 +80,7 @@ module Primer
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
-      UTILITIES.keys +
+      Primer::Classify::Utilities::UTILITIES.keys +
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_MARGIN_KEYS +

data/lib/primer/classify/utilities.rb

@@ -5,13 +5,24 @@ module Primer
   class Classify
     # Handler for PrimerCSS utility classes loaded from utilities.rake
     class Utilities
+      # Load the utilities.yml file.
+      # Disabling because we want to load symbols, strings, and integers from the .yml file
+      # rubocop:disable Security/YAMLLoad
+      UTILITIES = YAML.load(
+        File.read(
+          File.join(File.dirname(__FILE__), "./utilities.yml")
+        )
+      ).freeze
+      # rubocop:enable Security/YAMLLoad
+      BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
+
       class << self
         def classname(key, val, breakpoint = "")
           if (valid = validate(key, val, breakpoint))
             valid
           else
             # Get selector
-            Primer::Classify::UTILITIES[key][val][Primer::Classify::BREAKPOINTS.index(breakpoint)]
+            UTILITIES[key][val][BREAKPOINTS.index(breakpoint)]
           end
         end
 
@@ -19,14 +30,14 @@ module Primer
         #
         # returns Boolean
         def supported_key?(key)
-          Primer::Classify::UTILITIES[key].present?
+          UTILITIES[key].present?
         end
 
         # Does the Utilitiy class support the given key and value
         #
         # returns Boolean
         def supported_value?(key, val)
-          supported_key?(key) && Primer::Classify::UTILITIES[key][val].present?
+          supported_key?(key) && UTILITIES[key][val].present?
         end
 
         # Does the given selector exist in the utilities file
@@ -34,7 +45,7 @@ module Primer
         # returns Boolean
         def supported_selector?(selector)
           # This method is too slow to run in production
-          return false if Rails.env.production?
+          return false if ENV["RAILS_ENV"] == "production"
 
           find_selector(selector).present?
         end
@@ -43,7 +54,7 @@ module Primer
         #
         # returns Boolean
         def responsive?(key, val)
-          supported_value?(key, val) && Primer::Classify::UTILITIES[key][val].count > 1
+          supported_value?(key, val) && UTILITIES[key][val].count > 1
         end
 
         # Get the options for the given key
@@ -52,13 +63,13 @@ module Primer
         def mappings(key)
           return unless supported_key?(key)
 
-          Primer::Classify::UTILITIES[key].keys
+          UTILITIES[key].keys
         end
 
         # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
         def classes_to_hash(classes)
           # This method is too slow to run in production
-          return { classes: classes } if Rails.env.production?
+          return { classes: classes } if ENV["RAILS_ENV"] == "production"
 
           obj = {}
           classes = classes.split(" ")
@@ -94,7 +105,7 @@ module Primer
 
         def find_selector(selector)
           # Search each key/value_hash pair, eg. key `:mr` and value_hash `{ 0 => [ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ] }`
-          Primer::Classify::UTILITIES.each do |key, value_hash|
+          UTILITIES.each do |key, value_hash|
             # Each value hash will also contain an array of classnames for breakpoints
             # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
             value_hash.each do |key_argument, classnames|
@@ -112,19 +123,19 @@ module Primer
 
         def validate(key, val, breakpoint)
           unless supported_key?(key)
-            raise ArgumentError, "#{key} is not a valid Primer utility key" unless Rails.env.production?
+            raise ArgumentError, "#{key} is not a valid Primer utility key" unless ENV["RAILS_ENV"] == "production"
 
             return ""
           end
 
           unless breakpoint.empty? || responsive?(key, val)
-            raise ArgumentError, "#{key} does not support responsive values" unless Rails.env.production?
+            raise ArgumentError, "#{key} does not support responsive values" unless ENV["RAILS_ENV"] == "production"
 
             return ""
           end
 
           unless supported_value?(key, val)
-            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless Rails.env.production?
+            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless ENV["RAILS_ENV"] == "production"
 
             return ""
           end

data/lib/primer/view_components/linters/helpers.rb

@@ -13,10 +13,13 @@ module ERBLint
         link menuitem meta param source track wbr img
       ].freeze
 
+      DUMP_FILE = ".erblint-counter-ignore.json"
+
       def self.included(base)
         base.include(ERBLint::LinterRegistry)
 
         define_method "run" do |processed_source|
+          @total_offenses = 0
           @offenses_not_corrected = 0
           tags = tags(processed_source)
           tag_tree = build_tag_tree(tags)
@@ -43,6 +46,7 @@ module ERBLint
           tag_tree.each do |tag, h|
             next unless h[:offense]
 
+            @total_offenses += 1
             # We always fix the offenses using blocks. The closing tag corresponds to `<% end %>`.
             if h[:correctable]
               add_offense(tag.loc, h[:message], h[:correction])
@@ -54,6 +58,8 @@ module ERBLint
           end
 
           counter_correct?(processed_source)
+
+          dump_data(processed_source) if ENV["DUMP_LINT_DATA"] == "1"
         end
 
         define_method "autocorrect" do |processed_source, offense|
@@ -186,6 +192,17 @@ module ERBLint
         offense = ["#{klass_name}:#{message}", tag.node.loc.source].join("\n")
         add_offense(processed_source.to_source_range(tag.loc), offense, replacement)
       end
+
+      def dump_data(processed_source)
+        return if @total_offenses.zero?
+
+        data = File.exist?(DUMP_FILE) ? JSON.parse(File.read(DUMP_FILE)) : {}
+
+        data[processed_source.filename] ||= {}
+        data[processed_source.filename][self.class.name.demodulize] = @total_offenses
+
+        File.write(DUMP_FILE, JSON.pretty_generate(data))
+      end
     end
   end
 end

data/lib/primer/view_components/statuses.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Primer
+  # :nodoc:
+  module ViewComponents
+    STATUSES = JSON.parse(
+      File.read(
+        File.join(File.dirname(__FILE__), "../../../static/statuses.json")
+      )
+    ).freeze
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 46
+      PATCH = 47
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

@@ -32,9 +32,9 @@ namespace :docs do
       Primer::OcticonSymbolsComponent,
       Primer::ImageCrop,
       Primer::IconButton,
-      Primer::AutoComplete,
-      Primer::AutoComplete::Item,
-      Primer::AvatarComponent,
+      Primer::Beta::AutoComplete,
+      Primer::Beta::AutoComplete::Item,
+      Primer::Beta::Avatar,
       Primer::AvatarStackComponent,
       Primer::BaseButton,
       Primer::BlankslateComponent,
@@ -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,30 @@ 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("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
@@ -183,8 +185,8 @@ namespace :docs do
         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
         }
 
@@ -346,6 +348,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"
@@ -384,4 +387,55 @@ namespace :docs do
 
     pretty_value(constant_value)
   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 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,
+      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/yard/docs_helper.rb

@@ -41,7 +41,7 @@ module YARD
     end
 
     def link_to_component(component)
-      short_name = component.name.gsub(/Primer|::|Component/, "")
+      short_name = component.name.gsub(/Primer|::|Alpha|Beta|Component/, "")
       "[#{short_name}](/components/#{short_name.downcase})"
     end
 

data/static/statuses.json

@@ -1,12 +1,12 @@
 {
   "Primer::Alpha::ButtonMarketing": "alpha",
-  "Primer::AutoComplete": "beta",
-  "Primer::AutoComplete::Input": "alpha",
-  "Primer::AutoComplete::Item": "beta",
-  "Primer::AvatarComponent": "beta",
   "Primer::AvatarStackComponent": "beta",
   "Primer::BaseButton": "beta",
   "Primer::BaseComponent": "beta",
+  "Primer::Beta::AutoComplete": "beta",
+  "Primer::Beta::AutoComplete::Input": "alpha",
+  "Primer::Beta::AutoComplete::Item": "beta",
+  "Primer::Beta::Avatar": "beta",
   "Primer::Beta::Text": "beta",
   "Primer::BlankslateComponent": "beta",
   "Primer::BorderBoxComponent": "beta",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.46
+  version: 0.0.47
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-29 00:00:00.000000000 Z
+date: 2021-07-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -351,19 +351,21 @@ files:
 - app/assets/javascripts/primer_view_components.js
 - app/assets/javascripts/primer_view_components.js.map
 - app/components/primer/alpha/button_marketing.rb
-- app/components/primer/auto_complete.rb
 - app/components/primer/auto_complete/auto_complete.d.ts
-- app/components/primer/auto_complete/auto_complete.html.erb
 - app/components/primer/auto_complete/auto_complete.js
-- app/components/primer/auto_complete/auto_complete.ts
 - app/components/primer/auto_complete/auto_component.d.ts
 - app/components/primer/auto_complete/auto_component.js
-- app/components/primer/auto_complete/item.rb
-- app/components/primer/avatar_component.rb
 - app/components/primer/avatar_stack_component.html.erb
 - app/components/primer/avatar_stack_component.rb
 - app/components/primer/base_button.rb
 - app/components/primer/base_component.rb
+- app/components/primer/beta/auto_complete.rb
+- app/components/primer/beta/auto_complete/auto_complete.d.ts
+- app/components/primer/beta/auto_complete/auto_complete.html.erb
+- app/components/primer/beta/auto_complete/auto_complete.js
+- app/components/primer/beta/auto_complete/auto_complete.ts
+- app/components/primer/beta/auto_complete/item.rb
+- app/components/primer/beta/avatar.rb
 - app/components/primer/beta/text.rb
 - app/components/primer/blankslate_component.html.erb
 - app/components/primer/blankslate_component.rb
@@ -483,6 +485,7 @@ files:
 - lib/primer/view_components/linters/button_component_migration_counter.rb
 - lib/primer/view_components/linters/flash_component_migration_counter.rb
 - lib/primer/view_components/linters/helpers.rb
+- lib/primer/view_components/statuses.rb
 - lib/primer/view_components/version.rb
 - lib/tasks/coverage.rake
 - lib/tasks/docs.rake

data/app/components/primer/auto_complete.rb

@@ -1,157 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
-  # input field. This list is populated by server search results.
-  # @accessibility
-  #   Always set an accessible label to help the user interact with the component.
-  #
-  #   * Set the `label` slot to render a visible label. Alternatively, associate an existing visible text element
-  #   as a label by setting `aria-labelledby`.
-  #   * If you must use a non-visible label, set `:"aria-label"` on `AutoComplete` and Primer
-  #   will apply it to the correct elements. However, please note that a visible label should almost
-  #   always be used unless there is compelling reason not to. A placeholder is not a label.
-  class AutoComplete < Primer::Component
-    status :beta
-
-    # Optionally render a visible label. See <%= link_to_accessibility %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :label, lambda { |**system_arguments|
-      system_arguments[:for] = @input_id
-      system_arguments[:tag] = :label
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Required input used to search for results
-    #
-    # @param type [Symbol] <%= one_of(Primer::AutoComplete::Input::TYPE_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :input, lambda { |**system_arguments|
-      aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
-      if aria_label.present?
-        system_arguments[:"aria-label"] = aria_label
-        system_arguments[:aria]&.delete(:label)
-      end
-
-      name = system_arguments[:name] || @input_id
-      Input.new(id: @input_id, name: name, **system_arguments)
-    }
-
-    # Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
-    #
-    renders_one :icon, Primer::OcticonComponent
-
-    # Customizable results list.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :results, lambda { |**system_arguments|
-      system_arguments[:tag] = :ul
-      system_arguments[:id] = @list_id
-      system_arguments[:classes] = class_names(
-        "autocomplete-results",
-        system_arguments[:classes]
-      )
-
-      aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
-      system_arguments[:"aria-label"] = aria_label if aria_label.present?
-      system_arguments[:aria]&.delete(:label)
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #   <%= render(Primer::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) do |c| %>
-    #     <% c.label(classes:"").with_content("Fruits") %>
-    #     <% c.input(type: :text) %>
-    #   <% end %>
-    #
-    # @example With `aria-label`
-    #   <%= render(Primer::AutoComplete.new("aria-label": "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", position: :relative)) do |c| %>
-    #     <% c.input(type: :text) %>
-    #   <% end %>
-    #
-    # @example With `aria-labelledby`
-    #   <%= render(Primer::HeadingComponent.new(tag: :h2, id: "search-1")) { "Search" } %>
-    #   <%= render(Primer::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-2", position: :relative)) do |c| %>
-    #     <% c.input("aria-labelledby": "search-1") %>
-    #   <% end %>
-    #
-    # @example With custom classes for the results
-    #   <%= render(Primer::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-4", list_id: "fruits-popup-3", position: :relative)) do |c| %>
-    #     <% c.label(classes:"").with_content("Fruits") %>
-    #     <% c.input(type: :text) %>
-    #     <% c.results(classes: "custom-class") do %>
-    #       <%= render(Primer::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
-    #         Apple
-    #       <% end %>
-    #       <%= render(Primer::AutoComplete::Item.new(value: "orange")) do |c| %>
-    #         Orange
-    #       <% end %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With Icon
-    #   <%= render(Primer::AutoComplete.new(src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
-    #     <% c.label(classes:"").with_content("Fruits") %>
-    #     <% c.input(type: :text) %>
-    #     <% c.icon(icon: :search) %>
-    #   <% end %>
-    #
-    # @param src [String] The route to query.
-    # @param input_id [String] Id of the input element.
-    # @param list_id [String] Id of the list element.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(src:, list_id:, input_id:, **system_arguments)
-      @list_id = list_id
-      @input_id = input_id
-      @aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label)
-
-      system_arguments.delete(:"aria-label") && system_arguments[:aria]&.delete(:label)
-
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = "auto-complete"
-      @system_arguments[:src] = src
-      @system_arguments[:for] = list_id
-    end
-
-    # add `results` without needing to explicitly call it in the view
-    def before_render
-      raise ArgumentError, "Missing `input` slot" if input.blank?
-      raise ArgumentError, "Accessible label is required." if label.blank? && input.missing_label?
-
-      results(classes: "") unless results
-    end
-
-    # This component is part of `Primer::AutoCompleteComponent` and should not be
-    # used as a standalone component.
-    class Input < Primer::Component
-      DEFAULT_TYPE = :text
-      TYPE_OPTIONS = [DEFAULT_TYPE, :search].freeze
-
-      # @param type [Symbol] <%= one_of(Primer::AutoComplete::Input::TYPE_OPTIONS) %>
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(type: DEFAULT_TYPE, **system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :input
-
-        @aria_label = system_arguments[:"aria-label"]
-        @aria_labelledby = system_arguments[:"aria-labelledby"] || system_arguments.dig(:aria, :labelledby)
-
-        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
-        @system_arguments[:classes] = class_names(
-          "form-control",
-          system_arguments[:classes]
-        )
-      end
-
-      def missing_label?
-        @aria_label.blank? && @aria_labelledby.blank?
-      end
-
-      def call
-        render(Primer::BaseComponent.new(**@system_arguments))
-      end
-    end
-  end
-end

data/app/components/primer/auto_complete/item.rb

@@ -1,42 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  class AutoComplete
-    # Use `AutoCompleteItem` to list results of an auto-completed search.
-    class Item < Primer::Component
-      status :beta
-
-      # @example Default
-      #   <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
-      #     Selected
-      #   <% end %>
-      #   <%= render(Primer::AutoComplete::Item.new(value: "value")) do |c| %>
-      #     Not selected
-      #   <% end %>
-      #
-      # @param value [String] Value of the item.
-      # @param selected [Boolean] Whether the item is selected.
-      # @param disabled [Boolean] Whether the item is disabled.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(value:, selected: false, disabled: false, **system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :li
-        @system_arguments[:role] = :option
-        @system_arguments[:"data-autocomplete-value"] = value
-
-        @system_arguments[:"aria-selected"] = true if selected
-        @system_arguments[:"aria-disabled"] = true if disabled
-
-        @system_arguments[:classes] = class_names(
-          "autocomplete-item",
-          system_arguments[:classes],
-          "disabled" => disabled
-        )
-      end
-
-      def call
-        render(Primer::BaseComponent.new(**@system_arguments)) { content }
-      end
-    end
-  end
-end

data/app/components/primer/avatar_component.rb

@@ -1,75 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # `Avatar` can be used to represent users and organizations on GitHub.
-  #
-  # - Use the default round avatar for users, and the `square` argument
-  # for organizations or any other non-human avatars.
-  # - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
-  # - Set `size` to update the height and width of the `Avatar` in pixels.
-  # - To stack multiple avatars together, use <%= link_to_component(Primer::AvatarStackComponent) %>.
-  #
-  # @accessibility
-  #   Images should have text alternatives that describe the information or function represented.
-  #   If the avatar functions as a link, provide alt text that helps convey the function. For instance,
-  #   if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
-  #   rather than `@kittenuser`.
-  #   [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
-  class AvatarComponent < Primer::Component
-    status :beta
-
-    SMALL_THRESHOLD = 24
-
-    # @example Default
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
-    #
-    # @example Square
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
-    #
-    # @example Link
-    #   <%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
-    #
-    # @example With size
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 28)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
-    #   <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 36)) %>
-    #
-    # @param src [String] The source url of the avatar image.
-    # @param alt [String] Passed through to alt on img tag.
-    # @param size [Integer] Adds the avatar-small class if less than 24.
-    # @param square [Boolean] Used to create a square avatar.
-    # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
-      @href = href
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = :img
-      @system_arguments[:src] = src
-      @system_arguments[:alt] = alt
-      @system_arguments[:size] = size
-      @system_arguments[:height] = size
-      @system_arguments[:width] = size
-
-      @system_arguments[:classes] = class_names(
-        system_arguments[:classes],
-        "avatar",
-        "avatar-small" => size < SMALL_THRESHOLD,
-        "circle" => !square,
-        "lh-0" => href # Addresses an overflow issue with linked avatars
-      )
-    end
-
-    def call
-      if @href
-        render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
-          render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
-        end
-      else
-        render(Primer::BaseComponent.new(**@system_arguments)) { content }
-      end
-    end
-  end
-end