From 8f0ca0ea2be61d15864d60d6d2616f1539e5b51f Mon Sep 17 00:00:00 2001
From: Zep Fietje <hey@zepfietje.com>
Date: Wed, 6 Dec 2023 13:41:56 +0000
Subject: [PATCH] Add CSS classes to wizard

---
 .../resources/views/components/wizard.blade.php  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/forms/resources/views/components/wizard.blade.php b/packages/forms/resources/views/components/wizard.blade.php
index 425dba69c42..79a2508c72a 100644
--- a/packages/forms/resources/views/components/wizard.blade.php
+++ b/packages/forms/resources/views/components/wizard.blade.php
@@ -122,14 +122,20 @@
         ])
     >
         @foreach ($getChildComponentContainer()->getComponents() as $step)
-            <li class="fi-fo-wizard-header-step relative flex">
+            <li
+                class="fi-fo-wizard-header-step relative flex"
+                x-bind:class="{
+                    'fi-active': getStepIndex(step) === {{ $loop->index }},
+                    'fi-completed': getStepIndex(step) > {{ $loop->index }},
+                }"
+            >
                 <button
                     type="button"
                     x-bind:aria-current="getStepIndex(step) === {{ $loop->index }} ? 'step' : null"
                     x-on:click="step = @js($step->getId())"
                     x-bind:disabled="! isStepAccessible(step, {{ $loop->index }})"
                     role="step"
-                    class="flex h-full w-full items-center gap-x-4 px-6 py-4"
+                    class="fi-fo-wizard-header-step-button flex h-full w-full items-center gap-x-4 px-6 py-4"
                 >
                     <div
                         class="fi-fo-wizard-header-step-icon-ctn flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
@@ -165,7 +171,7 @@ class="fi-fo-wizard-header-step-icon h-6 w-6"
                         @else
                             <span
                                 x-show="getStepIndex(step) <= {{ $loop->index }}"
-                                class="text-sm font-medium"
+                                class="fi-fo-wizard-header-step-indicator text-sm font-medium"
                                 x-bind:class="{
                                     'text-gray-500 dark:text-gray-400':
                                         getStepIndex(step) !== {{ $loop->index }},
@@ -196,7 +202,7 @@ class="fi-fo-wizard-header-step-label text-sm font-medium"
 
                         @if (filled($description = $step->getDescription()))
                             <span
-                                class="fi-fo-wizard-header-step-description text-sm text-gray-500 dark:text-gray-400"
+                                class="fi-fo-wizard-header-step-description text-start text-sm text-gray-500 dark:text-gray-400"
                             >
                                 {{ $description }}
                             </span>
@@ -207,7 +213,7 @@ class="fi-fo-wizard-header-step-description text-sm text-gray-500 dark:text-gray
                 @if (! $loop->last)
                     <div
                         aria-hidden="true"
-                        class="absolute end-0 hidden w-5 md:block"
+                        class="fi-fo-wizard-header-step-separator absolute end-0 hidden w-5 md:block"
                     >
                         <svg
                             fill="none"