From 0a12f49d953bd7db6e3d0dbf1bc8bc61a83c2c14 Mon Sep 17 00:00:00 2001
From: Jeffrey Sung <jeffjsung@gmail.com>
Date: Mon, 15 May 2023 19:04:26 -0700
Subject: [PATCH] Add option to "grey out" badges in header of stepper if step
 is incomplete

---
 .../Components/Stepper/MudStepper.razor             |  3 ++-
 .../Components/Stepper/MudStepper.razor.cs          |  6 ++++++
 .../Enums/HeaderBadgeView.cs                        | 12 ++++++++++++
 .../Pages/Examples/StepperExample1.razor            | 13 ++++++++++---
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 CodeBeam.MudBlazor.Extensions/Enums/HeaderBadgeView.cs

diff --git a/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor b/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor
index 6f453042..88132328 100644
--- a/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor
+++ b/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor
@@ -44,7 +44,8 @@
                                 }
                                 else
                                 {
-                                    <MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
+                                    Color incompleteColor = (HeaderBadgeView == HeaderBadgeView.GreyOutIncomplete) && !active ? Color.Transparent : @Color;
+                                    <MudAvatar Style="@AvatarStylename" Color="@incompleteColor" Variant="@Variant" Size="@HeaderSize">
                                         <MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
                                     </MudAvatar>
                                 }
diff --git a/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor.cs
index d1c86c89..16c59a44 100644
--- a/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor.cs
+++ b/CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor.cs
@@ -192,6 +192,12 @@ internal int ActiveIndex
         /// </summary>
         [Parameter]
         public Variant Variant { get; set; }
+        
+        /// <summary>
+        /// Choose header badge view. Default is all.
+        /// </summary>
+        [Parameter]
+        public HeaderBadgeView HeaderBadgeView { get; set; } = HeaderBadgeView.All;
 
         /// <summary>
         /// Choose header text view. Default is all.
diff --git a/CodeBeam.MudBlazor.Extensions/Enums/HeaderBadgeView.cs b/CodeBeam.MudBlazor.Extensions/Enums/HeaderBadgeView.cs
new file mode 100644
index 00000000..29190f1b
--- /dev/null
+++ b/CodeBeam.MudBlazor.Extensions/Enums/HeaderBadgeView.cs
@@ -0,0 +1,12 @@
+using System.ComponentModel;
+
+namespace MudExtensions.Enums
+{
+    public enum HeaderBadgeView
+    {
+        [Description("grey-out-incomplete")]
+        GreyOutIncomplete,
+        [Description("all")]
+        All,
+    }
+}
\ No newline at end of file
diff --git a/ComponentViewer.Docs/Pages/Examples/StepperExample1.razor b/ComponentViewer.Docs/Pages/Examples/StepperExample1.razor
index c20c38ff..63ec74c1 100644
--- a/ComponentViewer.Docs/Pages/Examples/StepperExample1.razor
+++ b/ComponentViewer.Docs/Pages/Examples/StepperExample1.razor
@@ -7,9 +7,9 @@
     <MudItem xs="12" sm="8" Class="d-flex align-center">
         <MudStepper @ref="_stepper" Class="mud-width-full" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant"
                     DisableAnimation="_disableAnimation" DisablePreviousButton="_disablePreviousButton" DisableNextButton="_disableNextButton" 
-                    DisableSkipButton="_disableSkipButton" DisableStepResultIndicator="_disableStepResultIndicator" HeaderTextView="_headerTextView"
-                    PreventStepChangeAsync="new Func<StepChangeDirection, Task<bool>>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
-                    MobileView="_mobileView" IconActionButtons="_iconActionButtons" Loading="_loading" HeaderSize="_headerSize">
+                    DisableSkipButton="_disableSkipButton" DisableStepResultIndicator="_disableStepResultIndicator" HeaderBadgeView="_headerBadgeView" 
+                    HeaderTextView="_headerTextView" PreventStepChangeAsync="new Func<StepChangeDirection, Task<bool>>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
+                    MobileView="_mobileView" IconActionButtons="_iconActionButtons" Loading="_loading" HeaderSize="_headerSize" HeaderIcon="false">
             <StaticContent>
                 @if (_showStaticContent)
                 {
@@ -109,6 +109,12 @@
                     <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                 }
             </MudSelect>
+            <MudSelect @bind-Value="_headerBadgeView" Variant="Variant.Outlined" Label="Header Badge View" Margin="Margin.Dense" Dense="true">
+                @foreach (HeaderBadgeView item in Enum.GetValues<HeaderBadgeView>())
+                {
+                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
+                }
+            </MudSelect>
             <MudSelectExtended @bind-Value="_headerSize" ItemCollection="@(Enum.GetValues<Size>())" Variant="Variant.Outlined" Label="Header Size" Margin="Margin.Dense" Dense="true" />
             <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="(() => _stepper.Reset())">Reset</MudButton>
         </MudStack>
@@ -124,6 +130,7 @@
     bool _mobileView;
     bool _iconActionButtons;
     Variant _variant = Variant.Filled;
+    HeaderBadgeView _headerBadgeView = HeaderBadgeView.All;
     HeaderTextView _headerTextView = HeaderTextView.All;
     bool _disableAnimation = false;
     bool _disablePreviousButton = false;