feat(storybook): Created new page for CommunityPermissionsRow compo…

…nent - Updated permissions related models. - Created new page for new component `CommunityPermissionsRow`
status-im · Apr 27, 2023 · 8a98a08 · 8a98a08
1 parent 3400f5e
commit 8a98a08
Show file tree

Hide file tree

Showing 5 changed files with 362 additions and 18 deletions.
diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml
@@ -257,6 +257,10 @@ ListModel {
         title: "TokenItem"
         section: "Components"
     }
+    ListElement {
+        title: "CommunityPermissionsRow"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"

diff --git a/storybook/figma.json b/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"
     ]
 }
diff --git a/storybook/pages/CommunityPermissionsRowPage.qml b/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
+            }
+        }
+    }
+}
diff --git a/storybook/src/Models/AssetsModel.qml b/storybook/src/Models/AssetsModel.qml
@@ -47,10 +47,10 @@ ListModel {
             category: TokenCategories.Category.General
         },
         {
-            key: "Dai2",
-            iconSource: ModelsData.assets.dai,
-            name: "Dai2",
-            shortName: "DAI2",
+            key: "snt",
+            iconSource: ModelsData.assets.snt,
+            name: "snt",
+            shortName: "snt",
             category: TokenCategories.Category.General
         }
     ]