diff --git a/src/quo/components/avatars/wallet_user_avatar.cljs b/src/quo/components/avatars/wallet_user_avatar.cljs deleted file mode 100644 index a50d56295b..0000000000 --- a/src/quo/components/avatars/wallet_user_avatar.cljs +++ /dev/null @@ -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)) diff --git a/src/quo/components/avatars/wallet_user_avatar/component_spec.cljs b/src/quo/components/avatars/wallet_user_avatar/component_spec.cljs new file mode 100644 index 0000000000..af14a7ea11 --- /dev/null +++ b/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"))))) + diff --git a/src/quo/components/avatars/wallet_user_avatar/style.cljs b/src/quo/components/avatars/wallet_user_avatar/style.cljs new file mode 100644 index 0000000000..a1d9ef5b88 --- /dev/null +++ b/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)}) diff --git a/src/quo/components/avatars/wallet_user_avatar/view.cljs b/src/quo/components/avatars/wallet_user_avatar/view.cljs new file mode 100644 index 0000000000..c3ea309576 --- /dev/null +++ b/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)) diff --git a/src/quo/components/list_items/address/view.cljs b/src/quo/components/list_items/address/view.cljs index 249537710f..5499f62b4b 100644 --- a/src/quo/components/list_items/address/view.cljs +++ b/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] diff --git a/src/quo/components/list_items/saved_address/view.cljs b/src/quo/components/list_items/saved_address/view.cljs index 8a7beadab3..19225a6e3c 100644 --- a/src/quo/components/list_items/saved_address/view.cljs +++ b/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] diff --git a/src/quo/components/share/qr_code/view.cljs b/src/quo/components/share/qr_code/view.cljs index 44ca003ac1..2ed627db04 100644 --- a/src/quo/components/share/qr_code/view.cljs +++ b/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])) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 349c6c5389..21baf73c6a 100644 --- a/src/quo/core.cljs +++ b/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) diff --git a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs index deb8f1e3c6..9e9f3ec8fe 100644 --- a/src/status_im2/contexts/quo_preview/avatars/wallet_user_avatar.cljs +++ b/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]])))