From a8b2c052bdbb36b240e7caab5d5ea7bdafd2aab3 Mon Sep 17 00:00:00 2001
From: Kate Travers <8152930+ktravers@users.noreply.github.com>
Date: Sun, 26 Jan 2025 21:05:31 +0000
Subject: [PATCH] add required data attrs to component

---
 app/components/primer/beta/details.rb | 16 ++++++++++++++++
 test/components/beta/details_test.rb  | 16 ++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/app/components/primer/beta/details.rb b/app/components/primer/beta/details.rb
index 422f5f833c..4cbcbabf80 100644
--- a/app/components/primer/beta/details.rb
+++ b/app/components/primer/beta/details.rb
@@ -22,6 +22,15 @@ class Details < Primer::Component
         system_arguments[:tag] = :summary
         system_arguments[:role] = "button"
 
+        system_arguments[:data] = merge_data(
+          system_arguments, {
+            data: {
+              target: "details-toggle.summaryTarget",
+              action: "click:details-toggle#toggle",
+            }
+          }
+        )
+
         if disabled?
           # rubocop:disable Primer/ComponentNameMigration
           Primer::ButtonComponent.new(**system_arguments, disabled: true)
@@ -57,6 +66,13 @@ def initialize(overlay: NO_OVERLAY, reset: false, disabled: false, **system_argu
           OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
           "details-reset" => reset
         )
+        @system_arguments[:data] = merge_data(
+          @system_arguments, {
+            data: {
+              target: "details-toggle.detailsTarget",
+            }
+          }
+        )
         @disabled = disabled
         @summary_info = nil
       end
diff --git a/test/components/beta/details_test.rb b/test/components/beta/details_test.rb
index caebfb6aad..fab9a502c3 100644
--- a/test/components/beta/details_test.rb
+++ b/test/components/beta/details_test.rb
@@ -142,4 +142,20 @@ def test_disabled
   def test_status
     assert_component_state(Primer::Beta::Details, :beta)
   end
+
+  def test_renders_details_catalyst_element_and_data_attributes
+    render_inline(Primer::Beta::Details.new) do |component|
+      component.with_summary do
+        "Summary"
+      end
+      component.with_body do
+        "Body"
+      end
+    end
+
+    assert_selector("details-toggle")
+    assert_selector("details[data-target='detailsToggle.detailsElement']")
+    assert_selector("summary[data-target='detailsToggle.summaryElement']")
+    assert_selector("summary[data-action='click:detailsToggle#toggle']")
+  end
 end