Add heading options to radio component

alphagov · Nov 20, 2018 · f65d673 · f65d673
1 parent 4568be2
commit f65d673
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 10 deletions.
diff --git 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
+
+- Add heading options to radio component (PR #635)
+
 ## 12.11.0
 
 * Make the legend as page heading optional (PR #630)

diff --git a/app/views/govuk_publishing_components/components/_radio.html.erb b/app/views/govuk_publishing_components/components/_radio.html.erb
@@ -3,6 +3,8 @@
   items ||= []
 
   label ||= nil
+  heading ||= nil
+  is_page_heading ||= false
   hint ||= nil
   error_message ||= nil
   error_items ||= nil
@@ -18,6 +20,16 @@
 %>
 <%= content_tag :div, class: form_group_css_classes do %>
 
+  <% if heading.present? %>
+    <% if is_page_heading %>
+      <%= tag.legend class: "govuk-fieldset__legend govuk-fieldset__legend--xl gem-c-title gem-c-title--margin-bottom-5" do %>
+        <%= tag.h1 heading, class: "gem-c-title__text" %>
+      <% end %>
+    <% else %>
+      <%= tag.legend heading, class: "govuk-fieldset__legend govuk-fieldset__legend--m" %>
+    <% end %>
+  <% end %>
+
   <% if hint %>
     <%= render "govuk_publishing_components/components/hint", {
       id: hint_id,

diff --git a/app/views/govuk_publishing_components/components/docs/radio.yml b/app/views/govuk_publishing_components/components/docs/radio.yml
@@ -57,6 +57,60 @@ examples:
         text: "Use GOV.UK Verify"
         hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office."
         bold: true
+  with_hint_on_form_group:
+    data:
+      name: "radio-group-error"
+      id_prefix: "hint"
+      hint: "You’ll need to prove your identity using one of the following methods"
+      items:
+      - value: "government-gateway"
+        text: "Use Government Gateway"
+      - value: "govuk-verify"
+        text: "Use GOV.UK Verify"
+  with_heading:
+    description: This adds a legend element containing the text supplied.
+    data:
+      name: "radio-group-heading"
+      heading: "Are you hungry?"
+      items:
+      - value: "yes"
+        text: "Yes"
+      - value: "no"
+        text: "No"
+  with_heading_and_hint:
+    data:
+      name: "radio-group-heading"
+      heading: "What is your favourite colour?"
+      hint: "If your favourite is not below, pick the colour closest to it."
+      items:
+      - value: "red"
+        text: "Red"
+      - value: "green"
+        text: "Green"
+      - value: "blue"
+        text: "Blue"
+  with_page_heading:
+    description: This adds a H1 element containing the text supplied.
+    data:
+      name: "radio-group-heading"
+      heading: "Is it raining?"
+      is_page_heading: true
+      items:
+      - value: "yes"
+        text: "Yes"
+      - value: "no"
+        text: "No"
+  with_page_heading_and_hint:
+    data:
+      name: "radio-group-heading"
+      heading: "Is it snowing?"
+      is_page_heading: true
+      hint: "Sleet or hail doesn’t count."
+      items:
+      - value: "yes"
+        text: "Yes"
+      - value: "no"
+        text: "No"
   with_hint_text:
     data:
       name: "radio-group-hint-text"
@@ -120,16 +174,6 @@ examples:
         hint_text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien justo, lobortis elementum tortor in, luctus interdum turpis. Nam sit amet nulla nec arcu condimentum dapibus quis varius metus. Suspendisse cursus tristique diam et vestibulum. Proin nec lacinia tortor. Morbi at nisi id lorem aliquam ullamcorper. Pellentesque laoreet sit amet leo sodales ultricies. Suspendisse maximus efficitur odio in tristique."
         text: "Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies."
         bold: true
-  with_hint_on_form_group:
-    data:
-      name: "radio-group-error"
-      id_prefix: "hint"
-      hint: "You’ll need to prove your identity using one of the following methods"
-      items:
-      - value: "government-gateway"
-        text: "Use Government Gateway"
-      - value: "govuk-verify"
-        text: "Use GOV.UK Verify"
   with_error_on_form_group:
     data:
       name: "radio-group-error"

diff --git a/spec/components/radio_spec.rb b/spec/components/radio_spec.rb
@@ -29,6 +29,8 @@ def component_name
 
     assert_select ".govuk-radios__input[name=radio-group-one-item]"
     assert_select ".govuk-radios__item:first-child .govuk-radios__label", text: "Use Government Gateway"
+    assert_select "legend", false
+    assert_select "legend h1", false
   end
 
   it "renders radio-group with multiple items" do
@@ -51,6 +53,34 @@ def component_name
     assert_select ".govuk-radios__item:last-child .govuk-radios__label", text: "Use GOV.UK Verify"
   end
 
+  it "renders radio-group with a legend" do
+    render_component(
+      name: "favourite-smartie",
+      heading: "What is your favourite smartie?",
+      items: [
+        { label: "Red", value: "red" },
+        { label: "Blue", value: "blue" }
+      ]
+    )
+    assert_select ".govuk-radios"
+    assert_select "legend", "What is your favourite smartie?"
+    assert_select "legend h1", false
+  end
+
+  it "renders radio-group with the legend as the page heading" do
+    render_component(
+      name: "favourite-skittle",
+      heading: "What is your favourite skittle?",
+      is_page_heading: true,
+      items: [
+        { label: "Red", value: "red" },
+        { label: "Blue", value: "blue" }
+      ]
+    )
+    assert_select ".govuk-radios"
+    assert_select "legend h1", "What is your favourite skittle?"
+  end
+
   it "renders radio-group with bold labels" do
     render_component(
       name: "radio-group-bold-labels",