status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add tags - network tags component to quo2 

Co-authored-by: andresceballosm <ceballosmarandres@gmail.com>
This commit is contained in:
Siddarth Kumar 2023-08-31 09:55:17 +00:00 committed by GitHub
parent a218499f2a
commit 2e63ee8baf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 151 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo2/components/tabs/tab/view.cljs
View File

@ -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))

19
src/quo2/components/tags/network_tags/component_spec.cljs Normal file
View File

@ -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"))))

41
src/quo2/components/tags/network_tags/style.cljs Normal file
View File

@ -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))})

25
src/quo2/components/tags/network_tags/view.cljs Normal file
View File

@ -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))

10
src/quo2/core.cljs
View File

@ -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)

1
src/quo2/core_spec.cljs
View File

@ -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]

7
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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

51
src/status_im2/contexts/quo_preview/tags/network_tags.cljs Normal file
View File

@ -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)}]]])))