Allow dropdowns to render content as any component

lib/phlexy_ui/base.rb

@@ -30,5 +30,13 @@ def generate_classes!(
     def generate_attributes(base_modifiers, attributes_map)
       AttributeSet.new(base_modifiers, attributes_map).to_h
     end
+
+    def render_as(*, as:, **, &)
+      if as.is_a?(Symbol)
+        render public_send(*, as:, **, &)
+      else
+        render as.new(*, **, &)
+      end
+    end
   end
 end

lib/phlexy_ui/dropdown.rb

@@ -30,6 +30,19 @@ def button(*, **, &)
       end
     end
 
+    def content(*, as: :div, **options, &)
+      generate_classes!(
+        component_html_class: :"dropdown-content",
+        options:
+      ).then do |classes|
+        if base_modifiers.include?(:tap_to_close)
+          render_as(*, as:, class: classes, **options, &)
+        else
+          render_as(*, as:, tabindex: 0, class: classes, **options, &)
+        end
+      end
+    end
+
     def menu(**options, &)
       generate_classes!(
         component_html_class: :"dropdown-content",

spec/lib/phlexy_ui/dropdown_spec.rb

@@ -68,8 +68,8 @@ def view_template(&)
               "Click"
             end
 
-            dropdown.menu do |content|
-              li do
+            dropdown.menu do |menu|
+              menu.item do
                 a do
                   "Item 1"
                 end
@@ -112,8 +112,8 @@ def view_template(&)
               "Click"
             end
 
-            dropdown.menu do |content|
-              li do
+            dropdown.menu do |menu|
+              menu.item do
                 a do
                   "Item 1"
                 end
@@ -145,4 +145,101 @@ def view_template(&)
       is_expected.to eq(expected_html)
     end
   end
+
+  describe "rendering a full dropdown with card content that closes when tapping outside" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Dropdown.new(:top) do |dropdown|
+            dropdown.button(:active, class: "my-button", data: {my: "buttons"}) do
+              "Click"
+            end
+
+            dropdown.content as: PhlexyUI::Card do |card|
+              card.body do
+                card.title do
+                  "Title"
+                end
+
+                p do
+                  "Body"
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <div class="dropdown dropdown-top">
+          <div class="btn btn-active my-button" 
+               role="button" 
+               tabindex="0" 
+               data-my="buttons">Click</div>
+          <section class="card dropdown-content" tabindex="0">
+            <div class="card-body">
+              <header class="card-title">Title</header>
+              <p>Body</p>
+            </div>
+          </section>
+        </div>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+
+  describe "rendering a full dropdown with card content that closes when tapping the button" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Dropdown.new(:tap_to_close, :top) do |dropdown|
+            dropdown.button(:active, class: "my-button", data: {my: "buttons"}) do
+              "Click"
+            end
+
+            dropdown.content as: PhlexyUI::Card, class: "bg-base-100" do |card|
+              card.body do
+                card.title do
+                  "Title"
+                end
+
+                p do
+                  "Body"
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <details class="dropdown dropdown-top">
+          <summary 
+            class="btn btn-active my-button" 
+            data-my="buttons">Click</summary>
+          <section class="card dropdown-content bg-base-100">
+            <div class="card-body">
+              <header class="card-title">Title</header>
+              <p>Body</p>
+            </div>
+          </section>
+        </details>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
 end