Skip to content

Commit 3fee21c

Browse files
ulisesmaculisesmac
authored
[#17923] text combinations - standard title component (#17939)
* Simplify tag components by turning them to from-1 * Add standard-title component, preview screen and tests
1 parent f9f3281 commit 3fee21c

File tree

8 files changed

+261
-65
lines changed

8 files changed

+261
-65
lines changed

‎src/quo/components/tags/base_tag.cljs

+18-27
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,21 @@
1717
{:width size})))
1818

1919
(defn base-tag
20-
[_]
21-
(fn
22-
[{:keys [id
23-
size
24-
disabled?
25-
border-color
26-
border-width
27-
background-color
28-
on-press
29-
accessibility-label
30-
type
31-
labelled?]
32-
:or {size 32}} children]
33-
[rn/touchable-without-feedback
34-
(merge {:disabled disabled?
35-
:accessibility-label accessibility-label}
36-
(when on-press
37-
{:on-press #(on-press id)}))
38-
[rn/view
39-
{:style (merge (style-container size
40-
disabled?
41-
border-color
42-
border-width
43-
background-color
44-
labelled?
45-
type))}
46-
children]]))
20+
[{:keys [id size disabled? border-color border-width background-color on-press
21+
accessibility-label type labelled?]
22+
:or {size 32}}
23+
children]
24+
[rn/touchable-without-feedback
25+
(merge {:disabled disabled?
26+
:accessibility-label accessibility-label}
27+
(when on-press
28+
{:on-press #(on-press id)}))
29+
[rn/view
30+
{:style (merge (style-container size
31+
disabled?
32+
border-color
33+
border-width
34+
background-color
35+
labelled?
36+
type))}
37+
children]])

‎src/quo/components/tags/tag.cljs

+27-36
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
[quo.components.markdown.text :as text]
55
[quo.components.tags.base-tag :as base-tag]
66
[quo.foundations.colors :as colors]
7-
[quo.theme :as theme]
7+
[quo.theme]
88
[react-native.core :as rn]))
99

1010
(def themes
@@ -81,39 +81,30 @@
8181
- `blurred` boolean: use to determine border color if the background is blurred
8282
- `type` can be icon or emoji with or without a tag label
8383
- `labelled` boolean: is true if tag has label else false"
84-
[_ _]
85-
(fn
86-
[{:keys [id
87-
on-press
88-
disabled?
89-
size
90-
active
91-
accessibility-label
92-
label
93-
resource
94-
type
95-
labelled?
96-
blurred?
97-
icon-color
98-
override-theme]
99-
:or {size 32}}]
100-
(let [state (cond disabled? :disabled
101-
active :active
102-
:else :default)
103-
{:keys [border-color blurred-border-color text-color]}
104-
(get-in themes [(or override-theme (theme/get-theme)) state])]
105-
[rn/view {:style {:align-items :center}}
106-
[base-tag/base-tag
107-
{:id id
108-
:size size
109-
:border-width 1
110-
:border-color (if blurred?
111-
blurred-border-color
112-
border-color)
113-
:on-press on-press
114-
:accessibility-label accessibility-label
115-
:disabled? disabled?
116-
:type type
117-
:labelled? (if (= type :label) true labelled?)}
118-
[tag-resources size type resource icon-color label text-color labelled?]]])))
84+
[{:keys [id on-press disabled? size active accessibility-label label resource type
85+
labelled? blurred? icon-color theme]
86+
:or {size 32}}]
87+
(let [state (cond
88+
disabled? :disabled
89+
active :active
90+
:else :default)
91+
{:keys [border-color
92+
blurred-border-color
93+
text-color]} (get-in themes [theme state])]
94+
[rn/view {:style {:align-items :center}}
95+
[base-tag/base-tag
96+
{:id id
97+
:size size
98+
:border-width 1
99+
:border-color (if blurred?
100+
blurred-border-color
101+
border-color)
102+
:on-press on-press
103+
:accessibility-label accessibility-label
104+
:disabled? disabled?
105+
:type type
106+
:labelled? (if (= type :label) true labelled?)}
107+
[tag-resources size type resource icon-color label text-color labelled?]]]))
108+
109+
(def tag (quo.theme/with-theme tag))
119110

‎src/quo/components/text_combinations/standard_title/component_spec.cljs

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
(ns quo.components.text-combinations.standard-title.component-spec
2+
(:require [quo.components.text-combinations.standard-title.view :as standard-title]
3+
[test-helpers.component :as h]))
4+
5+
(h/describe "Text combinations - Standard title"
6+
(h/test "Default render"
7+
(h/render [standard-title/view {:title "This is a title"}])
8+
(h/is-truthy (h/get-by-text "This is a title")))
9+
10+
(h/test "Counter variant"
11+
(h/render [standard-title/view
12+
{:title "This is a title"
13+
:right :counter
14+
:counter-left 50
15+
:counter-right 100}])
16+
(h/is-truthy (h/get-by-text "50/100")))
17+
18+
(h/describe "Action variant"
19+
(h/test "Default render"
20+
(let [on-press-fn (h/mock-fn)]
21+
(h/render [standard-title/view
22+
{:title "This is a title"
23+
:right :action
24+
:on-press on-press-fn}])
25+
(h/is-truthy (h/get-by-text "This is a title"))))
26+
27+
(h/test "Action fired"
28+
(let [on-press-fn (h/mock-fn)]
29+
(h/render [standard-title/view
30+
{:title "This is a title"
31+
:right :action
32+
:on-press on-press-fn}])
33+
34+
(h/fire-event :on-press (h/get-by-label-text :standard-title-action))
35+
(h/was-called-times on-press-fn 1))))
36+
37+
(h/describe "Tag variant"
38+
(h/test "Default render"
39+
(h/render [standard-title/view
40+
{:title "This is a title"
41+
:right :tag}])
42+
(h/is-truthy (h/get-by-text "This is a title")))
43+
44+
(h/test "Tag callback fired"
45+
(let [on-press-fn (h/mock-fn)]
46+
(h/render [standard-title/view
47+
{:title "This is a title"
48+
:right :tag
49+
:on-press on-press-fn}])
50+
(h/fire-event :on-press (h/get-by-label-text :standard-title-tag))
51+
(h/was-called-times on-press-fn 1)))))

‎src/quo/components/text_combinations/standard_title/style.cljs

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
(ns quo.components.text-combinations.standard-title.style
2+
(:require [quo.foundations.colors :as colors]))
3+
4+
(def container
5+
{:flex-direction :row
6+
:justify-content :space-between})
7+
8+
(def right-container {:margin-left 20})
9+
10+
(def right-counter
11+
{:padding-top 12
12+
:padding-bottom 2})
13+
14+
(defn right-counter-text
15+
[blur? theme]
16+
{:color (if blur?
17+
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
18+
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme))})
19+
20+
(defn right-tag-icon-color
21+
[blur? theme]
22+
(if blur?
23+
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
24+
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))

‎src/quo/components/text_combinations/standard_title/view.cljs

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
(ns quo.components.text-combinations.standard-title.view
2+
(:require [clojure.string :as string]
3+
[quo.components.buttons.button.view :as button]
4+
[quo.components.markdown.text :as text]
5+
[quo.components.tags.tag :as tag]
6+
[quo.components.text-combinations.standard-title.style :as style]
7+
[quo.theme]
8+
[react-native.core :as rn]
9+
[utils.number]))
10+
11+
(defn- get-counter-number
12+
[n]
13+
(let [parsed-number (utils.number/parse-int n)]
14+
(if (< n 10)
15+
(str "0" parsed-number)
16+
parsed-number)))
17+
18+
(defn- right-counter
19+
[{:keys [blur? theme counter-left counter-right]}]
20+
[rn/view {:style style/right-counter}
21+
[text/text
22+
{:size :paragraph-2
23+
:weight :regular
24+
:style (style/right-counter-text blur? theme)}
25+
(str (get-counter-number counter-left)
26+
"/"
27+
(get-counter-number counter-right))]])
28+
29+
(defn- right-action
30+
[{:keys [customization-color on-press icon]
31+
:or {icon :i/placeholder}}]
32+
[button/button
33+
{:accessibility-label :standard-title-action
34+
:size 32
35+
:icon-only? true
36+
:customization-color customization-color
37+
:on-press on-press}
38+
icon])
39+
40+
(defn- right-tag
41+
[{:keys [theme blur? on-press icon label]
42+
:or {icon :i/placeholder}}]
43+
(let [labelled? (not (string/blank? label))]
44+
[tag/tag
45+
{:accessibility-label :standard-title-tag
46+
:size 32
47+
:type :icon
48+
:resource icon
49+
:on-press on-press
50+
:labelled? labelled?
51+
:label (when labelled? label)
52+
:blurred? blur?
53+
:icon-color (style/right-tag-icon-color blur? theme)}]))
54+
55+
(defn- view-internal
56+
[{:keys [title right] :as props}]
57+
[rn/view {:style style/container}
58+
[text/text {:size :heading-1 :weight :semi-bold}
59+
title]
60+
(when right
61+
[rn/view {:style style/right-container}
62+
(case right
63+
:counter [right-counter props]
64+
:action [right-action props]
65+
:tag [right-tag props]
66+
nil)])])
67+
68+
(def view (quo.theme/with-theme view-internal))

‎src/quo/core.cljs

+3-1
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@
139139
quo.components.tags.tiny-tag.view
140140
quo.components.tags.token-tag.view
141141
quo.components.text-combinations.channel-name.view
142+
quo.components.text-combinations.standard-title.view
142143
quo.components.text-combinations.view
143144
quo.components.wallet.account-card.view
144145
quo.components.wallet.account-origin.view
@@ -375,8 +376,9 @@
375376
(def token-tag quo.components.tags.token-tag.view/view)
376377

377378
;;;; Text combinations
378-
(def text-combinations quo.components.text-combinations.view/view)
379379
(def channel-name quo.components.text-combinations.channel-name.view/view)
380+
(def standard-title quo.components.text-combinations.standard-title.view/view)
381+
(def text-combinations quo.components.text-combinations.view/view)
380382

381383
;;;; Wallet
382384
(def account-card quo.components.wallet.account-card.view/view)

‎src/status_im2/contexts/quo_preview/main.cljs

+4-1
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@
164164
channel-name]
165165
[status-im2.contexts.quo-preview.text-combinations.preview :as
166166
text-combinations]
167+
[status-im2.contexts.quo-preview.text-combinations.standard-title :as standard-title]
167168
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
168169
[status-im2.contexts.quo-preview.wallet.account-origin :as account-origin]
169170
[status-im2.contexts.quo-preview.wallet.account-overview :as
@@ -453,7 +454,9 @@
453454
:text-combinations [{:name :text-combinations
454455
:component text-combinations/view}
455456
{:name :channel-name
456-
:component channel-name/view}]
457+
:component channel-name/view}
458+
{:name :standard-title
459+
:component standard-title/view}]
457460
:wallet [{:name :account-card :component account-card/view}
458461
{:name :account-origin :component account-origin/view}
459462
{:name :account-overview

‎src/status_im2/contexts/quo_preview/text_combinations/standard_title.cljs

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
(ns status-im2.contexts.quo-preview.text-combinations.standard-title
2+
(:require [quo.core :as quo]
3+
[reagent.core :as reagent]
4+
[status-im2.contexts.quo-preview.preview :as preview]))
5+
6+
(def descriptor
7+
[{:key :title :type :text}
8+
{:key :right
9+
:type :select
10+
:options [{:key nil
11+
:value "Nothing (nil)"}
12+
{:key :counter}
13+
{:key :action}
14+
{:key :tag}]}
15+
{:key :blur? :type :boolean}])
16+
17+
(def counter-descriptor
18+
[{:key :counter-left
19+
:type :select
20+
:options (mapv (fn [n] {:key n})
21+
(range 0 101 25))}
22+
{:key :counter-right
23+
:type :select
24+
:options (mapv (fn [n] {:key n})
25+
(range 0 101 25))}])
26+
27+
(def action-descriptor
28+
[(preview/customization-color-option)
29+
{:key :icon
30+
:type :select
31+
:options [{:key :i/placeholder}
32+
{:key :i/info}
33+
{:key :i/key}]}])
34+
35+
(def tag-descriptor
36+
[{:key :icon
37+
:type :select
38+
:options [{:key :i/placeholder}
39+
{:key :i/info}
40+
{:key :i/key}]}
41+
{:key :label
42+
:type :text}])
43+
44+
(defn view
45+
[]
46+
(let [state (reagent/atom {:title "Title"
47+
:blur? true
48+
:right :counter
49+
:counter-left 50
50+
:counter-right 100
51+
:on-press #(js/alert "Button clicked!")
52+
:customization-color :army
53+
:icon :i/placeholder
54+
:label ""})]
55+
(fn []
56+
(let [typed-descriptor (case (:right @state)
57+
:counter counter-descriptor
58+
:action action-descriptor
59+
:tag tag-descriptor
60+
nil)]
61+
[preview/preview-container
62+
{:state state
63+
:descriptor (concat descriptor typed-descriptor)
64+
:show-blur-background? true
65+
:blur? (:blur? @state)}
66+
[quo/standard-title @state]]))))

0 commit comments

Comments
 (0)