primer_view_components 0.0.46 → 0.0.50

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::AvatarStack": "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.50
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-29 00:00:00.000000000 Z
+date: 2021-08-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -42,16 +42,16 @@ dependencies:
   name: octicons
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 13.0.0
+        version: '15'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 13.0.0
+        version: '15'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -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/avatar_stack.html.erb
+- app/components/primer/beta/avatar_stack.rb
 - app/components/primer/beta/text.rb
 - app/components/primer/blankslate_component.html.erb
 - app/components/primer/blankslate_component.rb
@@ -475,15 +477,30 @@ files:
 - lib/primer/classify/utilities.rb
 - lib/primer/classify/utilities.yml
 - lib/primer/view_components.rb
+- lib/primer/view_components/constants.rb
 - lib/primer/view_components/engine.rb
 - lib/primer/view_components/linters.rb
+- lib/primer/view_components/linters/argument_mappers/base.rb
 - lib/primer/view_components/linters/argument_mappers/button.rb
+- lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb
 - lib/primer/view_components/linters/argument_mappers/conversion_error.rb
+- lib/primer/view_components/linters/argument_mappers/helpers/erb_block.rb
+- lib/primer/view_components/linters/argument_mappers/label.rb
 - lib/primer/view_components/linters/argument_mappers/system_arguments.rb
+- lib/primer/view_components/linters/autocorrectable.rb
 - lib/primer/view_components/linters/button_component_migration_counter.rb
+- lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb
+- lib/primer/view_components/linters/close_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/linters/label_component_migration_counter.rb
+- lib/primer/view_components/statuses.rb
 - lib/primer/view_components/version.rb
+- lib/rubocop/config/default.yml
+- lib/rubocop/cop/primer.rb
+- lib/rubocop/cop/primer/no_tag_memoize.rb
+- lib/rubocop/cop/primer/system_argument_instead_of_class.rb
+- lib/tasks/constants.rake
 - lib/tasks/coverage.rake
 - lib/tasks/docs.rake
 - lib/tasks/statuses.rake
@@ -491,6 +508,10 @@ files:
 - lib/yard/docs_helper.rb
 - lib/yard/renders_many_handler.rb
 - lib/yard/renders_one_handler.rb
+- static/arguments.yml
+- static/assets/view-components.svg
+- static/classes.yml
+- static/constants.json
 - static/statuses.json
 homepage: https://github.com/primer/view_components
 licenses:

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

data/app/components/primer/avatar_stack_component.rb

@@ -1,90 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `AvatarStack` to stack multiple avatars together.
-  class AvatarStackComponent < Primer::Component
-    status :beta
-
-    ALIGN_DEFAULT = :left
-    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
-
-    DEFAULT_TAG = :div
-    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
-
-    DEFAULT_BODY_TAG = :div
-    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
-
-    # @example Default
-    #   <%= render(Primer::AvatarStackComponent.new) do |c| %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #   <% end  %>
-    #
-    # @example Align right
-    #   <%= render(Primer::AvatarStackComponent.new(align: :right)) do |c| %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #   <% end  %>
-    #
-    # @example With tooltip
-    #   <%= render(Primer::AvatarStackComponent.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-    #   <% end  %>
-    #
-    # @param tag [Symbol] <%= one_of(Primer::AvatarStackComponent::TAG_OPTIONS) %>
-    # @param align [Symbol] <%= one_of(Primer::AvatarStackComponent::ALIGN_OPTIONS) %>
-    # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
-    # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
-    #   The default tag is <%= pretty_value(Primer::AvatarStackComponent::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
-    #   to <%= one_of(Primer::AvatarStackComponent::BODY_TAG_OPTIONS, lower: true) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
-      @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
-      @system_arguments = system_arguments
-      @tooltipped = tooltipped
-      @body_arguments = body_arguments
-
-      body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
-      @body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
-      @body_arguments[:classes] = class_names(
-        "AvatarStack-body",
-        @body_arguments[:classes]
-      )
-
-      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
-      @system_arguments[:classes] = class_names(
-        "AvatarStack",
-        system_arguments[:classes],
-        "AvatarStack--right" => @align == :right
-      )
-    end
-
-    def body_component
-      if @tooltipped
-        Primer::Tooltip.new(**@body_arguments)
-      else
-        Primer::BaseComponent.new(**@body_arguments)
-      end
-    end
-
-    def before_render
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "AvatarStack--two" => avatars.size == 2,
-        "AvatarStack--three-plus" => avatars.size > 2
-      )
-    end
-
-    def render?
-      avatars.any?
-    end
-  end
-end