Avatars/Community Avatar Component (#20147)

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

@@ -0,0 +1,9 @@
+(ns quo.components.avatars.community-avatar.component-spec
+  (:require [quo.components.avatars.community-avatar.view :as community-avatar]
+            [test-helpers.component :as h]))
+
+(h/describe "Avatars: Community Avatar"
+  (h/test "should render correctly"
+    (h/render-with-theme-provider
+     [community-avatar/view {:image "mock-image"}])
+    (h/is-truthy (h/get-by-label-text :community-avatar))))

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

@@ -0,0 +1,12 @@
+(ns quo.components.avatars.community-avatar.style)
+
+(def ^:private sizes
+  {:size-32 32
+   :size-24 24})
+
+(defn image
+  [size]
+  (let [size-val (sizes size)]
+    {:border-radius (/ size-val 2)
+     :width         size-val
+     :height        size-val}))

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

@@ -0,0 +1,23 @@
+(ns quo.components.avatars.community-avatar.view
+  (:require [quo.components.avatars.community-avatar.style :as style]
+            [react-native.core :as rn]
+            [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:size {:optional true} [:maybe [:enum :size-32 :size-24]]]
+      [:image :schema.common/image-source]
+      [:container-style {:optional true} [:maybe :map]]]]]
+   :any])
+
+(defn- view-internal
+  [{:keys [size image container-style]}]
+  [rn/image
+   {:source              image
+    :accessibility-label :community-avatar
+    :style               (merge (style/image size) container-style)}])
+
+(def view (schema/instrument #'view-internal ?schema))

src/quo/components/buttons/swap_order_button/schema.cljs

@@ -7,5 +7,5 @@
      [:map {:closed true}
       [:disabled? {:optional true} [:maybe :boolean]]
       [:on-press fn?]
-      [:container-style {:optional true} [:maybe :any]]]]]
+      [:container-style {:optional true} [:maybe :map]]]]]
    :any])

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

@@ -7,7 +7,7 @@
             [react-native.core :as rn]
             [schema.core :as schema]))
 
-(defn view-internal
+(defn- view-internal
   [{:keys [disabled? on-press container-style]}]
   (let [theme                  (quo.theme/use-theme)
         [pressed? set-pressed] (rn/use-state false)

src/quo/core.cljs

@@ -5,6 +5,7 @@
     quo.components.avatars.account-avatar.view
     quo.components.avatars.channel-avatar.view
     quo.components.avatars.collection-avatar.view
+    quo.components.avatars.community-avatar.view
     quo.components.avatars.group-avatar.view
     quo.components.avatars.icon-avatar
     quo.components.avatars.token-avatar.view
@@ -191,6 +192,7 @@
 (def account-avatar quo.components.avatars.account-avatar.view/view)
 (def channel-avatar quo.components.avatars.channel-avatar.view/view)
 (def collection-avatar quo.components.avatars.collection-avatar.view/view)
+(def community-avatar quo.components.avatars.community-avatar.view/view)
 (def group-avatar quo.components.avatars.group-avatar.view/view)
 (def icon-avatar quo.components.avatars.icon-avatar/icon-avatar)
 (def token-avatar quo.components.avatars.token-avatar.view/view)

src/quo/core_spec.cljs

@@ -1,6 +1,7 @@
 (ns quo.core-spec
   (:require
     quo.components.avatars.account-avatar.component-spec
+    quo.components.avatars.community-avatar.component-spec
     quo.components.avatars.token-avatar.component-spec
     quo.components.avatars.user-avatar.component-spec
     quo.components.banners.banner.component-spec

src/status_im/contexts/preview/quo/avatars/community_avatar.cljs

@@ -0,0 +1,24 @@
+(ns status-im.contexts.preview.quo.avatars.community-avatar
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.common.resources :as resources]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:type    :select
+    :key     :size
+    :options [{:key :size-32}
+              {:key :size-24}]}])
+
+(defn view
+  []
+  (let [[state set-state] (rn/use-state {:size :size-32})]
+    [preview/preview-container
+     {:state      state
+      :set-state  set-state
+      :descriptor descriptor}
+     [quo/community-avatar
+      (assoc state
+             :image
+             (resources/get-mock-image :community-logo))]]))

src/status_im/contexts/preview/quo/main.cljs

@@ -10,6 +10,7 @@
     [status-im.contexts.preview.quo.avatars.account-avatar :as account-avatar]
     [status-im.contexts.preview.quo.avatars.channel-avatar :as channel-avatar]
     [status-im.contexts.preview.quo.avatars.collection-avatar :as collection-avatar]
+    [status-im.contexts.preview.quo.avatars.community-avatar :as community-avatar]
     [status-im.contexts.preview.quo.avatars.group-avatar :as group-avatar]
     [status-im.contexts.preview.quo.avatars.icon-avatar :as icon-avatar]
     [status-im.contexts.preview.quo.avatars.token-avatar :as token-avatar]
@@ -221,7 +222,9 @@
                         :component shadows/view}]
    :animated-list     [{:name      :animated-header-list
                         :component animated-header-list/mock-screen}]
-   :avatar            [{:name      :group-avatar
+   :avatar            [{:name      :community-avatar
+                        :component community-avatar/view}
+                       {:name      :group-avatar
                         :component group-avatar/view}
                        {:name      :icon-avatar
                         :component icon-avatar/view}