From 7244937c742179ef80dd969d124fa1cd0b070f38 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 12 Dec 2019 15:55:52 +0000 Subject: [PATCH 1/4] Add heading_level support to fieldset --- .../components/_fieldset.html.erb | 16 ++++++++++++++-- .../components/docs/fieldset.yml | 13 +++++++++++++ spec/components/fieldset_spec.rb | 9 +++++++++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/app/views/govuk_publishing_components/components/_fieldset.html.erb b/app/views/govuk_publishing_components/components/_fieldset.html.erb index d693d82d30..050a246999 100644 --- a/app/views/govuk_publishing_components/components/_fieldset.html.erb +++ b/app/views/govuk_publishing_components/components/_fieldset.html.erb @@ -1,7 +1,10 @@ <% + shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) + text = text || yield describedby ||= nil role ||= nil + heading_level ||= nil heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size) error_message ||= nil error_id ||= nil @@ -22,8 +25,17 @@ %> <%= tag.div class: css_classes do %> <%= tag.fieldset class: fieldset_classes, aria: { describedby: describedby }, role: role, id: id do %> - <%= tag.legend class: legend_classes do %> - <%= legend_text %> + <% if heading_level %> + <%= tag.legend class: legend_classes do %> + <%= content_tag( + shared_helper.get_heading_level, + legend_text, + class: "govuk-fieldset__heading" + ) + %> + <% end %> + <% else %> + <%= tag.legend legend_text, class: legend_classes %> <% end %> <% if error_message %> <%= render "govuk_publishing_components/components/error_message", { diff --git a/app/views/govuk_publishing_components/components/docs/fieldset.yml b/app/views/govuk_publishing_components/components/docs/fieldset.yml index 00d8ca3041..cb6757f567 100644 --- a/app/views/govuk_publishing_components/components/docs/fieldset.yml +++ b/app/views/govuk_publishing_components/components/docs/fieldset.yml @@ -28,6 +28,19 @@ examples: + with_heading: + description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'. + data: + legend_text: 'Do you have a driving license?' + heading_level: 2 + heading_size: 'm' + text: | + + + + + + with_custom_legend_size: description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'. data: diff --git a/spec/components/fieldset_spec.rb b/spec/components/fieldset_spec.rb index 9c4eb83841..383159c1b0 100644 --- a/spec/components/fieldset_spec.rb +++ b/spec/components/fieldset_spec.rb @@ -31,6 +31,15 @@ def component_name assert_select ".govuk-fieldset#passports" end + it "renders a fieldset with the legend as heading" do + render_component( + legend_text: 'Do you have a passport?', + heading_level: 2, + text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ad neque, maxime est ea laudantium totam fuga!' + ) + assert_select ".govuk-fieldset .govuk-fieldset__legend h2", "Do you have a passport?" + end + it "renders a fieldset with a custom size legend" do render_component( legend_text: 'Do you have a passport?', From 29df4cbdb79e00d085659c472383be25eba4760a Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 12 Dec 2019 16:01:07 +0000 Subject: [PATCH 2/4] Promote using yield/block Instead of the current inline html with sanitize examples we now promote nesting components within the fieldset using the yield block. --- .../components/docs/fieldset.yml | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/app/views/govuk_publishing_components/components/docs/fieldset.yml b/app/views/govuk_publishing_components/components/docs/fieldset.yml index cb6757f567..f5f348c6b1 100644 --- a/app/views/govuk_publishing_components/components/docs/fieldset.yml +++ b/app/views/govuk_publishing_components/components/docs/fieldset.yml @@ -10,73 +10,73 @@ examples: default: data: legend_text: 'Do you have a passport?' - text: | + block: | - - + + - - + + with_id_attribute: data: legend_text: 'Do you have a passport?' id: passports - text: | + block: | - - + + - - + + with_heading: description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'. data: legend_text: 'Do you have a driving license?' heading_level: 2 heading_size: 'm' - text: | + block: | - - + + - - + + with_custom_legend_size: description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'. data: legend_text: 'Do you have a driving license?' heading_size: 'l' - text: | + block: | - - + + - - + + with_html_legend: description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://components.publishing.service.gov.uk/component-guide/title)' data: legend_text: | -

- Do you have a passport? -

- text: | +

+ Do you have a passport? +

+ block: | - - + + - - + + with_error_message: description: The component also accepts an error_id, or generates one automatically. data: legend_text: 'Do you have a passport?' error_message: 'Please choose an option' - text: | + block: | - - + + - - + + From 0047640468881f3d7619fe7ac89c5eda09dafa36 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 12 Dec 2019 16:02:37 +0000 Subject: [PATCH 3/4] Remove html legend example Instead of using custom html for inserting headings within the legend we now promote the `heading_level` option. --- .../components/docs/fieldset.yml | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/app/views/govuk_publishing_components/components/docs/fieldset.yml b/app/views/govuk_publishing_components/components/docs/fieldset.yml index f5f348c6b1..bab6186b5a 100644 --- a/app/views/govuk_publishing_components/components/docs/fieldset.yml +++ b/app/views/govuk_publishing_components/components/docs/fieldset.yml @@ -53,21 +53,6 @@ examples: - with_html_legend: - description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://components.publishing.service.gov.uk/component-guide/title)' - data: - legend_text: | - -

- Do you have a passport? -

- block: | - - - - - - with_error_message: description: The component also accepts an error_id, or generates one automatically. data: From b2c2f9e8b53f29a3bd983897427965f97ef41e75 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 12 Dec 2019 16:05:14 +0000 Subject: [PATCH 4/4] Update CHANGELOG.md --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a70e09a1f..0afe9bb478 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ useful summary for people upgrading their application, not a replication of the commit log. +## Unreleased + +* Allow custom heading size on fieldset component ([#1223](https://github.com/alphagov/govuk_publishing_components/pull/1223)) + ## 21.13.5 * Fix checkbox small option ([#1221](https://github.com/alphagov/govuk_publishing_components/pull/1221))