openproject-primer_view_components 0.6.3 → 0.8.0

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

@@ -14,56 +14,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_many :items, "TruncateText"
 
-      # @example Default
-      #   <%= render(Primer::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
-      #
-      # @example Multiple items
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(font_weight: :bold) do %>
-      #       <%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Advanced multiple items
-      #   <%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
-      #     <% component.with_item(tag: :li) do %>primer<% end %>
-      #     <% component.with_item(tag: :li, priority: true) do %>/ css<% end %>
-      #     <% component.with_item(tag: :li) do %>/ Issues<% end %>
-      #     <% component.with_item(tag: :li) do %>/ #123 —<% end %>
-      #     <% component.with_item(tag: :li, priority: true) do %>
-      #       Visual bug on primer.style found in lists
-      #     <% end %>
-      #   <% end %>
-      #
-      # @example Expand on hover or focus
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #   <% end %>
-      #
-      # @example Max widths
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #     <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #     <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #
-      # @example Max widths on new lines
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #   <br/>
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #   <br/>
-      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
-      #   <% end %>
-      #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(**system_arguments)
         @system_arguments = system_arguments

data/app/components/primer/blankslate_component.rb

@@ -16,82 +16,6 @@ module Primer
       Primer::Beta::Spinner.new(**system_arguments)
     }
 
-    #
-    # @example Basic
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #     description: "Description",
-    #   ) %>
-    #
-    # @example Icon
-    #   @description
-    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :globe,
-    #       title: "Title",
-    #       description: "Description",
-    #     ) %>
-    #
-    # @example Loading
-    #   @description
-    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       title: "Title",
-    #       description: "Description",
-    #     ) do |component| %>
-    #       <% component.with_spinner(size: :large) %>
-    #     <% end %>
-    #
-    # @example Custom content
-    #   @description
-    #     Pass custom content as a block in place of `description`.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       title: "Title",
-    #     ) do %>
-    #       <em>Your custom content here</em>
-    #     <% end %>
-    #
-    # @example Action button
-    #   @description
-    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #
-    #       button_text: "Create the first page",
-    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
-    #     ) %>
-    #
-    # @example Link
-    #   @description
-    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #       link_text: "Learn more about wikis",
-    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-    #     ) %>
-    #
-    # @example Variations
-    #   @description
-    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
-    #   @code
-    #     <%= render Primer::BlankslateComponent.new(
-    #       icon: :book,
-    #       title: "Welcome to the mona wiki!",
-    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #       narrow: true,
-    #       large: true,
-    #       spacious: true,
-    #     ) %>
-    #
     # @param title [String] Text that appears in a larger bold font.
     # @param title_tag [Symbol] HTML tag to use for title.
     # @param icon [Symbol] Octicon icon to use at top of component.

data/app/components/primer/box.rb

@@ -5,12 +5,6 @@ module Primer
   class Box < Primer::Component
     status :stable
 
-    # @example Default
-    #   <%= render(Primer::Box.new) { "Your content here" } %>
-    #
-    # @example Color and padding
-    #   <%= render(Primer::Box.new(bg: :subtle, p: 3)) { "Hello world" } %>
-    #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/primer/button_component.rb

@@ -71,55 +71,6 @@ module Primer
       Primer::Alpha::Tooltip.new(**system_arguments)
     }
 
-    # @example Schemes
-    #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
-    #   <%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
-    #
-    # @example Sizes
-    #   <%= render(Primer::ButtonComponent.new(size: :small)) { "Small" } %>
-    #   <%= render(Primer::ButtonComponent.new(size: :medium)) { "Medium" } %>
-    #
-    # @example Block
-    #   <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
-    #   <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
-    #
-    # @example With leading visual
-    #   <%= render(Primer::ButtonComponent.new) do |component| %>
-    #     <% component.with_leading_visual_icon(icon: :star) %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With trailing visual
-    #   <%= render(Primer::ButtonComponent.new) do |component| %>
-    #     <% component.with_trailing_visual_counter(count: 15) %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With leading and trailing visuals
-    #   <%= render(Primer::ButtonComponent.new) do |component| %>
-    #     <% component.with_leading_visual_icon(icon: :star) %>
-    #     <% component.with_trailing_visual_counter(count: 15) %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With dropdown caret
-    #   <%= render(Primer::ButtonComponent.new(dropdown: true)) do %>
-    #     Button
-    #   <% end %>
-    #
-    # @example With tooltip
-    #   @description
-    #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
-    #   @code
-    #     <%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |component| %>
-    #       <% component.with_tooltip(text: "Tooltip text") %>
-    #       Button
-    #     <% end %>
-    #
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>

data/app/components/primer/component.rb

@@ -52,7 +52,7 @@ module Primer
       message += " and will be removed in v#{version}." if version
       message += " Use #{new_class.name} instead." if new_class
 
-      ActiveSupport::Deprecation.warn(message)
+      ::Primer::ViewComponents.deprecation.warn(message)
     end
 
     def validate_aria_label

data/app/components/primer/conditional_wrapper.rb

@@ -4,24 +4,9 @@ module Primer
   # Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition
   # is true, a `Primer::BaseComponent` will render around the content. If the condition is false, only
   # the content is rendered.
-  #
-  # @example True conditional
-  #   <%# condition is true, so content will be wrapped in a <span> tag
-  #   <%= render Primer::ConditionalWrapper.new(condition: true, tag: :span, class: "foobar")) do %>
-  #     <%# also rendered %>
-  #     <p class="bazboo">Some text</p>
-  #   <% end %>
-  #
-  # @example False conditional
-  #   <%# condition is false so no <span> tag will render around the content (i.e. the <p> tag)
-  #   <%= render(Primer::ConditionalWrapper.new(condition: false, tag: :span, class: "foobar")) do %>
-  #     <%# this content will be rendered %>
-  #     <p class="bazboo">Some text</p>
-  #   <% end %>
-  #
-  # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
-  # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
   class ConditionalWrapper < Primer::Component
+    # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
+    # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
     def initialize(condition:, **base_component_arguments)
       @condition = condition
       @base_component_arguments = base_component_arguments

data/app/components/primer/icon_button.rb

@@ -21,36 +21,6 @@ module Primer
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
-    # @example Default
-    #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
-    #
-    # @example Schemes
-    #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
-    #   <%= render(Primer::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
-    #
-    # @example In a BorderBox
-    #
-    #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-    #     <% component.with_body do %>
-    #       <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
-    #       <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With an `aria-description`
-    #   @description
-    #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
-    #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
-    #     more context and information. See the accessibility section for more information.
-    #   @code
-    #     <%= render(Primer::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
-    #
-    # @example Custom tooltip direction
-    #
-    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
-    #
     # @param scheme [Symbol] <%= one_of(Primer::IconButton::SCHEME_OPTIONS) %>
     # @param icon [String] Name of <%= link_to_octicons %> to use.
     # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>

data/app/components/primer/layout_component.rb

@@ -38,18 +38,6 @@ module Primer
     DEFAULT_SIDEBAR_COL = 3
     ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
 
-    # @example Default
-    #   <%= render(Primer::LayoutComponent.new) do |component| %>
-    #     <% component.with_sidebar { "Sidebar" } %>
-    #     <% component.with_main { "Main" } %>
-    #   <% end %>
-    #
-    # @example Left sidebar
-    #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
-    #     <% component.with_sidebar { "Sidebar" } %>
-    #     <% component.with_main { "Main" } %>
-    #   <% end %>
-    #
     # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.
     # @param side [Symbol] Which side to display the sidebar on. <%= one_of(Primer::LayoutComponent::ALLOWED_SIDES) %>
     # @param sidebar_col [Integer] Sidebar column width.

data/app/components/primer/tooltip.rb

@@ -28,33 +28,6 @@ module Primer
       se
     ]
 
-    # @example Default
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %>
-    #   </div>
-    #
-    # @example Wrapping another component
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder")) do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
-    #     <% end %>
-    #   </div>
-    #
-    # @example With a direction
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
-    #   </div>
-    #
-    # @example With an alignment
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
-    #   </div>
-    #
-    # @example Without a delay
-    #   <div class="pt-5">
-    #     <%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
-    #   </div>
-    #
     # @param label [String] the text to appear in the tooltip
     # @param direction [String] Direction of the tooltip. <%= one_of(Primer::Tooltip::DIRECTION_OPTIONS) %>
     # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::Tooltip::ALIGN_MAPPING.keys) %>

data/app/components/primer/truncate.rb

@@ -8,25 +8,6 @@ module Primer
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze
 
-    # @example Default
-    #   <div class="col-2">
-    #     <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
-    #   </div>
-    #
-    # @example Inline
-    #   <%= render(Primer::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
-    #
-    # @example Expandable
-    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
-    #
-    # @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/lib/primer/fetch_or_fallback_helper.rb

@@ -29,7 +29,7 @@ module Primer
       if allowed_values.include?(given_value)
         given_value
       elsif deprecated_values&.include?(given_value)
-        ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
+        ::Primer::ViewComponents.deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
 
         given_value
       else

data/lib/primer/accessibility.rb

@@ -39,7 +39,7 @@ module Primer
 
     class << self
       def ignore_preview?(preview_class)
-        preview_class.name.start_with?("Docs::") || IGNORED_PREVIEWS.include?(preview_class)
+        IGNORED_PREVIEWS.include?(preview_class)
       end
 
       def axe_rules_to_skip(component: nil, scenario_name: nil, flatten: false)

data/lib/primer/deprecations.yml

@@ -20,7 +20,7 @@ deprecations:
   - component: "Primer::ButtonComponent"
     autocorrect: false
     replacement: "Primer::Beta::Button"
-    guide: "https://primer.style/view-components/guides/primer_button_component"
+    guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-button-component"
 
   - component: "Primer::IconButton"
     autocorrect: true
@@ -29,7 +29,7 @@ deprecations:
   - component: "Primer::LayoutComponent"
     autocorrect: false
     replacement: "Primer::Alpha::Layout"
-    guide: "https://primer.style/view-components/guides/primer_layout_component"
+    guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-layout-component"
 
   - component: "Primer::Navigation::TabComponent"
     autocorrect: true
@@ -42,4 +42,4 @@ deprecations:
   - component: "Primer::Truncate"
     autocorrect: false
     replacement: "Primer::Beta::Truncate"
-    guide: "https://primer.style/view-components/guides/primer_truncate"
+    guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-truncate"

data/lib/primer/forms/dsl/input.rb

@@ -115,6 +115,7 @@ module Primer
           end
 
           add_input_aria(:required, true) if required?
+          add_input_aria(:invalid, true) if invalid?
           add_input_aria(:describedby, ids.values) if ids.any?
 
           # avoid browser-native validation, which doesn't match Primer's style

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

@@ -11,7 +11,7 @@ module ERBLint
           include Helpers::RuleHelpers
 
           MIGRATE_FROM_DETAILS_MENU = "<details-menu> has been deprecated. Please instead use Primer::Alpha::ActionMenu" \
-            "https://primer.style/design/components/action-menu/rails/alpha"
+            " https://primer.style/design/components/action-menu/rails/alpha"
           DETAILS_MENU_RUBY_PATTERN = /tag:?\s+:"details-menu"/.freeze
 
           def run(processed_source)

data/lib/primer/view_components/linters/migrations/truncate_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module RuboCop
+  module Cop
+    module Migrations
+      # Lint & autocorrect Truncate components
+      class TruncateComponent < RuboCop::Cop::Cop
+        INVALID_MESSAGE = <<~STR
+          `Primer::Truncate` is deprecated. Please use `Primer::Beta::Truncate` instead!
+        STR
+
+        def_node_matcher :truncate_component, <<~PATTERN
+          (send (const (const nil? :Primer) :Truncate) :new ...)
+        PATTERN
+
+        def_node_matcher :hash_with_inline_value?, <<~PATTERN
+          (hash ... (pair (sym :inline) (...)) ... )
+        PATTERN
+
+        def_node_matcher :truncate_with_tag?, <<~PATTERN
+          (hash ... (pair (sym :tag) (...)) ... )
+        PATTERN
+
+        def on_send(node)
+          return unless truncate_component(node)
+
+          add_offense(node, message: INVALID_MESSAGE)
+        end
+
+        def autocorrect(node)
+          return if hash_with_inline_value?(node.arguments.first)
+
+          lambda do |corrector|
+            if node.arguments.first.nil? == false
+              corrector.replace(node.children.first, "Primer::Beta::Truncate")
+              corrector.insert_after(node.arguments.first, ", tag: :div") unless truncate_with_tag?(node.arguments.first)
+            else
+              corrector.replace(node.loc.expression, "Primer::Beta::Truncate.new(tag: :div)")
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -10,7 +10,7 @@ module ERBLint
           include LinterRegistry
           include Helpers::RuleHelpers
 
-          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://github.com/primer/view_components/blob/main/docs/content/guides/accessibility/tooltipped_migration.md."
+          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://primer.style/design/guides/development/rails/migration-guides/primer-css-tooltipped."
           TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
 
           def run(processed_source)

data/lib/primer/view_components/linters.rb

@@ -1,3 +1,4 @@
 # frozen_string_literal: true
 
 Dir[File.join(__dir__, "linters", "*.rb")].sort.each { |file| require file }
+Dir[File.join(__dir__, "linters", "migrations", "*.rb")].sort.each { |file| require file }

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 6
-      PATCH = 3
+      MINOR = 8
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/view_components.rb

@@ -7,9 +7,27 @@ require "primer/view_components/engine"
 module Primer
   # :nodoc:
   module ViewComponents
+    DEPRECATION_HORIZON = "1.0"
+
     # primer/view_components root directory.
     def self.root
       Pathname(File.expand_path(File.join("..", ".."), __dir__))
     end
+
+    # Skip coverage here because only one branch will execute depending on what
+    # Rails version you're running.
+
+    # :nocov:
+    def self.deprecation
+      @deprecation ||=
+        if Rails.application.respond_to?(:deprecators)
+          Rails.application.deprecators[:primer_view_components] ||= ActiveSupport::Deprecation.new(
+            DEPRECATION_HORIZON, "primer_view_components"
+          )
+        else
+          ActiveSupport::Deprecation.instance
+        end
+    end
+    # :nocov:
   end
 end

data/lib/primer/yard.rb

@@ -5,15 +5,14 @@ require "yard"
 module Primer
   # :nodoc:
   module Yard
-    autoload :Backend,              "primer/yard/backend"
-    autoload :ComponentManifest,    "primer/yard/component_manifest"
-    autoload :ComponentRef,         "primer/yard/component_ref"
-    autoload :DocsHelper,           "primer/yard/docs_helper"
-    autoload :InfoArchDocsHelper,   "primer/yard/info_arch_docs_helper"
-    autoload :LegacyGatsbyBackend,  "primer/yard/legacy_gatsby_backend"
-    autoload :Registry,             "primer/yard/registry"
-    autoload :RendersManyHandler,   "primer/yard/renders_many_handler"
-    autoload :RendersOneHandler,    "primer/yard/renders_one_handler"
+    autoload :Backend,            "primer/yard/backend"
+    autoload :ComponentManifest,  "primer/yard/component_manifest"
+    autoload :ComponentRef,       "primer/yard/component_ref"
+    autoload :DocsHelper,         "primer/yard/docs_helper"
+    autoload :InfoArchDocsHelper, "primer/yard/info_arch_docs_helper"
+    autoload :Registry,           "primer/yard/registry"
+    autoload :RendersManyHandler, "primer/yard/renders_many_handler"
+    autoload :RendersOneHandler,  "primer/yard/renders_one_handler"
 
     ::YARD::Tags::Library.define_tag("Snapshot preview", :snapshot)
   end

data/previews/primer/beta/button_preview/leading_visual.html.erb

@@ -2,9 +2,9 @@
     scheme: scheme,
     size: size,
     block: block,
-    id: id,
+    id: "button-preview",
     align_content: align_content
 )) do |component| %>
   <% component.with_leading_visual_icon(icon: :search) %>
-  Button
+  Search
 <% end %>

data/previews/primer/beta/button_preview/leading_visual_svg.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: "button-preview",
+    align_content: align_content
+)) do |component| %>
+  <% component.with_leading_visual_svg do %>
+    <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
+  <% end %>
+  Button
+<% end %>

data/previews/primer/beta/button_preview/trailing_counter.html.erb

@@ -7,5 +7,5 @@
 )) do |component| %>
   <% component.with_leading_visual_icon(icon: :star) %>
   <% component.with_trailing_visual_counter(count: 15) %>
-  Button
+  Star
 <% end %>

data/previews/primer/beta/button_preview/trailing_visual.html.erb

@@ -7,5 +7,5 @@
     tag: tag
 )) do |component| %>
   <% component.with_trailing_visual_counter(count: "15") %>
-  Button
+  Comment
 <% end %>

data/previews/primer/beta/button_preview.rb

@@ -264,6 +264,28 @@ module Primer
                              })
       end
 
+      # @label Leading visual SVG
+      # @param scheme select [default, primary, danger, invisible, link]
+      # @param size select [small, medium]
+      # @param block toggle
+      # @param align_content select [center, start]
+      # @snapshot
+      def leading_visual_svg(
+        scheme: :invisible,
+        size: :medium,
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               scheme: scheme,
+                               size: size,
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
       # @label Trailing action
       # @param block toggle
       # @param align_content select [center, start]