feat(SQ/StatusInfoBoxPanel): Created SQ panel

- Created general `StatusInfoBoxPanel` component. It includes a box with a title, text and button.
- Added storybook page support.

storybook/PagesModel.qml

@@ -189,6 +189,10 @@ ListModel {
         title: "OverviewSettingsFooter"
         section: "Panels"
     }
+    ListElement {
+        title: "StatusInfoBoxPanel"
+        section: "Panels"
+    }
     ListElement {
          title: "BurnTokensPopup"
          section: "Popups"

storybook/pages/StatusInfoBoxPanelPage.qml

@@ -0,0 +1,69 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Components 0.1
+
+import Models 1.0
+import Storybook 1.0
+
+SplitView {
+    orientation: Qt.Vertical
+    SplitView.fillWidth: true
+
+    Logs { id: logs }
+
+    Pane {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        ColumnLayout {
+            spacing: 50
+            anchors.centerIn: parent
+
+            StatusInfoBoxPanel {
+                Layout.preferredWidth: slider.value
+
+                title: "Get started"
+                text: ModelsData.descriptions.ownerTokenInfo
+                buttonText: "Mint Owner token"
+
+                onClicked: logs.logEvent("StatusInfoBoxPanel::onClicked --> First Panel")
+            }
+
+            StatusInfoBoxPanel {
+                Layout.preferredWidth: slider.value
+
+                title: "No hodlers just yet"
+                text: ModelsData.descriptions.airdropInfo
+                buttonText: "Airdrop"
+
+                onClicked: logs.logEvent("StatusInfoBoxPanel::onClicked --> Second Panel")
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.fillWidth: true
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+
+        Row {
+            Label {
+                anchors.verticalCenter: parent.verticalCenter
+                text: "Panel width:"
+            }
+
+            Slider {
+                id: slider
+                value: 700
+                from: 300
+                to: 600
+            }
+        }
+
+    }
+}

storybook/src/Models/ModelsData.qml

@@ -78,5 +78,7 @@ QtObject {
         readonly property string _short_: "Lorem Ipsum is simply dummy text."
         readonly property string medium: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
         readonly property string _long: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+        readonly property string ownerTokenInfo: "In order to Mint, Import and Airdrop community tokens, you first need to mint your Owner token which will give you permissions to access the token management features for your community."
+        readonly property string airdropInfo: "You can Airdrop tokens to deserving Community members or to give individuals token-based permissions."
     }
 }

ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml

@@ -0,0 +1,65 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+
+Control {
+    id: root
+
+    property alias title: titleComponent.text
+    property alias text: textComponent.text
+    property alias buttonText: button.text
+
+    signal clicked
+
+    verticalPadding: 40
+    horizontalPadding: 56
+
+    background: Rectangle {
+        color: Theme.palette.statusListItem.backgroundColor
+        radius: 8
+        border.color: Theme.palette.baseColor2
+    }
+
+    contentItem: ColumnLayout {
+        StatusBaseText {
+            id: titleComponent
+
+            Layout.fillWidth: true
+
+            wrapMode: Text.Wrap
+            font.pixelSize: 17
+            font.weight: Font.Bold
+
+            horizontalAlignment: Text.AlignHCenter
+            color: Theme.palette.directColor1
+        }
+
+        StatusBaseText {
+            id: textComponent
+
+            Layout.fillWidth: true
+            Layout.topMargin: 8
+            Layout.bottomMargin: 16
+
+            wrapMode: Text.Wrap
+            font.pixelSize: 15
+            lineHeight: 1.2
+
+            horizontalAlignment: Text.AlignHCenter
+            color: Theme.palette.baseColor1
+        }
+
+        StatusButton {
+            id: button
+
+            Layout.alignment: Qt.AlignHCenter
+
+            onClicked: root.clicked()
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -33,6 +33,7 @@ StatusFlowSelector 0.1 StatusFlowSelector.qml
 StatusGroupBox 0.1 StatusGroupBox.qml
 StatusImage 0.1 StatusImage.qml
 StatusImageCropPanel 0.1 StatusImageCropPanel.qml
+StatusInfoBoxPanel 0.1 StatusInfoBoxPanel.qml
 StatusItemSelector 0.1 StatusItemSelector.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml

ui/StatusQ/src/statusq.qrc

@@ -221,5 +221,6 @@
         <file>StatusQ/Core/Utils/ModelChangeGuard.qml</file>
         <file>StatusQ/Core/Utils/StackViewStates.qml</file>
         <file>StatusQ/Controls/StatusBlockProgressBar.qml</file>
+        <file>StatusQ/Components/StatusInfoBoxPanel.qml</file>
     </qresource>
 </RCC>