Stepper component docs (#362)

* docs(stepper):docs sceleton and draft overview

* docs(stepper):added orientation, indicators, labels articles

* docs(stepper):template and linear flow articles

* docs(stepper):validation, state and events articles

* docs(stepper):fixes

* docs(stepper):final touches

* docs(stepper):minor fix

* docs(stepper):improvements as per feedback

* docs(stepper);minor fix

Author: ntacheva

_config.yml

@@ -169,6 +169,9 @@ navigation:
      "*components/panelbar/templates":
         title: "Templates"
         position: 10
+     "*components/stepper/steps":
+        title: "Steps"
+        position: 3
 
 ## List helpers directory names and order here, like this:
      "*appearance":
@@ -332,6 +335,8 @@ navigation:
         title: "Splitter"
      "*stacklayout":
         title: "Stack Layout"
+     "*stepper":
+        title: "Stepper" 
      "*stockchart":
         title: "Stock Chart"
      "*switch":
@@ -394,6 +399,7 @@ intro_columns:
       "Pager": "pager-overview"
       "ToolBar": "toolbar-overview"
       "PanelBar": "panelbar-overview"
+      "Stepper" : "stepper-overview"
 
   -
     title: "Interactivity and UX"

accessibility/keyboard-navigation.md

@@ -90,6 +90,8 @@ The following list shows the Telerik components that support specific keyboard c
 
 * StackLayout - not applicable, it is a layout container.
 
+* [Stepper](https://demos.telerik.com/blazor-ui/stepper/keyboard-navigation)
+
 * [Switch](https://demos.telerik.com/blazor-ui/switch/keyboard-navigation)
 
 * [TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/keyboard-navigation)

components/stepper/display-modes.md

@@ -0,0 +1,69 @@
+---
+title: Display Modes
+page_title: Display Modes
+description: Display Modes of the Stepper for Blazor.
+slug: stepper-display-modes
+tags: telerik,blazor,stepper,display,modes
+published: True
+position: 17
+---
+
+# Display Modes
+
+This article explains the Display modes that the Stepper for Blazor provides.
+
+You can configure the desired display mode through the `StepType` parameter of the Stepper. It takes a member of the `StepperStepType` enum:
+
+* [Steps](#steps) (the default)
+* [Labels](#labels)
+
+
+## Steps
+
+The default Display mode of the Stepper is `Steps`. If labels are defined, with this setup the Stepper will render both indicators and labels.
+
+>caption Display mode: Steps, customize the Stepper to render indicators and labels.The result from the snippet.
+
+![Indicators and labels](images/labels-and-indicators-example.png)
+
+````CSHTML
+@* Stepper with both labels and indicators. *@
+
+<div style="width:500px">
+    <TelerikStepper StepType="StepperStepType.Steps">
+        <StepperSteps>
+            <StepperStep Label="Personal Info" Icon="user"></StepperStep>
+            <StepperStep Label="Education" Icon="dictionary-add"></StepperStep>
+            <StepperStep Label="Experience" Icon="flip-vertical"></StepperStep>
+            <StepperStep Label="Attachments" Icon="attachment"></StepperStep>
+        </StepperSteps>
+    </TelerikStepper>
+</div>
+````
+
+## Labels
+
+If you want to display only labels for the steps, set the `StepType` parameter of the Stepper to `Labels`.
+
+>caption Display mode: Labels, customize the Stepper to render only labels. The result from the snippet.
+
+![Labels only](images/labels-only-example.png)
+
+````CSHTML
+@* Stepper with only labels. *@
+
+<div style="width:500px">
+    <TelerikStepper StepType="StepperStepType.Labels">
+        <StepperSteps>
+            <StepperStep Label="Personal Info" Icon="user"></StepperStep>
+            <StepperStep Label="Education" Icon="dictionary-add"></StepperStep>
+            <StepperStep Label="Experience" Icon="flip-vertical"></StepperStep>
+            <StepperStep Label="Attachments" Icon="attachment"></StepperStep>
+        </StepperSteps>
+    </TelerikStepper>
+</div>
+````
+
+## See Also
+
+  * [Live Demo: Stepper Template](https://demos.telerik.com/blazor-ui/stepper/configuration)

components/stepper/events.md

@@ -0,0 +1,51 @@
+---
+title: Events
+page_title: Events
+description: Events of the Stepper for Blazor.
+slug: stepper-events
+tags: telerik,blazor,stepper,events
+published: True
+position: 25
+---
+
+# Stepper Events
+
+This article explains the events available in the Telerik Stepper for Blazor
+
+
+## ValueChanged
+
+The Telerik Stepper for Blazor supports ValueChanged event. It fires upon every change of the CurrentStepIndex.
+
+<br/>
+
+>caption Handle the ValueChanged event. The result from the snippet.
+
+![ValueChanged example](images/value-changed-example.gif)
+
+````CSHTML
+@* Handle ValueChanged event of the Stepper *@
+
+@Result
+
+<TelerikStepper ValueChanged="@ValueChangeHandler">
+    <StepperSteps>
+        <StepperStep Text="1" Label="Step 1"></StepperStep>
+        <StepperStep Text="2" Label="Step 2"></StepperStep>
+        <StepperStep Text="3" Label="Step 3"></StepperStep>
+    </StepperSteps>
+</TelerikStepper>
+
+@code{
+    public string Result { get; set; }
+
+    public void ValueChangeHandler(int index)
+    {
+        Result = "Step index changed. Current step index is: " + index;
+    }
+}
+````
+
+## See Also
+
+  * [Live Demo: Stepper Events](https://demos.telerik.com/blazor-ui/stepper/events)