Implement Alert Banner Component #20277 (#20278)

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

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

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

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

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

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

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

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}