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

Add number tag component (#17134)

This commit is contained in:
erikseppanen 2023-08-30 13:29:59 -04:00 committed by GitHub
parent a00eb6292f
commit 8c02291c0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 155 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/quo2/components/tags/number_tag/component_spec.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns quo2.components.tags.number-tag.component-spec
(:require [quo2.components.tags.number-tag.view :as number-tag]
[test-helpers.component :as h]))
(h/describe
"number tag component test"
(h/test "+3 render"
(h/render [number-tag/view
{:type :rounded
:number "3"
:size :size/s-32
:blur? false}])
(h/is-truthy (h/get-by-text "+3")))
(h/test "+48 render"
(h/render [number-tag/view
{:type :squared
:number "48"
:size :size/s-24
:blur? true}])
(h/is-truthy (h/get-by-text "+48"))))

64
src/quo2/components/tags/number_tag/style.cljs Normal file
View File

@ -0,0 +1,64 @@
(ns quo2.components.tags.number-tag.style
(:require [quo2.foundations.colors :as colors]))
(def sizes
{:size/s-32 {:size 32
:width-extra 40
:border-radius {:rounded 16 :squared 10}
:icon-size 20}
:size/s-24 {:size 24
:width-extra 32
:border-radius {:rounded 12 :squared 8}
:icon-size 16}
:size/s-20 {:size 20
:width-extra 24
:border-radius {:rounded 10 :squared 8}
:icon-size 12}
:size/s-16 {:size 16
:width-extra 20
:border-radius {:rounded 8 :squared 8}
:icon-size 12}
:size/s-14 {:size 14
:width-extra 16
:border-radius {:rounded 7 :squared 7}
:icon-size 12}})
(defn get-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)))
(defn get-bg-color
[blur? theme]
(if blur?
(colors/theme-colors colors/neutral-80-opa-5
colors/white-opa-5
theme)
(colors/theme-colors colors/neutral-20
colors/neutral-90
theme)))
(defn get-shape-value
[size attribute shape]
(let [shapes (get-in sizes [size attribute])]
(when shapes (or (shape shapes) (first (vals shapes))))))
(defn get-width
[size number]
(let [size-value (get-in sizes [size :size])
widen? (and (> size-value 20) (= (count number) 2))]
(get-in sizes [size (if widen? :width-extra :size)])))
(defn container
[{:keys [type number size blur? theme]}]
{:style {:width (get-width size number)
:height (get-in sizes [size :size])
:border-radius (get-shape-value size :border-radius type)
:justify-content :center
:align-items :center
:background-color (get-bg-color blur? theme)}})

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

@ -0,0 +1,25 @@
(ns quo2.components.tags.number-tag.view
(:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]
[quo2.components.tags.number-tag.style :as style]
[quo2.theme :as quo.theme]))
(defn view-internal
[{:keys [number size blur? theme] :as props}]
(let [size-value (get-in style/sizes [size :size])
icon-size (get-in style/sizes [size :icon-size])]
[rn/view (style/container props)
(if (and (> size-value 20) (< (count number) 3))
[text/text
{:size (if (= size :size/s-32)
:paragraph-2
:label)
:weight :medium
:style {:color (style/get-color blur? theme)}}
(str "+" number)]
[icons/icon :i/options
{:size icon-size
:color (style/get-color blur? theme)}])]))
(def view (quo.theme/with-theme view-internal))

3
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.number-tag.view
quo2.components.tags.permission-tag
quo2.components.tags.status-tags
quo2.components.tags.tag
@ -315,8 +316,8 @@
(def permission-tag quo2.components.tags.permission-tag/tag)
(def status-tag quo2.components.tags.status-tags/status-tag)
(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)
;;;; Title
(def title quo2.components.text-combinations.title.view/title)

3
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.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]
[status-im2.contexts.quo-preview.tags.tags :as tags]
@ -337,6 +338,8 @@
:component account-selector/preview-this}]
:tags [{:name :context-tags
:component context-tags/preview-context-tags}
{:name :number-tag
:component number-tag/preview}
{:name :tags
:component tags/preview-tags}
{:name :permission-tag

41
src/status_im2/contexts/quo_preview/tags/number_tag.cljs Normal file
View File

@ -0,0 +1,41 @@
(ns status-im2.contexts.quo-preview.tags.number-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
[{:key :type
:type :select
:options [{:key :rounded}
{:key :squared}]}
{:key :number
:type :text}
{:key :size
:type :select
:options [{:key :size/s-32
:value "32"}
{:key :size/s-24
:value "24"}
{:key :size/s-20
:value "20"}
{:key :size/s-16
:value "16"}
{:key :size/s-14
:value "14"}]}
{:key :blur?
:type :boolean}])
(defn preview
[]
(let [state (reagent/atom {:type :squared
:number "148"
:size :size/s-32
:blur? false})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo/number-tag @state]]])))