Pass full-name prop instead of two props for first and last names

Rewrite docs
Use get-initials utility

Move wallet-user-avatar to a separate folder (to conform with other adjacent components)
                      Add tests
                      Refactor to reflect conventions

Fix lint

Fix lint

Fix color usage

Change "color" to "customization-color"
Remove extra props
Refactor component properties object

Update color usage to comply with the latest conventions

Use correct color for circle-color
Fix require to follow conventions

Fix tests

Remove extra code
Do refactor

Refactor

Add new changes

Simplify two lines

Simplify two lines

Move folder into quo

Fix paths

fix require line

Use one letters instead of two for size 24

src/quo/components/avatars/wallet_user_avatar.cljs

@@ -1,68 +0,0 @@
-(ns quo.components.avatars.wallet-user-avatar
-  (:require
-    [clojure.string :as string]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
-
-(def circle-sizes
-  {:small   20
-   :medium  32
-   :large   48
-   :size-64 64
-   :x-large 80})
-
-(def font-sizes
-  {:small   :label
-   :medium  :paragraph-2
-   :large   :paragraph-1
-   :size-64 :heading-1
-   :x-large :heading-1})
-
-(def font-weights
-  {:small   :medium
-   :medium  :semi-bold
-   :large   :semi-bold
-   :size-64 :medium
-   :x-large :medium})
-
-(defn- view-internal
-  "params, first name, last name, customization-color, size
-   and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
-    :or   {f-name     "John"
-           l-name     "Doe"
-           size       :x-large
-           uppercase? true}}]
-  (let [circle-size    (size circle-sizes)
-        small?         (= size :small)
-        f-name-initial (-> f-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        l-name-initial (-> l-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        circle-color   (if customization-color
-                         (colors/resolve-color customization-color theme 20)
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
-        text-color     (if customization-color
-                         (colors/resolve-color customization-color theme)
-                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
-    [rn/view
-     {:style {:width            circle-size
-              :height           circle-size
-              :border-radius    circle-size
-              :text-align       :center
-              :justify-content  :center
-              :align-items      :center
-              :background-color circle-color}}
-     [text/text
-      {:size   (size font-sizes)
-       :weight (if monospace? :monospace (size font-weights))
-       :style  {:color text-color}}
-      (if small?
-        (str f-name-initial)
-        (str f-name-initial l-name-initial))]]))
-
-(def wallet-user-avatar (quo.theme/with-theme view-internal))

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/share/qr_code/view.cljs

@@ -3,7 +3,7 @@
     [quo.components.avatars.account-avatar.view :as account-avatar]
     [quo.components.avatars.channel-avatar.view :as channel-avatar]
     [quo.components.avatars.user-avatar.view :as user-avatar]
-    [quo.components.avatars.wallet-user-avatar :as wallet-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-avatar]
     [quo.components.share.qr-code.style :as style]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]))

src/quo/core.cljs

@@ -7,7 +7,7 @@
     quo.components.avatars.group-avatar.view
     quo.components.avatars.icon-avatar
     quo.components.avatars.user-avatar.view
-    quo.components.avatars.wallet-user-avatar
+    quo.components.avatars.wallet-user-avatar.view
     quo.components.banners.banner.view
     quo.components.browser.browser-input.view
     quo.components.buttons.button.view
@@ -159,7 +159,7 @@
 (def group-avatar quo.components.avatars.group-avatar.view/view)
 (def icon-avatar quo.components.avatars.icon-avatar/icon-avatar)
 (def user-avatar quo.components.avatars.user-avatar.view/user-avatar)
-(def wallet-user-avatar quo.components.avatars.wallet-user-avatar/wallet-user-avatar)
+(def wallet-user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar)
 
 ;;;; Banner
 (def banner quo.components.banners.banner.view/view)

src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs

@@ -5,28 +5,23 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "First name"
-    :key   :f-name
-    :type  :text}
-   {:label "Last name"
-    :key   :l-name
-    :type  :text}
+  [{:key  :full-name
+    :type :text}
    {:key     :size
     :type    :select
-    :options [{:key :small}
-              {:key :medium}
-              {:key :large}
+    :options [{:key :size-20}
+              {:key :size-24}
+              {:key :size-32}
+              {:key :size-48}
               {:key :size-64}
-              {:key   :x-large
-               :value "X Large"}]}
-   (preview/customization-color-option {:key :customization-color})])
+              {:key :size-80}]}
+   (preview/customization-color-option)])
 
 (defn view
   []
-  (let [state (reagent/atom {:first-name          "empty"
-                             :last-name           "name"
-                             :size                :x-large
-                             :customization-color :indigo})]
+  (let [state (reagent/atom {:full-name           "empty name"
+                             :size                :size-80
+                             :customization-color :blue})]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
        [quo/wallet-user-avatar @state]])))