feat(StatusQ.Components): StatusStepper component introduced

Added `StatusStepper` component which displays total number of steps which need to be passed,
marking each completed step based on `completedSteps` property.

Needed for importing a Keycard into the app flow.

Corresponding page in API Documentation added.

ui/StatusQ/sandbox/main.qml

@@ -352,6 +352,11 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.page(title, true);
                     }
+                    StatusNavigationListItem {
+                        title: "StatusStepper"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
                 }
             }
 

ui/StatusQ/sandbox/pages/StatusStepperPage.qml

@@ -0,0 +1,54 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+    width: 800
+    height: 100
+
+    Column {
+        anchors.fill: parent
+        spacing: 30
+
+        Grid {
+            columns: 2
+            rowSpacing: 20
+            columnSpacing: 50
+
+            Text {
+                text: "Total steps:"
+            }
+            SpinBox {
+                id: totalSteps
+                editable: true
+                height: 30
+                from: 1
+                value: 6
+            }
+
+            Text {
+                text: "Completed steps:"
+            }
+            SpinBox {
+                id: completedSteps
+                editable: true
+                height: 30
+                from: 1
+                to: totalSteps.value
+                value: 1
+            }
+        }
+
+        StatusStepper {
+            id: stepper
+            width: 400
+            title: "Account %1 of %2"
+            totalSteps: totalSteps.value
+            completedSteps: completedSteps.value
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/StatusStepper.qml

@@ -0,0 +1,87 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+   \qmltype StatusStepper
+   \inherits Item
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief Displays total number of steps which need to be passed, marking each completed step
+          based on `completedSteps` property
+
+   Example:
+
+   \qml
+    StatusStepper {
+        width: 400
+        title: "Account %1 of %2"
+        totalSteps: 6
+        completedSteps: 1
+    }
+   \endqml
+
+   \image status_stepper.png
+
+   For a list of components available see StatusQ.
+*/
+
+Item {
+    id: root
+
+    /// Expected formatted text with %1 place marker for completed steps and %2 place marker for total steps count.
+    property string title: ""
+    property int titleFontSize: 12
+    property color titleColor: Theme.palette.baseColor1
+    property int totalSteps: 1
+    property int completedSteps: 1
+    property color completedStepColor: Theme.palette.primaryColor1
+    property color uncompletedStepColor: Theme.palette.baseColor2
+    property int leftPadding: 24
+    property int rightPadding: 24
+
+    implicitHeight: 52
+
+    QtObject {
+        id: d
+
+        readonly property int stepHeight: 4
+        readonly property int stepRadius: 4
+        readonly property int spaceBetweenSteps: 2
+    }
+
+    Column {
+        anchors.fill: parent
+        anchors.leftMargin: root.leftPadding
+        anchors.rightMargin: root.rightPadding
+        spacing: 8
+
+        StatusBaseText {
+            width: parent.width
+            horizontalAlignment: Qt.AlignHCenter
+            color: root.titleColor
+            font.pixelSize: root.titleFontSize
+            text: root.title.arg(root.completedSteps).arg(root.totalSteps)
+        }
+
+        Row {
+            width: parent.width
+            spacing: d.spaceBetweenSteps
+
+            Repeater {
+                id: repeater
+                model: root.totalSteps
+
+                delegate: Rectangle {
+                    readonly property int stepIndex: index
+                    width: (parent.width - (root.totalSteps - 1) * d.spaceBetweenSteps) / root.totalSteps
+                    height: d.stepHeight
+                    radius: d.stepRadius
+                    color: stepIndex < root.completedSteps? root.completedStepColor : root.uncompletedStepColor
+                }
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -46,3 +46,4 @@ StatusCard 0.1 StatusCard.qml
 StatusDatePicker 0.1 StatusDatePicker.qml
 StatusChart 0.1 StatusChart.qml
 StatusChartPanel 0.1 StatusChartPanel.qml
+StatusStepper 0.1 StatusStepper.qml