Refactor - Info/Info Message component (#20551)

src/quo/components/buttons/predictive_keyboard/view.cljs

@@ -2,7 +2,7 @@
   (:require
     [quo.components.buttons.button.view :as button]
     [quo.components.buttons.predictive-keyboard.style :as style]
-    [quo.components.info.info-message :as info-message]
+    [quo.components.info.info-message.view :as info-message]
     [quo.foundations.colors :as colors]
     [quo.theme]
     [react-native.core :as rn]
@@ -57,17 +57,17 @@
           :key-fn                            str}]
 
         :error
-        [info-message/info-message
+        [info-message/view
-         {:icon :i/info
+         {:icon   :i/info
-          :size :default
+          :size   :default
-          :type :error}
+          :status :error}
          text]
 
         :info
-        [info-message/info-message
+        [info-message/view
-         (merge {:icon :i/info
+         (merge {:icon   :i/info
-                 :size :default
+                 :size   :default
-                 :type (if (= type :error) :error :default)}
+                 :status (if (= type :error) :error :default)}
                 (when blur?
                   {:text-color colors/white-opa-70
                    :icon-color colors/white-opa-40}))

src/quo/components/info/info_message.cljs

@@ -1,48 +0,0 @@
-(ns quo.components.info.info-message
-  (:require
-    [quo.components.icon :as quo.icons]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
-
-(defn get-color
-  [k theme]
-  (case k
-    :success (colors/resolve-color :success theme)
-    :error   (colors/resolve-color :danger theme)
-    :warning (colors/resolve-color :warning theme)
-    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
-
-(defn info-message
-  "[info-message opts \"message\"]
-  opts
-  {:type           :default/:success/:error
-   :size           :default/:tiny
-   :icon           :i/info       ;; info message icon
-   :text-color     colors/white  ;; text color override
-   :icon-color     colors/white  ;; icon color override
-   :no-icon-color? false         ;; disable tint color for icon"
-  [{:keys [type size icon text-color icon-color no-icon-color? style accessibility-label
-           container-style]} message]
-  (let [theme      (quo.theme/use-theme)
-        weight     (if (= size :default) :regular :medium)
-        icon-size  (if (= size :default) 16 12)
-        size       (if (= size :default) :paragraph-2 :label)
-        text-color (or text-color (get-color type theme))
-        icon-color (or icon-color text-color)]
-    [rn/view
-     {:style (merge {:flex-direction :row
-                     :align-items    :center}
-                    style
-                    container-style)}
-     [quo.icons/icon icon
-      {:color    icon-color
-       :no-color no-icon-color?
-       :size     icon-size}]
-     [text/text
-      {:accessibility-label accessibility-label
-       :size                size
-       :weight              weight
-       :style               {:color             text-color
-                             :margin-horizontal 4}} message]]))

src/quo/components/info/info_message/component_spec.cljs

@@ -0,0 +1,32 @@
+(ns quo.components.info.info-message.component-spec
+  (:require
+    [quo.components.info.info-message.view :as info-message]
+    [test-helpers.component :as h]))
+
+(h/describe "Info: Info Message"
+  (h/test "basic render"
+    (h/render-with-theme-provider
+     [info-message/view
+      {:status              :default
+       :size                :default
+       :accessibility-label :info-message
+       :icon                :i/placeholder} "Message"])
+    (h/is-truthy (h/get-by-label-text :info-message)))
+
+  (h/test "render with correct message"
+    (h/render-with-theme-provider
+     [info-message/view
+      {:status              :default
+       :size                :default
+       :accessibility-label :info-message
+       :icon                :i/placeholder} "Message"])
+    (h/is-truthy (h/get-by-text "Message")))
+
+  (h/test "render icon"
+    (h/render-with-theme-provider
+     [info-message/view
+      {:status              :default
+       :size                :default
+       :accessibility-label :info-message
+       :icon                :i/placeholder} "Message"])
+    (h/is-truthy (h/get-by-label-text :icon))))

src/quo/components/info/info_message/style.cljs

@@ -0,0 +1,6 @@
+(ns quo.components.info.info-message.style)
+
+(def container
+  {:flex-direction :row
+   :gap            4
+   :align-items    :center})

src/quo/components/info/info_message/view.cljs

@@ -0,0 +1,53 @@
+(ns quo.components.info.info-message.view
+  (:require [quo.components.icon :as icons]
+            [quo.components.info.info-message.style :as style]
+            [quo.components.markdown.text :as text]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:status {:optional true} [:maybe [:enum :default :success :error :warning]]]
+      [:size {:optional true} [:maybe [:enum :default :tiny]]]
+      [:blur? {:optional true} [:maybe :boolean]]
+      [:icon :keyword]
+      [:color {:optional true} [:maybe :string]]
+      [:text-color {:optional true} [:maybe :string]]
+      [:icon-color {:optional true} [:maybe :string]]
+      [:no-icon-color? {:optional true} [:maybe :boolean]]
+      [:accessibility-label {:optional true} [:maybe :keyword]]
+      [:container-style {:optional true} [:maybe :map]]]]
+    [:message :string]]
+   :any])
+
+(defn- get-color
+  [status theme blur?]
+  (case status
+    :success (if blur? colors/success-60 (colors/resolve-color :success theme))
+    :error   (if blur? colors/danger-60 (colors/resolve-color :danger theme))
+    :warning (if blur? colors/warning-60 (colors/resolve-color :warning theme))
+    (if blur? colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))))
+
+(defn view-internal
+  [{:keys [status size blur? icon color icon-color text-color no-icon-color? container-style
+           accessibility-label]} message]
+  (let [theme         (quo.theme/use-theme)
+        default-color (get-color status theme blur?)
+        text-color    (or text-color color default-color)
+        icon-color    (or icon-color color default-color)]
+    [rn/view {:style (merge style/container container-style)}
+     [icons/icon icon
+      {:size      (if (= size :tiny) 12 16)
+       :color     icon-color
+       :no-color? no-icon-color?}]
+     [text/text
+      {:size                (if (= size :tiny) :label :paragraph-2)
+       :accessibility-label accessibility-label
+       :style               {:color text-color}} message]]))
+
+(def view (schema/instrument #'view-internal ?schema))

src/quo/core.cljs

@@ -68,7 +68,7 @@
     quo.components.graph.wallet-graph.view
     quo.components.header
     quo.components.icon
-    quo.components.info.info-message
+    quo.components.info.info-message.view
     quo.components.info.information-box.view
     quo.components.inputs.address-input.view
     quo.components.inputs.input.view
@@ -301,7 +301,7 @@
 (def icon quo.components.icon/icon)
 
 ;;;; Info
-(def info-message quo.components.info.info-message/info-message)
+(def info-message quo.components.info.info-message.view/view)
 (def information-box quo.components.info.information-box.view/view)
 
 ;;;; Inputs

src/quo/core_spec.cljs

@@ -41,6 +41,7 @@
     quo.components.dropdowns.network-dropdown.component-spec
     quo.components.gradient.gradient-cover.component-spec
     quo.components.graph.wallet-graph.component-spec
+    quo.components.info.info-message.component-spec
     quo.components.inputs.address-input.component-spec
     quo.components.inputs.input.component-spec
     quo.components.inputs.locked-input.component-spec

src/status_im/common/password_authentication/view.cljs

@@ -31,10 +31,10 @@
            :on-change-text #(reset! entered-password %)}]
          (when (not-empty error)
            [quo/info-message
-            {:type         :error
+            {:status          :error
-             :size         :default
+             :size            :default
-             :icon         :i/info
+             :icon            :i/info
-             :containstyle {:margin-top 8}}
+             :container-style {:margin-top 8}}
             (i18n/label :t/oops-wrong-password)])
          [quo/button
           {:container-style {:margin-bottom 12 :margin-top 40}

src/status_im/common/standard_authentication/password_input/view.cljs

@@ -34,9 +34,9 @@
                   [theme])]
     [rn/view {:style style/error-message}
      [quo/info-message
-      {:type :error
+      {:status :error
-       :size :default
+       :size   :default
-       :icon :i/info}
+       :icon   :i/info}
       error-message]
      [rn/pressable
       {:hit-slop {:top 6 :bottom 20 :left 0 :right 0}

src/status_im/contexts/chat/group_create/view.cljs

@@ -105,10 +105,10 @@
         :max-length      constants/max-group-chat-name-length}]
       (when error-message
         [quo/info-message
-         {:type  :error
+         {:status          :error
-          :icon  :i/info
+          :icon            :i/info
-          :size  :default
+          :size            :default
-          :style {:margin-top 8 :margin-left 20 :margin-bottom 16}}
+          :container-style {:margin-top 8 :margin-left 20 :margin-bottom 16}}
          error-message])
       [quo/divider-line]
       [rn/view

src/status_im/contexts/onboarding/create_password/view.cljs

@@ -38,14 +38,11 @@
    [rn/view {:style style/info-message}
     (when shown
       [quo/info-message
-       {:type       status
+       {:status status
-        :size       :default
+        :size   :default
-        :icon       (if (= status :success) :i/positive-state :i/info)
+        :icon   (if (= status :success) :i/positive-state :i/info)
-        :text-color (when (= status :default)
+        :color  (when (= status :default)
-                      colors/white-70-blur)
+                  colors/white-70-blur)}
-        :icon-color (when (= status :default)
-                      colors/white-70-blur)
-        :style      {}}
        text])]])
 
 (defn password-inputs

src/status_im/contexts/onboarding/create_profile/view.cljs

@@ -158,12 +158,11 @@
                                     :on-change-text on-change-text}}]]
 
            [quo/info-message
-            {:type       info-type
+            {:status          info-type
-             :size       :default
+             :size            :default
-             :icon       (if valid-name? :i/positive-state :i/info)
+             :icon            (if valid-name? :i/positive-state :i/info)
-             :text-color (when (= :default info-type) colors/white-70-blur)
+             :color           (when (= :default info-type) colors/white-70-blur)
-             :icon-color (when (= :default info-type) colors/white-70-blur)
+             :container-style style/info-message}
-             :style      style/info-message}
             info-message]
            [quo/text
             {:size   :paragraph-2

src/status_im/contexts/preview/quo/info/info_message.cljs

@@ -1,28 +1,43 @@
 (ns status-im.contexts.preview.quo.info.info-message
   (:require
     [quo.core :as quo]
-    [reagent.core :as reagent]
+    [react-native.core :as rn]
     [status-im.contexts.preview.quo.preview :as preview]))
 
 (def descriptor
-  [{:key     :type
+  [{:key     :status
     :type    :select
     :options [{:key :default}
               {:key :success}
-              {:key :error}]}
+              {:key :error}
+              {:key :warning}]}
    {:key     :size
     :type    :select
     :options [{:key :default}
               {:key :tiny}]}
+   {:key  :blur?
+    :type :boolean}
+   {:key     :icon
+    :type    :select
+    :options [{:key :i/placeholder}
+              {:key :i/info}]}
    {:key  :message
     :type :text}])
 
 (defn view
   []
-  (let [state (reagent/atom {:type    :default
+  (let [[state set-state] (rn/use-state
-                             :size    :default
+                           {:status  :default
-                             :icon    :i/placeholder
+                            :size    :default
-                             :message "This is a message"})]
+                            :message "This is a message"
-    (fn []
+                            :blur?   false
-      [preview/preview-container {:state state :descriptor descriptor}
+                            :icon    :i/placeholder})
-       [quo/info-message @state (:message @state)]])))
+        blur?             (:blur? state)]
+    [preview/preview-container
+     {:state                 state
+      :descriptor            descriptor
+      :blur-dark-only?       true
+      :show-blur-background? blur?
+      :blur?                 blur?
+      :set-state             set-state}
+     [quo/info-message (dissoc state :message) (:message state)]]))

src/status_im/contexts/preview/quo/notifications/notification.cljs

@@ -65,9 +65,9 @@
                :customization-color :blue}
     :header   [rn/view
                [quo/info-message
-                {:type :success
+                {:status :success
-                 :size :tiny
+                 :size   :tiny
-                 :icon :i/placeholder}
+                 :icon   :i/placeholder}
                 "info-message as title"]]
     :body     [quo/snippet {:language :clojure :max-lines 15 :syntax true}
                snippet-preview/clojure-example]

src/status_im/contexts/profile/contact/add_nickname/view.cljs

@@ -68,9 +68,9 @@
         :on-change-text    on-nickname-change
         :on-submit-editing on-nickname-submit}]
       [quo/info-message
-       {:icon :i/info
+       {:icon   :i/info
-        :size :default
+        :size   :default
-        :type (if-not (string/blank? error-msg) :error :default)}
+        :status (if-not (string/blank? error-msg) :error :default)}
        (if-not (string/blank? error-msg)
          error-msg
          (i18n/label :t/nickname-visible-to-you))]]

src/status_im/contexts/profile/edit/bio/view.cljs

@@ -58,9 +58,9 @@
          :on-change-text  on-change-text}]
        (when-not (string/blank? error-msg)
          [quo/info-message
-          {:type :error
+          {:status :error
-           :size :default
+           :size   :default
-           :icon :i/info}
+           :icon   :i/info}
           error-msg])]
       [rn/view {:style style/button-wrapper}
        [quo/button

src/status_im/contexts/profile/edit/name/view.cljs

@@ -58,9 +58,9 @@
            :on-change-text  on-change-text}]
          (when-not (string/blank? @error-msg)
            [quo/info-message
-            {:type :error
+            {:status :error
-             :size :default
+             :size   :default
-             :icon :i/info}
+             :icon   :i/info}
             @error-msg])]
         [rn/view {:style style/button-wrapper}
          [quo/button

src/status_im/contexts/profile/settings/screens/password/change_password/new_password_form.cljs

@@ -24,12 +24,11 @@
    [rn/view {:style style/info-message}
     (when shown?
       [quo/info-message
-       (cond-> {:type status
+       (cond-> {:status status
-                :size :default}
+                :size   :default}
          (not= :success status) (assoc :icon :i/info)
          (= :success status)    (assoc :icon :i/positive-state)
-         (= :default status)    (assoc :text-color colors/white-70-blur
+         (= :default status)    (assoc :color colors/white-70-blur))
-                                       :icon-color colors/white-70-blur))
        text])]])
 
 (defn- calc-password-strength

src/status_im/contexts/profile/settings/screens/password/change_password/old_password_form.cljs

@@ -43,9 +43,9 @@
        {:style style/error-container}
        (when error
          [quo/info-message
-          {:type :error
+          {:status :error
-           :size :default
+           :size   :default
-           :icon :i/info}
+           :icon   :i/info}
           (i18n/label :t/oops-wrong-password)])]
       [quo/information-box
        {:type  :error

src/status_im/contexts/settings/wallet/keypairs_and_accounts/missing_keypairs/import_private_key/view.cljs

@@ -128,9 +128,9 @@
          :default-value       private-key}]
        (when flow-state
          [quo/info-message
-          {:type (if (= flow-state :correct-private-key) :success :error)
+          {:status (if (= flow-state :correct-private-key) :success :error)
-           :size :default
+           :size   :default
-           :icon :i/info}
+           :icon   :i/info}
           (case flow-state
             :correct-private-key   (i18n/label :t/correct-private-key)
             :invalid-private-key   (i18n/label :t/invalid-private-key)

src/status_im/contexts/settings/wallet/keypairs_and_accounts/rename/view.cljs

@@ -94,9 +94,8 @@
         :error?          (not (string/blank? error-msg))}]
       (when-not (string/blank? error-msg)
         [quo/info-message
-         {:type            :error
+         {:status          :error
           :size            :default
           :icon            :i/info
           :container-style style/error-container}
          error-msg])]]))
-

src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs

@@ -85,8 +85,8 @@
        {:accessibility-label :error-message
         :size                :default
         :icon                :i/alert
-        :type                :error
+        :status              :error
-        :style               style/info-message}
+        :container-style     style/info-message}
        error-msg])))
 
 (defn- existing-saved-address

src/status_im/contexts/wallet/add_account/add_address_to_watch/view.cljs

@@ -103,8 +103,8 @@
     (when activity-state
       [quo/info-message
        (assoc props
-              :style style/info-message
+              :container-style style/info-message
-              :size  :default)
+              :size            :default)
        (i18n/label message)])))
 
 (defn view
@@ -163,7 +163,7 @@
              {:accessibility-label :error-message
               :size                :default
               :icon                :i/info
-              :type                :error
+              :status              :error
-              :style               style/info-message}
+              :container-style     style/info-message}
              @validation-msg]
-            [activity-indicator activity-state])]]))))
+            [activity-indicator])]]))))

src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs

@@ -117,12 +117,12 @@
             {:weight :monospace}
             (:address derivation-path)]]
           [quo/info-message
-           {:type  (case state
+           {:status (case state
-                     :has-activity :success
+                      :has-activity :success
-                     :no-activity  :warning
+                      :no-activity  :warning
-                     :default)
+                      :default)
-            :icon  (if (= state :scanning) :i/scanning :i/done)
+            :icon   (if (= state :scanning) :i/scanning :i/done)
-            :style style/info}
+            :style  style/info}
            (i18n/label (case state
                          :has-activity :t/address-activity
                          :no-activity  :t/address-no-activity

src/status_im/contexts/wallet/add_account/create_account/key_pair_name/view.cljs

@@ -91,7 +91,7 @@
         :error           error}]
       (when error
         [quo/info-message
-         {:type            :error
+         {:status          :error
           :size            :default
           :icon            :i/info
           :container-style style/error-container}

src/status_im/contexts/wallet/add_account/create_account/view.cljs

@@ -87,7 +87,7 @@
          :container-style     (style/title-input-container error)}]
        (when error
          [quo/info-message
-          {:type            :error
+          {:status          :error
            :size            :default
            :icon            :i/info
            :container-style {:margin-left   20

src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs

@@ -62,7 +62,7 @@
           :container-style (style/title-input-container error)}]
         (when error
           [quo/info-message
-           {:type            :error
+           {:status          :error
             :size            :default
             :icon            :i/info
             :container-style {:margin-left   20

src/status_im/contexts/wallet/send/input_amount/view.cljs

@@ -109,10 +109,10 @@
   []
   [rn/view {:style style/no-routes-found-container}
    [quo/info-message
-    {:type  :error
+    {:status          :error
-     :icon  :i/alert
+     :icon            :i/alert
-     :size  :default
+     :size            :default
-     :style {:margin-top 15}}
+     :container-style {:margin-top 15}}
     (i18n/label :t/no-routes-found)]])
 
 (defn- not-enough-asset

src/status_im/contexts/wallet/send/select_address/view.cljs

@@ -200,9 +200,9 @@
          (when (and (not valid-ens-or-address?) (> (count @input-value) 0))
            [rn/view {:style {:padding 20}}
             [quo/info-message
-             {:type :error
+             {:status :error
-              :icon :i/info
+              :icon   :i/info
-              :size :default}
+              :size   :default}
              (i18n/label :t/invalid-address)]])
          (if (or @input-focused? (> (count @input-value) 0))
            [rn/keyboard-avoiding-view