18F/identity-dashboard

<%# expected locals: 
  [Array<Symbol|String>] steps
  [Integer] current_step_index such that `steps[current_step_index]` is not null
  [String] localization_base so that `t("#{localization_base}.#{step}")` returns something valid from the i18n yml files
%>
<div class="lg-step-indicator shadow-1 padding-top-2" aria-label="progress">
  <ol class="step-indicator__scroller">
    <% steps.each_with_index do |step, index| %>
      <% case index <=> current_step_index %>
      <% when -1 %>
        <li class="step-indicator__step step-indicator__step--complete">
          <span class="step-indicator__step-title"><%= t("#{localization_base}.#{step}") %> <span class="usa-sr-only">completed</span></span>
        </li>
      <% when 0 %>
        <li class="step-indicator__step step-indicator__step--current" aria-current="true">
          <span class="step-indicator__step-title"><%= t("#{localization_base}.#{step}") %></span>
        </li>
      <% when 1 %>
        <li class="step-indicator__step">
          <span class="step-indicator__step-title"><%= t("#{localization_base}.#{step}") %> <span class="usa-sr-only">not completed</span></span>
        </li>
      <% end %>
    <% end %>
  </ol>
  <div class="usa-step-indicator__header flex-justify-center margin-bottom-1">
    <h4 class="usa-step-indicator__heading margin-top-0">
      <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.count %></span> </span><span class="usa-step-indicator__heading-text"><%= t("#{localization_base}.#{step}") %></span>
    </h4>
  </div>
</div>