[Step Indicator] Add options to display large header first (#306)

## Changes

- Adds `large_header` option
- Adds `header_first` option

## Context

In certain applications like MN, the header is shown before the step
indicator segments and uses a larger text that displays the heading text
prominently (compared to the "Step X of Y" text.)

This PR adds some options to support this so we can switch to using the
Strata step indicator partial instead of a custom one.

### Caveats

I'm not entirely sure if there's an accessibility consideration here
with placing the heading above the step indicator. The USWDS
documentation states that a heading should be placed below the step
indicator, but it's worded to focus on **having a heading** and not so
much on having a heading **below** the indicator.

## Testing

Updated lookbook.

<img width="1716" height="350" alt="CleanShot 2026-03-30 at 17 19 56@2x"
src="https://github.com/user-attachments/assets/96f39c97-c4d4-4a1f-9ee8-7a52960553ad"
/>

Author: kyeah

app/previews/strata/shared/step_indicator_preview.rb

@@ -58,6 +58,15 @@ def decision_made
       end
 
       # @!endgroup
+
+      def large_header_first
+        render template: "strata/shared/_step_indicator", locals: {
+          steps: [ :in_progress, :submitted, :decision_made ],
+          current_step: :submitted,
+          large_header: true,
+          header_first: true
+        }
+      end
     end
   end
 end

app/views/strata/shared/_step_indicator.html.erb

@@ -4,6 +4,8 @@
 # @param steps [Array<String, Symbol>] An array of step identifiers that will be displayed in order
 # @param current_step [String, Symbol] The identifier of the current active step
 # @param translation_scope [String] - I18n scope prefix, defaulting to 'strata.application_forms.steps'
+# @param large_header [Boolean] (optional) - Adds "font-heading-xl" class to the heading text
+# @param header_first [Boolean] (optional) - Shows the header above the segments with "margin-bottom-2" class
 #
 # Each step's display name is fetched from the i18n translations under strata.application_forms.steps
 # Steps before and including the current step are marked as complete.
@@ -12,6 +14,8 @@ steps = steps.map(&:to_sym)
 current_step = current_step.to_sym
 current_step_index = steps.index(current_step) || -1
 translation_scope ||= "strata.application_forms.steps"
+large_header ||= false
+header_first ||= false
 
 step_indicators = steps.map.with_index do |step, index|
   {
@@ -26,10 +30,27 @@ step_indicator_class = ""
 step_indicator_class += "usa-step-indicator--counters" if local_assigns[:type] == :counters
 %>
 
+<% header_content = capture do %>
+  <div class="<%= class_names("usa-step-indicator__header", "margin-bottom-2": header_first) %>">
+    <h4 class="usa-step-indicator__heading display-flex flex-align-center">
+      <span class="usa-step-indicator__heading-counter">
+        <span class="usa-sr-only">Step</span>
+        <span class="usa-step-indicator__current-step"><%= current_step_index + 1 %></span>
+        <span class="usa-step-indicator__total-steps">of <%= steps.length %></span>
+      </span>
+      <span class="<%= class_names("usa-step-indicator__heading-text", "font-heading-xl": large_header) %>"><%= current_step_name %></span>
+    </h4>
+  </div>
+<% end %>
+
 <div
   class="usa-step-indicator <%= step_indicator_class %>"
   aria-label="progress"
 >
+  <% if header_first %>
+    <%= header_content %>
+  <% end %>
+
   <ol class="usa-step-indicator__segments">
     <% step_indicators.each do |step_indicator| %>
       <li
@@ -52,15 +73,8 @@ step_indicator_class += "usa-step-indicator--counters" if local_assigns[:type] =
         </li>
     <% end %>
   </ol>
-  
-  <div class="usa-step-indicator__header">
-    <h4 class="usa-step-indicator__heading">
-      <span class="usa-step-indicator__heading-counter">
-        <span class="usa-sr-only">Step</span>
-        <span class="usa-step-indicator__current-step"><%= current_step_index + 1 %></span>
-        <span class="usa-step-indicator__total-steps">of <%= steps.length %></span>
-      </span>
-      <span class="usa-step-indicator__heading-text"><%= current_step_name %></span>
-    </h4>
-  </div>
+
+  <% unless header_first %>
+    <%= header_content %>
+  <% end %>
 </div>