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

chore(quo): add component list item - network list to design system (#18547) 

---------

Co-authored-by: Ajay Sivan <ajayesivan@gmail.com>
This commit is contained in:
Paul Fitzgerald 2024-01-23 19:41:20 +00:00 committed by GitHub
parent 5bb4f3632a
commit 195826a7f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 209 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/quo/components/list_items/network_list/component_spec.cljs Normal file
View File

@ -0,0 +1,40 @@
(ns quo.components.list-items.network-list.component-spec
(:require [quo.components.list-items.network-list.view :as network-list]
[quo.foundations.colors :as colors]
[test-helpers.component :as h]))
(defn- render
[component]
(h/render-with-theme-provider component :light))
(def props
{:theme :light
:state :default
:label "Mainnet"
:network-image 873
:customization-color :blue
:token-value "100.00 ETH"
:fiat-value "€100.00"})
(h/describe "List items: Network List"
(h/test "default state explicit"
(render [network-list/view props])
(h/is-truthy (h/get-by-text "Mainnet")))
(h/test "Pressed state"
(render [network-list/view props])
(h/fire-event :on-press-in (h/get-by-label-text ::network-list))
(h/wait-for #(h/has-style (h/query-by-label-text ::network-list)
{:backgroundColor (colors/resolve-color :blue :light 5)})))
(h/test "Active state"
(render [network-list/view (assoc props :state :active)])
(h/has-style (h/query-by-label-text ::network-list)
{:backgroundColor (colors/resolve-color :blue :light 10)}))
(h/test "Call on-press"
(let [on-press (h/mock-fn)]
(render [network-list/view (assoc props :on-press on-press)])
(h/fire-event :on-press (h/get-by-label-text ::network-list))
(h/was-called on-press))))

41
src/quo/components/list_items/network_list/style.cljs Normal file
View File

@ -0,0 +1,41 @@
(ns quo.components.list-items.network-list.style
(:require [quo.foundations.colors :as colors]))
(defn- background-color
[state customization-color theme]
(case state
:pressed (colors/resolve-color customization-color theme 5)
:active (colors/resolve-color customization-color theme 10)
:transparent))
(defn container
[state customization-color theme]
{:flex-direction :row
:justify-content :space-between
:align-items :center
:padding-horizontal 12
:padding-vertical 8
:border-radius 12
:height 56
:background-color (background-color state customization-color theme)})
(def info
{:flex-direction :row
:align-items :center
:gap 2})
(def network-image
{:border-width 1
:border-radius 16
:border-color colors/neutral-80-opa-5
:margin-right 8
:background-color colors/neutral-80-opa-5
:height 32
:width 32})
(def values-container
{:align-items :flex-end})
(defn fiat-value
[theme]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

76
src/quo/components/list_items/network_list/view.cljs Normal file
View File

@ -0,0 +1,76 @@
(ns quo.components.list-items.network-list.view
(:require
[clojure.string :as string]
[quo.components.list-items.network-list.style :as style]
[quo.components.markdown.text :as text]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[schema.core :as schema]))
(defn- info
[{:keys [network-image label]}]
[rn/view {:style style/info}
[rn/image
{:source network-image
:style style/network-image}]
[rn/view
[text/text
{:weight :semi-bold
:style {:text-transform :capitalize}
:number-of-lines 1}
(if (string/blank? label) "-" label)]]])
(defn- values
[{:keys [token-value fiat-value theme]}]
[rn/view {:style style/values-container}
[text/text
{:weight :medium
:size :paragraph-2
:number-of-lines 1}
token-value]
[text/text
{:style (style/fiat-value theme)
:size :paragraph-2
:number-of-lines 1}
fiat-value]])
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:network-image :int]
[:label :string]
[:fiat-value :string]
[:token-value :string]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:state [:enum :pressed :active :default]]
[:on-press {:optional true} [:maybe fn?]]
[:theme :schema.common/theme]]]]
:any])
(defn- view-internal
[]
(let [pressed? (reagent/atom false)
on-press-in #(reset! pressed? true)
on-press-out #(reset! pressed? false)]
(fn [{:keys [on-press state customization-color theme]
:as props
:or {customization-color :blue}}]
(let [internal-state (if @pressed?
:pressed
state)]
[rn/pressable
{:style (style/container internal-state customization-color theme)
:on-press-in on-press-in
:on-press-out on-press-out
:on-press on-press
:accessibility-label :network-list}
[info props]
[values props]]))))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

2
src/quo/core.cljs
View File

@ -80,6 +80,7 @@
quo.components.list-items.community.view
quo.components.list-items.dapp.view
quo.components.list-items.menu-item
quo.components.list-items.network-list.view
quo.components.list-items.preview-list.view
quo.components.list-items.quiz-item.view
quo.components.list-items.saved-address.view
@ -302,6 +303,7 @@
(def community-list quo.components.list-items.community.view/view)
(def dapp quo.components.list-items.dapp.view/view)
(def menu-item quo.components.list-items.menu-item/menu-item)
(def network-list quo.components.list-items.network-list.view/view)
(def preview-list quo.components.list-items.preview-list.view/view)
(def quiz-item quo.components.list-items.quiz-item.view/view)
(def saved-address quo.components.list-items.saved-address.view/view)

1
src/quo/core_spec.cljs
View File

@ -48,6 +48,7 @@
quo.components.list-items.channel.component-spec
quo.components.list-items.community.component-spec
quo.components.list-items.dapp.component-spec
quo.components.list-items.network-list.component-spec
quo.components.list-items.quiz-item.component-spec
quo.components.list-items.saved-address.component-spec
quo.components.list-items.saved-contact-address.component-spec

46
src/status_im/contexts/preview/quo/list_items/network_list.cljs Normal file
View File

@ -0,0 +1,46 @@
(ns status-im.contexts.preview.quo.list-items.network-list
(:require
[quo.core :as quo]
[quo.foundations.resources :as quo.resources]
[reagent.core :as reagent]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:key :state
:type :select
:options [{:key :default}
{:key :active}
{:key :pressed}]}
{:key :network-image
:type :select
:options [{:key (quo.resources/get-network :ethereum)
:value :ethereum}
{:key (quo.resources/get-network :arbitrum)
:value :arbitrum}
{:key (quo.resources/get-network :optimism)
:value :optimism}]}
{:key :label
:type :text}
{:key :token-value
:type :text}
{:key :fiat-value
:type :text}
{:key :show-alert-on-press?
:type :boolean}])
(defn view
[]
(let [state (reagent/atom {:network-image (quo.resources/get-network :ethereum)
:label "Mainnet"
:token-value "0.00 ETH"
:fiat-value "€0.00"
:state :default
:customization-color :blue})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
[quo/network-list
(merge @state
(when (:show-alert-on-press? @state)
{:on-press #(js/alert "Pressed!")}))]])))

3
src/status_im/contexts/preview/quo/main.cljs
View File

@ -94,6 +94,7 @@
[status-im.contexts.preview.quo.list-items.address :as address]
[status-im.contexts.preview.quo.list-items.channel :as channel]
[status-im.contexts.preview.quo.list-items.dapp :as dapp]
[status-im.contexts.preview.quo.list-items.network-list :as network-list]
[status-im.contexts.preview.quo.list-items.preview-lists :as preview-lists]
[status-im.contexts.preview.quo.list-items.quiz-item :as quiz-item]
[status-im.contexts.preview.quo.list-items.saved-address :as saved-address]
@ -351,6 +352,8 @@
:component community-list-item/view}
{:name :dapp
:component dapp/preview}
{:name :network-list
:component network-list/view}
{:name :preview-lists
:component preview-lists/view}
{:name :quiz-item