From 90b98444acf4f9ab6f57d6e12b9d4f0092b11230 Mon Sep 17 00:00:00 2001 From: James Mead Date: Mon, 25 Sep 2023 15:25:57 +0100 Subject: [PATCH] WIP: Allow errors on specific inputs of date-input --- .../components/_date_input.html.erb | 4 ++- .../components/_input.html.erb | 2 +- .../components/docs/date_input.yml | 7 +++++ .../components/docs/input.yml | 9 ++++-- spec/components/date_input_spec.rb | 29 +++++++++++++++++++ spec/components/input_spec.rb | 25 ++++++++++++++++ 6 files changed, 72 insertions(+), 4 deletions(-) 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/_input.html.erb b/app/views/govuk_publishing_components/components/_input.html.erb index 52ef0b83e5..32de33a41d 100644 --- a/app/views/govuk_publishing_components/components/_input.html.erb +++ b/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, 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/app/views/govuk_publishing_components/components/docs/input.yml b/app/views/govuk_publishing_components/components/docs/input.yml index 7447922bb9..b1f0910bb0 100644 --- a/app/views/govuk_publishing_components/components/docs/input.yml +++ b/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 diff --git a/spec/components/date_input_spec.rb b/spec/components/date_input_spec.rb index a23113a230..b640efaacb 100644 --- a/spec/components/date_input_spec.rb +++ b/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: "Error: Error 1
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: "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?", diff --git a/spec/components/input_spec.rb b/spec/components/input_spec.rb index 6c7d146c11..0bf90ec6ea 100644 --- a/spec/components/input_spec.rb +++ b/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