Skip to content

Commit d143b1d

Browse files
smohamedjavidsmohamedjavid
authored
[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 <[email protected]>
1 parent bf50217 commit d143b1d

File tree

9 files changed

+217
-10
lines changed

9 files changed

+217
-10
lines changed

‎ios/Podfile.lock

+3-3
Original file line numberDiff line numberDiff line change
@@ -425,8 +425,8 @@ PODS:
425425
- React-Core
426426
- RNStaticSafeAreaInsets (2.2.0):
427427
- React-Core
428-
- RNSVG (9.13.6):
429-
- React
428+
- RNSVG (13.10.0):
429+
- React-Core
430430
- SDWebImage (5.11.1):
431431
- SDWebImage/Core (= 5.11.1)
432432
- SDWebImage/Core (5.11.1)
@@ -775,7 +775,7 @@ SPEC CHECKSUMS:
775775
RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1
776776
RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
777777
RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
778-
RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
778+
RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
779779
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
780780
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
781781
secp256k1: f61d67e6fdcb85fd727acf1bf35ace6036db540c

‎src/quo2/components/wallet/progress_bar/component_spec.cljs

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
(ns quo2.components.wallet.progress-bar.component-spec
2+
(:require [test-helpers.component :as h]
3+
[quo2.components.wallet.progress-bar.view :as progress-bar]
4+
[quo2.foundations.colors :as colors]))
5+
6+
(h/describe "Progress bar"
7+
(h/test "pending state in light mode"
8+
(let [theme :light
9+
props {:state :pending
10+
:customization-color :blue}]
11+
(h/render-with-theme-provider [progress-bar/view props] theme)
12+
(h/has-style (h/query-by-label-text :progress-bar)
13+
{:height 12
14+
:width 8
15+
:borderRadius 3
16+
:borderColor colors/neutral-80-opa-5
17+
:backgroundColor colors/neutral-5})))
18+
19+
(h/test "pending state in dark mode"
20+
(let [theme :dark
21+
props {:state :pending
22+
:customization-color :blue}]
23+
(h/render-with-theme-provider [progress-bar/view props] theme)
24+
(h/has-style (h/query-by-label-text :progress-bar)
25+
{:height 12
26+
:width 8
27+
:borderRadius 3
28+
:borderColor colors/neutral-70
29+
:backgroundColor colors/neutral-80})))
30+
31+
(h/test "finalized state with customtization-color blue in light mode"
32+
(let [theme :light
33+
props {:state :finalized
34+
:customization-color :blue}]
35+
(h/render-with-theme-provider [progress-bar/view props] theme)
36+
(h/has-style (h/query-by-label-text :progress-bar)
37+
{:height 12
38+
:width 8
39+
:borderRadius 3
40+
:borderColor colors/neutral-80-opa-5
41+
:backgroundColor (colors/custom-color (:customization-color props) 50)})))
42+
43+
(h/test "finalized state with customtization-color blue in dark mode"
44+
(let [theme :dark
45+
props {:state :finalized
46+
:customization-color :blue}]
47+
(h/render-with-theme-provider [progress-bar/view props] theme)
48+
(h/has-style (h/query-by-label-text :progress-bar)
49+
{:height 12
50+
:width 8
51+
:borderRadius 3
52+
:borderColor colors/neutral-80-opa-5
53+
:backgroundColor (colors/custom-color (:customization-color props) 60)})))
54+
55+
(h/test "finalized state with customtization-color army in light mode"
56+
(let [theme :light
57+
props {:state :finalized
58+
:customization-color :army}]
59+
(h/render-with-theme-provider [progress-bar/view props] theme)
60+
(h/has-style (h/query-by-label-text :progress-bar)
61+
{:height 12
62+
:width 8
63+
:borderRadius 3
64+
:borderColor colors/neutral-80-opa-5
65+
:backgroundColor (colors/custom-color (:customization-color props) 50)})))
66+
67+
(h/test "confirmed state in light mode"
68+
(let [theme :light
69+
props {:state :confirmed
70+
:customization-color :blue}]
71+
(h/render-with-theme-provider [progress-bar/view props] theme)
72+
(h/has-style (h/query-by-label-text :progress-bar)
73+
{:height 12
74+
:width 8
75+
:borderRadius 3
76+
:borderColor colors/neutral-80-opa-5
77+
:backgroundColor colors/success-50})))
78+
79+
(h/test "confirmed state in dark mode"
80+
(let [theme :dark
81+
props {:state :confirmed
82+
:customization-color :blue}]
83+
(h/render-with-theme-provider [progress-bar/view props] theme)
84+
(h/has-style (h/query-by-label-text :progress-bar)
85+
{:height 12
86+
:width 8
87+
:borderRadius 3
88+
:borderColor colors/white-opa-5
89+
:backgroundColor colors/success-60})))
90+
91+
(h/test "error state in light mode"
92+
(let [theme :light
93+
props {:state :error
94+
:customization-color :blue}]
95+
(h/render-with-theme-provider [progress-bar/view props] theme)
96+
(h/has-style (h/query-by-label-text :progress-bar)
97+
{:height 12
98+
:width 8
99+
:borderRadius 3
100+
:borderColor colors/neutral-80-opa-5
101+
:backgroundColor colors/danger-50})))
102+
103+
(h/test "error state in dark mode"
104+
(let [theme :dark
105+
props {:state :error
106+
:customization-color :blue}]
107+
(h/render-with-theme-provider [progress-bar/view props] theme)
108+
(h/has-style (h/query-by-label-text :progress-bar)
109+
{:height 12
110+
:width 8
111+
:borderRadius 3
112+
:borderColor colors/white-opa-5
113+
:backgroundColor colors/danger-60}))))

‎src/quo2/components/wallet/progress_bar/style.cljs

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
(ns quo2.components.wallet.progress-bar.style
2+
(:require [quo2.foundations.colors :as colors]))
3+
4+
(defn- border-and-background-color
5+
[customization-color]
6+
{:light {:pending {:border-color colors/neutral-80-opa-5
7+
:background-color colors/neutral-5}
8+
:confirmed {:border-color colors/neutral-80-opa-5
9+
:background-color (colors/custom-color :success 50)}
10+
:finalized {:border-color colors/neutral-80-opa-5
11+
:background-color (colors/custom-color customization-color 50)}
12+
:error {:border-color colors/neutral-80-opa-5
13+
:background-color (colors/custom-color :danger 50)}}
14+
:dark {:pending {:border-color colors/neutral-70
15+
:background-color colors/neutral-80}
16+
:confirmed {:border-color colors/white-opa-5
17+
:background-color (colors/custom-color :success 60)}
18+
:finalized {:border-color colors/neutral-80-opa-5
19+
:background-color (colors/custom-color customization-color 60)}
20+
:error {:border-color colors/white-opa-5
21+
:background-color (colors/custom-color :danger 60)}}})
22+
23+
(defn root-container
24+
[{:keys [customization-color state theme]}]
25+
(let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color)
26+
[theme state])]
27+
{:height 12
28+
:width 8
29+
:border-radius 3
30+
:border-width 1
31+
:border-color border-color
32+
:background-color background-color}))

‎src/quo2/components/wallet/progress_bar/view.cljs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
(ns quo2.components.wallet.progress-bar.view
2+
(:require [quo2.components.wallet.progress-bar.style :as style]
3+
[quo2.theme :as quo.theme]
4+
[react-native.core :as rn]))
5+
6+
(defn- view-internal
7+
[props]
8+
[rn/view
9+
{:accessibility-label :progress-bar
10+
:style (style/root-container props)}])
11+
12+
(def view (quo.theme/with-theme view-internal))

‎src/quo2/core.cljs

+2-1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
quo2.components.wallet.account-card.view
108108
quo2.components.wallet.network-amount.view
109109
quo2.components.wallet.network-bridge.view
110+
quo2.components.wallet.progress-bar.view
110111
quo2.components.wallet.summary-info.view
111112
quo2.components.wallet.token-input.view
112113
quo2.components.wallet.wallet-overview.view))
@@ -299,14 +300,14 @@
299300
(def url-preview-list quo2.components.links.url-preview-list.view/view)
300301
(def link-preview quo2.components.links.link-preview.view/view)
301302

302-
303303
;;;; GRADIENT
304304
(def gradient-cover quo2.components.gradient.gradient-cover.view/view)
305305

306306
;;;; WALLET
307307
(def network-amount quo2.components.wallet.network-amount.view/view)
308308
(def network-bridge quo2.components.wallet.network-bridge.view/view)
309309
(def account-card quo2.components.wallet.account-card.view/view)
310+
(def progress-bar quo2.components.wallet.progress-bar.view/view)
310311
(def summary-info quo2.components.wallet.summary-info.view/view)
311312
(def token-input quo2.components.wallet.token-input.view/view)
312313
(def wallet-overview quo2.components.wallet.wallet-overview.view/view)

‎src/quo2/core_spec.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
[quo2.components.wallet.account-card.component-spec]
5454
[quo2.components.wallet.network-amount.component-spec]
5555
[quo2.components.wallet.network-bridge.component-spec]
56+
[quo2.components.wallet.progress-bar.component-spec]
5657
[quo2.components.wallet.summary-info.component-spec]
5758
[quo2.components.wallet.token-input.component-spec]
5859
[quo2.components.wallet.wallet-overview.component-spec]))

‎src/status_im2/contexts/quo_preview/main.cljs

+14-6
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@
108108
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
109109
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
110110
[status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
111+
[status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar]
111112
[status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
112113
[status-im2.contexts.quo-preview.wallet.token-input :as token-input]
113114
[status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview]
@@ -422,6 +423,9 @@
422423
{:name :network-bridge
423424
:options {:topBar {:visible true}}
424425
:component network-bridge/preview}
426+
{:name :progress-bar
427+
:options {:topBar {:visible true}}
428+
:component progress-bar/preview}
425429
{:name :summary-info
426430
:options {:topBar {:visible true}}
427431
:component summary-info/preview}
@@ -440,18 +444,22 @@
440444
(defn navigation-bar
441445
[]
442446
(let [logged-in? (rf/sub [:multiaccount/logged-in?])
443-
has-profiles? (boolean (rf/sub [:profile/profiles-overview]))]
447+
has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
448+
root (if has-profiles? :profiles :intro)]
444449
[quo/page-nav
445450
{:align-mid? true
446451
:mid-section {:type :text-only
447452
:main-text "Quo2 components preview"}
448453
:left-section {:icon :i/close
449454
:on-press (fn []
450-
(when-not logged-in?
451-
(theme/set-theme :dark))
452-
(rf/dispatch [:navigate-back])
453-
(when-not has-profiles?
454-
(rf/dispatch [:open-modal :new-to-status])))}}]))
455+
(cond
456+
logged-in?
457+
(rf/dispatch [:navigate-back])
458+
459+
:else
460+
(do
461+
(theme/set-theme :dark)
462+
(rf/dispatch [:init-root root]))))}}]))
455463

456464
(defn theme-switcher
457465
[]

‎src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
(ns status-im2.contexts.quo-preview.wallet.progress-bar
2+
(:require [quo2.core :as quo]
3+
[react-native.core :as rn]
4+
[reagent.core :as reagent]
5+
[status-im2.contexts.quo-preview.preview :as preview]))
6+
7+
(def descriptor
8+
[{:label "State:"
9+
:key :state
10+
:type :select
11+
:options [{:key :pending
12+
:value "pending"}
13+
{:key :confirmed
14+
:value "confirmed"}
15+
{:key :finalized
16+
:value "finalized"}
17+
{:key :error
18+
:value "error"}]}
19+
(preview/customization-color-option)])
20+
21+
(defn preview
22+
[]
23+
(let [state (reagent/atom {:state :pending
24+
:customization-color :blue})]
25+
(fn []
26+
[rn/view
27+
{:style {:flex 1
28+
:padding-horizontal 20}}
29+
[rn/view {:style {:min-height 150}}
30+
[preview/customizer state descriptor]]
31+
[rn/view
32+
{:style {:flex 1
33+
:padding-top 40
34+
:align-items :center}}
35+
[quo/progress-bar @state]]])))

‎src/test_helpers/component.cljs

+5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
(:require
55
["@testing-library/react-native" :as rtl]
66
[camel-snake-kebab.core :as camel-snake-kebab]
7+
[quo2.theme :as quo.theme]
78
[reagent.core :as reagent]
89
[utils.i18n :as i18n]))
910

@@ -50,6 +51,10 @@
5051
[component]
5152
(rtl/render (reagent/as-element component)))
5253

54+
(defn render-with-theme-provider
55+
[component theme]
56+
(rtl/render (reagent/as-element [quo.theme/provider {:theme theme} component])))
57+
5358
(def unmount
5459
"Unmount rendered component.
5560
Sometimes useful to be called in a REPL, but unnecessary when rendering

0 commit comments

Comments
 (0)