[dev-v5][Wizard] Migrate FluentWizard

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Wizard/Examples/WizardCustomized.razor

@@ -0,0 +1,113 @@
+<style>
+    #customized-wizard li[status="current"] > div {
+        font-weight: bold;
+    }
+
+    #customized-wizard li[disabled] > div {
+        color: var(--colorNeutralForeground2);
+        opacity: 0.4;
+    }
+</style>
+
+<FluentWizard @ref="@MyWizard"
+              Id="customized-wizard"
+              @bind-Value="@Value"
+              StepTitleHiddenWhen="@GridItemHidden.XsAndDown"
+              OnFinish="OnFinish"
+              Height="300px">
+    <Steps>
+        <FluentWizardStep OnChange="@OnStepChange">
+            <StepTemplate>
+                <div active="@context.Active">
+                    Intro
+                </div>
+            </StepTemplate>
+            <ChildContent>
+                <h5>Introduction</h5>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper
+                luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor,
+                ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.
+            </ChildContent>
+        </FluentWizardStep>
+        <FluentWizardStep OnChange="@OnStepChange">
+            <StepTemplate>
+                <div active="@context.Active">
+                    Get Started
+                </div>
+            </StepTemplate>
+            <ChildContent>
+                <h5>Get Started</h5>
+                Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod.
+                Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.
+            </ChildContent>
+        </FluentWizardStep>
+        <FluentWizardStep OnChange="@OnStepChange">
+            <StepTemplate>
+                <div active="@context.Active">
+                    Set budget
+                </div>
+            </StepTemplate>
+            <ChildContent>
+                <h5>Set budget</h5>
+                Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa
+                aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur
+                turpis, eget molestie ipsum.
+            </ChildContent>
+        </FluentWizardStep>
+        <FluentWizardStep OnChange="@OnStepChange">
+            <StepTemplate>
+                <div active="@context.Active">
+                    Summary
+                </div>
+            </StepTemplate>
+            <ChildContent>
+                <h5>Summary</h5>
+                Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac,
+                aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie.
+                Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
+            </ChildContent>
+        </FluentWizardStep>
+    </Steps>
+
+    <ButtonTemplate>
+        @{
+            var index = context;
+            var lastStepIndex = 3;
+
+            <div>
+                @if (index > 0)
+                {
+                    <FluentButton OnClick="@(() => MyWizard.GoToStepAsync(0))">Go to first page</FluentButton>
+                    <FluentButton OnClick="@(() => MyWizard.GoToStepAsync(Value - 1))">Previous</FluentButton>
+                }
+            </div>
+            <FluentSpacer />
+            <div>
+                @if (index != lastStepIndex)
+                {
+                    <FluentButton OnClick="@(() => MyWizard.GoToStepAsync(Value + 1))" Appearance="ButtonAppearance.Primary">Next</FluentButton>
+                    <FluentButton OnClick="@(() => MyWizard.GoToStepAsync(lastStepIndex))" Appearance="ButtonAppearance.Primary">Go to last page</FluentButton>
+                }
+                else
+                {
+                    <FluentButton OnClick="@(() => MyWizard.FinishAsync())" Appearance="ButtonAppearance.Primary">Finish</FluentButton>
+                }
+            </div>
+        }
+    </ButtonTemplate>
+</FluentWizard>
+
+@code
+{
+    FluentWizard MyWizard = default!;
+    int Value = 0;
+
+    void OnStepChange(FluentWizardStepChangeEventArgs e)
+    {
+    }
+
+    async Task OnFinish()
+    {
+        await Task.CompletedTask;
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Wizard/Examples/WizardDefault.razor

@@ -0,0 +1,56 @@
+<FluentWizard DisplayStepNumber="@(WizardStepStatus.Current | WizardStepStatus.Next)"
+              Border="WizardBorder.Outside"
+			  OnFinish="@OnFinished">
+    <Steps>
+        <FluentWizardStep Label="Intro"
+                          OnChange="@OnStepChange">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper
+            luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor,
+            ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.
+        </FluentWizardStep>
+        <FluentWizardStep Label="Get started"
+                          Summary="Begin the tasks"
+                          OnChange="@OnStepChange">
+            Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod.
+            Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.
+        </FluentWizardStep>
+        <FluentWizardStep Disabled="true"
+                          Label="Disabled step"
+                          Summary="This step is disabled"
+                          OnChange="@OnStepChange">
+            Nunc dignissim tortor eget lacus porta tristique. Nunc in posuere dui. Cras ligula ex,
+            ullamcorper in gravida in, euismod vitae purus. Lorem ipsum dolor sit amet, consectetur
+            adipiscing elit. Aliquam at velit leo. Suspendisse potenti. Cras dictum eu augue in laoreet.
+        </FluentWizardStep>
+        <FluentWizardStep Label="Set budget"
+                          Summary="Identify the best price"
+                          IconPrevious="@(new Icons.Filled.Size20.Star())"
+                          IconCurrent="@(new Icons.Filled.Size20.StarEmphasis())"
+                          IconNext="@(new Icons.Regular.Size20.Star())"
+                          DisplayStepNumber="false"
+                          OnChange="@OnStepChange">
+            Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa
+            aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur
+            turpis, eget molestie ipsum.
+        </FluentWizardStep>
+        <FluentWizardStep Label="Summary"
+                          OnChange="@OnStepChange">
+            Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac,
+            aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie.
+            Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
+        </FluentWizardStep>
+    </Steps>
+</FluentWizard>
+
+@code
+{
+	void OnStepChange(FluentWizardStepChangeEventArgs e)
+	{
+		Console.WriteLine("Step changed to {0}", e.TargetIndex);
+	}
+
+	void OnFinished()
+	{
+		Console.WriteLine("Wizard has been finished");
+	}
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Wizard/Examples/WizardEditForms.razor

@@ -0,0 +1,140 @@
+@using System.ComponentModel.DataAnnotations
+
+@inject IDialogService DialogService
+
+<FluentWizard StepperPosition="StepperPosition.Left"
+              StepSequence="@WizardStepSequence.Visited"
+              DisplayStepNumber="@(WizardStepStatus.Current | WizardStepStatus.Next)"
+              Border="WizardBorder.Outside"
+              StepTitleHiddenWhen="@GridItemHidden.XsAndDown"
+              Height="auto"
+              Style="min-height: 300px;"
+              OnFinish="@OnFinishedAsync">
+    <Steps>
+        <FluentWizardStep Label="Personal Info"
+                          OnChange="@OnStepChange">
+            <EditForm Model="_formData1" FormName="personalInfo" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
+                <DataAnnotationsValidator />
+                <FluentWizardStepValidator />
+                <FluentStack Orientation="Orientation.Vertical">
+                    <FluentTextInput Placeholder="First Name" @bind-Value="_formData1.FirstName" />
+                    <FluentTextInput Placeholder="Last Name" @bind-Value="_formData1.LastName" />
+                </FluentStack>
+                <FluentValidationSummary style="color:darkred" />
+            </EditForm>
+        </FluentWizardStep>
+        <FluentWizardStep Label="Address Info"
+                          OnChange="@OnStepChange">
+            <EditForm Model="_formData2" FormName="addressInfo" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
+                <DataAnnotationsValidator />
+                <FluentWizardStepValidator />
+                <FluentStack Orientation="Orientation.Vertical">
+                    <FluentTextInput Placeholder="Address Line 1" @bind-Value="_formData2.AddressLine1" />
+                    <FluentTextInput Placeholder="Address Line 2" @bind-Value="_formData2.AddressLine2" />
+                    <FluentTextInput Placeholder="City" @bind-Value="_formData2.City" />
+                    <FluentTextInput Placeholder="State or Province" @bind-Value="_formData2.StateOrProvince" />
+                    <FluentTextInput Placeholder="Country" @bind-Value="_formData2.Country" />
+                    <FluentTextInput Placeholder="Postal Code" @bind-Value="_formData2.PostalCode" />
+                </FluentStack>
+                <FluentValidationSummary style="color:darkred" />
+            </EditForm>
+        </FluentWizardStep>
+        <FluentWizardStep Label="Set budget"
+                          Summary="Identify the best price"
+                          IconPrevious="@(new Icons.Filled.Size20.Star())"
+                          IconCurrent="@(new Icons.Filled.Size20.StarEmphasis())"
+                          IconNext="@(new Icons.Regular.Size20.Star())"
+                          DisplayStepNumber="false"
+                          OnChange="@OnStepChange">
+            Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa
+            aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur
+            turpis, eget molestie ipsum.
+        </FluentWizardStep>
+        <FluentWizardStep Label="Finish">
+            <EditForm Model="_finishFormData" FormName="finishForm" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit">
+                <DataAnnotationsValidator />
+                <FluentWizardStepValidator />
+                <FluentStack Orientation="Orientation.Vertical">
+                    <FluentTextInput Label="Signature" Placeholder="Type your signature" @bind-Value="_finishFormData.Signature" />
+                </FluentStack>
+                <FluentValidationSummary style="color:darkred" />
+            </EditForm>
+        </FluentWizardStep>
+    </Steps>
+</FluentWizard>
+
+@if (_overlayIsVisible)
+{
+    <FluentOverlay @bind-Visible=@_overlayIsVisible
+                   Opacity="40"
+                   Alignment="Align.Center"
+                   Justification="@JustifyContent.Center">
+        <FluentSpinner />
+    </FluentOverlay>
+}
+
+@code
+{
+    private FormData1 _formData1 = new FormData1();
+    private FormData2 _formData2 = new FormData2();
+    private FinishFormData _finishFormData = new FinishFormData();
+    private bool _overlayIsVisible = false;
+
+    void OnStepChange(FluentWizardStepChangeEventArgs e)
+    {
+    }
+
+    async Task OnFinishedAsync()
+    {
+        await DialogService.ShowInfoAsync("Wizard completed");
+    }
+
+    async Task OnValidSubmit()
+    {
+        _overlayIsVisible = true;
+        await Task.Delay(2000);
+        _overlayIsVisible = false;
+    }
+
+    void OnInvalidSubmit()
+    {
+    }
+
+    private class FormData1
+    {
+        [Required]
+        [MaxLength(3)]
+        public string? FirstName { get; set; }
+
+        [Required]
+        [MinLength(10)]
+        public string? LastName { get; set; }
+    }
+
+    private class FormData2
+    {
+        [Required]
+        public string? AddressLine1 { get; set; }
+
+        public string? AddressLine2 { get; set; }
+
+        [Required]
+        public string? City { get; set; }
+
+        [Required]
+        public string? StateOrProvince { get; set; }
+
+        [Required]
+        public string? Country { get; set; }
+
+        [Required]
+        public string? PostalCode { get; set; }
+    }
+
+    private class FinishFormData
+    {
+        [Required]
+        [MinLength(5)]
+        public string? Signature { get; set; }
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Wizard/Examples/WizardPosition.razor

@@ -0,0 +1,57 @@
+<FluentWizard DisplayStepNumber="@(WizardStepStatus.Current | WizardStepStatus.Next)"
+              Border="WizardBorder.Outside"
+			  StepperPosition="StepperPosition.Top"
+			  OnFinish="@OnFinished">
+    <Steps>
+        <FluentWizardStep Label="Intro"
+                          OnChange="@OnStepChange">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper
+            luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor,
+            ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.
+        </FluentWizardStep>
+        <FluentWizardStep Label="Get started"
+                          Summary="Begin the tasks"
+                          OnChange="@OnStepChange">
+            Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod.
+            Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.
+        </FluentWizardStep>
+        <FluentWizardStep Disabled="true"
+                          Label="Disabled step"
+                          Summary="This step is disabled"
+                          OnChange="@OnStepChange">
+            Nunc dignissim tortor eget lacus porta tristique. Nunc in posuere dui. Cras ligula ex,
+            ullamcorper in gravida in, euismod vitae purus. Lorem ipsum dolor sit amet, consectetur
+            adipiscing elit. Aliquam at velit leo. Suspendisse potenti. Cras dictum eu augue in laoreet.
+        </FluentWizardStep>
+        <FluentWizardStep Label="Set budget"
+                          Summary="Identify the best price"
+                          IconPrevious="@(new Icons.Filled.Size20.Star())"
+                          IconCurrent="@(new Icons.Filled.Size20.StarEmphasis())"
+                          IconNext="@(new Icons.Regular.Size20.Star())"
+                          DisplayStepNumber="false"
+                          OnChange="@OnStepChange">
+            Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa
+            aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur
+            turpis, eget molestie ipsum.
+        </FluentWizardStep>
+        <FluentWizardStep Label="Summary"
+                          OnChange="@OnStepChange">
+            Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac,
+            aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie.
+            Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
+        </FluentWizardStep>
+    </Steps>
+</FluentWizard>
+
+@code
+{
+	void OnStepChange(FluentWizardStepChangeEventArgs e)
+	{
+		Console.WriteLine("Step changed to {0}", e.TargetIndex);
+	}
+
+	void OnFinished()
+	{
+		Console.WriteLine("Wizard has been finished");
+	}
+}