Change current_step_index to current_step to avoid unnecessary conversion

Document the components in lookbook

app/components/projects/project_creation_footer_component.rb

@@ -32,16 +32,16 @@ module Projects
   class ProjectCreationFooterComponent < ApplicationComponent
     include OpPrimer::ComponentHelpers
 
-    def initialize(form_identifier:, project:, current_step_index:)
+    def initialize(form_identifier:, project:, current_step:)
       @form_identifier = form_identifier
       @project = project
-      @current_step_index = current_step_index
+      @current_step = current_step
 
       super
     end
 
     def call
-      render(StepWizard::FooterComponent.new(form_identifier:, total_steps:, current_step_index:)) do |footer|
+      render(StepWizard::FooterComponent.new(form_identifier:, total_steps:, current_step:)) do |footer|
         footer.with_cancel_button(href: projects_path)
         footer.with_continue_button(**continue_button_args)
         footer.with_submit_button(**submit_button_args)
@@ -56,7 +56,7 @@ module Projects
     private
 
     def show_progress_bar?
-      !current_step_index.zero?
+      current_step > 1
     end
 
     def continue_button_args

app/components/projects/wizard/footer_component.rb

@@ -33,17 +33,17 @@ module Projects
     class FooterComponent < ApplicationComponent
       include OpPrimer::ComponentHelpers
 
-      def initialize(form_identifier:, project:, custom_fields_by_section:, current_step_index:)
+      def initialize(form_identifier:, project:, custom_fields_by_section:, current_step:)
         @form_identifier = form_identifier
         @project = project
         @custom_fields_by_section = custom_fields_by_section
-        @current_step_index = current_step_index
+        @current_step = current_step
 
         super
       end
 
       def call
-        render(StepWizard::FooterComponent.new(form_identifier:, total_steps:, current_step_index:)) do |footer|
+        render(StepWizard::FooterComponent.new(form_identifier:, total_steps:, current_step:)) do |footer|
           footer.with_back_button(href: back_button_href)
           footer.with_cancel_button(href: cancel_button_href)
           footer.with_continue_button(**continue_button_args)
@@ -54,7 +54,7 @@ module Projects
 
       private
 
-      attr_reader :form_identifier, :project, :custom_fields_by_section, :current_step_index
+      attr_reader :form_identifier, :project, :custom_fields_by_section, :current_step
 
       def sections
         @sections ||= custom_fields_by_section.keys
@@ -91,15 +91,15 @@ module Projects
       end
 
       def next_step
-        return nil if current_step_index >= total_steps - 1
+        return nil if current_step >= total_steps
 
-        current_step_index + 1
+        current_step + 1
       end
 
       def previous_step
-        return nil if current_step_index.zero?
+        return nil if current_step == 1
 
-        current_step_index - 1
+        current_step - 1
       end
     end
   end

app/components/projects/wizard/page_component.html.erb

@@ -63,7 +63,7 @@
           form_identifier: "project-wizard-form",
           project:,
           custom_fields_by_section:,
-          current_step_index: custom_fields_by_section.keys.index(current_section) || 0
+          current_step: custom_fields_by_section.keys.index(current_section) || 0
         )
       )
     end

app/components/step_wizard/footer_component.html.erb

@@ -43,7 +43,7 @@ See COPYRIGHT and LICENSE files for more details.
 
         <%= progress_wrapper.with_column(ml: 2) do %>
           <%= render(Primer::Beta::Text.new(tag: :div, font_size: :small, color: :muted)) do %>
-            <%= I18n.t("projects.wizard.progress_label", current: current_step_index + 1, total: total_steps) %>
+            <%= I18n.t("projects.wizard.progress_label", current: current_step, total: total_steps) %>
           <% end %>
         <% end %>
       <% end %>

app/components/step_wizard/footer_component.rb

@@ -77,30 +77,30 @@ module StepWizard
       end
     }
 
-    def initialize(form_identifier:, total_steps:, current_step_index:)
+    def initialize(form_identifier:, total_steps:, current_step:)
       super()
 
       @form_identifier = form_identifier
       @total_steps = total_steps
-      @current_step_index = current_step_index
+      @current_step = current_step
     end
 
     private
 
-    attr_reader :form_identifier, :total_steps, :current_step_index
+    attr_reader :form_identifier, :total_steps, :current_step
 
     def progress_percentage
       return 0 if total_steps.zero?
 
-      ((current_step_index + 1).to_f / total_steps * 100).round
+      (current_step.to_f / total_steps * 100).round
     end
 
     def first_step?
-      current_step_index.zero?
+      current_step == 1
     end
 
     def last_step?
-      current_step_index >= total_steps - 1
+      current_step >= total_steps
     end
   end
 end

app/views/projects/new.html.erb

@@ -75,7 +75,7 @@ See COPYRIGHT and LICENSE files for more details.
       render Projects::ProjectCreationFooterComponent.new(
         form_identifier: "project-create-form",
         project: @new_project,
-        current_step_index: params.fetch(:step, 1).to_i - 1
+        current_step: params.fetch(:step, 1).to_i
       )
     end
   %>

lookbook/previews/open_project/step_wizard/footer_preview.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module OpenProject
+  module StepWizard
+    # @logical_path OpenProject/StepWizard
+    class FooterPreview < Lookbook::Preview
+      # @label Default
+      def default
+        render_with_template(template: "open_project/step_wizard/footer_preview/playground",
+                             locals: { show_back_button: true, show_cancel_button: true, show_progress_bar: true, total_steps: 6,
+                                       current_step: 3 })
+      end
+
+      # @label Playground
+      # @param show_back_button [Boolean]
+      # @param show_cancel_button [Boolean]
+      # @param show_progress_bar [Boolean]
+      # @param total_steps [Integer]
+      # @param current_step [Integer]
+      def playground(
+        show_back_button: true,
+        show_cancel_button: true,
+        show_progress_bar: true,
+        total_steps: 6,
+        current_step: 3
+      )
+        render_with_template(locals: { show_back_button:, show_cancel_button:, show_progress_bar:, total_steps:, current_step: })
+      end
+    end
+  end
+end

lookbook/previews/open_project/step_wizard/footer_preview/playground.html.erb

@@ -0,0 +1,9 @@
+<%=
+  render(StepWizard::FooterComponent.new(form_identifier: "my-form", total_steps:, current_step:)) do |footer|
+    footer.with_back_button(href: "back_path") if show_back_button
+    footer.with_cancel_button(href: "cancel_path") if show_cancel_button
+    footer.with_continue_button(href: "next_path")
+    footer.with_submit_button(href: "submit_path")
+    footer.with_progress_bar if show_progress_bar
+  end
+%>

lookbook/previews/open_project/step_wizard/page_layout_preview.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module OpenProject
+  module StepWizard
+    # @logical_path OpenProject/StepWizard
+    class PageLayoutPreview < Lookbook::Preview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

lookbook/previews/open_project/step_wizard/page_layout_preview/default.html.erb

@@ -0,0 +1,27 @@
+<%= render(StepWizard::PageLayoutComponent.new) do |layout| %>
+  <%=
+    layout.with_page_header do
+      render(Primer::OpenProject::PageHeader.new) do |header|
+        header.with_title { "My cool wizard" }
+        header.with_breadcrumbs(nil)
+      end
+    end
+  %>
+
+  <%= layout.with_wizard_content(border: true, p: 3, border_radius: 2) do %>
+    <%= render(Primer::Beta::Heading.new(tag: :h3, mb: 2, font_size: 3)) { "Some headline" } %>
+    <%= render(Primer::Beta::Text.new) { "The content of the wizard comes here.." } %>
+  <% end %>
+
+  <%=
+    layout.with_footer do
+      render(StepWizard::FooterComponent.new(form_identifier: "my-form", total_steps: 5, current_step: 3)) do |footer|
+        footer.with_back_button(href: "back_path")
+        footer.with_cancel_button(href: "cancel_path")
+        footer.with_continue_button(href: "next_path")
+        footer.with_submit_button(href: "submit_path")
+        footer.with_progress_bar
+      end
+    end
+  %>
+<% end %>