Collectible counter component #18632 (#18653)

src/quo/components/counter/collectible_counter/component_spec.cljs

@@ -0,0 +1,34 @@
+(ns quo.components.counter.collectible-counter.component-spec
+  (:require
+    [quo.components.counter.collectible-counter.view :as collectible-counter]
+    [test-helpers.component :as h]))
+
+(defn render
+  [component]
+  (h/render-with-theme-provider component :dark))
+
+(h/describe "collectible counter component"
+  (h/test "default render of component"
+    (render [collectible-counter/view {}])
+    (-> (h/expect (h/get-by-label-text :collectible-counter))
+        (h/is-truthy)))
+
+  (h/test "render with a string value"
+    (render [collectible-counter/view {:value "x500"}])
+    (-> (h/expect (h/get-by-text "x500"))
+        (h/is-truthy)))
+
+  (h/test "render with an integer value and default status"
+    (render [collectible-counter/view
+             {:value  100
+              :status :default}])
+    (-> (h/expect (h/get-by-text "100"))
+        (h/is-truthy)))
+
+  (h/test "render with all availiable props"
+    (render [collectible-counter/view
+             {:value  "x100"
+              :status :error
+              :size   :size-24}])
+    (-> (h/expect (h/get-by-text "x100"))
+        (h/is-truthy))))

src/quo/components/counter/collectible_counter/style.cljs

@@ -0,0 +1,57 @@
+(ns quo.components.counter.collectible-counter.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn- get-background-color
+  [{:keys [status theme]}]
+  (case status
+    :default (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)
+    :error   (colors/resolve-color :danger theme 10)
+    (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)))
+
+(defn- get-container-border-styles
+  [{:keys [status theme]}]
+  (when (= status :error)
+    {:border-color (colors/resolve-color :danger theme 20)
+     :border-width 1}))
+
+(defn- get-container-styles-by-size
+  [{:keys [size]}]
+  (let [style-size-24 {:height             24
+                       :padding-vertical   3
+                       :padding-horizontal 8}
+        style-size-32 {:height             32
+                       :padding-vertical   5
+                       :padding-horizontal 12}]
+    (case size
+      :size-32 style-size-32
+      :size-24 style-size-24
+      style-size-32)))
+
+(defn container
+  [props]
+  (merge {:align-self       :flex-start
+          :flex-direcrion   :row
+          :justify-content  :center
+          :border-radius    999
+          :background-color (get-background-color props)}
+         (get-container-border-styles props)
+         (get-container-styles-by-size props)))
+
+(defn- get-text-color
+  [{:keys [status theme]}]
+  (case status
+    :default (colors/theme-colors colors/neutral-100 colors/white theme)
+    :error   (colors/resolve-color :danger theme)
+    (colors/theme-colors colors/neutral-100 colors/white theme)))
+
+(defn get-text-size
+  [{:keys [size]}]
+  (case size
+    :size-32 :paragraph-1
+    :size-24 :paragraph-2
+    :paragraph-1))
+
+(defn text
+  [props]
+  {:color (get-text-color props)})

src/quo/components/counter/collectible_counter/view.cljs

@@ -0,0 +1,39 @@
+(ns quo.components.counter.collectible-counter.view
+  (:require
+    [quo.components.counter.collectible-counter.style :as style]
+    [quo.components.markdown.text :as text]
+    [quo.theme]
+    [react-native.core :as rn]
+    [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:value {:optional true} [:maybe [:or :string :int]]]
+      [:status {:optional true} [:maybe :keyword]]
+      [:size {:optional true} [:maybe [:enum :size-32 :size-24]]]
+      [:accessibility-label {:optional true} [:maybe :keyword]]
+      [:theme :schema.common/theme]]]]
+   :any])
+
+(defn- view-internal
+  [{:keys [value accessibility-label]
+    :as   props}]
+  (let [default-props {:status :default
+                       :size   :size-32}
+        props         (merge default-props props)]
+    [rn/view
+     {:accessible          true
+      :accessibility-label (or accessibility-label :collectible-counter)
+      :style               (style/container props)}
+     [text/text
+      {:weight :medium
+       :size   (style/get-text-size props)
+       :style  (style/text props)}
+      value]]))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/core.cljs

@@ -36,6 +36,7 @@
     quo.components.community.community-view
     quo.components.community.icon
     quo.components.community.token-gating
+    quo.components.counter.collectible-counter.view
     quo.components.counter.counter.view
     quo.components.counter.step.view
     quo.components.dividers.date
@@ -229,6 +230,7 @@
 (def channel-actions quo.components.community.channel-actions/channel-actions)
 
 ;;;; Counter
+(def collectible-counter quo.components.counter.collectible-counter.view/view)
 (def counter quo.components.counter.counter.view/view)
 (def step #'quo.components.counter.step.view/view)
 

src/quo/core_spec.cljs

@@ -17,6 +17,7 @@
     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.collectible-counter.component-spec
     quo.components.counter.counter.component-spec
     quo.components.counter.step.component-spec
     quo.components.dividers.divider-label.component-spec

src/status_im/contexts/preview/quo/counter/collectible_counter.cljs

@@ -0,0 +1,30 @@
+(ns status-im.contexts.preview.quo.counter.collectible-counter
+  (:require
+    [quo.core :as quo]
+    [reagent.core :as reagent]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key     :status
+    :type    :select
+    :options [{:key :default}
+              {:key :error}]}
+   {:key     :size
+    :type    :select
+    :options [{:key :size-32}
+              {:key :size-24}]}
+   {:key  :value
+    :type :text}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:value  "x500"
+                             :status :default
+                             :size   :size-32})]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :show-blur-background? true
+        :blur?                 true}
+       [quo/collectible-counter @state]])))

src/status_im/contexts/preview/quo/main.cljs

@@ -43,6 +43,7 @@
     [status-im.contexts.preview.quo.community.discover-card :as discover-card]
     [status-im.contexts.preview.quo.community.list-item :as community-list-item]
     [status-im.contexts.preview.quo.community.token-gating :as token-gating]
+    [status-im.contexts.preview.quo.counter.collectible-counter :as collectible-counter]
     [status-im.contexts.preview.quo.counter.counter :as counter]
     [status-im.contexts.preview.quo.counter.step :as step]
     [status-im.contexts.preview.quo.dividers.date :as divider-date]
@@ -260,7 +261,9 @@
                        {:name      :channel-actions
                         :options   {:insets {:bottom? true}}
                         :component channel-actions/view}]
-   :counter           [{:name      :counter
+   :counter           [{:name      :collectible-counter
+                        :component collectible-counter/view}
+                       {:name      :counter
                         :component counter/view}
                        {:name      :step
                         :component step/view}]