Merge pull request #21 from substancelab/hint

Make hint work like label and input

Author: koppen

app/components/flowbite/input/hint.rb

@@ -24,17 +24,16 @@ def styles
 
       def call
         tag.p(
-          @hint,
+          content,
           class: classes,
-          **@hint_attributes
+          **@options
         )
       end
 
-      def initialize(attribute:, form:, hint:, hint_attributes: {})
+      def initialize(attribute:, form:, options: {})
         @attribute = attribute
         @form = form
-        @hint = hint
-        @hint_attributes = hint_attributes
+        @options = options
         @object = form.object
       end
 

app/components/flowbite/input_field.rb

@@ -62,6 +62,7 @@ module Flowbite
   # To render an input without labels or error messages etc, use
   # `Flowbite::Input::Field` instead.
   class InputField < ViewComponent::Base
+    renders_one :hint
     renders_one :input
     renders_one :label
 
@@ -85,19 +86,39 @@ def input_component
       ::Flowbite::Input::Field
     end
 
+    protected
+
     # Returns the HTML to use for the hint element if any
-    def hint
+    def default_hint
       return unless hint?
 
-      render(Flowbite::Input::Hint.new(
+      component = Flowbite::Input::Hint.new(
         attribute: @attribute,
         form: @form,
-        hint: @hint,
-        hint_attributes: {id: id_for_hint_element}
-      ))
+        options: default_hint_options
+      ).with_content(default_hint_content)
+      render(component)
     end
 
-    protected
+    def default_hint_content
+      return nil unless @hint
+
+      @hint[:content]
+    end
+
+    # Returns a Hash with the default attributes to apply to the hint element.
+    #
+    # The default attributes can be overriden by passing the `hint[options]`
+    # argument to the constructor.
+    def default_hint_options
+      return {} unless @hint
+      hint_options = @hint.dup
+      hint_options.delete(:content)
+
+      {
+        id: id_for_hint_element
+      }.merge(hint_options[:options] || {})
+    end
 
     # Returns a Hash with the default attributes to apply to the input element.
     #

app/components/flowbite/input_field/checkbox.rb

@@ -15,17 +15,15 @@ def input_component
       def hint
         return unless hint?
 
-        render(
-          Flowbite::Input::Hint.new(
-            attribute: @attribute,
-            form: @form,
-            hint_attributes: {
-              class: hint_classes,
-              id: id_for_hint_element
-            },
-            hint: @hint
-          )
-        )
+        component = Flowbite::Input::Hint.new(
+          attribute: @attribute,
+          form: @form,
+          options: {
+            class: hint_classes,
+            id: id_for_hint_element
+          }
+        ).with_content(@hint)
+        render(component)
       end
 
       # Returns the HTML to use for the label element

app/components/flowbite/input_field/radio_button.rb

@@ -43,17 +43,15 @@ def default_label_options
       def hint
         return unless hint?
 
-        render(
-          Flowbite::Input::Hint.new(
-            attribute: @attribute,
-            form: @form,
-            hint_attributes: {
-              class: hint_classes,
-              id: id_for_hint_element
-            },
-            hint: @hint
-          )
-        )
+        component = Flowbite::Input::Hint.new(
+          attribute: @attribute,
+          form: @form,
+          options: {
+            class: hint_classes,
+            id: id_for_hint_element
+          }
+        ).with_content(@hint)
+        render(component)
       end
 
       private

demo/test/components/previews/input_field_preview.rb

@@ -81,7 +81,7 @@ def helper_text
       Flowbite::InputField::Text.new(
         attribute: :email,
         form: form,
-        hint: "We’ll never share your details."
+        hint: {content: "We’ll never share your details."}
       )
     )
   end

test/components/flowbite/input_field_test.rb

@@ -12,19 +12,25 @@ def setup
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: "What's the title?"))
+    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: {content: "What's the title?"}))
 
     assert_selector("input[type='text'][value='The Great Gatsby']")
     assert_selector("p", text: "What's the title?")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: "What's the title?"))
+    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: {content: "What's the title?"}))
 
     assert_selector("input[aria-describedby='book_title_hint']")
     assert_selector("p#book_title_hint", text: "What's the title?")
   end
 
+  def test_adds_extra_attributes_to_hint
+    render_inline(Flowbite::InputField.new(form: @form, attribute: :title, hint: {content: "What's the title?", options: {class: "custom-hint-class"}}))
+
+    assert_selector("p#book_title_hint.custom-hint-class", text: "What's the title?")
+  end
+
   def test_renders_an_input_element
     render_inline(Flowbite::InputField.new(form: @form, attribute: :title))
 

test/components/input/hint_test.rb

@@ -12,15 +12,21 @@ def setup
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::Input::Hint.new(form: @form, attribute: :title, hint: "What's the title?"))
+    render_inline(Flowbite::Input::Hint.new(form: @form, attribute: :title)) { "What's the title?" }
 
     assert_component_rendered
     assert_selector("p.text-sm.text-gray-500", text: "What's the title?")
   end
 
-  def test_accepts_custom_attributes
-    render_inline(Flowbite::Input::Hint.new(form: @form, attribute: :title, hint: "What's the title?", hint_attributes: {id: "custom_hint"}))
+  def test_accepts_custom_id
+    render_inline(Flowbite::Input::Hint.new(form: @form, attribute: :title, options: {id: "custom_hint"})) { "What's the title?" }
 
     assert_selector("p#custom_hint.text-sm.text-gray-500", text: "What's the title?")
   end
+
+  def test_accepts_custom_attributes
+    render_inline(Flowbite::Input::Hint.new(form: @form, attribute: :title, options: {class: "custom-class"})) { "What's the title?" }
+
+    assert_selector("p.custom-class", text: "What's the title?")
+  end
 end

test/components/input_field/file_test.rb

@@ -24,14 +24,14 @@ def test_renders_a_label
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: "Upload your profile picture"))
+    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: {content: "Upload your profile picture"}))
 
     assert_selector("input[type='file']")
     assert_selector("p", text: "Upload your profile picture")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: "Upload your profile picture"))
+    render_inline(Flowbite::InputField::File.new(form: @form, attribute: :avatar, hint: {content: "Upload your profile picture"}))
 
     assert_selector("input[aria-describedby='user_avatar_hint']")
     assert_selector("p#user_avatar_hint", text: "Upload your profile picture")

test/components/input_field/password_test.rb

@@ -24,14 +24,14 @@ def test_renders_a_label
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: "Enter a secure password"))
+    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: {content: "Enter a secure password"}))
 
     assert_selector("input[type='password']")
     assert_selector("p", text: "Enter a secure password")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: "Enter a secure password"))
+    render_inline(Flowbite::InputField::Password.new(form: @form, attribute: :password, hint: {content: "Enter a secure password"}))
 
     assert_selector("input[aria-describedby='user_password_hint']")
     assert_selector("p#user_password_hint", text: "Enter a secure password")

test/components/input_field/url_test.rb

@@ -24,14 +24,14 @@ def test_renders_a_label
   end
 
   def test_renders_a_hint
-    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: "Enter your website URL"))
+    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: {content: "Enter your website URL"}))
 
     assert_selector("input[type='url']")
     assert_selector("p", text: "Enter your website URL")
   end
 
   def test_adds_aria_attributes_for_hint
-    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: "Enter your website URL"))
+    render_inline(Flowbite::InputField::Url.new(form: @form, attribute: :website_url, hint: {content: "Enter your website URL"}))
 
     assert_selector("input[aria-describedby='user_website_url_hint']")
     assert_selector("p#user_website_url_hint", text: "Enter your website URL")