Merge branch 'develop' into 17509

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

@@ -0,0 +1,16 @@
+(ns quo.components.avatars.wallet-user-avatar.component-spec
+  (:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
+            [test-helpers.component :as h]))
+
+(h/describe "wallet user avatar"
+  (h/describe "View internal"
+    (h/test "Renders by default even with no input parameters"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {}])
+      (h/is-truthy (h/query-by-label-text :wallet-user-avatar)))
+
+    (h/test "Renders user’s initials when full name is provided"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {:full-name "Jane Smith"}])
+      (h/is-truthy (h/get-by-text "JS")))))
+

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

@@ -0,0 +1,27 @@
+(ns quo.components.avatars.wallet-user-avatar.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- circle-color
+  [customization-color]
+  (colors/custom-color customization-color 50 20))
+
+(defn- text-color
+  [customization-color theme]
+  (colors/theme-colors
+   (colors/custom-color customization-color 50)
+   (colors/custom-color customization-color 60)
+   theme))
+
+(defn container
+  [circle-size customization-color]
+  {:width            circle-size
+   :height           circle-size
+   :border-radius    circle-size
+   :text-align       :center
+   :justify-content  :center
+   :align-items      :center
+   :background-color (circle-color customization-color)})
+
+(defn text
+  [customization-color theme]
+  {:color (text-color customization-color theme)})

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

@@ -0,0 +1,57 @@
+(ns quo.components.avatars.wallet-user-avatar.view
+  (:require [quo.components.avatars.wallet-user-avatar.style :as style]
+            [quo.components.markdown.text :as text]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.string))
+
+(def properties
+  {:size-20 {:size        20
+             :font-size   :label
+             :font-weight :medium}
+   :size-24 {:size        24
+             :font-size   :label
+             :font-weight :semi-bold}
+   :size-32 {:size        32
+             :font-size   :paragraph-2
+             :font-weight :semi-bold}
+   :size-48 {:size        48
+             :font-size   :paragraph-1
+             :font-weight :semi-bold}
+   :size-64 {:size        64
+             :font-size   :paragraph-1
+             :font-weight :medium}
+   :size-80 {:size        80
+             :font-size   :heading-1
+             :font-weight :medium}})
+
+(def smallest-possible (first (keys properties)))
+(def second-smallest-possible (second (keys properties)))
+(defn check-if-size-small
+  [size]
+  (or (= size smallest-possible)
+      (= size second-smallest-possible)))
+(def biggest-possible (last (keys properties)))
+
+(defn- view-internal
+  "Options:
+
+  :full-name - string (default: nil) - used to generate initials
+  :customization-color  - keyword (default: nil) - color of the avatar
+  :size   - keyword (default: last element of properties object) - size of the
+  avatar
+  :monospace? - boolean (default: false) - use monospace font"
+  [{:keys [full-name customization-color size theme monospace?]
+    :or   {size biggest-possible}}]
+  (let [circle-size (:size (size properties))
+        small?      (check-if-size-small size)]
+    [rn/view
+     {:style (style/container circle-size customization-color)}
+     [text/text
+      {:accessibility-label :wallet-user-avatar
+       :size                (:font-size (size properties))
+       :weight              (if monospace? :monospace (:font-weight (size properties)))
+       :style               (style/text customization-color theme)}
+      (utils.string/get-initials full-name (if small? 1 2))]]))
+
+(def wallet-user-avatar (quo.theme/with-theme view-internal))

src/quo/components/list_items/address/view.cljs

@@ -1,7 +1,7 @@
 (ns quo.components.list-items.address.view
   (:require
     [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.list-items.address.style :as style]
     [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]

src/quo/components/list_items/saved_address/view.cljs

@@ -1,7 +1,7 @@
 (ns quo.components.list-items.saved-address.view
   (:require
     [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.icon :as icon]
     [quo.components.list-items.saved-address.style :as style]
     [quo.components.markdown.text :as text]

src/quo/components/list_items/user_list.cljs

@@ -27,8 +27,9 @@
       {:size  20
        :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
      :checkbox
-     [selectors/checkbox
-      {:checked?            checked?
+     [selectors/view
+      {:type                :checkbox
+       :checked?            checked?
        :accessibility-label :user-list-toggle-check
        :disabled?           disabled?
        :on-change           (when on-check on-check)}]

src/quo/components/selectors/disclaimer/view.cljs

@@ -11,8 +11,9 @@
    {:on-press            on-change
     :accessibility-label :disclaimer-touchable-opacity}
    [rn/view {:style (merge container-style (style/container blur?))}
-    [selectors/checkbox
-     {:accessibility-label accessibility-label
+    [selectors/view
+     {:type                :checkbox
+      :accessibility-label accessibility-label
       :blur?               blur?
       :checked?            checked?
       :on-change           on-change}]

src/quo/components/selectors/selectors/component_spec.cljs

@@ -6,27 +6,27 @@
 
 (defn render-toggle
   ([]
-   (render-toggle {}))
+   (render-toggle {:type :toggle}))
   ([opts]
-   (h/render (reagent/as-element [selectors/toggle opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :toggle)]))))
 
 (defn render-checkbox
   ([]
-   (render-checkbox {}))
+   (render-checkbox {:type :checkbox}))
   ([opts]
-   (h/render (reagent/as-element [selectors/checkbox opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :checkbox)]))))
 
-(defn render-checkbox-prefill
+(defn render-filled-checkbox
   ([]
-   (render-checkbox-prefill {}))
+   (render-filled-checkbox {:type :filled-checkbox}))
   ([opts]
-   (h/render (reagent/as-element [selectors/checkbox-prefill opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :filled-checkbox)]))))
 
 (defn render-radio
   ([]
-   (render-radio {}))
+   (render-radio {:type :radio}))
   ([opts]
-   (h/render (reagent/as-element [selectors/radio opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :radio)]))))
 
 (h/test "default render of toggle component"
   (render-toggle)
@@ -58,12 +58,12 @@
     (h/fire-event :press (h/get-by-test-id "checkbox-component"))
     (h/was-called mock-fn)))
 
-(h/test "default render of checkbox-prefill component"
-  (render-checkbox-prefill)
-  (h/is-truthy (h/get-by-test-id "checkbox-prefill-component")))
+(h/test "default render of filled-checkbox component"
+  (render-filled-checkbox)
+  (h/is-truthy (h/get-by-test-id "filled-checkbox-component")))
 
-(h/test "checkbox-prefill component on change is working"
+(h/test "filled-checkbox component on change is working"
   (let [mock-fn (h/mock-fn)]
-    (render-checkbox-prefill {:on-change mock-fn})
-    (h/fire-event :press (h/get-by-test-id "checkbox-prefill-component"))
+    (render-filled-checkbox {:on-change mock-fn})
+    (h/fire-event :press (h/get-by-test-id "filled-checkbox-component"))
     (h/was-called mock-fn)))

src/quo/components/selectors/selectors/style.cljs

@@ -6,7 +6,7 @@
   [customization-color theme]
   {:normal {:checked   (colors/resolve-color customization-color theme)
             :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                             colors/white-opa-70
                                             theme)
             :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
@@ -15,7 +15,7 @@
   [customization-color theme]
   {:normal {:checked   (colors/resolve-color customization-color theme)
             :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                             colors/white
                                             theme)
             :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
@@ -29,7 +29,7 @@
   [customization-color theme]
   {:normal {:checked   (colors/resolve-color customization-color theme)
             :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                             colors/white)
             :unchecked colors/white-opa-5}})
 
@@ -38,7 +38,7 @@
   {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
    :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)})
 
-(defn- checkbox-prefill-background-color
+(defn- filled-checkbox-background-color
   [theme]
   {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)
    :blur   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)})
@@ -119,16 +119,16 @@
             (colors/theme-colors colors/white colors/neutral-100 theme)
             colors/white)})
 
-(defn checkbox-prefill
+(defn filled-checkbox
   [{:keys [disabled? blur? container-style theme]}]
   (assoc container-style
          :height           21
          :width            21
          :border-radius    6
          :opacity          (if disabled? 0.3 1)
-         :background-color (get-color (checkbox-prefill-background-color theme) blur?)))
+         :background-color (get-color (filled-checkbox-background-color theme) blur?)))
 
-(defn checkbox-prefill-check
+(defn filled-checkbox-check
   [checked? _blur? theme]
   {:size  20
    :color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))})