Merge pull request #1223 from alphagov/update-fieldset-component

Allow custom heading size on fieldset component
alphagov · Dec 12, 2019 · 1274b9f · 1274b9f
2 parents cd01442 + b2c2f9e
commit 1274b9f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 36 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
+
+* 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
@@ -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
@@ -10,60 +10,58 @@ examples:
   default:
     data:
       legend_text: 'Do you have a passport?'
-      text: |
+      block: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="default-yes" name="default">
-        <label for="default-yes">Yes</label>
+          <input type="radio" id="default-yes" name="default">
+          <label for="default-yes">Yes</label>
 
-        <input type="radio" id="default-no" name="default">
-        <label for="default-no">No</label>
+          <input type="radio" id="default-no" name="default">
+          <label for="default-no">No</label>
   with_id_attribute:
     data:
       legend_text: 'Do you have a passport?'
       id: passports
-      text: |
+      block: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="passport-yes" name="default">
-        <label for="passport-yes">Yes</label>
+          <input type="radio" id="passport-yes" name="default">
+          <label for="passport-yes">Yes</label>
 
-        <input type="radio" id="passport-no" name="default">
-        <label for="passport-no">No</label>
-  with_custom_legend_size:
+          <input type="radio" id="passport-no" name="default">
+          <label for="passport-no">No</label>
+  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: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="size-yes" name="default">
-        <label for="size-yes">Yes</label>
+          <input type="radio" id="level-yes" name="default">
+          <label for="level-yes">Yes</label>
 
-        <input type="radio" id="size-no" name="default">
-        <label for="size-no">No</label>
-  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)'
+          <input type="radio" id="level-no" name="default">
+          <label for="level-no">No</label>
+  with_custom_legend_size:
+    description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'.
     data:
-      legend_text: |
-        <!-- Use the title component, this is hardcoded only for this example -->
-        <h1 style="font-size: 48px; line-height: 1.0416666667; font-weight: bold; margin: 0 0 30px 0;">
-          Do you have a passport?
-        </h1>
-      text: |
+      legend_text: 'Do you have a driving license?'
+      heading_size: 'l'
+      block: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="html-legend-yes" name="html-legend">
-        <label for="html-legend-yes">Yes</label>
+          <input type="radio" id="size-yes" name="default">
+          <label for="size-yes">Yes</label>
 
-        <input type="radio" id="html-legend-no" name="html-legend">
-        <label for="html-legend-no">No</label>
+          <input type="radio" id="size-no" name="default">
+          <label for="size-no">No</label>
   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: |
         <!-- Use the radio component, this is hardcoded only for this example -->
-        <input type="radio" id="default2-yes" name="default2">
-        <label for="default2-yes">Yes</label>
+          <input type="radio" id="default2-yes" name="default2">
+          <label for="default2-yes">Yes</label>
 
-        <input type="radio" id="default2-no" name="default2">
-        <label for="default2-no">No</label>
+          <input type="radio" id="default2-no" name="default2">
+          <label for="default2-no">No</label>
diff --git 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?',