Add heading option to file input component

- aligns heading behaviour with other inputs (which allow for the label for the input to be wrapped in a heading tag) - for situations where the input is the first or only thing on a page, and no other suitable heading is appropriate (https://design-system.service.gov.uk/patterns/question-pages/)
alphagov · Dec 6, 2023 · e41b3b7 · e41b3b7
1 parent 51be85b
commit e41b3b7
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/app/views/govuk_publishing_components/components/_file_upload.html.erb b/app/views/govuk_publishing_components/components/_file_upload.html.erb
@@ -1,6 +1,8 @@
 <%
   add_gem_component_stylesheet("file-upload")
 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   id ||= "file-upload-#{SecureRandom.hex(4)}"
   value ||= nil
   accept ||= nil
@@ -13,6 +15,8 @@
   has_error = error_message || error_items.any?
   hint_id = "hint-#{SecureRandom.hex(4)}"
   error_id = "error-#{SecureRandom.hex(4)}"
+  heading_size = false unless shared_helper.valid_heading_size?(heading_size)
+  heading_level ||= nil
 
   css_classes = %w(gem-c-file-upload govuk-file-upload)
   css_classes << "govuk-file-upload--error" if has_error
@@ -30,7 +34,20 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", { html_for: id, text: label[:text] }.merge(label.symbolize_keys) %>
+    <% label_markup = capture do %>
+      <%= render "govuk_publishing_components/components/label", {
+        html_for: id,
+        heading_size: heading_size
+      }.merge(label.symbolize_keys) %>
+    <% end %>
+
+    <% if heading_level %>
+      <%= content_tag(shared_helper.get_heading_level, class: "govuk-label-wrapper") do %>
+        <%= label_markup %>
+      <% end %>
+    <% else %>
+      <%= label_markup %>
+    <% end %>
   <% end %>
 
   <% if hint %>

diff --git a/app/views/govuk_publishing_components/components/docs/file_upload.yml b/app/views/govuk_publishing_components/components/docs/file_upload.yml
@@ -48,3 +48,14 @@ examples:
         text: "Upload an image"
       name: "file-upload-specific"
       accept: "image/*"
+  with_label_as_heading:
+    description: |
+      Wraps the label in a heading tag. Valid options are `1` to `6`. To adjust the size of the label/heading, use the `heading_size` option. Valid options are `s`, `m`, `l` and `xl`.
+
+      Based on the [heading/label pattern](https://design-system.service.gov.uk/patterns/question-pages/) in the GOV.UK Design System.
+    data:
+      label:
+        text: "This is a heading 1 and a label"
+      name: "name"
+      heading_level: 1
+      heading_size: "l"
diff --git a/spec/components/file_upload_spec.rb b/spec/components/file_upload_spec.rb
@@ -62,6 +62,36 @@ def component_name
     assert_select ".govuk-file-upload[accept='image/*']"
   end
 
+  it "renders text input different sized labels" do
+    render_component(
+      label: { text: "What is your email address?" },
+      name: "email-address",
+      heading_size: "xl",
+    )
+
+    assert_select ".govuk-label.govuk-label--xl"
+  end
+
+  it "renders the label wrapped in a heading" do
+    render_component(
+      label: { text: "Where's your head at?" },
+      name: "heading",
+      heading_level: 3,
+    )
+
+    assert_select "h3.govuk-label-wrapper .govuk-label", text: "Where's your head at?"
+  end
+
+  it "only renders a label wrapped in a heading if specified" do
+    render_component(
+      label: { text: "What is your email address?" },
+      name: "email-address",
+      heading_size: "xl",
+    )
+
+    assert_select ".govuk-label-wrapper", false
+  end
+
   context "when a hint is provided" do
     before do
       render_component(