%
add_gem_component_stylesheet("step-by-step-nav")
options = {}
options[:heading_level] = heading_level ||= 2
steps ||= false
small ||= false
show_step ||= false
remember_last_step ||= false
step_nav_url ||= false
highlight_step ||= false
tracking_id ||= false # used to remember open steps, see docs
step_nav_content_id ||= tracking_id
step_count = 0
step_number = 0
step_nav_helper = GovukPublishingComponents::Presenters::StepByStepNavHelper.new
disable_ga4 ||= false
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
component_helper.add_data_attribute({
module: "gemstepnav",
show_text: t("components.step_by_step_nav.show"),
hide_text: t("components.step_by_step_nav.hide"),
show_all_text: t("components.step_by_step_nav.show_all"),
hide_all_text: t("components.step_by_step_nav.hide_all")
})
component_helper.add_data_attribute({ module: "ga4-event-tracker", ga4_expandable: "", }) unless disable_ga4
component_helper.add_data_attribute({ remember: "" }) if remember_last_step
component_helper.add_data_attribute({ id: tracking_id }) if tracking_id
component_helper.add_class("gem-c-step-nav js-hidden")
component_helper.add_class("govuk-!-display-none-print") if small
component_helper.add_class("gem-c-step-nav--large") unless small
%>
<% if steps %>
<%= tag.div(**component_helper.all_attributes) do %>
<% steps.each_with_index do |step, step_index| %>
<%
step_is_active = step_index + 1 == highlight_step
step_count += 1
id = step_nav_helper.generate_step_nav_id(step[:title])
logic = false
logic = step[:logic] if ["and", "or"].include? step[:logic]
circle_class = "gem-c-step-nav__circle--number"
circle_class = "gem-c-step-nav__circle--logic" if logic
%>
- "
<% if step_is_active %>aria-current="step"<% end %>
<%= "data-show" if step_count == show_step %>
id="<%= id %>"
data-track-count="stepNavSection"
<%= "data-optional" if step[:optional] %>
>
<%
ga4_link_data = {}
unless disable_ga4
ga4_link_data = {
"module": "ga4-link-tracker",
"ga4-track-links-only": "",
"ga4-set-indexes": "",
"ga4-link": {
"event_name": "navigation",
"type": "step by step",
"index_section": step_index + 1,
"index_section_count": steps.length,
"section": step[:title]
}.to_json
}
end
%>
<%= tag.div(class: "gem-c-step-nav__panel js-panel", id: "step-panel-#{id}-#{step_index + 1}", data: ga4_link_data) do %>
<%
in_substep = false
options[:step_nav_content_id] = step_nav_content_id
options[:step_title] = step[:title]
options[:step_index] = step_index
options[:link_index] = 0
options[:disable_ga4] = disable_ga4
%>
<% step[:contents].each do |element| %>
<%= step_nav_helper.render_step_nav_element(element, options) %>
<%
if element[:type] == 'list'
options[:link_index] += element[:contents].length
end
%>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>