diff --git a/CHANGELOG.md b/CHANGELOG.md index 054fa5f360..a0635e9d0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## Unreleased * Add border option to breadcrumb ([PR #1952])(https://github.com/alphagov/govuk_publishing_components/pull/1952) MINOR +* Add custom heading level option to radio component ([PR #1951](https://github.com/alphagov/govuk_publishing_components/pull/1951)) ## 24.3.1 diff --git a/app/views/govuk_publishing_components/components/_radio.html.erb b/app/views/govuk_publishing_components/components/_radio.html.erb index 0ec35f68a4..9167ebb4cf 100644 --- a/app/views/govuk_publishing_components/components/_radio.html.erb +++ b/app/views/govuk_publishing_components/components/_radio.html.erb @@ -1,4 +1,5 @@ <% + shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) id ||= nil id_prefix ||= "radio-#{SecureRandom.hex(4)}" items ||= [] @@ -54,7 +55,7 @@ <% end %> <% else %> <%= tag.legend class: legend_classes do %> - <%= tag.h2 heading, class: "govuk-fieldset__heading" %> + <%= content_tag(shared_helper.get_heading_level, heading, class: "govuk-fieldset__heading") %> <% end %> <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/radio.yml b/app/views/govuk_publishing_components/components/docs/radio.yml index ddb46fa47c..da59e42aee 100644 --- a/app/views/govuk_publishing_components/components/docs/radio.yml +++ b/app/views/govuk_publishing_components/components/docs/radio.yml @@ -184,7 +184,7 @@ examples: text: "Blue" with_custom_heading_size: description: | - This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed. + This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed. If the is_page_heading option is true and heading_size is not set, the text size will be xl. data: @@ -198,6 +198,19 @@ examples: text: "Green" - value: "blue" text: "Blue" + with_custom_heading_level: + description: This allows the heading level to be changed. Heading level will default to `h2` if nothing is passed. + data: + name: "radio-group-description" + heading: "What is your favourite colour?" + heading_level: 3 + items: + - value: "red" + text: "Red" + - value: "green" + text: "Green" + - value: "blue" + text: "Blue" with_hint_text_on_radios: data: name: "radio-group-hint-text" diff --git a/spec/components/radio_spec.rb b/spec/components/radio_spec.rb index e54a640990..a6dbb7c7b0 100644 --- a/spec/components/radio_spec.rb +++ b/spec/components/radio_spec.rb @@ -223,6 +223,33 @@ def component_name assert_select ".govuk-fieldset__legend.govuk-fieldset__legend--m", "What is your favourite skittle?" end + it "renders radio-group with h2 heading level by default" do + render_component( + name: "favourite-skittle", + heading: "What is your favourite skittle?", + items: [ + { label: "Red", value: "red" }, + { label: "Green", value: "green" }, + { label: "Blue", value: "blue" }, + ], + ) + assert_select "h2.govuk-fieldset__heading", text: "What is your favourite skittle?" + end + + it "renders radio-group custom heading level if custom heading level is passed" do + render_component( + name: "favourite-skittle", + heading: "What is your favourite skittle?", + heading_level: 4, + items: [ + { label: "Red", value: "red" }, + { label: "Green", value: "green" }, + { label: "Blue", value: "blue" }, + ], + ) + assert_select "h4.govuk-fieldset__heading", text: "What is your favourite skittle?" + end + it "renders radio-group with bold labels" do render_component( name: "radio-group-bold-labels",