WIP: Allow errors on specific inputs of date-input

app/views/govuk_publishing_components/components/_date_input.html.erb

@@ -15,6 +15,8 @@
   error_items ||= []
   describedby ||= nil
   has_error ||= error_message || error_items.any?
+  error_item_names = error_items.group_by { |ei| ei[:name] }.keys.compact_blank
+  has_no_named_errors = error_item_names.none?
 
   css_classes = %w(gem-c-date-input govuk-date-input)
   form_group_css_classes = %w(govuk-form-group)
@@ -59,7 +61,7 @@
               text: item[:label] || item[:name].capitalize
             },
             grouped: true,
-            has_error: has_error,
+            has_error: error_item_names.include?(item[:name]) || (has_error && has_no_named_errors),
             name: name ? (name + "[" + item[:name] + "]") : item[:name],
             value: item[:value],
             width: item[:width],

app/views/govuk_publishing_components/components/_input.html.erb

@@ -96,7 +96,7 @@
     } %>
   <% end %>
 
-  <% if has_error %>
+  <% if has_error && (error_message.present? || error_items.any?) %>
     <%= render "govuk_publishing_components/components/error_message", {
       id: error_id,
       text: error_message,

app/views/govuk_publishing_components/components/docs/date_input.yml

@@ -69,3 +69,10 @@ examples:
           name: dob-blwyddyn
           width: 4
           value: 1980
+  with_named_error_items:
+    data:
+      legend_text: "When was your passport issued?"
+      hint: "For example, 27 3 2007"
+      error_items:
+        - name: "year"
+          text: "The date your passport was issued must include a year"

app/views/govuk_publishing_components/components/docs/input.yml

@@ -189,7 +189,7 @@ examples:
 
       By default the input element and the label both display text in a left to right direction.
 
-      When the `right_to_left` parameter of the input component is set to `true` both the input and the label, hint and error message display their content in a right to left direction. 
+      When the `right_to_left` parameter of the input component is set to `true` both the input and the label, hint and error message display their content in a right to left direction.
     data:
       label:
         text: "Some input text to be displayed right to left with a label that displays in the same direction"
@@ -198,7 +198,6 @@ examples:
       name: rtl-input-text
       value: "العربيَّة"
       right_to_left: true
-
   with_separate_dir_attributes_for_field_and_help_text:
     description: |
       Allows the correct display of right to left languages.
@@ -215,3 +214,9 @@ examples:
       right_to_left: true
       right_to_left_help: false
       error_message: "An error message that displays in the same text direction as the label"
+  with_error_but_no_error_message_or_error_items:
+    data:
+      label:
+        text: "Day"
+      name: "day"
+      has_error: true

spec/components/date_input_spec.rb

@@ -65,6 +65,35 @@ def component_name
     assert_select ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-date-input__item .govuk-input--error", 3
   end
 
+  it "renders with error items" do
+    render_component(
+      legend_text: "What is your date of birth?",
+      error_items: [{ text: "Error 1" }, { text: "Error 2" }],
+    )
+
+    assert_select(
+      ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-error-message",
+      html: "<span class=\"govuk-visually-hidden\">Error:</span> Error 1<br>Error 2",
+    )
+    assert_select ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-date-input__item .govuk-input--error", 3
+  end
+
+  it "renders with named error items" do
+    render_component(
+      legend_text: "What is your date of birth?",
+      error_items: [
+        { name: "day", text: "day-error" },
+        { name: "year", text: "year-error" },
+      ],
+    )
+
+    assert_select(
+      ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-error-message",
+      html: "<span class=\"govuk-visually-hidden\">Error:</span> day-error<br>year-error",
+    )
+    assert_select ".govuk-form-group--error .govuk-fieldset[role=group] .govuk-date-input__item .govuk-input--error", 2
+  end
+
   it "renders with custom items" do
     render_component(
       legend_text: "What is your date of birth?",

spec/components/input_spec.rb

@@ -180,6 +180,10 @@ def component_name
 
       assert_select ".govuk-input[aria-describedby='#{error_id}']"
     end
+
+    it "renders adds the error CSS class to the input" do
+      assert_select "input.govuk-input--error"
+    end
   end
 
   context "when error_items are provided" do
@@ -206,6 +210,27 @@ def component_name
 
       assert_select ".govuk-input[aria-describedby='#{error_id}']"
     end
+
+    it "renders adds the error CSS class to the input" do
+      assert_select "input.govuk-input--error"
+    end
+  end
+
+  context "when has_error is true but no error_message or error_items are provided" do
+    before do
+      render_component(
+        name: "email-address",
+        has_error: true,
+      )
+    end
+
+    it "renders adds the error CSS class to the input" do
+      assert_select "input.govuk-input--error"
+    end
+
+    it "does not render the error message" do
+      assert_select ".govuk-error-message", false
+    end
   end
 
   it "renders text input different sized labels" do