feat(storybook): Created new page for `CommunityPermissionsRow` component

- Updated permissions related models.
- Created new page for new component `CommunityPermissionsRow`

storybook/PagesModel.qml

@@ -257,6 +257,10 @@ ListModel {
         title: "TokenItem"
         section: "Components"
     }
+    ListElement {
+        title: "CommunityPermissionsRow"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"

storybook/figma.json

@@ -182,5 +182,16 @@
     "StatusCommunityCard": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
+    ],
+    "ChatAnchorButtonsPanel": [
+        "https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/%F0%9F%92%AC-Chat%E2%8E%9CDesktop?node-id=14632-460085&t=SGTU2JeRA8ifbv2E-0"
+    ],
+    "DerivationPathInput": [
+        "https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=12272%3A269692&t=YiipgcxOhdOvqprP-0"
+    ],
+    "CommunityPermissionsRow": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=28570-546277&t=PVEC7ehRew4RnGFa-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159&t=bTEq7jsSZT0nfC4y-1",
+        "https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?node-id=17582-215241&t=8cRmw5jIlzUtfJbY-0"
     ]
 }

storybook/pages/CommunityPermissionsRowPage.qml

@@ -0,0 +1,202 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Storybook 1.0
+import Models 1.0
+
+import AppLayouts.Chat.controls.community 1.0
+
+SplitView {
+    id: root
+
+    property var assetsModel: AssetsModel {}
+    property var collectiblesModel: CollectiblesModel {}
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        ColumnLayout {
+            anchors.centerIn: parent
+            spacing: 16
+
+            Label {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+                text: "1 permission:"
+            }
+
+            CommunityPermissionsRow {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                Layout.bottomMargin: spacing
+
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: PermissionsModel.shortPermissionsModel
+                requirementsMet: permissionsMetCheckEditor.checked
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+                text: "2 short permissions:"
+            }
+
+            CommunityPermissionsRow {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                Layout.bottomMargin: spacing
+
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: PermissionsModel.twoShortPermissionsModel
+                requirementsMet: permissionsMetCheckEditor.checked
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+                text: "2 long permissions:"
+            }
+
+            CommunityPermissionsRow {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                Layout.bottomMargin: spacing
+
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: PermissionsModel.twoLongPermissionsModel
+                requirementsMet: permissionsMetCheckEditor.checked
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+                text: "Three short permissions:"
+            }
+
+            CommunityPermissionsRow {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                Layout.bottomMargin: spacing
+
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: PermissionsModel.threeShortPermissionsModel
+                requirementsMet: permissionsMetCheckEditor.checked
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+                text: "More than 2 permissions with short 1st and 2nd ones:"
+            }
+
+            CommunityPermissionsRow {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                Layout.bottomMargin: spacing
+
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: PermissionsModel.moreThanTwoInitialShortPermissionsModel
+                requirementsMet: permissionsMetCheckEditor.checked
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+                text: "5 permissions - long ones"
+            }
+
+            CommunityPermissionsRow {
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                Layout.preferredHeight: heighSliderEditor.value
+                Layout.bottomMargin: spacing
+
+                assetsModel: root.assetsModel
+                collectiblesModel: root.collectiblesModel
+                model: PermissionsModel.longPermissionsModel
+                requirementsMet: permissionsMetCheckEditor.checked
+
+                spacing: spacingSliderEditor.value
+                padding: paddingSliderEditor.value
+                fontPixelSize: 13
+                overlapping: overlappingSliderEditor.value
+                overlappingBorder: overlappingBorderSliderEditor.value
+                backgroundRadius: 10
+            }
+        }
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        ColumnLayout {
+            CheckBox {
+                id: permissionsMetCheckEditor
+
+                text: "Are permissions met?"
+            }
+
+            Label {
+                text: "Row heigh:"
+            }
+
+            Slider {
+                id: heighSliderEditor
+
+                value: 32
+                from: 24
+                to: 64
+            }
+
+            Label {
+                text: "Overlapping:"
+            }
+
+            Slider {
+                id: overlappingSliderEditor
+
+                value: 8
+                from: 0
+                to: 16
+            }
+
+            Label {
+                text: "Overlapping border:"
+            }
+
+            Slider {
+                id: overlappingBorderSliderEditor
+
+                value: 2
+                from: 0
+                to: 8
+            }
+
+            Label {
+                text: "Spacing:"
+            }
+
+            Slider {
+                id: spacingSliderEditor
+
+                value: 4
+                from: 0
+                to: 16
+            }
+
+            Label {
+                text: "Padding:"
+            }
+
+            Slider {
+                id: paddingSliderEditor
+
+                value: 2
+                from: 0
+                to: 8
+            }
+        }
+    }
+}

storybook/src/Models/AssetsModel.qml

@@ -47,10 +47,10 @@ ListModel {
             category: TokenCategories.Category.General
         },
         {
-            key: "Dai2",
+            key: "snt",
-            iconSource: ModelsData.assets.dai,
+            iconSource: ModelsData.assets.snt,
-            name: "Dai2",
+            name: "snt",
-            shortName: "DAI2",
+            shortName: "snt",
             category: TokenCategories.Category.General
         }
     ]

storybook/src/Models/PermissionsModel.qml

@@ -26,7 +26,7 @@ QtObject {
 
     readonly property var shortPermissionsModelData: [
         {
-            holdingsListModel: root.createHoldingsModel3(),
+            holdingsListModel: root.createHoldingsModel4(),
             channelsListModel: root.createChannelsModel1(),
             permissionType: PermissionTypes.Type.Admin,
             isPrivate: true,
@@ -53,8 +53,86 @@ QtObject {
             isPrivate: false
         },
         {
-            channelsListModel: root.createChannelsModel2(),
             holdingsListModel: root.createHoldingsModel1(),
+            channelsListModel: root.createChannelsModel2(),
+            permissionType: PermissionTypes.Type.Member,
+            isPrivate: false
+        }
+    ]
+
+    readonly property var twoShortPermissionsModelData: [
+        {
+            holdingsListModel: root.createHoldingsModel1(),
+            channelsListModel: root.createChannelsModel1(),
+            permissionType: PermissionTypes.Type.Admin,
+            isPrivate: true
+        },
+        {
+            holdingsListModel: root.createHoldingsModel2(),
+            channelsListModel: root.createChannelsModel2(),
+            permissionType: PermissionTypes.Type.Member,
+            isPrivate: false
+        }
+    ]
+
+    readonly property var twoLongPermissionsModelData: [
+        {
+            holdingsListModel: root.createHoldingsModel5(),
+            channelsListModel: root.createChannelsModel1(),
+            permissionType: PermissionTypes.Type.Admin,
+            isPrivate: true
+        },
+        {
+            holdingsListModel: root.createHoldingsModel4(),
+            channelsListModel: root.createChannelsModel2(),
+            permissionType: PermissionTypes.Type.Member,
+            isPrivate: false
+        }
+    ]
+
+    readonly property var threeShortPermissionsModelData: [
+        {
+            holdingsListModel: root.createHoldingsModel1(),
+            channelsListModel: root.createChannelsModel1(),
+            permissionType: PermissionTypes.Type.Admin,
+            isPrivate: true
+        },
+        {
+            holdingsListModel: root.createHoldingsModel1b(),
+            channelsListModel: root.createChannelsModel2(),
+            permissionType: PermissionTypes.Type.Member,
+            isPrivate: false
+        },
+        {
+            holdingsListModel: root.createHoldingsModel2(),
+            channelsListModel: root.createChannelsModel2(),
+            permissionType: PermissionTypes.Type.Member,
+            isPrivate: false
+        }
+    ]
+
+    readonly property var moreThanTwoInitialShortPermissionsModelData: [
+        {
+            holdingsListModel: root.createHoldingsModel1(),
+            channelsListModel: root.createChannelsModel1(),
+            permissionType: PermissionTypes.Type.Admin,
+            isPrivate: true
+        },
+        {
+            holdingsListModel: root.createHoldingsModel2(),
+            channelsListModel: root.createChannelsModel2(),
+            permissionType: PermissionTypes.Type.Member,
+            isPrivate: false
+        },
+        {
+            holdingsListModel: root.createHoldingsModel3(),
+            channelsListModel: root.createChannelsModel2(),
+            permissionType: PermissionTypes.Type.Member,
+            isPrivate: false
+        },
+        {
+            holdingsListModel: root.createHoldingsModel5(),
+            channelsListModel: root.createChannelsModel2(),
             permissionType: PermissionTypes.Type.Member,
             isPrivate: false
         }
@@ -93,20 +171,63 @@ QtObject {
         }
     }
 
+    readonly property var twoShortPermissionsModel: ListModel {
+        readonly property ModelChangeGuard guard: ModelChangeGuard {
+            model: root.twoShortPermissionsModel
+        }
+
+        Component.onCompleted: {
+            append(twoShortPermissionsModelData)
+            guard.enabled = true
+        }
+    }
+
+    readonly property var twoLongPermissionsModel: ListModel {
+        readonly property ModelChangeGuard guard: ModelChangeGuard {
+            model: root.twoLongPermissionsModel
+        }
+
+        Component.onCompleted: {
+            append(twoLongPermissionsModelData)
+            guard.enabled = true
+        }
+    }
+
+    readonly property var threeShortPermissionsModel: ListModel {
+        readonly property ModelChangeGuard guard: ModelChangeGuard {
+            model: root.threeShortPermissionsModel
+        }
+
+        Component.onCompleted: {
+            append(threeShortPermissionsModelData)
+            guard.enabled = true
+        }
+    }
+
+    readonly property var moreThanTwoInitialShortPermissionsModel: ListModel {
+        readonly property ModelChangeGuard guard: ModelChangeGuard {
+            model: root.moreThanTwoInitialShortPermissionsModel
+        }
+
+        Component.onCompleted: {
+            append(moreThanTwoInitialShortPermissionsModelData)
+            guard.enabled = true
+        }
+    }
+
     function createHoldingsModel1() {
         return [
-                    {
-                        type: HoldingTypes.Type.Asset,
-                        key: "socks",
-                        amount: 1.2,
-                        available: true
-                    },
                     {
                         type: HoldingTypes.Type.Asset,
                         key: "zrx",
                         amount: 15,
                         available: false
-                    },
+                    }
+                ]
+    }
+
+    function createHoldingsModel1b() {
+        return [
                     {
                         type: HoldingTypes.Type.Ens,
                         key: "Ens",
@@ -120,13 +241,13 @@ QtObject {
         return [
                     {
                         type: HoldingTypes.Type.Collectible,
-                        key: "Kitty3",
+                        key: "Kitty6",
                         amount: 50.25,
                         available: true
                     },
                     {
-                        type: HoldingTypes.Type.Collectible,
+                        type: HoldingTypes.Type.Asset,
-                        key: "Anniversary",
+                        key: "Dai",
                         amount: 11,
                         available: false
                     }
@@ -142,9 +263,15 @@ QtObject {
                         available: true
                     },
                     {
-                        type: HoldingTypes.Type.Asset,
+                        type: HoldingTypes.Type.Collectible,
-                        key: "zrx",
+                        key: "Kitty4",
-                        amount: 1,
+                        amount: 50.25,
+                        available: true
+                    },
+                    {
+                        type: HoldingTypes.Type.Collectible,
+                        key: "SuperRare",
+                        amount: 11,
                         available: false
                     }
                 ]