From 2e63ee8baf83c3dd6019e6e3167df46418f4d093 Mon Sep 17 00:00:00 2001 From: Siddarth Kumar Date: Thu, 31 Aug 2023 09:55:17 +0000 Subject: [PATCH] feat: add tags - network tags component to quo2 Co-authored-by: andresceballosm --- src/quo2/components/tabs/tab/view.cljs | 6 +-- .../tags/network_tags/component_spec.cljs | 19 +++++++ .../components/tags/network_tags/style.cljs | 41 +++++++++++++++ .../components/tags/network_tags/view.cljs | 25 +++++++++ src/quo2/core.cljs | 10 ++-- src/quo2/core_spec.cljs | 1 + src/status_im2/contexts/quo_preview/main.cljs | 7 ++- .../quo_preview/tags/network_tags.cljs | 51 +++++++++++++++++++ 8 files changed, 151 insertions(+), 9 deletions(-) create mode 100644 src/quo2/components/tags/network_tags/component_spec.cljs create mode 100644 src/quo2/components/tags/network_tags/style.cljs create mode 100644 src/quo2/components/tags/network_tags/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/tags/network_tags.cljs diff --git a/src/quo2/components/tabs/tab/view.cljs b/src/quo2/components/tabs/tab/view.cljs index 353fe2c533..d5e23226ef 100644 --- a/src/quo2/components/tabs/tab/view.cljs +++ b/src/quo2/components/tabs/tab/view.cljs @@ -3,7 +3,7 @@ [quo2.components.markdown.text :as text] [quo2.components.common.notification-dot.view :as notification-dot] [quo2.components.tabs.tab.style :as style] - [quo2.theme :as theme] + [quo2.theme :as quo.theme] [react-native.core :as rn] [react-native.svg :as svg])) @@ -47,7 +47,7 @@ (vector? children) children)]) -(defn- themed-view +(defn- view-internal [{:keys [accessibility-label active before @@ -104,4 +104,4 @@ :disabled disabled :background-color background-color}])]])) -(def view (theme/with-theme themed-view)) +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/tags/network_tags/component_spec.cljs b/src/quo2/components/tags/network_tags/component_spec.cljs new file mode 100644 index 0000000000..e249ded342 --- /dev/null +++ b/src/quo2/components/tags/network_tags/component_spec.cljs @@ -0,0 +1,19 @@ +(ns quo2.components.tags.network-tags.component-spec + (:require [quo2.components.tags.network-tags.view :as network-tags] + [test-helpers.component :as h])) + +(h/describe "network-tags component" + (h/test "renders network tags with single network" + (h/render [network-tags/view + {:title "Network Tags" + :networks [{:source "network-icon.png"}]}]) + (h/is-truthy (h/get-by-text "Network Tags"))) + + (h/test "renders network tags with multiple networks" + (h/render [network-tags/view + {:title "Multiple Networks" + :networks [{:source "network-icon1.png"} + {:source "network-icon2.png"} + {:source "network-icon3.png"}] + :size :size/s-32}]) + (h/is-truthy (h/get-by-text "Multiple Networks")))) diff --git a/src/quo2/components/tags/network_tags/style.cljs b/src/quo2/components/tags/network_tags/style.cljs new file mode 100644 index 0000000000..c6d4513658 --- /dev/null +++ b/src/quo2/components/tags/network_tags/style.cljs @@ -0,0 +1,41 @@ +(ns quo2.components.tags.network-tags.style + (:require [quo2.foundations.colors :as colors])) + +(defn container + [{:keys [status theme blur?]}] + {:flex-direction :row + :align-self :flex-start + :background-color (when (= status :error) + (colors/theme-colors + (colors/custom-color :danger 50 10) + (colors/custom-color :danger 60 10) + theme)) + :border-width 1 + :border-color (cond (= status :error) + (colors/theme-colors + (colors/custom-color :danger 50 20) + (colors/custom-color :danger 60 20) + theme) + (and blur? (= status :default)) (colors/theme-colors + colors/neutral-80-opa-5 + colors/white-opa-5 + theme) + :else (colors/theme-colors + colors/neutral-20 + colors/neutral-80 + theme)) + :border-radius 8 + :padding-left 5 + :padding-right 5 + :padding-top 3 + :padding-bottom 2}) + +(defn title-style + [{:keys [status theme]}] + {:padding-left 4 + :margin-top -1 + :color (when (= status :error) + (colors/theme-colors + (colors/custom-color :danger 50) + (colors/custom-color :danger 60) + theme))}) diff --git a/src/quo2/components/tags/network_tags/view.cljs b/src/quo2/components/tags/network_tags/view.cljs new file mode 100644 index 0000000000..64620d61aa --- /dev/null +++ b/src/quo2/components/tags/network_tags/view.cljs @@ -0,0 +1,25 @@ +(ns quo2.components.tags.network-tags.view + (:require [quo2.components.list-items.preview-list.view :as preview-list] + [quo2.components.tags.network-tags.style :as style] + [quo2.components.markdown.text :as text] + [react-native.core :as rn] + [quo2.theme :as quo.theme])) + +(defn- view-internal + [{:keys [title networks status theme blur?] :or {status :default}}] + [rn/view + {:style (style/container {:status status + :theme theme + :blur? blur?})} + [preview-list/view + {:type :network + :number (count networks) + :size :size/s-16} networks] + [text/text + {:weight :medium + :size :paragraph-2 + :style (style/title-style {:status status + :theme theme})} + title]]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 7bdd2f5121..e501220391 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -107,6 +107,7 @@ quo2.components.tabs.segmented-tab quo2.components.tabs.tabs.view quo2.components.tags.context-tag.view + quo2.components.tags.network-tags.view quo2.components.tags.number-tag.view quo2.components.tags.permission-tag quo2.components.tags.status-tags @@ -311,13 +312,14 @@ (def account-selector quo2.components.tabs.account-selector/account-selector) ;;;; Tags -(def tag quo2.components.tags.tag/tag) -(def tags quo2.components.tags.tags/tags) +(def context-tag quo2.components.tags.context-tag.view/view) +(def network-tags quo2.components.tags.network-tags.view/view) +(def number-tag quo2.components.tags.number-tag.view/view) (def permission-tag quo2.components.tags.permission-tag/tag) (def status-tag quo2.components.tags.status-tags/status-tag) +(def tag quo2.components.tags.tag/tag) +(def tags quo2.components.tags.tags/tags) (def token-tag quo2.components.tags.token-tag/tag) -(def context-tag quo2.components.tags.context-tag.view/view) -(def number-tag quo2.components.tags.number-tag.view/view) ;;;; Text combinations (def text-combinations quo2.components.text-combinations.view/view) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index bab60f49d9..105f38fcf0 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -58,6 +58,7 @@ [quo2.components.settings.category.component-spec] [quo2.components.settings.data-item.component-spec] [quo2.components.share.share-qr-code.component-spec] + [quo2.components.tags.network-tags.component-spec] [quo2.components.tags.status-tags-component-spec] [quo2.components.wallet.account-card.component-spec] [quo2.components.wallet.account-overview.component-spec] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index e6bdf8a880..25e34af44e 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -104,6 +104,7 @@ [status-im2.contexts.quo-preview.tabs.tabs :as tabs] [status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state] [status-im2.contexts.quo-preview.tags.context-tags :as context-tags] + [status-im2.contexts.quo-preview.tags.network-tags :as network-tags] [status-im2.contexts.quo-preview.tags.number-tag :as number-tag] [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag] [status-im2.contexts.quo-preview.tags.status-tags :as status-tags] @@ -338,14 +339,16 @@ :component account-selector/preview-this}] :tags [{:name :context-tags :component context-tags/preview-context-tags} + {:name :network-tags + :component network-tags/preview} {:name :number-tag :component number-tag/preview} - {:name :tags - :component tags/preview-tags} {:name :permission-tag :component permission-tag/preview-permission-tag} {:name :status-tags :component status-tags/preview-status-tags} + {:name :tags + :component tags/preview-tags} {:name :token-tag :component token-tag/preview-token-tag}] :text-combinations [{:name :text-combinations diff --git a/src/status_im2/contexts/quo_preview/tags/network_tags.cljs b/src/status_im2/contexts/quo_preview/tags/network_tags.cljs new file mode 100644 index 0000000000..8c752aad77 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/tags/network_tags.cljs @@ -0,0 +1,51 @@ +(ns status-im2.contexts.quo-preview.tags.network-tags + (:require [quo2.core :as quo] + [quo2.foundations.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview] + [react-native.core :as rn] + [reagent.core :as reagent])) + +(def community-networks + [[{:source (resources/get-network :ethereum)}] + [{:source (resources/get-network :arbitrum)} + {:source (resources/get-network :ethereum)}] + [{:source (resources/get-network :arbitrum)} + {:source (resources/get-network :optimism)} + {:source (resources/get-network :ethereum)}]]) + +(def descriptor + [{:type :select + :key :status + :options [{:key :error} + {:key :default}]} + {:type :text + :key :title} + {:type :select + :key :networks + :options [{:key 1} + {:key 2} + {:key 3}]} + {:type :boolean + :key :blur?}]) + + +(defn preview + [] + (let [state (reagent/atom {:title "Tag" + :status :default + :networks 3})] + (fn [] + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true} + [rn/view + {:style {:align-self :center + :justify-content :center + :flex 1}} + [quo/network-tags + {:networks (nth community-networks (dec (:networks @state))) + :status (:status @state) + :title (:title @state) + :blur? (:blur? @state)}]]])))