From f5eebc66e421560636425928f34225e218459b8b Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 20 Jan 2025 15:53:12 +0000 Subject: [PATCH 1/3] Add component wrapper helper to textarea - breaking change, renames `id` option to `textarea_id` as this is applied to a child element and `id` is applied to the parent by the component wrapper - removes the shared helper, instead relying on the component wrapper helper to provide the same functionality - removes a bit of code that sets the margin back to normal if an invalid value is passed, but this outcome is now handled by the component wrapper --- .../components/_textarea.scss | 6 ++++- .../components/_textarea.html.erb | 25 ++++++++----------- .../components/docs/textarea.yml | 5 ++-- spec/components/textarea_spec.rb | 16 +++--------- 4 files changed, 23 insertions(+), 29 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss b/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss index bdd730a889..8e37b6f49f 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss @@ -5,7 +5,11 @@ .govuk-textarea { margin-bottom: 0; - + .govuk-hint { + ~ .govuk-hint { + margin-top: govuk-spacing(1); + } + + ~ .govuk-error-message { margin-top: govuk-spacing(1); } } diff --git a/app/views/govuk_publishing_components/components/_textarea.html.erb b/app/views/govuk_publishing_components/components/_textarea.html.erb index 7757c55aee..20993dd2a8 100644 --- a/app/views/govuk_publishing_components/components/_textarea.html.erb +++ b/app/views/govuk_publishing_components/components/_textarea.html.erb @@ -1,7 +1,7 @@ <% add_gem_component_stylesheet("textarea") - id ||= "textarea-#{SecureRandom.hex(4)}" + textarea_id ||= "textarea-#{SecureRandom.hex(4)}" value ||= nil rows ||= 5 describedby ||= nil @@ -11,7 +11,6 @@ label ||= nil hint ||= nil local_assigns[:margin_bottom] ||= 6 - local_assigns[:margin_bottom] = 6 if local_assigns[:margin_bottom] > 9 error_message ||= nil error_items ||= [] character_count ||= nil @@ -22,14 +21,13 @@ right_to_left ||= false right_to_left_help = right_to_left_help.nil? ? right_to_left : right_to_left_help - shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) + component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) + component_helper.add_class("gem-c-textarea govuk-form-group") + component_helper.add_class("govuk-form-group--error") if has_error - css_classes = %w(govuk-textarea) - css_classes << "govuk-js-character-count" if character_count - css_classes << "govuk-textarea--error" if has_error - form_group_css_classes = %w(gem-c-textarea govuk-form-group) - form_group_css_classes << "govuk-form-group--error" if has_error - form_group_css_classes << shared_helper.get_margin_bottom + textarea_classes = %w(govuk-textarea) + textarea_classes << "govuk-js-character-count" if character_count + textarea_classes << "govuk-textarea--error" if has_error aria_described_by ||= nil if hint || has_error || describedby @@ -40,11 +38,10 @@ aria_described_by = aria_described_by.join(" ") end %> - -<%= content_tag :div, class: form_group_css_classes do %> +<%= tag.div(**component_helper.all_attributes) do %> <% if label %> <%= render "govuk_publishing_components/components/label", { - html_for: id, + html_for: textarea_id, right_to_left: right_to_left_help }.merge(label.symbolize_keys) %> <% end %> @@ -67,9 +64,9 @@ <% end %> <%= tag.textarea name: name, - class: css_classes, + class: textarea_classes, dir: right_to_left ? "rtl" : nil, - id: id, + id: textarea_id, rows: rows, maxlength: maxlength, data: data, diff --git a/app/views/govuk_publishing_components/components/docs/textarea.yml b/app/views/govuk_publishing_components/components/docs/textarea.yml index 5d878f8bab..d50c16ed0a 100644 --- a/app/views/govuk_publishing_components/components/docs/textarea.yml +++ b/app/views/govuk_publishing_components/components/docs/textarea.yml @@ -14,6 +14,7 @@ accessibility_criteria: | - have correctly associated labels Labels use the [label component](/component-guide/label). +uses_component_wrapper_helper: true examples: default: data: @@ -26,7 +27,7 @@ examples: label: text: "What is the nature of your medical emergency?" name: "emergency-name" - id: "emergency-id" + textarea_id: "emergency-id" with_margin_bottom: description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of 6 (30px). data: @@ -102,7 +103,7 @@ examples: <%= component %> <% end %> data: - id: "contextual-guidance-id" + textarea_id: "contextual-guidance-id" label: text: "Title" bold: true diff --git a/spec/components/textarea_spec.rb b/spec/components/textarea_spec.rb index 083fb98808..8621fdb17d 100644 --- a/spec/components/textarea_spec.rb +++ b/spec/components/textarea_spec.rb @@ -27,10 +27,12 @@ def component_name render_component( label: { text: "Can you provide more detail?" }, name: "more-details", - id: "this-id", + textarea_id: "this-id", + id: "component-id", ) - assert_select "#this-id.govuk-textarea" + assert_select "#component-id.gem-c-textarea" + assert_select "textarea#this-id" end it "renders textarea with a custom number of rows" do @@ -102,16 +104,6 @@ def component_name assert_select '.gem-c-textarea.govuk-\!-margin-bottom-4' end - it "defaults to the initial bottom margin if an incorrect value is passed" do - render_component( - label: { text: "Can you provide more detail?" }, - name: "with-fallback-margin-bottom", - margin_bottom: 12, - ) - - assert_select '.gem-c-textarea.govuk-\!-margin-bottom-6' - end - it "defaults to the initial bottom margin if no value is passed" do render_component( label: { text: "Can you provide more detail?" }, From dfd33396a1f3b781016986296c3a504c105f1c92 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Tue, 21 Jan 2025 15:48:11 +0000 Subject: [PATCH 2/3] Update character count with textarea changes - also improve tests, remove redundant data attributes test (component doesn't accept data attributes) --- .../components/_character_count.html.erb | 11 ++--- spec/components/character_count_spec.rb | 40 +++++++++++-------- 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/app/views/govuk_publishing_components/components/_character_count.html.erb b/app/views/govuk_publishing_components/components/_character_count.html.erb index e0d52e611d..12e767dbe4 100644 --- a/app/views/govuk_publishing_components/components/_character_count.html.erb +++ b/app/views/govuk_publishing_components/components/_character_count.html.erb @@ -1,9 +1,14 @@ <% + add_gem_component_stylesheet("error-message") + add_gem_component_stylesheet("character-count") + id ||= "character-count-#{SecureRandom.hex(4)}" maxlength ||= nil maxwords ||= nil threshold ||= nil textarea ||= {} + + textarea[:textarea_id] = id %> <% if maxlength || maxwords %> <%= content_tag :div, @@ -15,14 +20,10 @@ threshold: threshold } do %> - <%= render "govuk_publishing_components/components/textarea", { id: id, character_count: true }.merge(textarea.symbolize_keys) %> + <%= render "govuk_publishing_components/components/textarea", { textarea_id: id, character_count: true, margin_bottom: 1 }.merge(textarea.symbolize_keys) %>
<%= t("components.character_count.body", number: maxlength || maxwords, type: maxwords ? t("components.character_count.type.words") : t("components.character_count.type.characters")) %>
<% end %> <% end %> -<% - add_gem_component_stylesheet("error-message") - add_gem_component_stylesheet("character-count") -%> diff --git a/spec/components/character_count_spec.rb b/spec/components/character_count_spec.rb index 44b0e941c7..8cc2b2797d 100644 --- a/spec/components/character_count_spec.rb +++ b/spec/components/character_count_spec.rb @@ -9,38 +9,46 @@ def component_name assert_empty render_component({}) end - it "renders character count with textarea" do + it "renders character count with minimal data passed" do render_component( - name: "character-count", textarea: { - label: { text: "Can you provide more detail?" }, name: "more-details", }, - data: { - module: "character-count", - }, maxlength: "100", ) + assert_select ".govuk-character-count .govuk-textarea[name='more-details']" + end - assert_select ".govuk-character-count .govuk-textarea" - + it "renders character count with more options" do + render_component( + textarea: { + label: { text: "Can you provide more detail?" }, + name: "more-details", + }, + maxlength: "100", + maxwords: "3", + threshold: "11", + ) + assert_select ".gem-c-character-count[data-maxlength='100']" + assert_select ".gem-c-character-count[data-maxwords='3']" + assert_select ".gem-c-character-count[data-threshold='11']" + assert_select ".govuk-character-count .govuk-textarea[name='more-details']" assert_select ".govuk-character-count .govuk-label", text: "Can you provide more detail?" end - it "renders character count with data attributes" do + it "renders character count with the correct id for the textarea" do render_component( - name: "character-count", textarea: { label: { text: "Can you provide more detail?" }, name: "more-details", - }, - data: { - module: "character-count", + textarea_id: "textarea-element-id", + id: "textarea-component-id", }, maxlength: "100", + id: "character-count-id", ) - - assert_select ".govuk-character-count[data-module='govuk-character-count']" - assert_select ".govuk-character-count[data-maxlength='100']" + assert_select "#textarea-component-id.gem-c-textarea" + assert_select "textarea#character-count-id" + assert_select "#textarea-element-id", false end end From 876fc9102d0e651b2629a755dc46a25d6861fefd Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 22 Jan 2025 10:09:01 +0000 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b666a4f94..2be5d5a575 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## Unreleased +* **BREAKING** Add component wrapper helper to textarea ([PR #4574](https://github.com/alphagov/govuk_publishing_components/pull/4574)) * Remove margin top from print link ([PR #4577](https://github.com/alphagov/govuk_publishing_components/pull/4577)) * **BREAKING** Use component wrapper on print link component ([PR #4576](https://github.com/alphagov/govuk_publishing_components/pull/4576)) * Refactor single page notification component ([PR #4501](https://github.com/alphagov/govuk_publishing_components/pull/4501))