move Primer::BorderBoxComponent and Header, to Beta::BorderBox

.changeset/moody-readers-punch.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+migrating `Primer::BorderBoxComponent` to `Primer::Beta::BorderBox`

app/components/primer/beta/border_box.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `BorderBox` is a Box component with a border.
+    class BorderBox < Primer::Component
+      status :beta
+
+      DEFAULT_PADDING = :default
+      PADDING_MAPPINGS = {
+        DEFAULT_PADDING => "",
+        :condensed => "Box--condensed",
+        :spacious => "Box--spacious"
+      }.freeze
+      PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
+
+      DEFAULT_ROW_SCHEME = :default
+      ROW_SCHEME_MAPPINGS = {
+        DEFAULT_ROW_SCHEME => "",
+        :neutral => "Box-row--gray",
+        :info => "Box-row--blue",
+        :warning => "Box-row--yellow"
+      }.freeze
+
+      # Optional Header.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @accessibility
+      # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+      renders_one :header, "Primer::Beta::BorderBox::Header"
+
+      # Optional Body.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-body",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Optional Footer.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-footer",
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Use Rows to add rows with borders and maintain the same padding.
+      #
+      # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::BorderBox::ROW_SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
+        system_arguments[:tag] = :li
+        system_arguments[:classes] = class_names(
+          "Box-row",
+          ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
+          system_arguments[:classes]
+        )
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Header with title, body, rows, and footer
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.header do |h| %>
+      #       <% h.title(tag: :h2) do %>
+      #         Header
+      #       <% end %>
+      #     <% end %>
+      #     <% component.body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.row do %>
+      #       <% if true %>
+      #         Row one
+      #       <% end %>
+      #     <% end %>
+      #     <% component.row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Padding density
+      #   <%= render(Primer::Beta::BorderBox.new(padding: :condensed)) do |component| %>
+      #     <% component.header do %>
+      #       Header
+      #     <% end %>
+      #     <% component.body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Row colors
+      #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+      #     <% component.row do %>
+      #       Default
+      #     <% end %>
+      #     <% component.row(scheme: :neutral) do %>
+      #       Neutral
+      #     <% end %>
+      #     <% component.row(scheme: :info) do %>
+      #       Info
+      #     <% end %>
+      #     <% component.row(scheme: :warning) do %>
+      #       Warning
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(padding: DEFAULT_PADDING, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "Box",
+          PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
+          system_arguments[:classes]
+        )
+
+        @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
+      end
+
+      def render?
+        rows.any? || header.present? || body.present? || footer.present?
+      end
+    end
+  end
+end

app/components/primer/alpha/border_box/header.rb → app/components/primer/beta/border_box/header.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Primer
-  module Alpha
-    module BorderBox
+  module Beta
+    class BorderBox
       # `BorderBox::Header` is used inside `BorderBox` to render its header slot.
       #
       # @accessibility When using `header.title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
@@ -12,7 +12,7 @@ class Header < Primer::Component
 
         # Optional Title.
         #
-        # @param tag [Symbol] <%= one_of(Primer::Alpha::BorderBox::Header::TITLE_TAG_OPTIONS) %>
+        # @param tag [Symbol] <%= one_of(Primer::Beta::BorderBox::Header::TITLE_TAG_OPTIONS) %>
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :title, lambda { |tag:, **system_arguments|
           system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
@@ -24,14 +24,14 @@ class Header < Primer::Component
           Primer::BaseComponent.new(**system_arguments)
         }
 
-        # @example default use case
+        # @example Default
         #
-        #   <%= render(Primer::Alpha::BorderBox::Header.new) do %>
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do %>
         #     Header
         #   <% end %>
         #
         # @example with title
-        #   <%= render(Primer::Alpha::BorderBox::Header.new) do |h| %>
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do |h| %>
         #     <% h.title(tag: :h3) do %>I am a title<% end %>
         #   <% end %>
         #

app/components/primer/border_box_component.rb

@@ -1,145 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `BorderBox` is a Box component with a border.
-  class BorderBoxComponent < Primer::Component
-    status :beta
-
-    DEFAULT_PADDING = :default
-    PADDING_MAPPINGS = {
-      DEFAULT_PADDING => "",
-      :condensed => "Box--condensed",
-      :spacious => "Box--spacious"
-    }.freeze
-    PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
-
-    DEFAULT_ROW_SCHEME = :default
-    ROW_SCHEME_MAPPINGS = {
-      DEFAULT_ROW_SCHEME => "",
-      :neutral => "Box-row--gray",
-      :info => "Box-row--blue",
-      :warning => "Box-row--yellow"
-    }.freeze
-
-    # Optional Header.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    # @accessibility
-    # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
-    renders_one :header, "Primer::Alpha::BorderBox::Header"
-
-    # Optional Body.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |**system_arguments|
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "Box-body",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Optional Footer.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :footer, lambda { |**system_arguments|
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "Box-footer",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Use Rows to add rows with borders and maintain the same padding.
-    #
-    # @param scheme [Symbol] Color scheme. <%= one_of(Primer::BorderBoxComponent::ROW_SCHEME_MAPPINGS.keys) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
-      system_arguments[:tag] = :li
-      system_arguments[:classes] = class_names(
-        "Box-row",
-        ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Header with title, body, rows, and footer
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
-    #     <% component.header do |h| %>
-    #       <% h.title(tag: :h2) do %>
-    #         Header
-    #       <% end %>
-    #     <% end %>
-    #     <% component.body do %>
-    #       Body
-    #     <% end %>
-    #     <% component.row do %>
-    #       <% if true %>
-    #         Row one
-    #       <% end %>
-    #     <% end %>
-    #     <% component.row do %>
-    #       Row two
-    #     <% end %>
-    #     <% component.footer do %>
-    #       Footer
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Padding density
-    #   <%= render(Primer::BorderBoxComponent.new(padding: :condensed)) do |component| %>
-    #     <% component.header do %>
-    #       Header
-    #     <% end %>
-    #     <% component.body do %>
-    #       Body
-    #     <% end %>
-    #     <% component.row do %>
-    #       Row two
-    #     <% end %>
-    #     <% component.footer do %>
-    #       Footer
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Row colors
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
-    #     <% component.row do %>
-    #       Default
-    #     <% end %>
-    #     <% component.row(scheme: :neutral) do %>
-    #       Neutral
-    #     <% end %>
-    #     <% component.row(scheme: :info) do %>
-    #       Info
-    #     <% end %>
-    #     <% component.row(scheme: :warning) do %>
-    #       Warning
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param padding [Symbol] <%= one_of(Primer::BorderBoxComponent::PADDING_MAPPINGS.keys) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(padding: DEFAULT_PADDING, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        "Box",
-        PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
-        system_arguments[:classes]
-      )
-
-      @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
-    end
-
-    def render?
-      rows.any? || header.present? || body.present? || footer.present?
-    end
+  class BorderBoxComponent < Primer::Beta::BorderBox
+    status :deprecated
   end
 end

app/components/primer/icon_button.rb

@@ -31,7 +31,7 @@ class IconButton < Primer::Component
     #
     # @example In a BorderBox
     #
-    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
+    #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
     #     <% component.body do %>
     #       <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
     #       <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
@@ -54,10 +54,10 @@ class IconButton < Primer::Component
     # @param icon [String] Name of <%= link_to_octicons %> to use.
     # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
     # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
-    # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::BorderBoxComponent) %>. If `true`, the button will have the `Box-btn-octicon` class.
     # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
     # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
     # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+    # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::Beta::BorderBox) %>. If `true`, the button will have the `Box-btn-octicon` class.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, **system_arguments)
       @icon = icon

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -26,7 +26,7 @@
   - title: Blankslate
     url: "/components/beta/blankslate"
   - title: BorderBox
-    url: "/components/borderbox"
+    url: "/components/beta/borderbox"
   - title: Box
     url: "/components/box"
   - title: Breadcrumbs

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

@@ -10,6 +10,7 @@ module DeprecatedComponentsHelpers
           "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
           "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
+          "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
           "Primer::DropdownMenuComponent" => nil,
           "Primer::Tooltip" => "Primer::Alpha::Tooltip",
           "Primer::FlexComponent" => nil,

lib/rubocop/cop/primer/component_name_migration.rb

@@ -16,6 +16,7 @@ module Primer
       class ComponentNameMigration < BaseCop
         DEPRECATIONS = {
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
+          "Primer::BorderBoxComponent" => "Primer::Beta::BorderBox",
           "Primer::BaseButton" => "Primer::Beta::BaseButton",
           "Primer::TestComponent" => "Primer::Beta::Test"
         }.freeze