From d143b1d0e95ec7b1e32f59c21dd6b8d6af76e468 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Tue, 8 Aug 2023 19:45:55 +0800 Subject: [PATCH] [Quo2] Implement "Progress bar" component (#16905) This commit implements the "Progress bar" component which is needed for wallet screen development. Additionally, this commit adds a new test helper method "render-with-theme-provider" to test components in different themes. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- ios/Podfile.lock | 6 +- .../wallet/progress_bar/component_spec.cljs | 113 ++++++++++++++++++ .../components/wallet/progress_bar/style.cljs | 32 +++++ .../components/wallet/progress_bar/view.cljs | 12 ++ src/quo2/core.cljs | 3 +- src/quo2/core_spec.cljs | 1 + src/status_im2/contexts/quo_preview/main.cljs | 20 +++- .../quo_preview/wallet/progress_bar.cljs | 35 ++++++ src/test_helpers/component.cljs | 5 + 9 files changed, 217 insertions(+), 10 deletions(-) create mode 100644 src/quo2/components/wallet/progress_bar/component_spec.cljs create mode 100644 src/quo2/components/wallet/progress_bar/style.cljs create mode 100644 src/quo2/components/wallet/progress_bar/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs diff --git a/ios/Podfile.lock b/ios/Podfile.lock index b12f7ad381..bc40f0a98a 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -425,8 +425,8 @@ PODS: - React-Core - RNStaticSafeAreaInsets (2.2.0): - React-Core - - RNSVG (9.13.6): - - React + - RNSVG (13.10.0): + - React-Core - SDWebImage (5.11.1): - SDWebImage/Core (= 5.11.1) - SDWebImage/Core (5.11.1) @@ -775,7 +775,7 @@ SPEC CHECKSUMS: RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1 RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8 - RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f + RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d secp256k1: f61d67e6fdcb85fd727acf1bf35ace6036db540c diff --git a/src/quo2/components/wallet/progress_bar/component_spec.cljs b/src/quo2/components/wallet/progress_bar/component_spec.cljs new file mode 100644 index 0000000000..1ed2d4c517 --- /dev/null +++ b/src/quo2/components/wallet/progress_bar/component_spec.cljs @@ -0,0 +1,113 @@ +(ns quo2.components.wallet.progress-bar.component-spec + (:require [test-helpers.component :as h] + [quo2.components.wallet.progress-bar.view :as progress-bar] + [quo2.foundations.colors :as colors])) + +(h/describe "Progress bar" + (h/test "pending state in light mode" + (let [theme :light + props {:state :pending + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/neutral-80-opa-5 + :backgroundColor colors/neutral-5}))) + + (h/test "pending state in dark mode" + (let [theme :dark + props {:state :pending + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/neutral-70 + :backgroundColor colors/neutral-80}))) + + (h/test "finalized state with customtization-color blue in light mode" + (let [theme :light + props {:state :finalized + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/neutral-80-opa-5 + :backgroundColor (colors/custom-color (:customization-color props) 50)}))) + + (h/test "finalized state with customtization-color blue in dark mode" + (let [theme :dark + props {:state :finalized + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/neutral-80-opa-5 + :backgroundColor (colors/custom-color (:customization-color props) 60)}))) + + (h/test "finalized state with customtization-color army in light mode" + (let [theme :light + props {:state :finalized + :customization-color :army}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/neutral-80-opa-5 + :backgroundColor (colors/custom-color (:customization-color props) 50)}))) + + (h/test "confirmed state in light mode" + (let [theme :light + props {:state :confirmed + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/neutral-80-opa-5 + :backgroundColor colors/success-50}))) + + (h/test "confirmed state in dark mode" + (let [theme :dark + props {:state :confirmed + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/white-opa-5 + :backgroundColor colors/success-60}))) + + (h/test "error state in light mode" + (let [theme :light + props {:state :error + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/neutral-80-opa-5 + :backgroundColor colors/danger-50}))) + + (h/test "error state in dark mode" + (let [theme :dark + props {:state :error + :customization-color :blue}] + (h/render-with-theme-provider [progress-bar/view props] theme) + (h/has-style (h/query-by-label-text :progress-bar) + {:height 12 + :width 8 + :borderRadius 3 + :borderColor colors/white-opa-5 + :backgroundColor colors/danger-60})))) diff --git a/src/quo2/components/wallet/progress_bar/style.cljs b/src/quo2/components/wallet/progress_bar/style.cljs new file mode 100644 index 0000000000..908cb68f9b --- /dev/null +++ b/src/quo2/components/wallet/progress_bar/style.cljs @@ -0,0 +1,32 @@ +(ns quo2.components.wallet.progress-bar.style + (:require [quo2.foundations.colors :as colors])) + +(defn- border-and-background-color + [customization-color] + {:light {:pending {:border-color colors/neutral-80-opa-5 + :background-color colors/neutral-5} + :confirmed {:border-color colors/neutral-80-opa-5 + :background-color (colors/custom-color :success 50)} + :finalized {:border-color colors/neutral-80-opa-5 + :background-color (colors/custom-color customization-color 50)} + :error {:border-color colors/neutral-80-opa-5 + :background-color (colors/custom-color :danger 50)}} + :dark {:pending {:border-color colors/neutral-70 + :background-color colors/neutral-80} + :confirmed {:border-color colors/white-opa-5 + :background-color (colors/custom-color :success 60)} + :finalized {:border-color colors/neutral-80-opa-5 + :background-color (colors/custom-color customization-color 60)} + :error {:border-color colors/white-opa-5 + :background-color (colors/custom-color :danger 60)}}}) + +(defn root-container + [{:keys [customization-color state theme]}] + (let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color) + [theme state])] + {:height 12 + :width 8 + :border-radius 3 + :border-width 1 + :border-color border-color + :background-color background-color})) diff --git a/src/quo2/components/wallet/progress_bar/view.cljs b/src/quo2/components/wallet/progress_bar/view.cljs new file mode 100644 index 0000000000..5bb70bc203 --- /dev/null +++ b/src/quo2/components/wallet/progress_bar/view.cljs @@ -0,0 +1,12 @@ +(ns quo2.components.wallet.progress-bar.view + (:require [quo2.components.wallet.progress-bar.style :as style] + [quo2.theme :as quo.theme] + [react-native.core :as rn])) + +(defn- view-internal + [props] + [rn/view + {:accessibility-label :progress-bar + :style (style/root-container props)}]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index d77918c74d..1bf1844457 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -107,6 +107,7 @@ quo2.components.wallet.account-card.view quo2.components.wallet.network-amount.view quo2.components.wallet.network-bridge.view + quo2.components.wallet.progress-bar.view quo2.components.wallet.summary-info.view quo2.components.wallet.token-input.view quo2.components.wallet.wallet-overview.view)) @@ -299,7 +300,6 @@ (def url-preview-list quo2.components.links.url-preview-list.view/view) (def link-preview quo2.components.links.link-preview.view/view) - ;;;; GRADIENT (def gradient-cover quo2.components.gradient.gradient-cover.view/view) @@ -307,6 +307,7 @@ (def network-amount quo2.components.wallet.network-amount.view/view) (def network-bridge quo2.components.wallet.network-bridge.view/view) (def account-card quo2.components.wallet.account-card.view/view) +(def progress-bar quo2.components.wallet.progress-bar.view/view) (def summary-info quo2.components.wallet.summary-info.view/view) (def token-input quo2.components.wallet.token-input.view/view) (def wallet-overview quo2.components.wallet.wallet-overview.view/view) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index d2d1c43616..8c1801994b 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -53,6 +53,7 @@ [quo2.components.wallet.account-card.component-spec] [quo2.components.wallet.network-amount.component-spec] [quo2.components.wallet.network-bridge.component-spec] + [quo2.components.wallet.progress-bar.component-spec] [quo2.components.wallet.summary-info.component-spec] [quo2.components.wallet.token-input.component-spec] [quo2.components.wallet.wallet-overview.component-spec])) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 8a4858b03a..7a95d851cb 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -108,6 +108,7 @@ [status-im2.contexts.quo-preview.wallet.account-card :as account-card] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] + [status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar] [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info] [status-im2.contexts.quo-preview.wallet.token-input :as token-input] [status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview] @@ -422,6 +423,9 @@ {:name :network-bridge :options {:topBar {:visible true}} :component network-bridge/preview} + {:name :progress-bar + :options {:topBar {:visible true}} + :component progress-bar/preview} {:name :summary-info :options {:topBar {:visible true}} :component summary-info/preview} @@ -440,18 +444,22 @@ (defn navigation-bar [] (let [logged-in? (rf/sub [:multiaccount/logged-in?]) - has-profiles? (boolean (rf/sub [:profile/profiles-overview]))] + has-profiles? (boolean (rf/sub [:profile/profiles-overview])) + root (if has-profiles? :profiles :intro)] [quo/page-nav {:align-mid? true :mid-section {:type :text-only :main-text "Quo2 components preview"} :left-section {:icon :i/close :on-press (fn [] - (when-not logged-in? - (theme/set-theme :dark)) - (rf/dispatch [:navigate-back]) - (when-not has-profiles? - (rf/dispatch [:open-modal :new-to-status])))}}])) + (cond + logged-in? + (rf/dispatch [:navigate-back]) + + :else + (do + (theme/set-theme :dark) + (rf/dispatch [:init-root root]))))}}])) (defn theme-switcher [] diff --git a/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs new file mode 100644 index 0000000000..743db728b4 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs @@ -0,0 +1,35 @@ +(ns status-im2.contexts.quo-preview.wallet.progress-bar + (:require [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "State:" + :key :state + :type :select + :options [{:key :pending + :value "pending"} + {:key :confirmed + :value "confirmed"} + {:key :finalized + :value "finalized"} + {:key :error + :value "error"}]} + (preview/customization-color-option)]) + +(defn preview + [] + (let [state (reagent/atom {:state :pending + :customization-color :blue})] + (fn [] + [rn/view + {:style {:flex 1 + :padding-horizontal 20}} + [rn/view {:style {:min-height 150}} + [preview/customizer state descriptor]] + [rn/view + {:style {:flex 1 + :padding-top 40 + :align-items :center}} + [quo/progress-bar @state]]]))) diff --git a/src/test_helpers/component.cljs b/src/test_helpers/component.cljs index ba44cf1af8..8cb23946a7 100644 --- a/src/test_helpers/component.cljs +++ b/src/test_helpers/component.cljs @@ -4,6 +4,7 @@ (:require ["@testing-library/react-native" :as rtl] [camel-snake-kebab.core :as camel-snake-kebab] + [quo2.theme :as quo.theme] [reagent.core :as reagent] [utils.i18n :as i18n])) @@ -50,6 +51,10 @@ [component] (rtl/render (reagent/as-element component))) +(defn render-with-theme-provider + [component theme] + (rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component]))) + (def unmount "Unmount rendered component. Sometimes useful to be called in a REPL, but unnecessary when rendering