From ca7806ff07d97e76d71a26de221faa9be475aa60 Mon Sep 17 00:00:00 2001
From: Dana Cotoran <dana.cotoran@gmail.com>
Date: Mon, 1 Mar 2021 16:14:36 +0000
Subject: [PATCH] Add custom heading level option to radio component

Currently if the radio component is passed a heading, and the heading is
not a "Page heading", then that heading is always a h2.
This is not always appropriate; there are instances where more
flexibility is necessary in order to maintain a correct hierarchical
heading structure.
This introduces the shared helper's heading level function to the radio
component. This way we can ensure the default remains h2, while also
having the ability to pass a custom heading level where necessary.
---
 .../components/_radio.html.erb                |  3 ++-
 .../components/docs/radio.yml                 | 15 ++++++++++-
 spec/components/radio_spec.rb                 | 27 +++++++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

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