Add HintComponent and ErrorMessageComponent

README.md

@@ -48,7 +48,14 @@ Then call your helpers as usual:
   <%= f.email_field :email %>       <%# renders a ViewComponent::Form::EmailFieldComponent %>
 
   <%= f.label :password %>          <%# renders a ViewComponent::Form::LabelComponent %>
-  <%= f.password_field :password %> <%# renders a ViewComponent::Form::PasswordFieldComponent %>
+  <%= f.password_field :password, aria: { describedby: f.field_id(:password, :description) } %>
+                                    <%# renders a ViewComponent::Form::PasswordFieldComponent %>
+                                    <%# Note: #field_id only supported on Rails 7 %>
+  <div id="<%= f.field_id(:title, :description) %>">
+    <%= f.hint :password, 'The password should be at least 8 characters long' %>
+                                      <%# renders a ViewComponent::Form::HintComponent %>
+    <%= f.error_message :password %>  <%# renders a ViewComponent::Form::ErrorMessageComponent %>
+  </div>
 <% end %>
 ```
 
@@ -69,7 +76,10 @@ It should work out of the box, but does nothing particularly interesting for now
   <input type="email" value="john.doe@example.com" name="user[email]" id="user_email" />
 
   <label for="user_password">Password</label>
-  <input type="password" name="user[password]" id="user_password" />
+  <input type="password" name="user[password]" id="user_password" aria-describedby="user_password_description" />
+  <div id="user_password_description">
+    <div>The password should be at least 8 characters long</div>
+  </div>
 </form>
 ```
 

app/components/view_component/form/error_message_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Form
+    class ErrorMessageComponent < FieldComponent
+      class_attribute :tag, instance_reader: false, instance_writer: false, instance_accessor: false,
+                            instance_predicate: false
+
+      self.tag = :div
+
+      def call
+        tag.public_send(self.class.tag, messages, **options)
+      end
+
+      def render?
+        method_errors?
+      end
+
+      def messages
+        safe_join(method_errors, tag.br)
+      end
+    end
+  end
+end

app/components/view_component/form/hint_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module ViewComponent
+  module Form
+    class HintComponent < FieldComponent
+      class_attribute :tag, instance_reader: false, instance_writer: false, instance_accessor: false,
+                            instance_predicate: false
+      attr_reader :attribute_content
+
+      self.tag = :div
+
+      def initialize(form, object_name, method_name, content_or_options = nil, options = nil)
+        options ||= {}
+
+        content_is_options = content_or_options.is_a?(Hash)
+        if content_is_options
+          options.merge! content_or_options
+          @attribute_content = nil
+        else
+          @attribute_content = content_or_options
+        end
+
+        super(form, object_name, method_name, options)
+      end
+
+      def call
+        content_or_options = content.presence || attribute_content.presence
+
+        tag.public_send(self.class.tag, content_or_options, **options)
+      end
+
+      def render?
+        content.present? || attribute_content.present?
+      end
+    end
+  end
+end

lib/view_component/form/builder.rb

@@ -189,6 +189,14 @@ def rich_text_area(method, options = {})
         end
       end
 
+      def error_message(method, options = {})
+        render_component(:error_message, @object_name, method, objectify_options(options))
+      end
+
+      def hint(method, text = nil, options = {}, &block)
+        render_component(:hint, @object_name, method, text, objectify_options(options), &block)
+      end
+
       private
 
       def render_component(component_name, *args, &block)

spec/view_component/form/error_message_component_spec.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+RSpec.describe ViewComponent::Form::ErrorMessageComponent, type: :component do
+  subject(:rendered_component) { render_inline(component) }
+  let(:component) { described_class.new(form, object_name, :first_name, options) }
+
+  let(:object_klass) do
+    Class.new do
+      include ActiveModel::Model
+
+      attr_accessor :first_name
+
+      validates :first_name, presence: true, length: { minimum: 2 }
+
+      class << self
+        def name
+          "User"
+        end
+      end
+    end
+  end
+
+  let(:object)  { object_klass.new }
+  let(:form)    { form_with(object) }
+  let(:options) { {} }
+  let(:component_html_attributes) { rendered_component.css("div").first.attributes }
+
+  context "with valid object" do
+    subject { component }
+    let(:object) { object_klass.new(first_name: "John") }
+
+    before { object.validate }
+
+    it { is_expected.to have_attributes(method_errors: [], render?: false) }
+  end
+
+  context "with invalid object" do
+    let(:object) { object_klass.new(first_name: "") }
+
+    before { object.validate }
+
+    context "with simple args" do
+      it { expect(component.method_errors).to eq(["Can't be blank", "Is too short (minimum is 2 characters)"]) }
+      it { expect(component.render?).to be true }
+
+      it { is_expected.to eq_html '<div>Can't be blank<br>Is too short (minimum is 2 characters)</div>' }
+    end
+
+    include_examples "component with custom html classes"
+    include_examples "component with custom data attributes"
+  end
+end

spec/view_component/form/hint_component_spec.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+RSpec.describe ViewComponent::Form::HintComponent, type: :component do
+  subject(:rendered_component) { render_inline(component) }
+
+  let(:component) { described_class.new(form, object_name, :birth_date, "this is my hint for you", options) }
+  let(:object)  { OpenStruct.new }
+  let(:form)    { form_with(object) }
+  let(:options) { {} }
+  let(:component_html_attributes) { component.css("div").first.attributes }
+
+  context "with simple args" do
+    it { is_expected.to eq_html '<div>this is my hint for you</div>' }
+  end
+
+  include_examples "component with custom html classes"
+  include_examples "component with custom data attributes"
+  include_examples "component with custom value"
+end