primer_view_components 0.0.88 → 0.0.91

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

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Counter` to add a count to navigational elements and buttons.
+    #
+    # @accessibility
+    #   Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
+    #   should be accompanied with text such as `issues` or `pull requests`.
+    #
+    class Counter < Primer::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Counter--primary",
+        :secondary => "Counter--secondary",
+        # deprecated
+        :gray => "Counter--primary",
+        :light_gray => "Counter--secondary"
+      }.freeze
+      DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
+      SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
+
+      #
+      # @example Default
+      #   <%= render(Primer::Beta::Counter.new(count: 25)) %>
+      #
+      # @example Schemes
+      #   <%= render(Primer::Beta::Counter.new(count: 25, scheme: :primary)) %>
+      #   <%= render(Primer::Beta::Counter.new(count: 25, scheme: :secondary)) %>
+      #
+      # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
+      # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::Counter::SCHEME_OPTIONS) %>
+      # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
+      # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
+      # @param text [String] Text to display instead of count.
+      # @param round [Boolean] Whether to apply our standard rounding logic to value.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        count: 0,
+        scheme: DEFAULT_SCHEME,
+        limit: 5_000,
+        hide_if_zero: false,
+        text: "",
+        round: false,
+        **system_arguments
+      )
+        @count = count
+        @limit = limit
+        @hide_if_zero = hide_if_zero
+        @text = text
+        @round = round
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @has_limit = !@limit.nil?
+        @system_arguments[:title] = title
+        @system_arguments[:tag] = :span
+        @system_arguments[:classes] = class_names(
+          "Counter",
+          @system_arguments[:classes],
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)]
+        )
+        @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { value }
+      end
+
+      private
+
+      def title
+        if @text.present?
+          @text
+        elsif @count.nil?
+          "Not available"
+        elsif @count == Float::INFINITY
+          "Infinity"
+        else
+          count = @count.to_i
+          str = number_with_delimiter(@has_limit ? [count, @limit].min : count)
+          str += "+" if @has_limit && count > @limit
+          str
+        end
+      end
+
+      def value
+        if @text.present?
+          @text
+        elsif @count.nil?
+          "" # CSS will hide it
+        elsif @count == Float::INFINITY
+          "∞"
+        else
+          if @round
+            count = @has_limit ? [@count.to_i, @limit].min : @count.to_i
+            precision = count.between?(100_000, 999_999) ? 0 : 1
+            units = { thousand: "k", million: "m", billion: "b" }
+            str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
+          else
+            @count = @count.to_i
+            str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count)
+          end
+
+          str += "+" if @has_limit && @count.to_i > @limit
+          str
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `DetailsComponent` to reveal content after clicking a button.
+    class Details < Primer::Component
+      status :beta
+
+      BODY_TAG_DEFAULT = :div
+      BODY_TAG_OPTIONS = [:ul, :"details-menu", :"details-dialog", BODY_TAG_DEFAULT].freeze
+      NO_OVERLAY = :none
+      OVERLAY_MAPPINGS = {
+        NO_OVERLAY => "",
+        :default => "details-overlay",
+        :dark => "details-overlay details-overlay-dark"
+      }.freeze
+
+      # Use the Summary slot as a trigger to reveal the content.
+      #
+      # @param button [Boolean] (true) Whether to render the Summary as a button or not.
+      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      renders_one :summary, lambda { |button: true, **system_arguments|
+        system_arguments[:tag] = :summary
+        system_arguments[:role] = "button"
+
+        return Primer::BaseComponent.new(**system_arguments) unless button
+
+        Primer::ButtonComponent.new(**system_arguments)
+      }
+
+      # Use the Body slot as the main content to be shown when triggered by the Summary.
+      #
+      # @param tag [Symbol] (Primer::Beta::Details::BODY_TAG_DEFAULT) <%= one_of(Primer::Beta::Details::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)
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #
+      #   <%= render Primer::Beta::Details.new do |c| %>
+      #     <% c.with_summary do %>
+      #       Summary
+      #     <% end %>
+      #     <% c.with_body do %>
+      #       Body
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
+      # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :details
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
+          "details-reset" => reset
+        )
+      end
+
+      def render?
+        summary.present? && body.present?
+      end
+    end
+  end
+end

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

@@ -42,7 +42,7 @@ module Primer
       # @example With actions
       #   <%= render(Primer::Beta::Flash.new) do |component| %>
       #     This is a flash message with actions!
-      #     <% component.action do %>
+      #     <% component.with_action do %>
       #       <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
       #     <% end %>
       #   <% end %>

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Heading` should be used to communicate page organization and hierarchy.
+    #
+    # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
+    # - Use `Heading` as the title of a section or sub section.
+    # - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Primer::Beta::Text) %> with relevant <%= link_to_typography_docs %>
+    #   such as `font_size` and `font_weight`.
+    # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
+    #
+    # @accessibility
+    #   While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
+    #   When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
+    #   consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
+    #
+    #   Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
+    #   <%= link_to_heading_practices %>
+    class Heading < Primer::Component
+      status :beta
+
+      TAG_FALLBACK = :h2
+      TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::Heading.new(tag: :h1)) { "H1 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h2)) { "H2 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h3)) { "H3 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h4)) { "H4 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h5)) { "H5 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>
+      #
+      # @param tag [String]  <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag:, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_FALLBACK)
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -19,49 +19,49 @@ module Primer
       #
       # @example Multiple items
       #   <%= render(Primer::Beta::Truncate.new) do |component| %>
-      #     <% component.item do %>really-long-repository-owner-name<% end %>
-      #     <% component.item(font_weight: :bold) do %>
+      #     <% 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.item(tag: :li) do %>primer<% end %>
-      #     <% component.item(tag: :li, priority: true) do %>/ css<% end %>
-      #     <% component.item(tag: :li) do %>/ Issues<% end %>
-      #     <% component.item(tag: :li) do %>/ #123 —<% end %>
-      #     <% component.item(tag: :li, priority: true) do %>
+      #     <% 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.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
-      #     <% component.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 %>
+      #     <% 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.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.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.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 %>
+      #     <% 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.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: 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.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: 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.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 %>
+      #     <% 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 %>

data/app/components/primer/blankslate_component.rb

@@ -41,7 +41,7 @@ module Primer
     #       title: "Title",
     #       description: "Description",
     #     ) do |component| %>
-    #       <% component.spinner(size: :large) %>
+    #       <% component.with_spinner(size: :large) %>
     #     <% end %>
     #
     # @example Custom content

data/app/components/primer/button_component.rb

@@ -44,14 +44,14 @@ module Primer
     #
     # Use:
     #
-    # - `trailing_visual_counter` for a <%= link_to_component(Primer::CounterComponent) %>.
+    # - `trailing_visual_counter` for a <%= link_to_component(Primer::Beta::Counter) %>.
     #
-    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::CounterComponent) %>.
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
     renders_one :trailing_visual, types: {
       counter: lambda { |**system_arguments|
         system_arguments[:ml] = 2
 
-        Primer::CounterComponent.new(**system_arguments)
+        Primer::Beta::Counter.new(**system_arguments)
       }
     }
     alias counter trailing_visual_counter # remove alias when all buttons are migrated to new slot names
@@ -89,20 +89,20 @@ module Primer
     #
     # @example With leading visual
     #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.leading_visual_icon(icon: :star) %>
+    #     <% c.with_leading_visual_icon(icon: :star) %>
     #     Button
     #   <% end %>
     #
     # @example With trailing visual
     #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.trailing_visual_counter(count: 15) %>
+    #     <% c.with_trailing_visual_counter(count: 15) %>
     #     Button
     #   <% end %>
     #
     # @example With leading and trailing visuals
     #   <%= render(Primer::ButtonComponent.new) do |c| %>
-    #     <% c.leading_visual_icon(icon: :star) %>
-    #     <% c.trailing_visual_counter(count: 15) %>
+    #     <% c.with_leading_visual_icon(icon: :star) %>
+    #     <% c.with_trailing_visual_counter(count: 15) %>
     #     Button
     #   <% end %>
     #
@@ -116,7 +116,7 @@ module Primer
     #     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 |c| %>
-    #       <% c.tooltip(text: "Tooltip text") %>
+    #       <% c.with_tooltip(text: "Tooltip text") %>
     #       Button
     #     <% end %>
     #

data/app/components/primer/close_button.rb

@@ -1,39 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `CloseButton` to render an `×` without default button styles.
-  #
-  # @accessibility
-  #   `CloseButton` has a default `aria-label` of "Close" to provides assistive technologies with an accessible label.
-  #   You may choose to override this label with something more descriptive via [system_arguments][0].
-  # [0]: https://primer.style/view-components/system-arguments#html-attributes
-  class CloseButton < Primer::Component
-    status :beta
-
-    DEFAULT_TYPE = :button
-    TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
-
-    # @example Default
-    #   <%= render(Primer::CloseButton.new) %>
-    #
-    # @param type [Symbol] <%= one_of(Primer::CloseButton::TYPE_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(type: DEFAULT_TYPE, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :button
-      @system_arguments[:block] = false
-      @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
-      @system_arguments[:classes] = class_names(
-        "close-button",
-        system_arguments[:classes]
-      )
-      @system_arguments[:"aria-label"] ||= "Close"
-    end
-
-    def call
-      render(Primer::Beta::BaseButton.new(**@system_arguments)) do
-        render(Primer::OcticonComponent.new("x"))
-      end
-    end
+  class CloseButton < Primer::Beta::CloseButton
+    status :deprecated
   end
 end

data/app/components/primer/counter_component.rb

@@ -1,111 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Counter` to add a count to navigational elements and buttons.
-  #
-  # @accessibility
-  #   Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
-  #   should be accompanied with text such as `issues` or `pull requests`.
-  #
-  class CounterComponent < Primer::Component
-    status :beta
-
-    DEFAULT_SCHEME = :default
-    SCHEME_MAPPINGS = {
-      DEFAULT_SCHEME => "",
-      :primary => "Counter--primary",
-      :secondary => "Counter--secondary",
-      # deprecated
-      :gray => "Counter--primary",
-      :light_gray => "Counter--secondary"
-    }.freeze
-    DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
-    SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
-
-    #
-    # @example Default
-    #   <%= render(Primer::CounterComponent.new(count: 25)) %>
-    #
-    # @example Schemes
-    #   <%= render(Primer::CounterComponent.new(count: 25, scheme: :primary)) %>
-    #   <%= render(Primer::CounterComponent.new(count: 25, scheme: :secondary)) %>
-    #
-    # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
-    # @param scheme [Symbol] Color scheme. <%= one_of(Primer::CounterComponent::SCHEME_OPTIONS) %>
-    # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
-    # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
-    # @param text [String] Text to display instead of count.
-    # @param round [Boolean] Whether to apply our standard rounding logic to value.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(
-      count: 0,
-      scheme: DEFAULT_SCHEME,
-      limit: 5_000,
-      hide_if_zero: false,
-      text: "",
-      round: false,
-      **system_arguments
-    )
-      @count = count
-      @limit = limit
-      @hide_if_zero = hide_if_zero
-      @text = text
-      @round = round
-      @system_arguments = deny_tag_argument(**system_arguments)
-
-      @has_limit = !@limit.nil?
-      @system_arguments[:title] = title
-      @system_arguments[:tag] = :span
-      @system_arguments[:classes] = class_names(
-        "Counter",
-        @system_arguments[:classes],
-        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)]
-      )
-      @system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { value }
-    end
-
-    private
-
-    def title
-      if @text.present?
-        @text
-      elsif @count.nil?
-        "Not available"
-      elsif @count == Float::INFINITY
-        "Infinity"
-      else
-        count = @count.to_i
-        str = number_with_delimiter(@has_limit ? [count, @limit].min : count)
-        str += "+" if @has_limit && count > @limit
-        str
-      end
-    end
-
-    def value
-      if @text.present?
-        @text
-      elsif @count.nil?
-        "" # CSS will hide it
-      elsif @count == Float::INFINITY
-        "∞"
-      else
-        if @round
-          count = @has_limit ? [@count.to_i, @limit].min : @count.to_i
-          precision = count.between?(100_000, 999_999) ? 0 : 1
-          units = { thousand: "k", million: "m", billion: "b" }
-          str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
-        else
-          @count = @count.to_i
-          str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count)
-        end
-
-        str += "+" if @has_limit && @count.to_i > @limit
-        str
-      end
-    end
+  class CounterComponent < Primer::Beta::Counter
+    status :deprecated
   end
 end

data/app/components/primer/details_component.rb

@@ -1,68 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `DetailsComponent` to reveal content after clicking a button.
-  class DetailsComponent < Primer::Component
-    status :beta
-
-    BODY_TAG_DEFAULT = :div
-    BODY_TAG_OPTIONS = [:ul, :"details-menu", :"details-dialog", BODY_TAG_DEFAULT].freeze
-    NO_OVERLAY = :none
-    OVERLAY_MAPPINGS = {
-      NO_OVERLAY => "",
-      :default => "details-overlay",
-      :dark => "details-overlay details-overlay-dark"
-    }.freeze
-
-    # Use the Summary slot as a trigger to reveal the content.
-    #
-    # @param button [Boolean] (true) Whether to render the Summary as a button or not.
-    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_one :summary, lambda { |button: true, **system_arguments|
-      system_arguments[:tag] = :summary
-      system_arguments[:role] = "button"
-
-      return Primer::BaseComponent.new(**system_arguments) unless button
-
-      Primer::ButtonComponent.new(**system_arguments)
-    }
-
-    # Use the Body slot as the main content to be shown when triggered by the Summary.
-    #
-    # @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)
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #
-    #   <%= render Primer::DetailsComponent.new do |c| %>
-    #     <% 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) %>
-    # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :details
-      @system_arguments[:classes] = class_names(
-        system_arguments[:classes],
-        OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
-        "details-reset" => reset
-      )
-    end
-
-    def render?
-      summary.present? && body.present?
-    end
+  class DetailsComponent < Primer::Beta::Details
+    status :deprecated
   end
 end

data/app/components/primer/dropdown.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::DetailsComponent.new(**@system_arguments)) do |c| %>
+<%= render(Primer::Beta::Details.new(**@system_arguments)) do |c| %>
   <% c.summary(**@button_arguments) do %>
     <%= button %>
   <% end %>