primer_view_components 0.0.88 → 0.0.91

data/app/components/primer/dropdown.rb

@@ -25,11 +25,11 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -42,11 +42,11 @@ module Primer
     #     Dividers can be used to separate a group of items. They don't have any content.
     #   @code
     #     <%= render(Primer::Dropdown.new) do |c| %>
-    #       <% c.button do %>
+    #       <% c.with_button do %>
     #         Dropdown
     #       <% end %>
     #
-    #       <% c.menu(header: "Options") do |menu|
+    #       <% c.with_menu(header: "Options") do |menu|
     #         menu.item { "Item 1" }
     #         menu.item { "Item 2" }
     #         menu.item(divider: true)
@@ -60,11 +60,11 @@ module Primer
     #
     # @example With direction
     #   <%= render(Primer::Dropdown.new(display: :inline_block)) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options", direction: :s) do |menu|
+    #     <% c.with_menu(header: "Options", direction: :s) do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -74,11 +74,11 @@ module Primer
     #
     # @example With caret
     #   <%= render(Primer::Dropdown.new(with_caret: true)) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -88,11 +88,11 @@ module Primer
     #
     # @example Customizing the button
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button(scheme: :primary, size: :small) do %>
+    #     <% c.with_button(scheme: :primary, size: :small) do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item { "Item 3" }
@@ -102,11 +102,11 @@ module Primer
     #
     # @example Menu as list
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(as: :list, header: "Options") do |menu|
+    #     <% c.with_menu(as: :list, header: "Options") do |menu|
     #       menu.item { "Item 1" }
     #       menu.item { "Item 2" }
     #       menu.item(divider: true)
@@ -117,18 +117,18 @@ module Primer
     #
     # @example Customizing menu items
     #   <%= render(Primer::Dropdown.new) do |c| %>
-    #     <% c.button do %>
+    #     <% c.with_button do %>
     #       Dropdown
     #     <% end %>
     #
-    #     <% c.menu(header: "Options") do |menu|
+    #     <% c.with_menu(header: "Options") do |menu|
     #       menu.item(tag: :button) { "Item 1" }
     #       menu.item(classes: "custom-class") { "Item 2" }
     #       menu.item { "Item 3" }
     #     end %>
     #   <% end %>
     #
-    # @param overlay [Symbol] <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
+    # @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
     # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(overlay: :default, with_caret: false, **system_arguments)

data/app/components/primer/dropdown_menu_component.rb

@@ -18,7 +18,7 @@ module Primer
 
     # @example With a header
     #   <div>
-    #     <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
+    #     <%= render(Primer::Beta::Details.new(overlay: :default, reset: true, position: :relative)) do |c| %>
     #       <% c.summary do %>
     #         Dropdown
     #       <% end %>

data/app/components/primer/heading_component.rb

@@ -1,44 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `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 HeadingComponent < Primer::Component
-    status :beta
-
-    TAG_FALLBACK = :h2
-    TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
-
-    # @example Default
-    #   <%= render(Primer::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h4)) { "H4 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h5)) { "H5 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h6)) { "H6 Text" } %>
-    #
-    # @param tag [String]  <%= one_of(Primer::HeadingComponent::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
+  class HeadingComponent < Primer::Beta::Heading
+    status :deprecated
   end
 end

data/app/components/primer/hidden_text_expander.rb

@@ -1,53 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `HiddenTextExpander` to indicate and toggle hidden text.
-  #
-  # @accessibility
-  #   `HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.
-  #   The `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,
-  #   if your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be
-  #   `"Expand 5 more comments"` instead of `"More"`.
-  class HiddenTextExpander < Primer::Component
-    # @example Default
-    #   <%= render(Primer::HiddenTextExpander.new("aria-label": "No effect")) %>
-    #
-    # @example Inline
-    #   <%= render(Primer::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
-    #
-    # @example Styling the button
-    #   <%= render(Primer::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
-    #
-    # @param inline [Boolean] Whether or not the expander is inline.
-    # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(inline: false, button_arguments: {}, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @button_arguments = button_arguments
-
-      @system_arguments[:tag] = :span
-      @system_arguments[:classes] = class_names(
-        "hidden-text-expander",
-        @system_arguments[:classes],
-        "inline" => inline
-      )
-
-      aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
-      if aria_label.present?
-        @button_arguments[:"aria-label"] = aria_label
-        @system_arguments[:aria]&.delete(:label)
-      end
-
-      @button_arguments[:classes] = class_names(
-        "ellipsis-expander",
-        button_arguments[:classes]
-      )
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) do
-        render(Primer::HellipButton.new(**@button_arguments))
-      end
-    end
+  class HiddenTextExpander < Primer::Alpha::HiddenTextExpander
+    status :deprecated
   end
 end

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

@@ -1,6 +1,12 @@
-<%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+<% if render_tooltip? %>
+  <%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= render Primer::OcticonComponent.new(icon: @icon) %>
+    <% end -%>
+    <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
+  <% end %>
+<% else %>
   <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
     <%= render Primer::OcticonComponent.new(icon: @icon) %>
   <% end -%>
-  <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
 <% end %>

data/app/components/primer/icon_button.rb

@@ -3,6 +3,7 @@
 module Primer
   # Use `IconButton` to render Icon-only buttons without the default button styles.
   #
+  # `IconButton` will always render with a tooltip unless the tag is `:summary`.
   # @accessibility
   #   `IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.
   #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
@@ -97,5 +98,11 @@ module Primer
         @tooltip_arguments[:type] = :label
       end
     end
+
+    private
+
+    def render_tooltip?
+      @system_arguments[:tag] != :summary
+    end
   end
 end

data/app/components/primer/image_crop.rb

@@ -21,7 +21,7 @@ module Primer
     #
     # @example Cropper with a custom loader
     #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
-    #     <% cropper.loading(style: "width: 120px").with_content("Loading...") %>
+    #     <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
     #   <% end %>
     #
     # @param src [String] The path of the image to crop.

data/app/components/primer/label_component.rb

@@ -77,7 +77,8 @@ module Primer
 
       @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, nil, deprecated_values: DEPRECATED_VARIANT_OPTIONS)
       @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)
-      @size = fetch_or_fallback(SIZE_OPTIONS, size) || @variant == :large ? :large : nil || DEFAULT_SIZE
+      @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+      @size = :large if @variant == :large
       @inline = inline || @variant == :inline
 
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)

data/app/components/primer/layout_component.rb

@@ -38,14 +38,14 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::LayoutComponent.new) do |component| %>
-    #     <% component.sidebar { "Sidebar" } %>
-    #     <% component.main { "Main" } %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
     #   <% end %>
     #
     # @example Left sidebar
     #   <%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
-    #     <% component.sidebar { "Sidebar" } %>
-    #     <% component.main { "Main" } %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
     #   <% end %>
     #
     # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.

data/app/components/primer/link_component.rb

@@ -50,7 +50,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::LinkComponent.new(href: "#", id: "link-with-tooltip")) do |c| %>
-    #       <% c.tooltip(text: "Tooltip text") %>
+    #       <% c.with_tooltip(text: "Tooltip text") %>
     #       Link
     #     <% end %>
     #

data/app/components/primer/menu_component.rb

@@ -40,20 +40,20 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::MenuComponent.new) do |c| %>
-    #     <% c.heading(tag: :h2) do %>
+    #     <% c.with_heading(tag: :h2) do %>
     #       Heading
     #     <% end %>
-    #     <% c.item(selected: true, href: "#url") do %>
+    #     <% c.with_item(selected: true, href: "#url") do %>
     #       Item 1
     #     <% end %>
-    #     <% c.item(href: "#url") do %>
+    #     <% c.with_item(href: "#url") do %>
     #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon
     #     <% end %>
-    #     <% c.item(href: "#url") do %>
+    #     <% c.with_item(href: "#url") do %>
     #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon and Counter
-    #       <%= render(Primer::CounterComponent.new(count: 25)) %>
+    #       <%= render(Primer::Beta::Counter.new(count: 25)) %>
     #     <% end %>
     #   <% end %>
     #

data/app/components/primer/navigation/tab_component.rb

@@ -57,37 +57,37 @@ module Primer
 
       # Counter to be rendered in the Tab right.
       #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::CounterComponent) %>.
-      renders_one :counter, Primer::CounterComponent
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
+      renders_one :counter, Primer::Beta::Counter
 
       attr_reader :selected
 
       # @example Default
       #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
-      #     <% c.text { "Selected" } %>
+      #     <% c.with_text { "Selected" } %>
       #   <% end %>
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.text { "Not selected" } %>
+      #     <% c.with_text { "Not selected" } %>
       #   <% end %>
       #
       # @example With icons and counters
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.icon(:star) %>
-      #     <% c.text { "Tab" } %>
+      #     <% c.with_icon(:star) %>
+      #     <% c.with_text { "Tab" } %>
       #   <% end %>
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.icon(:star) %>
-      #     <% c.text { "Tab" } %>
-      #     <% c.counter(count: 10) %>
+      #     <% c.with_icon(:star) %>
+      #     <% c.with_text { "Tab" } %>
+      #     <% c.with_counter(count: 10) %>
       #   <% end %>
       #   <%= render(Primer::Navigation::TabComponent.new) do |c| %>
-      #     <% c.text { "Tab" } %>
-      #     <% c.counter(count: 10) %>
+      #     <% c.with_text { "Tab" } %>
+      #     <% c.with_counter(count: 10) %>
       #   <% end %>
       #
       # @example Inside a list
       #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
-      #     <% c.text { "Tab" } %>
+      #     <% c.with_text { "Tab" } %>
       #   <% end %>
       #
       # @example With custom HTML

data/app/components/primer/popover_component.rb

@@ -27,13 +27,13 @@ module Primer
 
     # The heading
     #
-    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
+    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
       system_arguments[:tag] = tag
       system_arguments[:mb] ||= 2
 
-      Primer::HeadingComponent.new(**system_arguments)
+      Primer::Beta::Heading.new(**system_arguments)
     }
 
     # The body
@@ -60,40 +60,40 @@ module Primer
 
     # @example Default
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body do %>
+    #     <% component.with_body do %>
     #       This is the Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Large
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body(large: true) do %>
+    #     <% component.with_body(large: true) do %>
     #       This is the large Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example Caret position
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body(caret: :left) do %>
+    #     <% component.with_body(caret: :left) do %>
     #       This is the Popover body.
     #     <% end %>
     #   <% end %>
     #
     # @example With multiple elements in the body
     #   <%= render Primer::PopoverComponent.new do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       Activity feed
     #     <% end %>
-    #     <% component.body(caret: :left) do %>
+    #     <% component.with_body(caret: :left) do %>
     #       <p>This is the Popover body.</p>
     #       <%= render Primer::ButtonComponent.new(type: :submit) do %>
     #         Got it!

data/app/components/primer/primer.pcss

@@ -0,0 +1 @@
+/* CSS component styles here */

data/app/components/primer/subhead_component.rb

@@ -56,27 +56,27 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading(tag: :h3) do %>
+    #     <% component.with_heading(tag: :h3) do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example With dangerous heading
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading(tag: :h3, danger: true) do %>
+    #     <% component.with_heading(tag: :h3, danger: true) do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example With long description
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading(tag: :h3) do %>
+    #     <% component.with_heading(tag: :h3) do %>
     #       My Heading
     #     <% end %>
     #   <% end %>
@@ -84,23 +84,23 @@ module Primer
     #
     # @example Without border
     #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
     #   <% end %>
     #
     # @example With actions
     #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.heading do %>
+    #     <% component.with_heading do %>
     #       My Heading
     #     <% end %>
-    #     <% component.description do %>
+    #     <% component.with_description do %>
     #       My Description
     #     <% end %>
-    #     <% component.actions do %>
+    #     <% component.with_actions do %>
     #       <%= render(
     #         Primer::ButtonComponent.new(
     #           tag: :a, href: "http://www.google.com", scheme: :danger

data/app/components/primer/timeline_item_component.rb

@@ -40,9 +40,9 @@ module Primer
     # @example Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
-    #       <% component.body { "Success!" } %>
+    #       <% component.with_avatar(src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
+    #       <% component.with_body { "Success!" } %>
     #     <% end %>
     #   </div>
     #

data/app/lib/primer/join_style_arguments_helper.rb

@@ -8,7 +8,7 @@ module Primer
     # join_style_arguments("width: 100%", "height: 100%") =>
     #   "width: 100%;height: 100%"
     def join_style_arguments(*args)
-      args.compact.map { |a| a.strip.chomp(";") }.join(";")
+      args.compact.join(";")
     end
   end
 end

data/app/lib/primer/view_helper.rb

@@ -8,7 +8,7 @@ module Primer
 
     HELPERS = {
       octicon: "Primer::OcticonComponent",
-      heading: "Primer::HeadingComponent",
+      heading: "Primer::Beta::Heading",
       time_ago: "Primer::TimeAgoComponent",
       image: "Primer::Image"
     }.freeze

data/lib/primer/view_components/linters/argument_mappers/close_button.rb

@@ -10,12 +10,12 @@ module ERBLint
         ATTRIBUTES = %w[type].freeze
 
         TYPE_OPTIONS = Primer::ViewComponents::Constants.get(
-          component: "Primer::CloseButton",
+          component: "Primer::Beta::CloseButton",
           constant: "TYPE_OPTIONS"
         ).freeze
 
         DEFAULT_TYPE = Primer::ViewComponents::Constants.get(
-          component: "Primer::CloseButton",
+          component: "Primer::Beta::CloseButton",
           constant: "DEFAULT_TYPE"
         ).freeze
 

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

@@ -14,9 +14,9 @@ module ERBLint
 
       TAGS = %w[button].freeze
       CLASSES = %w[close-button].freeze
-      MESSAGE = "We are migrating close-button to use [Primer::CloseButton](https://primer.style/view-components/components/closebutton), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating close-button to use [Primer::Beta::CloseButton](https://primer.style/view-components/components/closebutton), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::CloseButton
-      COMPONENT = "Primer::CloseButton"
+      COMPONENT = "Primer::Beta::CloseButton"
 
       ALLOWED_OCTICON_ARGS = %w[icon aria-label aria].freeze
 

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

@@ -12,7 +12,7 @@ module ERBLint
 
       TAGS = %w[div].freeze
       CLASSES = %w[flash].freeze
-      MESSAGE = "We are migrating flashes to use [Primer::Beta::Flash](https://primer.style/view-components/components/flash), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating flashes to use [Primer::Beta::Flash](https://primer.style/view-components/components/beta/flash), please try to use that instead of raw HTML."
       ARGUMENT_MAPPER = ArgumentMappers::Flash
       COMPONENT = "Primer::Beta::Flash"
 

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

@@ -7,7 +7,12 @@ module ERBLint
       module DeprecatedComponentsHelpers
         # If there is no alternative to suggest, set the value to nil
         COMPONENT_TO_USE_INSTEAD = {
+          "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
+          "Primer::HeadingComponent" => "Primer::Beta::Heading",
           "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
+          "Primer::CloseButton" => "Primer::Beta::CloseButton",
+          "Primer::CounterComponent" => "Primer::Beta::Counter",
+          "Primer::DetailsComponent" => "Primer::Beta::Details",
           "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
           "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",

data/lib/primer/view_components/version.rb

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

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

@@ -15,8 +15,13 @@ module RuboCop
       # Primer::Beta::ComponentName.new()
       class ComponentNameMigration < BaseCop
         DEPRECATIONS = {
+          "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
+          "Primer::DetailsComponent" => "Primer::Beta::Details",
+          "Primer::HeadingComponent" => "Primer::Beta::Heading",
           "Primer::BoxComponent" => "Primer::Box",
           "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
+          "Primer::CloseButton" => "Primer::Beta::CloseButton",
+          "Primer::CounterComponent" => "Primer::Beta::Counter",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
           "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
           "Primer::BaseButton" => "Primer::Beta::BaseButton",

data/lib/tasks/docs.rake

@@ -50,16 +50,16 @@ namespace :docs do
       Primer::Beta::ButtonGroup,
       Primer::Alpha::ButtonMarketing,
       Primer::ClipboardCopy,
-      Primer::CloseButton,
-      Primer::CounterComponent,
-      Primer::DetailsComponent,
+      Primer::Beta::CloseButton,
+      Primer::Beta::Counter,
+      Primer::Beta::Details,
       Primer::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,
       Primer::FlexComponent,
       Primer::FlexItemComponent,
-      Primer::HeadingComponent,
-      Primer::HiddenTextExpander,
+      Primer::Beta::Heading,
+      Primer::Alpha::HiddenTextExpander,
       Primer::LabelComponent,
       Primer::LayoutComponent,
       Primer::LinkComponent,