status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[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>
This commit is contained in:
Mohamed Javid 2023-08-08 19:45:55 +08:00 committed by GitHub
parent bf502175f7
commit d143b1d0e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 217 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ios/Podfile.lock
View File

@ -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

113
src/quo2/components/wallet/progress_bar/component_spec.cljs Normal file
View File

@ -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}))))

32
src/quo2/components/wallet/progress_bar/style.cljs Normal file
View File

@ -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}))

12
src/quo2/components/wallet/progress_bar/view.cljs Normal file
View File

@ -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))

3
src/quo2/core.cljs
View File

@ -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)

1
src/quo2/core_spec.cljs
View File

@ -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]))

20
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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
[]

35
src/status_im2/contexts/quo_preview/wallet/progress_bar.cljs Normal file
View File

@ -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]]])))

5
src/test_helpers/component.cljs
View File

@ -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