From 1337cd471cb26eda8813ec7c508a0f19e7d0309b Mon Sep 17 00:00:00 2001 From: River Lynn Bailey Date: Thu, 11 Aug 2022 15:06:36 -0500 Subject: [PATCH] Move Primer::DetailsComponent to Primer::Beta::Details (#1280) * initial move of details component to beta folder * added changeset --- .changeset/breezy-lizards-judge.md | 5 ++ .../details.html.erb} | 0 app/components/primer/beta/details.rb | 70 +++++++++++++++++++ app/components/primer/details_component.rb | 65 +---------------- app/components/primer/dropdown.html.erb | 2 +- app/components/primer/dropdown.rb | 2 +- .../primer/dropdown_menu_component.rb | 2 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 +- .../helpers/deprecated_components_helpers.rb | 1 + .../cop/primer/component_name_migration.rb | 1 + lib/tasks/docs.rake | 2 +- static/arguments.yml | 34 ++++----- static/audited_at.json | 1 + static/constants.json | 28 ++++---- static/statuses.json | 3 +- .../details_stories.rb} | 10 +-- stories/primer/dropdown_stories.rb | 2 +- .../details_test.rb} | 26 +++---- test/components/component_test.rb | 3 +- 19 files changed, 141 insertions(+), 118 deletions(-) create mode 100644 .changeset/breezy-lizards-judge.md rename app/components/primer/{details_component.html.erb => beta/details.html.erb} (100%) create mode 100644 app/components/primer/beta/details.rb rename stories/primer/{details_component_stories.rb => beta/details_stories.rb} (65%) rename test/components/{details_component_test.rb => beta/details_test.rb} (73%) diff --git a/.changeset/breezy-lizards-judge.md b/.changeset/breezy-lizards-judge.md new file mode 100644 index 0000000000..db9a293713 --- /dev/null +++ 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/app/components/primer/details_component.html.erb b/app/components/primer/beta/details.html.erb similarity index 100% rename from app/components/primer/details_component.html.erb rename to app/components/primer/beta/details.html.erb diff --git a/app/components/primer/beta/details.rb b/app/components/primer/beta/details.rb new file mode 100644 index 0000000000..c52e2a702a --- /dev/null +++ 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 index cbdbe4e321..a23c5c1f95 100644 --- 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 index f7a5169aa1..7e5eada0a1 100644 --- 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 index 0ccaab9626..e081b2336a 100644 --- 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 index acd39f4cd3..7b2af27200 100644 --- 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 #
- # <%= 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 index f1388410c2..93887c2642 100644 --- 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 index bd7ab06209..4cf960dab2 100644 --- a/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +++ b/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb @@ -10,6 +10,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 index 96746a1676..5eda96bfc2 100644 --- 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::BoxComponent" => "Primer::Box", "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup", "Primer::CloseButton" => "Primer::Beta::CloseButton", diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 07bee89743..41868d09d8 100644 --- 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 index fe5dcc8966..d9000977af 100644 --- 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: @@ -632,23 +649,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 index 0e84cd9666..03294ca848 100644 --- 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::Text": "", "Primer::Beta::Truncate": "", diff --git a/static/constants.json b/static/constants.json index 63b4df40e7..53cceba9a4 100644 --- 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": { @@ -393,19 +408,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 index 87f6972b92..575ce17d51 100644 --- 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::Text": "beta", "Primer::Beta::Truncate": "beta", @@ -40,7 +41,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 b/stories/primer/beta/details_stories.rb similarity index 65% rename from stories/primer/details_component_stories.rb rename to stories/primer/beta/details_stories.rb index 2593e9ef22..4147586d0a 100644 --- a/stories/primer/details_component_stories.rb +++ b/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 index ce2c719797..2972fc7e3d 100644 --- 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 diff --git a/test/components/details_component_test.rb b/test/components/beta/details_test.rb similarity index 73% rename from test/components/details_component_test.rb rename to test/components/beta/details_test.rb index 4726ab6287..aeb0bf4acc 100644 --- a/test/components/details_component_test.rb +++ b/test/components/beta/details_test.rb @@ -2,11 +2,11 @@ require "test_helper" -class PrimerDetailsComponentTest < Minitest::Test +class PrimerBetaDetailsTest < Minitest::Test include Primer::ComponentTestHelpers def test_overlay_default_renders_details_overlay - render_inline(Primer::DetailsComponent.new(overlay: :default)) do |component| + render_inline(Primer::Beta::Details.new(overlay: :default)) do |component| component.summary do "Summary" end @@ -19,7 +19,7 @@ def test_overlay_default_renders_details_overlay end def test_overlay_dark_renders_details_overlay_dark - render_inline(Primer::DetailsComponent.new(overlay: :dark)) do |component| + render_inline(Primer::Beta::Details.new(overlay: :dark)) do |component| component.summary do "Summary" end @@ -32,7 +32,7 @@ def test_overlay_dark_renders_details_overlay_dark end def test_renders_details_reset_when_resetting_the_button_style - render_inline(Primer::DetailsComponent.new(reset: true)) do |component| + render_inline(Primer::Beta::Details.new(reset: true)) do |component| component.summary do "Summary" end @@ -45,7 +45,7 @@ def test_renders_details_reset_when_resetting_the_button_style end def test_default_component_renders_btn_summary - render_inline(Primer::DetailsComponent.new) do |component| + render_inline(Primer::Beta::Details.new) do |component| component.summary do "Summary" end @@ -58,7 +58,7 @@ def test_default_component_renders_btn_summary end def test_does_not_render_btn_if_button_false - render_inline(Primer::DetailsComponent.new) do |component| + render_inline(Primer::Beta::Details.new) do |component| component.summary(button: false) do "Summary" end @@ -73,7 +73,7 @@ def test_does_not_render_btn_if_button_false def test_falls_back_to_defaults_when_invalid_overlay_is_passed without_fetch_or_fallback_raises do - render_inline(Primer::DetailsComponent.new(overlay: :bar)) do |component| + render_inline(Primer::Beta::Details.new(overlay: :bar)) do |component| component.summary { "Summary" } component.body { "Body" } end @@ -85,7 +85,7 @@ def test_falls_back_to_defaults_when_invalid_overlay_is_passed def test_falls_back_to_default_body_tag_when_invalid_body_tag_is_passed without_fetch_or_fallback_raises do - render_inline(Primer::DetailsComponent.new) do |component| + render_inline(Primer::Beta::Details.new) do |component| component.summary { "Summary" } component.body(tag: :img) { "Body" } end @@ -96,7 +96,7 @@ def test_falls_back_to_default_body_tag_when_invalid_body_tag_is_passed end def test_passes_props_to_button - render_inline(Primer::DetailsComponent.new) do |component| + render_inline(Primer::Beta::Details.new) do |component| component.summary(size: :small, scheme: :primary) do "Summary" end @@ -109,11 +109,11 @@ def test_passes_props_to_button end def test_prevents_rendering_without_slots - render_inline(Primer::DetailsComponent.new) - render_inline(Primer::DetailsComponent.new) do |component| + render_inline(Primer::Beta::Details.new) + render_inline(Primer::Beta::Details.new) do |component| component.body { "Body" } end - render_inline(Primer::DetailsComponent.new) do |component| + render_inline(Primer::Beta::Details.new) do |component| component.summary { "Summary" } end @@ -122,6 +122,6 @@ def test_prevents_rendering_without_slots end def test_status - assert_component_state(Primer::DetailsComponent, :beta) + assert_component_state(Primer::Beta::Details, :beta) end end diff --git a/test/components/component_test.rb b/test/components/component_test.rb index feb612f73d..042c11d7ba 100644 --- a/test/components/component_test.rb +++ b/test/components/component_test.rb @@ -44,7 +44,7 @@ class PrimerComponentTest < Minitest::Test [Primer::ConditionalWrapper, { condition: true, tag: :div }], [Primer::Beta::CloseButton, {}], [Primer::Beta::Counter, { count: 1 }], - [Primer::DetailsComponent, {}, lambda do |component| + [Primer::Beta::Details, {}, lambda do |component| component.summary { "Foo" } component.body { "Bar" } end], @@ -90,6 +90,7 @@ def test_registered_components "Primer::ButtonGroup", "Primer::CloseButton", "Primer::CounterComponent", + "Primer::DetailsComponent", "Primer::Component", "Primer::OcticonsSymbolComponent", "Primer::Content",