From d223151b93f7822c21a2eaaa66851566ed9fdd5f Mon Sep 17 00:00:00 2001 From: mmilad75 <55688834+mmilad75@users.noreply.github.com> Date: Fri, 7 Jun 2024 18:56:14 +0200 Subject: [PATCH] Implement Alert Banner Component #20277 (#20278) --- .../banners/alert_banner/component_spec.cljs | 35 ++++++++++++++ .../banners/alert_banner/schema.cljs | 12 +++++ .../banners/alert_banner/style.cljs | 18 +++++++ .../components/banners/alert_banner/view.cljs | 48 +++++++++++++++++++ src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + .../preview/quo/banners/alert_banner.cljs | 23 +++++++++ src/status_im/contexts/preview/quo/main.cljs | 5 +- 8 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 src/quo/components/banners/alert_banner/component_spec.cljs create mode 100644 src/quo/components/banners/alert_banner/schema.cljs create mode 100644 src/quo/components/banners/alert_banner/style.cljs create mode 100644 src/quo/components/banners/alert_banner/view.cljs create mode 100644 src/status_im/contexts/preview/quo/banners/alert_banner.cljs diff --git a/src/quo/components/banners/alert_banner/component_spec.cljs b/src/quo/components/banners/alert_banner/component_spec.cljs new file mode 100644 index 0000000000..7163f5e5f4 --- /dev/null +++ b/src/quo/components/banners/alert_banner/component_spec.cljs @@ -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")))) diff --git a/src/quo/components/banners/alert_banner/schema.cljs b/src/quo/components/banners/alert_banner/schema.cljs new file mode 100644 index 0000000000..9ec599c809 --- /dev/null +++ b/src/quo/components/banners/alert_banner/schema.cljs @@ -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]) diff --git a/src/quo/components/banners/alert_banner/style.cljs b/src/quo/components/banners/alert_banner/style.cljs new file mode 100644 index 0000000000..b6536786f7 --- /dev/null +++ b/src/quo/components/banners/alert_banner/style.cljs @@ -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}) diff --git a/src/quo/components/banners/alert_banner/view.cljs b/src/quo/components/banners/alert_banner/view.cljs new file mode 100644 index 0000000000..cb55436801 --- /dev/null +++ b/src/quo/components/banners/alert_banner/view.cljs @@ -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)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 6fc5530b2c..7f0abc4704 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -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 diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index e770cea8df..a04178e05f 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -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 diff --git a/src/status_im/contexts/preview/quo/banners/alert_banner.cljs b/src/status_im/contexts/preview/quo/banners/alert_banner.cljs new file mode 100644 index 0000000000..8400043548 --- /dev/null +++ b/src/status_im/contexts/preview/quo/banners/alert_banner.cljs @@ -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]]))) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index c5fe69fadf..b8db3dc7e5 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -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}