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

Implement Alert Banner Component #20277 (#20278)

This commit is contained in:
mmilad75 2024-06-07 18:56:14 +02:00 committed by GitHub
parent 9c7cb0fe93
commit d223151b93
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 143 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/quo/components/banners/alert_banner/component_spec.cljs Normal file
View File

@ -0,0 +1,35 @@
(ns quo.components.banners.alert-banner.component-spec
(:require
[quo.components.banners.alert-banner.view :as alert-banner]
[test-helpers.component :as h]))
(h/describe "Alert Banner"
(h/test "Render without props is not throwing any error"
(h/render [alert-banner/view {}])
(h/is-truthy (h/query-by-label-text :alert-banner)))
(h/test "Button is not displayed when :action? prop is false"
(h/render [alert-banner/view {}])
(h/is-falsy (h/query-by-label-text :button)))
(h/test "Button is displayed when :action? prop is true"
(h/render [alert-banner/view {:action? true}])
(h/is-truthy (h/query-by-label-text :button)))
(h/test "Button text is displayed when :action? prop is true and :button-text prop is set"
(h/render [alert-banner/view
{:action? true
:button-text "button"}])
(h/is-truthy (h/get-by-text "button")))
(h/test "Button is called when it's pressed and :action? prop is true"
(let [event (h/mock-fn)]
(h/render [alert-banner/view
{:action? true
:on-button-press event}])
(h/fire-event :press (h/query-by-label-text :button))
(h/was-called event)))
(h/test "Text message is displayed :text prop is passed"
(h/render [alert-banner/view {:text "message"}])
(h/is-truthy (h/get-by-text "message"))))

12
src/quo/components/banners/alert_banner/schema.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns quo.components.banners.alert-banner.schema)
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:action? {:optional true} [:maybe boolean?]]
[:text {:optional true} [:maybe string?]]
[:button-text {:optional true} [:maybe string?]]
[:on-button-press {:optional true} [:maybe fn?]]]]]
:any])

18
src/quo/components/banners/alert_banner/style.cljs Normal file
View File

@ -0,0 +1,18 @@
(ns quo.components.banners.alert-banner.style
(:require [quo.foundations.colors :as colors]))
(def container
{:flex-direction :row
:align-items :center
:height 50
:padding-horizontal 20
:padding-vertical 12})
(defn label
[theme]
{:flex 1
:color (colors/resolve-color :danger theme)
:margin-horizontal 4})
(def button-text
{:color colors/white})

48
src/quo/components/banners/alert_banner/view.cljs Normal file
View File

@ -0,0 +1,48 @@
(ns quo.components.banners.alert-banner.view
(:require [quo.components.banners.alert-banner.schema :as component-schema]
[quo.components.banners.alert-banner.style :as style]
[quo.components.buttons.button.view :as button]
[quo.components.icon :as icon]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient]
[schema.core :as schema]))
(defn- view-internal
[{:keys [action? text button-text on-button-press]}]
(let [theme (quo.theme/use-theme)]
[rn/view
{:accessibility-label :alert-banner}
[linear-gradient/linear-gradient
{:style style/container
:start {:x 0 :y 0}
:end {:x 0 :y 1}
:colors [(colors/theme-colors
colors/danger-50-opa-5
colors/danger-50-opa-10
theme)
colors/danger-50-opa-0]}
[icon/icon
:i/alert
{:color (colors/resolve-color :danger theme)
:size 16}]
[text/text
{:style (style/label theme)
:size :paragraph-2
:number-of-lines 1}
text]
(when action?
[button/button
{:accessibility-label :button
:type :danger
:size 24
:on-press on-button-press}
[text/text
{:style style/button-text
:size :paragraph-2
:weight :medium}
button-text]])]]))
(def view (schema/instrument #'view-internal component-schema/?schema))

2
src/quo/core.cljs
View File

@ -12,6 +12,7 @@
quo.components.avatars.token-avatar.view
quo.components.avatars.user-avatar.view
quo.components.avatars.wallet-user-avatar.view
quo.components.banners.alert-banner.view
quo.components.banners.banner.view
quo.components.blur.view
quo.components.browser.browser-input.view
@ -203,6 +204,7 @@
(def wallet-user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar)
;;;; Banner
(def alert-banner quo.components.banners.alert-banner.view/view)
(def banner quo.components.banners.banner.view/view)
;;;; Buttons

1
src/quo/core_spec.cljs
View File

@ -5,6 +5,7 @@
quo.components.avatars.dapp-avatar.component-spec
quo.components.avatars.token-avatar.component-spec
quo.components.avatars.user-avatar.component-spec
quo.components.banners.alert-banner.component-spec
quo.components.banners.banner.component-spec
quo.components.browser.browser-input.component-spec
quo.components.buttons.button.component-spec

23
src/status_im/contexts/preview/quo/banners/alert_banner.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im.contexts.preview.quo.banners.alert-banner
(:require
[quo.core :as quo]
[reagent.core :as reagent]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:key :text
:type :text}
{:key :button-text
:type :text}
{:key :action?
:type :boolean}])
(defn view
[]
(let [state (reagent/atom {:action? true
:text "Alert text"
:button-text "Button"
:on-button-press #(js/alert "pressed")})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/alert-banner @state]])))

5
src/status_im/contexts/preview/quo/main.cljs
View File

@ -18,6 +18,7 @@
[status-im.contexts.preview.quo.avatars.user-avatar :as user-avatar]
[status-im.contexts.preview.quo.avatars.wallet-user-avatar :as
wallet-user-avatar]
[status-im.contexts.preview.quo.banners.alert-banner :as alert-banner]
[status-im.contexts.preview.quo.banners.banner :as banner]
[status-im.contexts.preview.quo.browser.browser-input :as browser-input]
[status-im.contexts.preview.quo.buttons.button :as button]
@ -243,7 +244,9 @@
:component collection-avatar/view}
{:name :account-avatar
:component account-avatar/view}]
:banner [{:name :banner
:banner [{:name :alert-banners
:component alert-banner/view}
{:name :banner
:component banner/view}]
:buttons [{:name :button
:component button/view}