diff --git a/src/quo/components/avatars/community_avatar/component_spec.cljs b/src/quo/components/avatars/community_avatar/component_spec.cljs new file mode 100644 index 0000000000..485045f5dd --- /dev/null +++ b/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)))) diff --git a/src/quo/components/avatars/community_avatar/style.cljs b/src/quo/components/avatars/community_avatar/style.cljs new file mode 100644 index 0000000000..5641dbe0f0 --- /dev/null +++ b/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})) diff --git a/src/quo/components/avatars/community_avatar/view.cljs b/src/quo/components/avatars/community_avatar/view.cljs new file mode 100644 index 0000000000..1518efe0f2 --- /dev/null +++ b/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)) diff --git a/src/quo/components/buttons/swap_order_button/schema.cljs b/src/quo/components/buttons/swap_order_button/schema.cljs index c547cfda61..3fa9a77201 100644 --- a/src/quo/components/buttons/swap_order_button/schema.cljs +++ b/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]) diff --git a/src/quo/components/buttons/swap_order_button/view.cljs b/src/quo/components/buttons/swap_order_button/view.cljs index 589bfcbf3a..0e82ba8905 100644 --- a/src/quo/components/buttons/swap_order_button/view.cljs +++ b/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) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index ba146b426a..2ab0e022a8 100644 --- a/src/quo/core.cljs +++ b/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) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index 978da48b81..ef68aa8e0b 100644 --- a/src/quo/core_spec.cljs +++ b/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 diff --git a/src/status_im/contexts/preview/quo/avatars/community_avatar.cljs b/src/status_im/contexts/preview/quo/avatars/community_avatar.cljs new file mode 100644 index 0000000000..002118afc2 --- /dev/null +++ b/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))]])) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index f8b681b60d..ee30ac5a0e 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/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}