diff --git a/app/views/govuk_publishing_components/components/_date_input.html.erb b/app/views/govuk_publishing_components/components/_date_input.html.erb index 38a76668ea..a72c724b01 100644 --- a/app/views/govuk_publishing_components/components/_date_input.html.erb +++ b/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], diff --git a/app/views/govuk_publishing_components/components/docs/date_input.yml b/app/views/govuk_publishing_components/components/docs/date_input.yml index 2039682b85..879a39daef 100644 --- a/app/views/govuk_publishing_components/components/docs/date_input.yml +++ b/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" diff --git a/spec/components/date_input_spec.rb b/spec/components/date_input_spec.rb index f19f545e3b..b640efaacb 100644 --- a/spec/components/date_input_spec.rb +++ b/spec/components/date_input_spec.rb @@ -78,6 +78,22 @@ 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 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: "Error: day-error
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?",