From e48a5c4e832c9b6c41daa34317c419657675494a Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Thu, 9 Nov 2023 18:09:42 +0530 Subject: [PATCH] Quo community-stat component (#17851) --- .../community_stat/component_spec.cljs | 18 +++++++ .../community/community_stat/style.cljs | 12 +++++ .../community/community_stat/view.cljs | 26 +++++++++ .../components/community/community_view.cljs | 54 ++++++------------- src/quo/components/community/style.cljs | 6 --- .../components/list_items/community/view.cljs | 2 - src/quo/core.cljs | 3 +- src/quo/core_spec.cljs | 1 + .../quo_preview/community/community_stat.cljs | 21 ++++++++ src/status_im2/contexts/quo_preview/main.cljs | 3 ++ 10 files changed, 99 insertions(+), 47 deletions(-) create mode 100644 src/quo/components/community/community_stat/component_spec.cljs create mode 100644 src/quo/components/community/community_stat/style.cljs create mode 100644 src/quo/components/community/community_stat/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/community/community_stat.cljs diff --git a/src/quo/components/community/community_stat/component_spec.cljs b/src/quo/components/community/community_stat/component_spec.cljs new file mode 100644 index 0000000000..0307099cb7 --- /dev/null +++ b/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"))))) diff --git a/src/quo/components/community/community_stat/style.cljs b/src/quo/components/community/community_stat/style.cljs new file mode 100644 index 0000000000..c5479d1b4b --- /dev/null +++ b/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}) diff --git a/src/quo/components/community/community_stat/view.cljs b/src/quo/components/community/community_stat/view.cljs new file mode 100644 index 0000000000..fcc533b809 --- /dev/null +++ b/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)) diff --git a/src/quo/components/community/community_view.cljs b/src/quo/components/community/community_view.cljs index a852e5c64b..ebdc3ef564 100644 --- a/src/quo/components/community/community_view.cljs +++ b/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] - 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]]) + [react-native.gesture :as gesture])) (defn community-stats-column - [{:keys [type theme blur? 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 - {:accessibility-label :stats-members-count - :icon :i/group - :members-count (utils.money/format-amount members-count) - :icon-color icon-color}] - [community-stats - {:accessibility-label :stats-active-count - :icon :i/active-members - :members-count (utils.money/format-amount active-count) - :icon-color icon-color}]])) + [{:keys [type members-count active-count]}] + [rn/view + (if (= type :card-view) + (style/card-stats-container) + (style/list-stats-container)) + [community-stat/view + {:accessibility-label :stats-members-count + :icon :i/group + :value members-count + :style {:margin-right 12}}] + [community-stat/view + {:accessibility-label :stats-active-count + :icon :i/active-members + :value active-count}]]) (defn community-tags [{:keys [tags container-style last-item-style]}] diff --git a/src/quo/components/community/style.cljs b/src/quo/components/community/style.cljs index 036e544911..8fd031ef86 100644 --- a/src/quo/components/community/style.cljs +++ b/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}) diff --git a/src/quo/components/list_items/community/view.cljs b/src/quo/components/list_items/community/view.cljs index 10b5518f11..9e4ab03e6e 100644 --- a/src/quo/components/list_items/community/view.cljs +++ b/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 diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 638338aad6..4746a3ceda 100644 --- a/src/quo/core.cljs +++ b/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) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index 57a7ff6472..b190e3d5ff 100644 --- a/src/quo/core_spec.cljs +++ b/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] diff --git a/src/status_im2/contexts/quo_preview/community/community_stat.cljs b/src/status_im2/contexts/quo_preview/community/community_stat.cljs new file mode 100644 index 0000000000..4d9891f698 --- /dev/null +++ b/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]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index e94b4a1858..e0ba74a3f4 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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