feat: step component

resolve #15696

Signed-off-by: yqrashawn <namy.19@gmail.com>

src/quo2/components/counter/step/__tests__/step_component_spec.cljs

@@ -0,0 +1,19 @@
+(ns quo2.components.counter.step.--tests--.step-component-spec
+  (:require [quo2.components.counter.step.view :as step]
+            [test-helpers.component :as h]))
+
+(h/describe "step component"
+  (h/test "default render of step component"
+    (h/render [step/step {} nil])
+    (-> (h/expect (h/get-by-test-id :step-component))
+        (h/is-truthy)))
+
+  (h/test "renders step with a string value"
+    (h/render [step/step {} "1"])
+    (-> (h/expect (h/get-by-text "1"))
+        (h/is-truthy)))
+
+  (h/test "renders step with an integer value"
+    (h/render [step/step {} 1])
+    (-> (h/expect (h/get-by-text "1"))
+        (h/is-truthy))))

src/quo2/components/counter/step/style.cljs

@@ -0,0 +1,41 @@
+(ns quo2.components.counter.step.style
+  (:require
+    [quo2.foundations.colors :as colors]))
+
+(def container-base
+  {:align-items     :center
+   :justify-content :center
+   :border-radius   6
+   :height          20})
+
+(defn neutral-border-color
+  [in-blur-view? override-theme]
+  (if in-blur-view?
+    (colors/theme-colors colors/white-opa-10 colors/neutral-80-opa-5 override-theme)
+    (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)))
+
+(def active-background-color (colors/custom-color :blue 50 10))
+(def complete-background-color (colors/custom-color :blue 50))
+
+(defn container
+  [size type in-blur-view? override-theme]
+  (cond-> container-base
+    (#{1 2} size) (assoc :width 20)
+    (= size 3) (assoc :width 28)
+
+    (= type :neutral)
+    (assoc :border-width 1
+           :border-color (neutral-border-color in-blur-view? override-theme))
+
+    (= type :active)
+    (assoc :background-color active-background-color)
+
+    (= type :complete)
+    (assoc :background-color complete-background-color)))
+
+(defn text-color
+  ([type] (text-color type nil))
+  ([type override-theme]
+   (case type
+     (:neutral :active) (colors/theme-colors colors/neutral-100-opa-100 colors/white override-theme)
+     :complete          colors/white)))

src/quo2/components/counter/step/view.cljs

@@ -0,0 +1,23 @@
+(ns quo2.components.counter.step.view
+  (:require
+    [quo2.components.counter.step.style :as style]
+    [quo2.components.markdown.text :as text]
+    [react-native.core :as rn]
+    [utils.number :as utils-number]))
+
+(defn step
+  [{:keys [type accessibility-label override-theme in-blur-view?]} value]
+  (let [type                (or type :neutral)
+        value               (utils-number/parse-int value)
+        label               (str value)
+        size                (count label)
+        accessibility-label (or accessibility-label (keyword (str "step-" label)))]
+    [rn/view
+     {:test-ID             :step-component
+      :accessible          true
+      :accessibility-label accessibility-label
+      :style               (style/container size type in-blur-view? override-theme)}
+     [text/text
+      {:weight :medium
+       :size   :label
+       :style  {:color (style/text-color type override-theme)}} label]]))

src/quo2/core.cljs

@@ -18,6 +18,7 @@
     quo2.components.community.icon
     quo2.components.community.token-gating
     quo2.components.counter.counter
+    quo2.components.counter.step.view
     quo2.components.dividers.date
     quo2.components.dividers.divider-label
     quo2.components.dividers.new-messages
@@ -83,7 +84,6 @@
 (def text quo2.components.markdown.text/text)
 (def icon quo2.components.icon/icon)
 (def separator quo2.components.separator/separator)
-(def counter quo2.components.counter.counter/counter)
 (def header quo2.components.header/header)
 (def dropdown quo2.components.dropdowns.dropdown/dropdown)
 (def info-message quo2.components.info.info-message/info-message)
@@ -137,6 +137,10 @@
 (def token-gating quo2.components.community.token-gating/token-gating)
 (def community-icon quo2.components.community.icon/community-icon)
 
+;;;; COUNTER
+(def counter quo2.components.counter.counter/counter)
+(def step quo2.components.counter.step.view/step)
+
 ;;;; DIVIDERS
 (def divider-label quo2.components.dividers.divider-label/divider-label)
 (def new-messages quo2.components.dividers.new-messages/new-messages)

src/quo2/core_spec.cljs

@@ -5,6 +5,7 @@
     [quo2.components.buttons.--tests--.buttons-component-spec]
     [quo2.components.colors.color-picker.component-spec]
     [quo2.components.counter.--tests--.counter-component-spec]
+    [quo2.components.counter.step.--tests--.step-component-spec]
     [quo2.components.dividers.--tests--.divider-label-component-spec]
     [quo2.components.dividers.strength-divider.component-spec]
     [quo2.components.drawers.action-drawers.component-spec]

src/status_im2/contexts/quo_preview/counter/step.cljs

@@ -0,0 +1,46 @@
+(ns status-im2.contexts.quo-preview.counter.step
+  (:require [quo2.components.counter.step.view :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label   "Type:"
+    :key     :type
+    :type    :select
+    :options [{:key   :neutral
+               :value "Neutral (default)"}
+              {:key   :active
+               :value "Active"}
+              {:key   :complete
+               :value "Complete"}]}
+   {:label "In blur view?"
+    :key   :in-blur-view?
+    :type  :boolean}
+   {:label "Value"
+    :key   :value
+    :type  :text}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:value 5 :type :neutral :in-blur-view? false})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         {:padding-vertical 60
+          :align-items      :center}
+         [quo2/step @state (:value @state)]]]])))
+
+(defn preview-step
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-90)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -26,6 +26,7 @@
     [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]
+    [status-im2.contexts.quo-preview.counter.step :as step]
     [status-im2.contexts.quo-preview.dividers.date :as divider-date]
     [status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
     [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
@@ -39,6 +40,7 @@
     [status-im2.contexts.quo-preview.info.information-box :as information-box]
     [status-im2.contexts.quo-preview.inputs.input :as input]
     [status-im2.contexts.quo-preview.inputs.profile-input :as profile-input]
+    [status-im2.contexts.quo-preview.inputs.search-input :as search-input]
     [status-im2.contexts.quo-preview.inputs.title-input :as title-input]
     [status-im2.contexts.quo-preview.links.url-preview :as url-preview]
     [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
@@ -81,7 +83,6 @@
     [status-im2.contexts.quo-preview.tags.tags :as tags]
     [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
     [status-im2.contexts.quo-preview.title.title :as title]
-    [status-im2.contexts.quo-preview.inputs.search-input :as search-input]
     [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
@@ -144,7 +145,10 @@
                             :component token-gating/preview-token-gating}]
    :counter               [{:name      :counter
                             :insets    {:top false}
-                            :component counter/preview-counter}]
+                            :component counter/preview-counter}
+                           {:name      :step
+                            :insets    {:top false}
+                            :component step/preview-step}]
    :dividers              [{:name      :divider-label
                             :inset     {:top false}
                             :component divider-label/preview-divider-label}