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)) 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..bab6186b5a 100644 --- a/app/views/govuk_publishing_components/components/docs/fieldset.yml +++ b/app/views/govuk_publishing_components/components/docs/fieldset.yml @@ -10,60 +10,58 @@ 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_custom_legend_size: + + + 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_size: 'l' - text: | + heading_level: 2 + heading_size: 'm' + 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)' + + + 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 passport? -

- text: | + legend_text: 'Do you have a driving license?' + heading_size: 'l' + 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: | - - + + - - + + 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?',