Merge branch 'develop' into 17576

doc/new-guidelines.md

@@ -716,7 +716,7 @@ src
 
 - `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
 - `src/mocks`: Plumbing configuration to be able to run tests.
-- `src/quo/`: The component library for Status Mobile.
+- `src/quo/`: The component library for Status Mobile. [Read more...](../src/quo/README.md)
 - `src/react_native/`: Contains only low-level constructs to help React Native
   work in tandem with Clojure(Script).
 - `src/status_im2/`: Directory where we try to be as strict as possible about

src/quo/README.md

@@ -116,6 +116,17 @@ rendered. We use [React Native Testing Library](https://callstack.github.io/reac
 There are dozens of examples in the repository, so use them as a reference. A
 good and complete example is [quo.components.avatars.user-avatar.component-spec](/src/quo/components/avatars/user_avatar/component_spec.cljs)
 
+### No-props test
+
+When writing tests for the component that has props, please add one test that covers situation when props aren't passed. Because even if component not showing anything meaningful without props, it shouldn't crash.
+
+```clojure
+(h/describe "Transaction Progress"
+  (h/test "component renders without props"
+    (h/render [quo/transaction-progress {}])
+    (h/is-truthy (h/get-by-label-text :transaction-progress)))
+```
+
 ## Do not couple the library with re-frame
 
 Don't use re-frame inside this library (e.g. dispatch & subscribe). If a

src/quo/components/avatars/account_avatar/view.cljs

@@ -30,6 +30,6 @@
       {:accessibility-label      :account-emoji
        :adjusts-font-size-to-fit true
        :style                    {:font-size emoji-size}}
-      (string/trim emoji)]]))
+      (when emoji (string/trim emoji))]]))
 
 (def view (quo.theme/with-theme view-internal))

src/quo/components/avatars/channel_avatar/view.cljs

@@ -67,7 +67,7 @@
      [rn/text
       {:style               (style/emoji-size size)
        :accessibility-label :emoji}
-      (string/trim emoji)])
+      (when emoji (string/trim emoji))])
    [lock locked? size theme]])
 
 (def view (quo.theme/with-theme view-internal))

src/quo/components/avatars/wallet_user_avatar/view.cljs

@@ -56,6 +56,6 @@
        :size                (:font-size (size properties))
        :weight              (if monospace? :monospace (:font-weight (size properties)))
        :style               (style/text customization-color neutral? theme)}
-      (if lowercase? (string/lower-case initials) initials)]]))
+      (if (and initials lowercase?) (string/lower-case initials) initials)]]))
 
 (def wallet-user-avatar (quo.theme/with-theme view-internal))

src/quo/components/info/info_message.cljs

@@ -11,6 +11,7 @@
   (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 view-internal

src/quo/components/numbered_keyboard/keyboard_key/component_spec.cljs

@@ -36,7 +36,7 @@
                   :blur?     false
                   :type      :digit} 1])
       (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/was-called on-press)))
 
   (h/test "Is not pressable when disabled is true"
@@ -47,5 +47,5 @@
                   :blur?     false
                   :type      :digit} 1])
       (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
       (h/was-not-called on-press))))

src/quo/components/numbered_keyboard/keyboard_key/view.cljs

@@ -7,16 +7,23 @@
     [react-native.core :as rn]
     [reagent.core :as reagent]))
 
+(defn- label->accessibility-label
+  [label]
+  (let [label-name (if (keyword? label) (name label) label)]
+    (keyword (str "keyboard-key-" label-name))))
+
 (defn- view-internal
   []
   (let [pressed? (reagent/atom false)]
     (fn [{:keys [disabled? theme blur? on-press type]} label]
       (let [label-color      (style/get-label-color disabled? theme blur?)
             background-color (style/toggle-background-color @pressed? blur? theme)]
         [rn/pressable
-         {:accessibility-label :keyboard-key
+         {:accessibility-label (label->accessibility-label label)
           :disabled            (or disabled? (not label))
-          :on-press            (fn [] (on-press label))
+          :on-press            (fn []
+                                 (when on-press
+                                   (on-press label)))
           :on-press-in         #(reset! pressed? true)
           :on-press-out        #(reset! pressed? false)
           :style               (style/container background-color)}

src/quo/components/numbered_keyboard/numbered_keyboard/style.cljs

@@ -1,7 +1,7 @@
 (ns quo.components.numbered-keyboard.numbered-keyboard.style)
 
 (def container
-  {:flex               1
+  {:display            :flex
    :padding-top        8
    :padding-horizontal 48})
 

src/quo/components/numbered_keyboard/numbered_keyboard/view.cljs

@@ -17,13 +17,17 @@
 
 (defn- view-internal
   []
-  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
+  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
+               container-style]
+        :or   {left-action :none}}]
     [rn/view
-     {:style style/container}
+     {:style (merge style/container
+                    container-style)}
      (for [row-index (range 1 4)]
        ^{:key row-index}
        [rn/view {:style style/row-container}
         (for [column-index (range 1 4)]
+          ^{:key (str row-index column-index)}
           [keyboard-item
            {:item      (+ (* (dec row-index) 3) column-index)
             :type      :digit
@@ -58,10 +62,10 @@
         :theme     theme}]
       (if delete-key?
         [keyboard-item
-         {:item      :i/delete
+         {:item      :i/backspace
           :type      :key
           :disabled? disabled?
-          :on-press  on-press
+          :on-press  on-delete
           :blur?     blur?
           :theme     theme}]
         [keyboard-item])]]))

src/quo/components/overlay/style.cljs

@@ -0,0 +1,22 @@
+(ns quo.components.overlay.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn overlay-background
+  [type]
+  (let [background-color (case type
+                           :shell  colors/neutral-80-opa-80-blur
+                           :drawer colors/neutral-100-opa-70-blur
+                           nil)]
+    {:position         :absolute
+     :top              0
+     :left             0
+     :right            0
+     :bottom           0
+     :background-color background-color}))
+
+(def container
+  {:flex 1})
+
+(def blur-container
+  {:flex             1
+   :background-color :transparent})

src/quo/components/overlay/view.cljs

@@ -0,0 +1,20 @@
+(ns quo.components.overlay.view
+  (:require
+    [quo.components.overlay.style :as style]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [type]} & children]
+  [rn/view {:style (style/overlay-background type)}
+   (if (= type :shell)
+     [blur/view
+      {:blur-amount   20
+       :blur-radius   25
+       :blur-type     :transparent
+       :overlay-color :transparent
+       :style         style/container}
+      [rn/view {:style style/blur-container}
+       children]]
+     [rn/view {:style style/container}
+      children])])

src/quo/components/settings/data_item/component_spec.cljs

@@ -10,14 +10,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -27,14 +27,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               false
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -45,14 +45,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :small
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -63,14 +63,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -81,31 +81,31 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
-    (h/is-truthy (h/get-by-text "Description")))
+    (h/is-truthy (h/get-by-text "Subtitle")))
 
   (h/test "right icon is not visible when icon-right? is false"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -115,70 +115,70 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
     (h/is-truthy (h/query-by-label-text :icon-right)))
 
-  (h/test "description icon is visible when description is icon"
+  (h/test "icon is visible when subtitle type is icon"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :icon
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
                 :label               :preview
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :icon
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
-    (h/is-truthy (h/query-by-label-text :description-icon)))
+    (h/is-truthy (h/query-by-label-text :subtitle-type-icon)))
 
-  (h/test "description image is visible when description is network"
+  (h/test "image is visible when subtitle type is network"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :network
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
                 :label               :preview
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :network
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow
                 :network-image       (quo.resources/get-network :ethereum)}])
-    (h/is-truthy (h/query-by-label-text :description-image)))
+    (h/is-truthy (h/query-by-label-text :subtitle-type-image)))
 
-  (h/test "description emoji is visible when description is account"
+  (h/test "emoji is visible when subtitle type is account"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
-                :description         :account
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
                 :label               :preview
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Description"
+                :subtitle            "Subtitle"
+                :subtitle-type       :account
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])

src/quo/components/settings/data_item/style.cljs

@@ -37,8 +37,8 @@
    :align-items    :center})
 
 (defn subtitle-icon-container
-  [description]
-  {:margin-right    (when (not= :default description) 4)
+  [subtitle-type]
+  {:margin-right    (when (not= :default subtitle-type) 4)
    :justify-content :center})
 
 (defn title