feat(StatusBanner): introduce type variants for different banner styles

* feat(sandbox/controls): Added StatusBanner component in controls view

In order to test StatusBanner.qml ui component it has been added into the Sandbox app as another Control.

* chore(sandbox/controls): Refactor `StatusBanner' component

Create enum to allow selecting StatusBanner type (`Info`, `Danger`, `Success`, `Warning`).

Add new success color with some opacity in ThemePalette.

* chore(Controls/StatusBanner): Use states instead of function

To have a cleaner code, it has been added states to manage type property changes.

* chore(Controls/StatusBanner): Remove unnecessary stuff

Remove unnecessary name property.
Remove successColor3 property.

sandbox/Controls.qml

@@ -188,4 +188,12 @@ GridLayout {
         to: 100
         value: 40
     }
+
+    StatusBanner {
+        id: banner
+        width: 360
+        topPadding: 20
+        type: StatusBanner.Type.Danger
+        statusText: "Banner"
+    }
 }

src/StatusQ/Controls/StatusBanner.qml

@@ -1,31 +1,45 @@
 import QtQuick 2.14
 
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 Column {
     id: statusBanner
     width: parent.width
 
-    property color backgroundColor
-    property color bordersColor
-    property color fontColor
     property string statusText
+    property int type: StatusBanner.Type.Info
     property int textPixels: 15
     property int statusBannerHeight: 38
 
+    // "private" properties
+    QtObject {
+           id: d
+           property color backgroundColor
+           property color bordersColor
+           property color fontColor
+    }
+
+    enum Type {
+        Info, // 0
+        Danger, // 1
+        Success, // 2
+        Warning // 3
+    }    
+
+    // Component definition
     Rectangle {
         id: topDiv
-        color: statusBanner.bordersColor
+        color: d.bordersColor
         height: 1
         width: parent.width
     }
 
-    // Status banner content:
     Rectangle {
-        id: statusBox
+        id: box
         width: parent.width
         height: statusBanner.statusBannerHeight
-        color: statusBanner.backgroundColor
+        color: d.backgroundColor
 
         StatusBaseText {
             id: statusTxt
@@ -34,14 +48,42 @@ Column {
             verticalAlignment: Text.AlignVCenter
             font.pixelSize: statusBanner.textPixels
             text: statusBanner.statusText
-            color: statusBanner.fontColor
+            color: d.fontColor
         }
     }
 
     Rectangle {
         id: bottomDiv
-        color: statusBanner.bordersColor
+        color: d.bordersColor
         height: 1
         width: parent.width
     }
+
+    // Behavior
+    states: [
+        State {
+            when: statusBanner.type === StatusBanner.Type.Info
+            PropertyChanges { target: d; backgroundColor: Theme.palette.primaryColor3}
+            PropertyChanges { target: d; bordersColor: Theme.palette.primaryColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.primaryColor1}
+        },
+        State {
+            when: statusBanner.type === StatusBanner.Type.Danger
+            PropertyChanges { target: d; backgroundColor: Theme.palette.dangerColor3}
+            PropertyChanges { target: d; bordersColor: Theme.palette.dangerColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.dangerColor1}
+        },
+        State {
+            when: statusBanner.type === StatusBanner.Type.Success
+            PropertyChanges { target: d; backgroundColor: Theme.palette.successColor2}
+            PropertyChanges { target: d; bordersColor: Theme.palette.successColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.successColor1}
+        },
+        State {
+            when: statusBanner.type === StatusBanner.Type.Warning
+            PropertyChanges { target: d; backgroundColor: Theme.palette.pinColor3}
+            PropertyChanges { target: d; bordersColor: Theme.palette.pinColor2}
+            PropertyChanges { target: d; fontColor: Theme.palette.pinColor1}
+        }
+    ]
 }