Merge remote-tracking branch 'origin/main' into mxriverlynn/move-head…

…ing-component
primer · Aug 11, 2022 · de586da · de586da
2 parents 50e11db + 1337cd4
commit de586da
Show file tree

Hide file tree

Showing 19 changed files with 141 additions and 118 deletions.
diff --git a/.changeset/breezy-lizards-judge.md b/.changeset/breezy-lizards-judge.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+moving Primer::DetailsComponent to Primer::Beta::Details, and replacing the original with a deprecated component for backward compatibility
diff --git a/...ponents/primer/details_component.html.erb → app/components/primer/beta/details.html.erb b/...ponents/primer/details_component.html.erb → app/components/primer/beta/details.html.erb
diff --git a/app/components/primer/beta/details.rb b/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
diff --git a/app/components/primer/details_component.rb b/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.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::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
diff --git a/app/components/primer/dropdown.html.erb b/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 %>

diff --git a/app/components/primer/dropdown.rb b/app/components/primer/dropdown.rb
@@ -128,7 +128,7 @@ class Dropdown < Primer::Component
     #     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)

diff --git a/app/components/primer/dropdown_menu_component.rb b/app/components/primer/dropdown_menu_component.rb
@@ -18,7 +18,7 @@ class DropdownMenuComponent < Primer::Component
 
     # @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 %>

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -44,7 +44,7 @@
   - title: Counter
     url: "/components/beta/counter"
   - title: Details
-    url: "/components/details"
+    url: "/components/beta/details"
   - title: Dropdown
     url: "/components/dropdown"
   - title: DropdownMenu

diff --git a/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb b/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb
@@ -11,6 +11,7 @@ module DeprecatedComponentsHelpers
           "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",

diff --git a/lib/rubocop/cop/primer/component_name_migration.rb b/lib/rubocop/cop/primer/component_name_migration.rb
@@ -15,6 +15,7 @@ module Primer
       # Primer::Beta::ComponentName.new()
       class ComponentNameMigration < BaseCop
         DEPRECATIONS = {
+          "Primer::DetailsComponent" => "Primer::Beta::Details",
           "Primer::HeadingComponent" => "Primer::Beta::Heading",
           "Primer::BoxComponent" => "Primer::Box",
           "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",

diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake
@@ -52,7 +52,7 @@ namespace :docs do
       Primer::ClipboardCopy,
       Primer::Beta::CloseButton,
       Primer::Beta::Counter,
-      Primer::DetailsComponent,
+      Primer::Beta::Details,
       Primer::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,

diff --git a/static/arguments.yml b/static/arguments.yml
@@ -521,6 +521,23 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Details
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/details.rb
+  parameters:
+  - name: overlay
+    type: Symbol
+    default: "`:none`"
+    description: Dictates the type of overlay to render with. One of `:dark`, `:default`,
+      or `:none`.
+  - name: reset
+    type: Boolean
+    default: "`false`"
+    description: Defaults to false. If set to true, it will remove the default caret
+      and remove style from the summary element
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Flash
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb
   parameters:
@@ -643,23 +660,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: Details
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/details_component.rb
-  parameters:
-  - name: overlay
-    type: Symbol
-    default: "`:none`"
-    description: Dictates the type of overlay to render with. One of `:dark`, `:default`,
-      or `:none`.
-  - name: reset
-    type: Boolean
-    default: "`false`"
-    description: Defaults to false. If set to true, it will remove the default caret
-      and remove style from the summary element
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: Dropdown
   source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb
   parameters:

diff --git a/static/audited_at.json b/static/audited_at.json
@@ -25,6 +25,7 @@
   "Primer::Beta::ButtonGroup": "",
   "Primer::Beta::CloseButton": "",
   "Primer::Beta::Counter": "",
+  "Primer::Beta::Details": "",
   "Primer::Beta::Flash": "",
   "Primer::Beta::Heading": "",
   "Primer::Beta::Text": "",

diff --git a/static/constants.json b/static/constants.json
@@ -326,6 +326,21 @@
       "secondary"
     ]
   },
+  "Primer::Beta::Details": {
+    "BODY_TAG_DEFAULT": "div",
+    "BODY_TAG_OPTIONS": [
+      "ul",
+      "details-menu",
+      "details-dialog",
+      "div"
+    ],
+    "NO_OVERLAY": "none",
+    "OVERLAY_MAPPINGS": {
+      "none": "",
+      "default": "details-overlay",
+      "dark": "details-overlay details-overlay-dark"
+    }
+  },
   "Primer::Beta::Flash": {
     "DEFAULT_SCHEME": "default",
     "SCHEME_MAPPINGS": {
@@ -404,19 +419,6 @@
   "Primer::CounterComponent": {
   },
   "Primer::DetailsComponent": {
-    "BODY_TAG_DEFAULT": "div",
-    "BODY_TAG_OPTIONS": [
-      "ul",
-      "details-menu",
-      "details-dialog",
-      "div"
-    ],
-    "NO_OVERLAY": "none",
-    "OVERLAY_MAPPINGS": {
-      "none": "",
-      "default": "details-overlay",
-      "dark": "details-overlay details-overlay-dark"
-    }
   },
   "Primer::Dropdown": {
     "Menu": "Primer::Dropdown::Menu"

diff --git a/static/statuses.json b/static/statuses.json
@@ -25,6 +25,7 @@
   "Primer::Beta::ButtonGroup": "beta",
   "Primer::Beta::CloseButton": "beta",
   "Primer::Beta::Counter": "beta",
+  "Primer::Beta::Details": "beta",
   "Primer::Beta::Flash": "beta",
   "Primer::Beta::Heading": "beta",
   "Primer::Beta::Text": "beta",
@@ -41,7 +42,7 @@
   "Primer::ConditionalWrapper": "alpha",
   "Primer::Content": "stable",
   "Primer::CounterComponent": "deprecated",
-  "Primer::DetailsComponent": "beta",
+  "Primer::DetailsComponent": "deprecated",
   "Primer::Dropdown": "alpha",
   "Primer::Dropdown::Menu": "alpha",
   "Primer::Dropdown::Menu::Item": "alpha",

diff --git a/stories/primer/details_component_stories.rb → stories/primer/beta/details_stories.rb b/stories/primer/details_component_stories.rb → stories/primer/beta/details_stories.rb
@@ -1,11 +1,13 @@
 # frozen_string_literal: true
 
-class Primer::DetailsComponentStories < ViewComponent::Storybook::Stories
+require "primer/beta/details"
+
+class Primer::Beta::DetailsStories < ViewComponent::Storybook::Stories
   layout "storybook_centered_preview"
 
   story(:details) do
     controls do
-      select(:overlay, Primer::DetailsComponent::OVERLAY_MAPPINGS.keys, :none)
+      select(:overlay, Primer::Beta::Details::OVERLAY_MAPPINGS.keys, :none)
       reset false
     end
 
@@ -17,7 +19,7 @@ class Primer::DetailsComponentStories < ViewComponent::Storybook::Stories
 
   story(:custom_button) do
     controls do
-      select(:overlay, Primer::DetailsComponent::OVERLAY_MAPPINGS.keys, :none)
+      select(:overlay, Primer::Beta::Details::OVERLAY_MAPPINGS.keys, :none)
     end
 
     content do |component|
@@ -28,7 +30,7 @@ class Primer::DetailsComponentStories < ViewComponent::Storybook::Stories
 
   story(:without_button) do
     controls do
-      select(:overlay, Primer::DetailsComponent::OVERLAY_MAPPINGS.keys, :none)
+      select(:overlay, Primer::Beta::Details::OVERLAY_MAPPINGS.keys, :none)
     end
 
     content do |component|

diff --git a/stories/primer/dropdown_stories.rb b/stories/primer/dropdown_stories.rb
@@ -5,7 +5,7 @@ class Primer::DropdownStories < ViewComponent::Storybook::Stories
 
   story(:dropdown) do
     controls do
-      select(:overlay, Primer::DetailsComponent::OVERLAY_MAPPINGS.keys, :default)
+      select(:overlay, Primer::Beta::Details::OVERLAY_MAPPINGS.keys, :default)
       with_caret false
     end