Merge pull request #1951 from alphagov/custom-heading-lvl-for-radio

Add custom heading level option to radio component

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
 

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 %>

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"

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",