Quo2: add tags/ tiny tag component (#17613)
Co-authored-by: Rende11 <artamonovn@gmail.com>
This commit is contained in:
parent
7f960f9be5
commit
1b348943be
|
@ -0,0 +1,15 @@
|
||||||
|
(ns quo2.components.tags.tiny-tag.component-spec
|
||||||
|
(:require [quo2.components.tags.tiny-tag.view :as tiny-tag]
|
||||||
|
[test-helpers.component :as h]))
|
||||||
|
|
||||||
|
(h/describe "Tiny tag component test"
|
||||||
|
(h/test "1,000 SNT render"
|
||||||
|
(h/render [tiny-tag/view
|
||||||
|
{:label "1,000 SNT"
|
||||||
|
:blur? false}])
|
||||||
|
(h/is-truthy (h/get-by-text "1,000 SNT")))
|
||||||
|
(h/test "2,000 SNT render with blur"
|
||||||
|
(h/render [tiny-tag/view
|
||||||
|
{:label "2,000 SNT"
|
||||||
|
:blur? true}])
|
||||||
|
(h/is-truthy (h/get-by-text "2,000 SNT"))))
|
|
@ -0,0 +1,33 @@
|
||||||
|
(ns quo2.components.tags.tiny-tag.style
|
||||||
|
(:require [quo2.foundations.colors :as colors]))
|
||||||
|
|
||||||
|
(defn get-border-color
|
||||||
|
[blur? theme]
|
||||||
|
(if blur?
|
||||||
|
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
|
||||||
|
(colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))
|
||||||
|
|
||||||
|
(defn get-label-color
|
||||||
|
[blur? theme]
|
||||||
|
(if blur?
|
||||||
|
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
|
||||||
|
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||||
|
|
||||||
|
(def main
|
||||||
|
{:justify-content :center
|
||||||
|
:align-items :center
|
||||||
|
:height 16})
|
||||||
|
|
||||||
|
(defn inner
|
||||||
|
[{:keys [blur? theme]}]
|
||||||
|
{:border-width 1
|
||||||
|
:border-radius 6
|
||||||
|
:border-color (get-border-color blur? theme)
|
||||||
|
:justify-content :center
|
||||||
|
:align-items :center
|
||||||
|
:padding-left 2
|
||||||
|
:padding-right 3})
|
||||||
|
|
||||||
|
(defn label
|
||||||
|
[{:keys [blur? theme]}]
|
||||||
|
{:color (get-label-color blur? theme)})
|
|
@ -0,0 +1,17 @@
|
||||||
|
(ns quo2.components.tags.tiny-tag.view
|
||||||
|
(:require [quo2.components.markdown.text :as text]
|
||||||
|
[quo2.theme :as quo.theme]
|
||||||
|
[quo2.components.tags.tiny-tag.style :as style]
|
||||||
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
|
(defn- view-internal
|
||||||
|
[{:keys [label] :as props}]
|
||||||
|
[rn/view {:style style/main}
|
||||||
|
[rn/view {:style (style/inner props)}
|
||||||
|
[text/text
|
||||||
|
{:style (style/label props)
|
||||||
|
:weight :medium
|
||||||
|
:size :label
|
||||||
|
:align :center} label]]])
|
||||||
|
|
||||||
|
(def view (quo.theme/with-theme view-internal))
|
|
@ -127,6 +127,7 @@
|
||||||
quo2.components.tags.status-tags
|
quo2.components.tags.status-tags
|
||||||
quo2.components.tags.tag
|
quo2.components.tags.tag
|
||||||
quo2.components.tags.tags
|
quo2.components.tags.tags
|
||||||
|
quo2.components.tags.tiny-tag.view
|
||||||
quo2.components.tags.token-tag
|
quo2.components.tags.token-tag
|
||||||
quo2.components.text-combinations.view
|
quo2.components.text-combinations.view
|
||||||
quo2.components.wallet.account-card.view
|
quo2.components.wallet.account-card.view
|
||||||
|
@ -353,6 +354,7 @@
|
||||||
(def status-tag quo2.components.tags.status-tags/status-tag)
|
(def status-tag quo2.components.tags.status-tags/status-tag)
|
||||||
(def tag quo2.components.tags.tag/tag)
|
(def tag quo2.components.tags.tag/tag)
|
||||||
(def tags quo2.components.tags.tags/tags)
|
(def tags quo2.components.tags.tags/tags)
|
||||||
|
(def tiny-tag quo2.components.tags.tiny-tag.view/view)
|
||||||
(def token-tag quo2.components.tags.token-tag/tag)
|
(def token-tag quo2.components.tags.token-tag/tag)
|
||||||
|
|
||||||
;;;; Text combinations
|
;;;; Text combinations
|
||||||
|
|
|
@ -146,6 +146,7 @@
|
||||||
[status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
|
[status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
|
||||||
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
|
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
|
||||||
[status-im2.contexts.quo-preview.tags.tags :as tags]
|
[status-im2.contexts.quo-preview.tags.tags :as tags]
|
||||||
|
[status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
|
||||||
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
|
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
|
||||||
[status-im2.contexts.quo-preview.text-combinations.preview :as
|
[status-im2.contexts.quo-preview.text-combinations.preview :as
|
||||||
text-combinations]
|
text-combinations]
|
||||||
|
@ -420,6 +421,8 @@
|
||||||
:component status-tags/preview-status-tags}
|
:component status-tags/preview-status-tags}
|
||||||
{:name :tags
|
{:name :tags
|
||||||
:component tags/preview-tags}
|
:component tags/preview-tags}
|
||||||
|
{:name :tiny-tag
|
||||||
|
:component tiny-tag/preview-tiny-tag}
|
||||||
{:name :token-tag
|
{:name :token-tag
|
||||||
:component token-tag/preview-token-tag}]
|
:component token-tag/preview-token-tag}]
|
||||||
:text-combinations [{:name :text-combinations
|
:text-combinations [{:name :text-combinations
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
(ns status-im2.contexts.quo-preview.tags.tiny-tag
|
||||||
|
(:require [quo2.core :as quo]
|
||||||
|
[react-native.core :as rn]
|
||||||
|
[reagent.core :as reagent]
|
||||||
|
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||||
|
|
||||||
|
(def descriptor
|
||||||
|
[{:label "Blur?"
|
||||||
|
:key :blur?
|
||||||
|
:type :boolean}
|
||||||
|
{:label "Label"
|
||||||
|
:key :label
|
||||||
|
:type :text}])
|
||||||
|
|
||||||
|
(defn preview-tiny-tag
|
||||||
|
[]
|
||||||
|
(let [state (reagent/atom {:blur? false
|
||||||
|
:label "1,000 SNT"})]
|
||||||
|
(fn []
|
||||||
|
[preview/preview-container
|
||||||
|
{:state state
|
||||||
|
:descriptor descriptor
|
||||||
|
:blur? (:blur? @state)
|
||||||
|
:show-blur-background? true}
|
||||||
|
[rn/view {:style {:align-items :center}}
|
||||||
|
[quo/tiny-tag @state]]])))
|
Loading…
Reference in New Issue