Implement Data Item component (#16960)

Implement Data Item component #16960

src/quo2/components/common/not_implemented/style.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.common.not-implemented.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn text
+  [blur? theme]
+  {:border-color :red
+   :border-width 1
+   :color        (if blur?
+                   colors/white
+                   (colors/theme-colors colors/neutral-100
+                                        colors/white
+                                        theme))})

src/quo2/components/common/not_implemented/view.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.common.not-implemented.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as quo.theme]
+            [quo2.components.common.not-implemented.style :as style]))
+
+(defn- view-internal
+  [{:keys [blur? theme]}]
+  [rn/text {:style (style/text blur? theme)}
+   "not implemented"])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/settings/data_item/component_spec.cljs

@@ -0,0 +1,178 @@
+(ns quo2.components.settings.data-item.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.core :as quo]))
+
+(h/describe
+  "date item tests"
+  (h/test "title is visible"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         false
+                :card?               true
+                :label               :none
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/is-truthy (h/get-by-text "Label")))
+
+  (h/test "data item renders correctly if card? is false"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         false
+                :card?               false
+                :label               :none
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/has-style (h/query-by-label-text :data-item)
+                 {:borderWidth nil}))
+
+  (h/test "data item renders correctly if card? is true and size is small"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         false
+                :card?               true
+                :label               :none
+                :status              :default
+                :size                :small
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/has-style (h/query-by-label-text :data-item)
+                 {:borderWidth nil}))
+
+  (h/test "data item renders correctly if card? is true"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         false
+                :card?               true
+                :label               :none
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/has-style (h/query-by-label-text :data-item)
+                 {:borderWidth 1}))
+
+  (h/test "subtitle is visible when status is not loading"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         false
+                :card?               true
+                :label               :none
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/is-truthy (h/get-by-text "Description")))
+
+  (h/test "right icon is not visible when icon-right? is false"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         false
+                :card?               true
+                :label               :none
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/is-falsy (h/query-by-label-text :icon-right)))
+
+  (h/test "right icon is visible when icon-right? is true"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         true
+                :card?               true
+                :label               :none
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/is-truthy (h/query-by-label-text :icon-right)))
+
+  (h/test "description icon is visible when description is icon"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :icon
+                :icon-right?         true
+                :card?               true
+                :label               :preview
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/is-truthy (h/query-by-label-text :description-icon)))
+
+  (h/test "description image is visible when description is network"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :network
+                :icon-right?         true
+                :card?               true
+                :label               :preview
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/is-truthy (h/query-by-label-text :description-image)))
+
+  (h/test "description emoji is visible when description is account"
+    (h/render [quo/data-item
+               {:on-press            (h/mock-fn)
+                :blur?               false
+                :description         :account
+                :icon-right?         true
+                :card?               true
+                :label               :preview
+                :status              :default
+                :size                :default
+                :title               "Label"
+                :subtitle            "Description"
+                :icon                :i/placeholder
+                :emoji               "🎮"
+                :customization-color :yellow}])
+    (h/is-truthy (h/query-by-label-text :account-emoji))))

src/quo2/components/settings/data_item/style.cljs

@@ -0,0 +1,71 @@
+(ns quo2.components.settings.data-item.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [size card? blur? theme]
+  {:flex               1
+   :flex-direction     :row
+   :justify-content    :space-between
+   :padding-vertical   (when (= size :default) 8)
+   :padding-horizontal (when (= size :default) 12)
+   :border-radius      16
+   :border-width       (when (and card? (not= size :small)) 1)
+   :border-color       (if blur?
+                         colors/white-opa-10
+                         (colors/theme-colors colors/neutral-10
+                                              colors/neutral-80
+                                              theme))})
+
+(defn loading-container
+  [size blur? theme]
+  {:width            (if (= size :default) 132 72)
+   :height           (if (= size :default) 16 10)
+   :background-color (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-5
+                                            colors/neutral-90
+                                            theme))
+   :border-radius    (if (= size :default) 6 3)
+   :margin-vertical  (if (= size :default) 4 3)})
+
+(def subtitle-container
+  {:flex-direction :row
+   :margin-bottom  1})
+
+(def right-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(defn subtitle-icon-container
+  [description]
+  {:margin-right    (when (not= :default description) 4)
+   :justify-content :center})
+
+(defn title
+  [theme]
+  {:color        (colors/theme-colors colors/neutral-50
+                                      colors/neutral-40
+                                      theme)
+   :margin-right 4})
+
+(def title-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def image
+  {:width  16
+   :height 16})
+
+(defn description
+  [blur? theme]
+  {:color (if blur?
+            colors/white
+            (colors/theme-colors colors/neutral-100
+                                 colors/white
+                                 theme))})
+(defn right-icon
+  [label]
+  {:margin-left (if (or (= label :graph) (= label :none)) 12 8)})
+
+(def left-side
+  {:flex 1})

src/quo2/components/settings/data_item/view.cljs

@@ -0,0 +1,126 @@
+(ns quo2.components.settings.data-item.view
+  (:require [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [quo2.components.settings.data-item.style :as style]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.common.not-implemented.view :as not-implemented]
+            [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.list-items.preview-list.view :as preview-list]
+            [quo2.foundations.resources :as quo.resources]
+            [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [utils.i18n :as i18n]))
+
+(defn- left-loading
+  [{:keys [size blur? theme]}]
+  [rn/view {:style (style/loading-container size blur? theme)}])
+
+(defn- left-subtitle
+  [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}]
+  [rn/view {:style style/subtitle-container}
+   (when (not= :small size)
+     [rn/view {:style (style/subtitle-icon-container description)}
+      (case description
+        :icon    [icons/icon icon
+                  {:accessibility-label :description-icon
+                   :size                16
+                   :color               icon-color}]
+        :account [account-avatar/view
+                  {:customization-color customization-color
+                   :size                16
+                   :emoji               emoji
+                   :type                :default}]
+        :network [rn/image
+                  {:accessibility-label :description-image
+                   :source              (quo.resources/tokens :eth)
+                   :style               style/image}]
+        nil)])
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  (style/description blur? theme)}
+    subtitle]])
+
+(defn- left-title
+  [{:keys [title label size theme]}]
+  [rn/view {:style style/title-container}
+   [text/text
+    {:weight :regular
+     :size   :paragraph-2
+     :style  (style/title theme)}
+    title]
+   (when (and (= :graph label) (not= :small size))
+     [text/text
+      {:weight :regular
+       :size   :label
+       :style  (style/title theme)}
+      (i18n/label :t/days)])])
+
+(defn- left-side
+  [{:keys [theme title status size blur? description icon subtitle label icon-color customization-color
+           emoji]}]
+  [rn/view {:style style/left-side}
+   [left-title
+    {:title title
+     :label label
+     :size  size
+     :theme theme}]
+   (if (= status :loading)
+     [left-loading
+      {:size  size
+       :blur? blur?
+       :theme theme}]
+     [left-subtitle
+      {:theme               theme
+       :size                size
+       :description         description
+       :icon                icon
+       :icon-color          icon-color
+       :blur?               blur?
+       :subtitle            subtitle
+       :customization-color customization-color
+       :emoji               emoji}])])
+
+(defn- right-side
+  [{:keys [label icon-right? icon-color communities-list]}]
+  [rn/view {:style style/right-container}
+   (case label
+     :preview [preview-list/view
+               {:type   :communities
+                :number 3
+                :size   :size/s-24}
+               communities-list]
+     :graph   [text/text "graph"]
+     :none    nil
+     nil)
+   (when icon-right?
+     [rn/view {:style (style/right-icon label)}
+      [icons/icon
+       (if (= :none label)
+         :i/copy
+         :i/chevron-right)
+       {:accessibility-label :icon-right
+        :color               icon-color
+        :size                20}]])])
+
+(def view-internal
+  (fn [{:keys [blur? card? icon-right? label status size theme on-press communities-list] :as props}]
+    (let [icon-color (if (or blur? (= :dark theme))
+                       colors/neutral-40
+                       colors/neutral-50)]
+      (if (= :graph label)
+        [not-implemented/view {:blur? blur?}]
+        [rn/pressable
+         {:accessibility-label :data-item
+          :disabled            (not icon-right?)
+          :on-press            on-press
+          :style               (style/container size card? blur? theme)}
+         [left-side props]
+         (when (and (= :default status) (not= :small size))
+           [right-side
+            {:label            label
+             :icon-right?      icon-right?
+             :icon-color       icon-color
+             :communities-list communities-list}])]))))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -96,6 +96,7 @@
     quo2.components.selectors.reactions.view
     quo2.components.selectors.selectors.view
     quo2.components.settings.accounts.view
+    quo2.components.settings.data-item.view
     quo2.components.settings.privacy-option
     quo2.components.settings.reorder-item.view
     quo2.components.settings.settings-list.view
@@ -297,6 +298,7 @@
 (def settings-list quo2.components.settings.settings-list.view/settings-list)
 (def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
 (def category quo2.components.settings.category.view/category)
+(def data-item quo2.components.settings.data-item.view/view)
 
 ;;;; Share
 (def qr-code quo2.components.share.qr-code.view/qr-code)

src/quo2/core_spec.cljs

@@ -55,6 +55,7 @@
     [quo2.components.settings.reorder-item.component-spec]
     [quo2.components.settings.settings-list.component-spec]
     [quo2.components.settings.category.component-spec]
+    [quo2.components.settings.data-item.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.status-tags-component-spec]
     [quo2.components.wallet.account-card.component-spec]

src/status_im2/contexts/quo_preview/main.cljs

@@ -92,6 +92,7 @@
     [status-im2.contexts.quo-preview.selectors.filter :as filter]
     [status-im2.contexts.quo-preview.selectors.selectors :as selectors]
     [status-im2.contexts.quo-preview.settings.accounts :as accounts]
+    [status-im2.contexts.quo-preview.settings.data-item :as data-item]
     [status-im2.contexts.quo-preview.settings.settings-list :as settings-list]
     [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option]
     [status-im2.contexts.quo-preview.settings.reorder-item :as reorder-item]
@@ -321,7 +322,10 @@
                        {:name      :reorder-item
                         :component reorder-item/preview-reorder-item}
                        {:name      :category
-                        :component category/preview}]
+                        :options   {:topBar {:visible true}}
+                        :component category/preview}
+                       {:name      :data-item
+                        :component data-item/preview-data-item}]
    :share             [{:name      :qr-code
                         :component qr-code/preview-qr-code}
                        {:name      :share-qr-code

src/status_im2/contexts/quo_preview/settings/data_item.cljs

@@ -0,0 +1,105 @@
+(ns status-im2.contexts.quo-preview.settings.data-item
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]
+            [react-native.blur :as blur]))
+
+(def descriptor
+  [{:label "Blur:"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Card:"
+    :key   :card?
+    :type  :boolean}
+   {:label "Icon Right:"
+    :key   :icon-right?
+    :type  :boolean}
+   {:label   "Label:"
+    :type    :select
+    :key     :label
+    :options [{:key   :none
+               :value "None"}
+              {:key   :graph
+               :value "Graph"}
+              {:key   :preview
+               :value "Preview"}]}
+   {:label   "Description:"
+    :type    :select
+    :key     :description
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :icon
+               :value "Icon"}
+              {:key   :network
+               :value "Network"}
+              {:key   :account
+               :value "Account"}]}
+   {:label   "Status:"
+    :type    :select
+    :key     :status
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :loading
+               :value "Loading"}]}
+   {:label   "Size:"
+    :type    :select
+    :key     :size
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :small
+               :value "Small"}]}])
+
+(def communities-list
+  [{:source (resources/get-mock-image :coinbase)}
+   {:source (resources/get-mock-image :decentraland)}
+   {:source (resources/get-mock-image :rarible)}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:on-press            #(js/alert (str "pressed"))
+                             :blur?               false
+                             :description         :account
+                             :icon-right?         false
+                             :card?               true
+                             :label               :none
+                             :status              :default
+                             :size                :default
+                             :title               "Label"
+                             :subtitle            "Description"
+                             :icon                :i/placeholder
+                             :emoji               "🎮"
+                             :customization-color :yellow
+                             :communities-list    communities-list})
+        blur? (reagent/cursor state [:blur?])]
+    (fn []
+      [rn/view
+       [rn/view {:style {:flex 1}}
+        [preview/customizer state descriptor]]
+       (when @blur?
+         [blur/view
+          {:style         {:position         :absolute
+                           :left             0
+                           :right            0
+                           :bottom           0
+                           :height           75
+                           :background-color colors/neutral-80-opa-70}
+           :overlay-color :transparent}])
+       [rn/view
+        {:style {:align-items       :center
+                 :padding-vertical  10
+                 :margin-horizontal 20}}
+        [quo/data-item @state]]])))
+
+(defn preview-data-item
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-100)
+            :flex             1}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

translations/en.json

@@ -2288,5 +2288,6 @@
     "keypair-title": "{{name}}'s default keypair",
     "about": "About",
     "no-permissions": "No permissions",
-    "no-dapps": "No connected dApps"
+    "no-dapps": "No connected dApps",
+    "days": "Days"
 }