primer_view_components 0.0.111 → 0.0.113

data/lib/primer/forms/text_field.html.erb

@@ -1,6 +1,6 @@
 <%= render(FormControl.new(input: @input)) do %>
   <% if @input.leading_visual || @input.show_clear_button? %>
-    <%= content_tag(:div, class: @input.field_wrap_classes) do %>
+    <%= content_tag(:div, **@field_wrap_arguments) do %>
       <% if @input.leading_visual %>
         <span class="FormControl-input-leadingVisualWrap">
           <%= render(Primer::OcticonComponent.new(**@input.leading_visual)) %>

data/lib/primer/forms/text_field.rb

@@ -8,6 +8,17 @@ module Primer
 
       def initialize(input:)
         @input = input
+
+        @field_wrap_arguments = {
+          class: class_names(
+            "FormControl-input-wrap",
+            Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size],
+            "FormControl-input-wrap--trailingAction": @input.show_clear_button?,
+            "FormControl-input-wrap--leadingVisual": @input.leading_visual?
+          ),
+
+          hidden: @input.hidden?
+        }
       end
     end
   end

data/lib/primer/forms/utils.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module Forms
+    # :nodoc:
+    module Utils
+      # Unfortunately this bug (https://github.com/ruby/ruby/pull/5646) prevents us from using
+      # Ruby's native Module.const_source_location. Instead we have to fudge it by searching
+      # for the file in the configured autoload paths. Doing so relies on Rails' autoloading
+      # conventions, so it should work ok. Zeitwerk also has this information but lacks a
+      # public API to map constants to source files.
+      def const_source_location(class_name)
+        # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
+        class_path = "#{class_name.underscore}.rb"
+
+        ActiveSupport::Dependencies.autoload_paths.each do |autoload_path|
+          absolute_path = File.join(autoload_path, class_path)
+          return absolute_path if File.exist?(absolute_path)
+        end
+
+        nil
+      end
+    end
+
+    Utils.extend(Utils)
+  end
+end

data/lib/primer/view_components/audited.rb

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

data/lib/primer/view_components/engine.rb

@@ -57,6 +57,7 @@ module Primer
           autoloader.ignore(Engine.root.join("lib", "primer", "view_components", "linters.rb"))
           autoloader.ignore(Engine.root.join("lib", "primer", "view_components", "linters", "**", "*.rb"))
           autoloader.ignore(Engine.root.join("lib", "primer", "view_components", "statuses.rb"))
+          autoloader.ignore(Engine.root.join("lib", "primer", "view_components", "audited.rb"))
         end
       end
 

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

@@ -12,9 +12,9 @@ module ERBLint
 
       TAGS = %w[clipboard-copy].freeze
       REQUIRED_ARGUMENTS = [/for|value/, "aria-label"].freeze
-      MESSAGE = "We are migrating clipboard-copy to use [Primer::ClipboardCopy](https://primer.style/view-components/components/clipboardcopy), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating clipboard-copy to use [Primer::Beta::ClipboardCopy](https://primer.style/view-components/components/clipboardcopy), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::ClipboardCopy
-      COMPONENT = "Primer::ClipboardCopy"
+      COMPONENT = "Primer::Beta::ClipboardCopy"
     end
   end
 end

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

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 require_relative "helpers/deprecated_components_helpers"
+require_relative "severity_schema"
+
 require "erblint-github/linters/custom_helpers"
 
 module ERBLint
@@ -11,6 +13,8 @@ module ERBLint
       include ERBLint::LinterRegistry
       include Helpers::DeprecatedComponentsHelpers
 
+      self.config_schema = SeveritySchema
+
       def run(processed_source)
         processed_source.ast.descendants(:erb).each do |erb_node|
           _, _, code_node = *erb_node
@@ -21,10 +25,7 @@ module ERBLint
           deprecated_components.each do |component|
             next unless code.include?(component)
 
-            add_offense(
-              erb_node.loc,
-              message(component)
-            )
+            add_offense(erb_node.loc, message(component))
           end
         end
 
@@ -44,6 +45,16 @@ module ERBLint
           end
         end
       end
+
+      # this override is necessary because of the github/erblint-github `CustomHelpers`
+      # module. `counter_correct?` is provided by this module, and calls `add_offense`
+      # directly. there is no simple way to modify this without updating the gem and
+      # creating what would likely be an API that is non-standard and/or difficult to use
+      #
+      # https://github.com/github/erblint-github/blob/main/lib/erblint-github/linters/custom_helpers.rb
+      def add_offense(source_range, message, context = nil, severity = nil)
+        super(source_range, message, context, severity || @config.severity)
+      end
     end
   end
 end

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

@@ -7,27 +7,12 @@ module ERBLint
     module Helpers
       # Helpers to share between DeprecatedComponents ERB lint and Rubocop cop
       module DeprecatedComponentsHelpers
-        def message(component)
-          message = "#{component} has been deprecated and should not be used."
-
-          if Primer::Deprecations.correctable?(component)
-            suggested_component = Primer::Deprecations.suggested_component(component)
-            message += " Try #{suggested_component} instead."
-          end
-
-          message
-        end
-
-        def statuses_json
-          JSON.parse(
-            File.read(
-              File.join(File.dirname(__FILE__), "../../../../../static/statuses.json")
-            )
-          ).freeze
+        def message(component_name)
+          Primer::Deprecations.deprecation_message(component_name)
         end
 
         def deprecated_components
-          @deprecated_components ||= statuses_json.select { |_, value| value == "deprecated" }.keys
+          Primer::Deprecations.deprecated_components
         end
       end
     end

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "erb_lint/utils/severity_levels"
+
+module ERBLint
+  module Linters
+    class SeveritySchema < LinterConfig
+      # SEVERITY_NAMES :info, :refactor, :convention, :warning, :error, :fatal
+      # see https://github.com/Shopify/erb-lint/blob/main/lib/erb_lint/utils/severity_levels.rb
+
+      property :severity, accepts: ERBLint::Utils::SeverityLevels::SEVERITY_NAMES, default: nil, reader: :severity
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 111
+      PATCH = 113
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/component_name_migration.rb

@@ -26,8 +26,8 @@ module RuboCop
             component_name = node.const_name
             return unless ::Primer::Deprecations.correctable?(component_name)
 
-            suggested_component = ::Primer::Deprecations.suggested_component(component_name)
-            corrector.replace(node, suggested_component) if suggested_component.present?
+            replacement = ::Primer::Deprecations.replacement(component_name)
+            corrector.replace(node, replacement) if replacement.present?
           end
         end
       end

data/lib/tasks/docs.rake

@@ -29,6 +29,7 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
+      Primer::Beta::RelativeTime,
       Primer::Beta::IconButton,
       Primer::Beta::Button,
       Primer::Alpha::SegmentedControl,
@@ -53,12 +54,12 @@ namespace :docs do
       Primer::ButtonComponent,
       Primer::Beta::ButtonGroup,
       Primer::Alpha::ButtonMarketing,
-      Primer::ClipboardCopy,
+      Primer::Beta::ClipboardCopy,
       Primer::Beta::CloseButton,
       Primer::Beta::Counter,
       Primer::Beta::Details,
       Primer::Alpha::Dialog,
-      Primer::Dropdown,
+      Primer::Alpha::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,
       Primer::Beta::Heading,
@@ -70,7 +71,7 @@ namespace :docs do
       Primer::MenuComponent,
       Primer::Navigation::TabComponent,
       Primer::OcticonComponent,
-      Primer::PopoverComponent,
+      Primer::Beta::Popover,
       Primer::Beta::ProgressBar,
       Primer::StateComponent,
       Primer::SpinnerComponent,
@@ -99,12 +100,12 @@ namespace :docs do
     ]
 
     js_components = [
-      Primer::Dropdown,
+      Primer::Alpha::Dropdown,
       Primer::LocalTime,
       Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,
       Primer::Alpha::Banner,
-      Primer::ClipboardCopy,
+      Primer::Beta::ClipboardCopy,
       Primer::TabContainerComponent,
       Primer::TimeAgoComponent,
       Primer::Alpha::UnderlinePanels,

data/previews/primer/alpha/auto_complete_preview.rb

@@ -11,7 +11,9 @@ module Primer
       # @param with_icon toggle
       # @param is_clearable toggle
       def playground(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label Default Options
@@ -21,29 +23,39 @@ module Primer
       # @param with_icon toggle
       # @param is_clearable toggle
       def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @!group More examples
 
       # @label AutoComplete with non-visible label
       def with_non_visible_label
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-1", list_id: "test-id-1", src: "/auto_complete?version=alpha", is_label_visible: false))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with inline label
       def with_inline_label
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "test-id-2", src: "/auto_complete?version=alpha", is_label_inline: true))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with search icon
       def with_icon
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-3", list_id: "test-id-3", src: "/auto_complete?version=alpha", with_icon: true))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with clear button
       def with_clear_button
+        # rubocop:disable Primer/ComponentNameMigration
         render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-4", list_id: "test-id-4", src: "/auto_complete?version=alpha", is_clearable: true))
+        # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @!endgroup

data/previews/primer/alpha/button_marketing_preview.rb

@@ -21,6 +21,42 @@ module Primer
       def default(tag: :button, type: :button, scheme: :default, variant: :default)
         render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
       end
+
+      # @!group Size Variants
+      #
+      # @label Default
+      def sizes_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Large
+      def sizes_large
+        render(Primer::Alpha::ButtonMarketing.new(variant: :large)) { "Large" }
+      end
+      # @!endgroup
+
+      # @!group Schemes
+      #
+      # @label Default
+      def scheme_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Primary
+      def scheme_primary
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :primary)) { "Primary" }
+      end
+
+      # @label Outline
+      def scheme_outline
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" }
+      end
+
+      # @label Transparent
+      def scheme_transparent
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" }
+      end
+      # @!endgroup
     end
   end
 end

data/previews/primer/alpha/dropdown_preview.rb

@@ -0,0 +1,210 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Dropdown
+    class DropdownPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param with_caret [Boolean] toggle
+      # @param overlay [Symbol] select [none, default, dark]
+      def playground(overlay: :default, with_caret: false)
+        render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |c|
+          c.with_button { "Dropdown" }
+
+          c.with_menu(header: "Header") do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item(divider: true)
+            m.with_item { "Item 3" }
+            m.with_item { "Item 4" }
+          end
+        end
+      end
+
+      # @label Default
+      #
+      def default
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Menu
+      #
+      # @param as [Symbol] select [list, default]
+      # @param direction [Symbol] select [se, sw, w, e, ne, s]
+      # @param scheme [Symbol] select [default, dark]
+      def menu(as: :default, direction: :se, scheme: :default)
+        render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |m|
+          m.with_item { "Item 1" }
+          m.with_item { "Item 2" }
+          m.with_item(divider: true)
+          m.with_item { "Item 3" }
+          m.with_item { "Item 4" }
+        end
+      end
+
+      # @!group Direction
+      #
+      # @label Direction e
+      def direction_e
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :e) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction ne
+      def direction_ne
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :ne) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction s
+      def direction_s
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :s) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction se
+      def direction_se
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :se) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction sw
+      def direction_sw
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :sw) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Direction w
+      def direction_w
+        render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(direction: :w) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Options
+      #
+      # @label With caret
+      def options_with_caret
+        render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label With header
+      def options_with_header
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(header: "Header") do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label With dividers
+      def options_with_dividers
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item(divider: true)
+            m.with_item { "Item 3" }
+            m.with_item { "Item 4" }
+            m.with_item(divider: true)
+            m.with_item { "Item 5" }
+          end
+        end
+      end
+
+      # @label As list
+      def options_as_list
+        render(Primer::Alpha::Dropdown.new) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu(as: :list) do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Overlay none
+      def options_overlay_none
+        render(Primer::Alpha::Dropdown.new(overlay: :none)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+
+      # @label Overlay dark
+      def options_overlay_dark
+        render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |c|
+          c.with_button { "Dropdown" }
+          c.with_menu do |m|
+            m.with_item { "Item 1" }
+            m.with_item { "Item 2" }
+            m.with_item { "Item 3" }
+          end
+        end
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/segmented_control_preview.rb

@@ -34,8 +34,9 @@ module Primer
 
       # @!group Full width
       # @label Size small
-      def full_width_small(hide_labels: false, size: :small)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :small)) do |c|
+      # @param hide_labels [Boolean] toggle
+      def full_width_small(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")
@@ -43,8 +44,9 @@ module Primer
       end
 
       # @label Size medium
-      def full_width_medium(hide_labels: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :medium)) do |c|
+      # @param hide_labels [Boolean] toggle
+      def full_width_medium(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")
@@ -52,8 +54,9 @@ module Primer
       end
 
       # @label Size large
-      def full_width_large(hide_labels: false, size: :large)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :large)) do |c|
+      # @param hide_labels [Boolean] toggle
+      def full_width_large(hide_labels: false)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")

data/previews/primer/alpha/tab_nav_preview.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TabNav
+    class TabNavPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_tabs [Integer] number
+      # @param with_icons [Boolean] toggle
+      # @param with_counters [Boolean] toggle
+      def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
+        render(Primer::Alpha::TabNav.new(label: "label")) do |c|
+          Array.new(number_of_tabs || 3) do |i|
+            c.with_tab(selected: i.zero?, href: "##{i + 1}") do |t|
+              t.icon(icon: :star) if with_icons
+              t.text { "Tab #{i + 1}" }
+              t.counter(count: 10) if with_counters
+            end
+          end
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::Alpha::TabNav.new(label: "Default")) do |c|
+          c.with_tab(selected: true, href: "#") { "Tab 1" }
+          c.with_tab(href: "#") { "Tab 2" }
+          c.with_tab(href: "#") { "Tab 3" }
+        end
+      end
+
+      # @label With icons and counters
+      def with_icons_and_counters
+        render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |c|
+          c.with_tab(href: "#1", selected: true) do |t|
+            t.icon(icon: :star)
+            t.text { "Stars" }
+            t.counter(count: 10)
+          end
+          c.with_tab(href: "#2") do |t|
+            t.icon(icon: :heart)
+            t.text { "Sponsors" }
+            t.counter(count: 14)
+          end
+          c.with_tab(href: "#3") do |t|
+            t.icon(icon: :bookmark)
+            t.text { "Bookmarks" }
+            t.counter(count: 7)
+          end
+        end
+      end
+    end
+  end
+end