Render the title as a component slot

Author: koppen

CHANGELOG.md

@@ -7,7 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
-*
+* Flowbite::Card now displays a title via the title argument/slot.
 
 ### Changed
 

app/components/flowbite/card.rb

@@ -5,6 +5,8 @@ module Flowbite
   #
   # See https://flowbite.com/docs/components/cards/
   class Card < ViewComponent::Base
+    renders_one :title
+
     class << self
       def classes(state: :default, style: :default)
         style = styles.fetch(style)
@@ -22,12 +24,6 @@ def styles
       # rubocop:enable Layout/LineLength
     end
 
-    def card_options
-      card_options = {}
-      card_options[:class] = self.class.classes + @class
-      card_options.merge(@options)
-    end
-
     # @param class [Array<String>] Additional CSS classes for the card
     #   container.
     #
@@ -37,15 +33,36 @@ def card_options
     #
     # @param title [String, nil] An optional title for the card. If provided,
     #   it will be rendered at the top of the card in a h5 tag using the
-    #   Card::Title component.
+    #   Card::Title component. Alternatively, you can use the `title` slot to
+    #   provide the entire title element yourself.
     def initialize(class: [], options: {}, title: nil)
       @class = Array(binding.local_variable_get(:class)) || []
       @options = options || {}
       @title = title
     end
 
-    def title
+    protected
+
+    def card_options
+      card_options = {}
+      card_options[:class] = self.class.classes + @class
+      card_options.merge(@options)
+    end
+
+    # Returns the HTML to use for the title element if any
+    def default_title
+      return nil unless title?
+
+      component = Flowbite::Card::Title.new.with_content(default_title_content)
+      render(component)
+    end
+
+    def default_title_content
       @title
     end
+
+    def title?
+      @title.present?
+    end
   end
 end

app/components/flowbite/card/card.html.erb

@@ -1,7 +1,5 @@
 <%= content_tag(:div, card_options) do %>
-  <% if title.present? %>
-    <%= render(Flowbite::Card::Title.new) { title } %>
-  <% end %>
+  <%= title %>
   <% if content.present? %>
     <div class="font-normal text-gray-700 dark:text-gray-400"><%= content %></div>
   <% end %>

demo/test/components/previews/card_preview.rb

@@ -14,5 +14,12 @@ def with_title_argument
     end
   end
 
+  def with_title_slot
+    render(Flowbite::Card.new) do |component|
+      component.with_title { "<h1 class=\"text-3xl\">This title replace the entire title element</h1>".html_safe }
+      "Use the title slot to control all aspects of the title element"
+    end
+  end
+
   # @!endgroup
 end

test/components/flowbite/card_test.rb

@@ -33,4 +33,13 @@ def test_with_title_argument
 
     assert_selector("h5.mb-2.text-2xl.font-bold.tracking-tight.text-gray-900.dark\\:text-white", text: "Card Title")
   end
+
+  def test_with_title_slot_when_using_with_title
+    render_inline(Flowbite::Card.new) do |component|
+      component.with_title { "<h1>This is the full title</h1>".html_safe }
+    end
+
+    assert_no_selector("h5.mb-2.text-2xl.font-bold.tracking-tight.text-gray-900.dark\\:text-white")
+    assert_selector("h1", text: "This is the full title")
+  end
 end