From 195826a7f41074bbf60e5a9e8af237301793d769 Mon Sep 17 00:00:00 2001 From: Paul Fitzgerald Date: Tue, 23 Jan 2024 19:41:20 +0000 Subject: [PATCH] chore(quo): add component list item - network list to design system (#18547) --------- Co-authored-by: Ajay Sivan --- .../network_list/component_spec.cljs | 40 ++++++++++ .../list_items/network_list/style.cljs | 41 ++++++++++ .../list_items/network_list/view.cljs | 76 +++++++++++++++++++ src/quo/core.cljs | 2 + src/quo/core_spec.cljs | 1 + .../preview/quo/list_items/network_list.cljs | 46 +++++++++++ src/status_im/contexts/preview/quo/main.cljs | 3 + 7 files changed, 209 insertions(+) create mode 100644 src/quo/components/list_items/network_list/component_spec.cljs create mode 100644 src/quo/components/list_items/network_list/style.cljs create mode 100644 src/quo/components/list_items/network_list/view.cljs create mode 100644 src/status_im/contexts/preview/quo/list_items/network_list.cljs diff --git a/src/quo/components/list_items/network_list/component_spec.cljs b/src/quo/components/list_items/network_list/component_spec.cljs new file mode 100644 index 0000000000..a7f1706f28 --- /dev/null +++ b/src/quo/components/list_items/network_list/component_spec.cljs @@ -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)))) diff --git a/src/quo/components/list_items/network_list/style.cljs b/src/quo/components/list_items/network_list/style.cljs new file mode 100644 index 0000000000..39ace1723c --- /dev/null +++ b/src/quo/components/list_items/network_list/style.cljs @@ -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)}) diff --git a/src/quo/components/list_items/network_list/view.cljs b/src/quo/components/list_items/network_list/view.cljs new file mode 100644 index 0000000000..41ca17435c --- /dev/null +++ b/src/quo/components/list_items/network_list/view.cljs @@ -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))) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 87c1de0a7a..df7503f27a 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -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) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index 1d25588c7b..c4a73a26f8 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -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 diff --git a/src/status_im/contexts/preview/quo/list_items/network_list.cljs b/src/status_im/contexts/preview/quo/list_items/network_list.cljs new file mode 100644 index 0000000000..dc98e43187 --- /dev/null +++ b/src/status_im/contexts/preview/quo/list_items/network_list.cljs @@ -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!")}))]]))) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 7dcb0ed885..143a7cb396 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -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