Make it possible to add custom classes to cards

Author: koppen

README.md

@@ -147,6 +147,33 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 ) %>
 ```
 
+## How to customize components
+
+### Add specific CSS classes
+
+A common use case for customizing a component is to add more CSS classes when
+rendering it, fx to change the size or spacing. flowbite-components is optimized
+for this case and all you need to do is specify the extra classes:
+
+```erb
+<%= render(Flowbite::Card.new(class: "w-full my-8")) { "Content" } %>
+```
+renders
+```html
+<div class="... all the usual classes... w-full my-8">
+```
+
+If you want to fully replace the existing classes, you can pass an entirely new
+`class` attribute via options:
+
+```erb
+<%= render(Flowbite::Card.new(options: {class: "w-full my-8"})) { "Content" } %>
+```
+renders
+```html
+<div class="w-full my-8">
+```
+
 ## Available Components
 
 ### Form Components

app/components/flowbite/card.rb

@@ -21,15 +21,22 @@ def styles
     end
 
     def call
-      content_tag(:div, {class: self.class.classes}.merge(@options)) do
+      card_options = {}
+      card_options[:class] = self.class.classes + @class
+
+      content_tag(:div, card_options.merge(@options)) do
         concat(content_tag(:div, content, class: "font-normal text-gray-700 dark:text-gray-400"))
       end
     end
 
+    # @param class [Array<String>] Additional CSS classes for the card
+    #   container.
+    #
     # @param options [Hash] Additional HTML options for the card container
     #   (e.g., custom classes, data attributes). These options are merged into
     #   the card's root element.
-    def initialize(options: {})
+    def initialize(class: [], options: {})
+      @class = Array(binding.local_variable_get(:class)) || []
       @options = options || {}
     end
   end

test/components/flowbite/card_test.rb

@@ -14,4 +14,17 @@ def test_passes_options_to_the_card_as_attributes
 
     assert_selector("div#card-1")
   end
+
+  def test_adds_the_classes_to_the_default_classes
+    render_inline(Flowbite::Card.new(class: "custom-class another")) { "Card Content" }
+
+    assert_selector("div.p-6.bg-white.border.border-gray-200.rounded-lg.shadow-sm.custom-class.another")
+  end
+
+  def test_overrides_the_default_classes
+    render_inline(Flowbite::Card.new(options: {class: "custom-class another"})) { "Card Content" }
+
+    assert_no_selector("div.p-6.bg-white.border.border-gray-200.rounded-lg.shadow-sm")
+    assert_selector("div.custom-class.another")
+  end
 end