chore(IssuePill): add a Primary type

- wrap the icon in a Loader and make it configurable
- add a storybook page with controls allowing to explore the various
types and config options

storybook/pages/IssuePillPage.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import AppLayouts.Communities.controls 1.0
+
+import Storybook 1.0
+
+SplitView {
+    orientation: Qt.Horizontal
+
+    Logs { id: logs }
+
+    Pane {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        background: Rectangle {
+            color: Theme.palette.baseColor4
+        }
+
+        IssuePill {
+            width: ctrlWidth.value || implicitWidth
+            anchors.centerIn: parent
+            type: ctrlType.currentIndex
+            count: ctrlCount.value
+            icon: ctrlIcon.text
+
+            Binding on text {
+                value: ctrlText.text
+                when: ctrlCustomText.checked && !!ctrlText.text
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.fillHeight: true
+        SplitView.preferredWidth: 300
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Type:" }
+                ComboBox {
+                    Layout.fillWidth: true
+                    id: ctrlType
+                    model: ["Warning", "Error", "Primary"]
+                }
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Count:" }
+                Slider {
+                    id: ctrlCount
+                    from: 0
+                    to: 100
+                    value: 5
+                }
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Icon:" }
+                TextField {
+                    id: ctrlIcon
+                    text: "warning"
+                }
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                CheckBox {
+                    id: ctrlCustomText
+                    text: "Custom text:"
+                    onToggled: if (checked) ctrlText.forceActiveFocus()
+                }
+                TextField {
+                    Layout.fillWidth: true
+                    id: ctrlText
+                    enabled: ctrlCustomText.checked
+                }
+            }
+            RowLayout {
+                Layout.fillWidth: true
+                Label { text: "Width:" }
+                SpinBox {
+                    id: ctrlWidth
+                    from: 0
+                    to: 400
+                    value: 0 // 0 == implicitWidth
+                    stepSize: 20
+                    textFromValue: function(value, locale) { return value === 0 ? "Implicit" : value }
+                }
+            }
+            Item { Layout.fillHeight: true }
+        }
+    }
+}
+
+// category: Controls

ui/app/AppLayouts/Communities/controls/IssuePill.qml

@@ -1,6 +1,6 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Controls 2.14
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -10,40 +10,66 @@ Control {
 
     enum Type {
         Warning,
-        Error
+        Error,
+        Primary
     }
     property int type: IssuePill.Type.Warning
 
     property int count
-    property string text: root.type === IssuePill.Type.Warning ? qsTr("%n warning(s)", "", root.count)
+    property string text: {
-                                                               : qsTr("%n error(s)", "", root.count)
+        switch(type) {
+        case IssuePill.Type.Warning:
+            return qsTr("%n warning(s)", "", root.count)
+        case IssuePill.Type.Error:
+            return qsTr("%n error(s)", "", root.count)
+        case IssuePill.Type.Primary:
+        default:
+            return qsTr("%n message(s)", "", root.count)
+        }
+    }
+
     property alias bgCornerRadius: background.radius
+    property string icon: "warning"
+
+    font.family: Theme.palette.baseFont.name
+    font.pixelSize: 12
 
     horizontalPadding: 8
     verticalPadding: 4
 
-    QtObject {
+    readonly property color baseColor: {
-        id: d
+        switch(type) {
-        readonly property color baseColor: root.type === IssuePill.Type.Warning ? Theme.palette.pinColor1
+        case IssuePill.Type.Warning:
-                                                                                : Theme.palette.dangerColor1
+            return Theme.palette.pinColor1
+        case IssuePill.Type.Error:
+            return Theme.palette.dangerColor1
+        case IssuePill.Type.Primary:
+        default:
+            return Theme.palette.primaryColor1
+        }
+    }
+
+    property Component iconLoaderComponent: Component {
+        StatusIcon {
+            width: 20
+            height: 20
+            icon: root.icon
+            color: root.baseColor
+        }
     }
 
     background: Rectangle {
         id: background
         radius: 100
-        color: Theme.palette.alphaColor(d.baseColor, 0.03)
+        color: Theme.palette.alphaColor(root.baseColor, 0.03)
         border.width: 1
-        border.color: Theme.palette.alphaColor(d.baseColor, 0.3)
+        border.color: Theme.palette.alphaColor(root.baseColor, 0.3)
     }
 
     contentItem: RowLayout {
         spacing: 4
-        StatusIcon {
+        Loader {
-            Layout.preferredWidth: 20
+            sourceComponent: root.iconLoaderComponent
-            Layout.preferredHeight: 20
-            Layout.alignment: Qt.AlignVCenter
-            icon: "warning"
-            color: d.baseColor
         }
         StatusBaseText {
             Layout.fillWidth: true
@@ -51,8 +77,9 @@ Control {
             Layout.alignment: Qt.AlignVCenter
             verticalAlignment: Qt.AlignVCenter
             text: root.text
-            color: d.baseColor
+            font.family: root.font.family
-            font.pixelSize: 12
+            font.pixelSize: root.font.pixelSize
+            color: root.baseColor
             wrapMode: Text.WordWrap
             maximumLineCount: 3
             elide: Text.ElideRight