Quo community-stat component (#17851)

src/quo/components/community/community_stat/component_spec.cljs

@@ -0,0 +1,18 @@
+(ns quo.components.community.community-stat.component-spec
+  (:require
+    [quo.core :as quo]
+    [test-helpers.component :as h]
+    utils.money))
+
+(h/describe "Community Stat Component"
+  (h/test "default render"
+    (h/render [quo/community-stat
+               {:value               "5000"
+                :icon                :i/active-members
+                :accessibility-label :community-active-members}])
+    (h/is-truthy (h/query-by-label-text :community-active-members)))
+  (h/test "renders community stat with a value"
+    (h/render [quo/community-stat
+               {:value "5000"
+                :icon  :i/members}])
+    (h/is-truthy (h/query-by-text (utils.money/format-amount "5000")))))

src/quo/components/community/community_stat/style.cljs

@@ -0,0 +1,12 @@
+(ns quo.components.community.community-stat.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction :row
+   :align-items    :center
+   :height         22})
+
+(defn text
+  [theme]
+  {:color       (colors/theme-colors colors/black colors/white theme)
+   :margin-left 2})

src/quo/components/community/community_stat/view.cljs

@@ -0,0 +1,26 @@
+(ns quo.components.community.community-stat.view
+  (:require [quo.components.community.community-stat.style :as style]
+            [quo.components.icon :as quo.icons]
+            [quo.components.markdown.text :as quo.text]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.money))
+
+(defn view-internal
+  [{:keys [value icon theme style accessibility-label]}]
+  [rn/view
+   {:style               (merge style/container style)
+    :accessibility-label accessibility-label}
+   [quo.icons/icon icon
+    {:size            16
+     :container-style {:align-items     :center
+                       :justify-content :center}
+     :resize-mode     :center
+     :color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+   [quo.text/text
+    {:size   :paragraph-1
+     :weight :regular
+     :style  (style/text theme)} (utils.money/format-amount value)]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo/components/community/community_view.cljs

@@ -1,52 +1,30 @@
 (ns quo.components.community.community-view
   (:require
+    [quo.components.community.community-stat.view :as community-stat]
     [quo.components.community.style :as style]
-    [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
     [quo.components.tags.permission-tag :as permission]
     [quo.components.tags.tag :as tag]
     [quo.foundations.colors :as colors]
     [quo.theme :as theme]
     [react-native.core :as rn]
-    [react-native.gesture :as gesture]
+    [react-native.gesture :as gesture]))
-    utils.money))
-
-(defn community-stats
-  [{:keys [icon members-count icon-color accessibility-label]}]
-  [rn/view
-   {:accessibility-label accessibility-label
-    :style               (style/stats-count-container)}
-   [rn/view {:margin-right 2}
-    [icons/icon icon
-     {:container-style {:align-items     :center
-                        :justify-content :center}
-      :resize-mode     :center
-      :size            16
-      :color           icon-color}]]
-   [text/text
-    {:weight :regular
-     :size   :paragraph-2}
-    members-count]])
 
 (defn community-stats-column
-  [{:keys [type theme blur? members-count active-count]}]
+  [{:keys [type members-count active-count]}]
-  (let [icon-color (if (and (= :dark theme) blur?)
-                     colors/white-opa-40
-                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
   [rn/view
    (if (= type :card-view)
      (style/card-stats-container)
      (style/list-stats-container))
-     [community-stats
+   [community-stat/view
     {:accessibility-label :stats-members-count
      :icon                :i/group
-       :members-count       (utils.money/format-amount members-count)
+     :value               members-count
-       :icon-color          icon-color}]
+     :style               {:margin-right 12}}]
-     [community-stats
+   [community-stat/view
     {:accessibility-label :stats-active-count
      :icon                :i/active-members
-       :members-count       (utils.money/format-amount active-count)
+     :value               active-count}]])
-       :icon-color          icon-color}]]))
 
 (defn community-tags
   [{:keys [tags container-style last-item-style]}]

src/quo/components/community/style.cljs

@@ -17,12 +17,6 @@
 (def detail-container
   {:flex 1})
 
-(defn stats-count-container
-  []
-  {:flex-direction :row
-   :align-items    :center
-   :margin-right   16})
-
 (defn card-stats-container
   []
   {:flex-direction :row})

src/quo/components/list_items/community/view.cljs

@@ -148,8 +148,6 @@
         (when (and members (= type :discover))
           [community-view/community-stats-column
            {:type          :list-view
-            :theme         theme
-            :blur?         blur?
             :members-count (:members-count members)
             :active-count  (:active-count members)}])]
        [info-component

src/quo/core.cljs

@@ -31,6 +31,7 @@
     quo.components.community.channel-actions
     quo.components.community.community-card-view
     quo.components.community.community-list-view
+    quo.components.community.community-stat.view
     quo.components.community.community-view
     quo.components.community.icon
     quo.components.community.token-gating
@@ -199,7 +200,7 @@
 (def communities-membership-list-item
   quo.components.community.community-list-view/communities-membership-list-item)
 (def community-stats-column quo.components.community.community-view/community-stats-column)
-(def community-stats quo.components.community.community-view/community-stats)
+(def community-stat quo.components.community.community-stat.view/view)
 (def community-tags quo.components.community.community-view/community-tags)
 (def community-title quo.components.community.community-view/community-title)
 (def permission-tag-container quo.components.community.community-view/permission-tag-container)

src/quo/core_spec.cljs

@@ -15,6 +15,7 @@
     [quo.components.calendar.calendar.component-spec]
     [quo.components.calendar.calendar.month-picker.component-spec]
     [quo.components.colors.color-picker.component-spec]
+    [quo.components.community.community-stat.component-spec]
     [quo.components.counter.counter.component-spec]
     [quo.components.counter.step.component-spec]
     [quo.components.dividers.divider-label.component-spec]

src/status_im2/contexts/quo_preview/community/community_stat.cljs

@@ -0,0 +1,21 @@
+(ns status-im2.contexts.quo-preview.community.community-stat
+  (:require
+    [quo.core :as quo]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:key  :value
+    :type :number}
+   {:key     :icon
+    :type    :select
+    :options [{:key :i/members}
+              {:key :i/active-members}]}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:value 5000
+                             :icon  :i/members})]
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/community-stat @state]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -39,6 +39,7 @@
      community-card]
     [status-im2.contexts.quo-preview.community.community-membership-list-view
      :as community-membership-list-view]
+    [status-im2.contexts.quo-preview.community.community-stat :as community-stat]
     [status-im2.contexts.quo-preview.community.discover-card :as discover-card]
     [status-im2.contexts.quo-preview.community.token-gating :as token-gating]
     [status-im2.contexts.quo-preview.counter.counter :as counter]
@@ -231,6 +232,8 @@
                         :component community-card/view}
                        {:name      :community-membership-list-view
                         :component community-membership-list-view/view}
+                       {:name      :community-stat
+                        :component community-stat/view}
                        {:name      :discover-card
                         :component discover-card/view}
                        {:name      :token-gating