From 4d029f06e828493db94b9ca0e20278cbd6ec6d75 Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Fri, 21 Apr 2023 20:53:58 +0800 Subject: [PATCH] feat: step component (#15711) --- src/quo2/components/counter/counter.cljs | 4 +- .../counter/step/component_spec.cljs | 19 ++++++++ src/quo2/components/counter/step/style.cljs | 41 +++++++++++++++++ src/quo2/components/counter/step/view.cljs | 21 +++++++++ src/quo2/core.cljs | 6 ++- src/quo2/core_spec.cljs | 1 + .../contexts/quo_preview/counter/step.cljs | 46 +++++++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 8 +++- src/utils/number_test.cljs | 16 +++---- 9 files changed, 149 insertions(+), 13 deletions(-) create mode 100644 src/quo2/components/counter/step/component_spec.cljs create mode 100644 src/quo2/components/counter/step/style.cljs create mode 100644 src/quo2/components/counter/step/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/counter/step.cljs diff --git a/src/quo2/components/counter/counter.cljs b/src/quo2/components/counter/counter.cljs index 0e86e03b27..c4adcc03ca 100644 --- a/src/quo2/components/counter/counter.cljs +++ b/src/quo2/components/counter/counter.cljs @@ -4,7 +4,7 @@ [quo2.foundations.colors :as colors] [quo2.theme :as theme] [react-native.core :as rn] - [utils.number :as utils-number])) + [utils.number])) (def themes {:light {:default colors/primary-50 @@ -31,7 +31,7 @@ (= type :default)) colors/white colors/neutral-100)) - value (utils-number/parse-int value) + value (utils.number/parse-int value) label (if (> value max-value) (str max-value "+") (str value)) diff --git a/src/quo2/components/counter/step/component_spec.cljs b/src/quo2/components/counter/step/component_spec.cljs new file mode 100644 index 0000000000..8564621500 --- /dev/null +++ b/src/quo2/components/counter/step/component_spec.cljs @@ -0,0 +1,19 @@ +(ns quo2.components.counter.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/query-by-label-text :step-counter)) + (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)))) diff --git a/src/quo2/components/counter/step/style.cljs b/src/quo2/components/counter/step/style.cljs new file mode 100644 index 0000000000..5b8126de62 --- /dev/null +++ b/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))) diff --git a/src/quo2/components/counter/step/view.cljs b/src/quo2/components/counter/step/view.cljs new file mode 100644 index 0000000000..99bdd0aaf8 --- /dev/null +++ b/src/quo2/components/counter/step/view.cljs @@ -0,0 +1,21 @@ +(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])) + +(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)] + [rn/view + {:accessible true + :accessibility-label (or accessibility-label :step-counter) + :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]])) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index bab96729e1..883816f0d4 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 72dec5f48a..617e51f564 100644 --- a/src/quo2/core_spec.cljs +++ b/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.component-spec] [quo2.components.dividers.--tests--.divider-label-component-spec] [quo2.components.dividers.strength-divider.component-spec] [quo2.components.drawers.action-drawers.component-spec] diff --git a/src/status_im2/contexts/quo_preview/counter/step.cljs b/src/status_im2/contexts/quo_preview/counter/step.cljs new file mode 100644 index 0000000000..c87db5c377 --- /dev/null +++ b/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}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 086302371c..08be11e78d 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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} diff --git a/src/utils/number_test.cljs b/src/utils/number_test.cljs index dd2c0687a6..9610384adc 100644 --- a/src/utils/number_test.cljs +++ b/src/utils/number_test.cljs @@ -1,17 +1,17 @@ (ns utils.number-test (:require [cljs.test :refer [deftest is testing]] - [utils.number :as utils-number])) + [utils.number])) (deftest parse-int (testing "defaults to zero" - (is (= 0 (utils-number/parse-int nil)))) + (is (= 0 (utils.number/parse-int nil)))) (testing "accepts any other default value" - (is (= 3 (utils-number/parse-int "" 3))) - (is (= :invalid-int (utils-number/parse-int "" :invalid-int)))) + (is (= 3 (utils.number/parse-int "" 3))) + (is (= :invalid-int (utils.number/parse-int "" :invalid-int)))) (testing "valid numbers" - (is (= -6 (utils-number/parse-int "-6a" 0))) - (is (= 6 (utils-number/parse-int "6" 0))) - (is (= 6 (utils-number/parse-int "6.99" 0))) - (is (= -6 (utils-number/parse-int "-6" 0))))) + (is (= -6 (utils.number/parse-int "-6a" 0))) + (is (= 6 (utils.number/parse-int "6" 0))) + (is (= 6 (utils.number/parse-int "6.99" 0))) + (is (= -6 (utils.number/parse-int "-6" 0)))))