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

[#17923] text combinations - standard title component (#17939) 

* Simplify tag components by turning them to from-1

* Add standard-title component, preview screen and tests
This commit is contained in:
Ulises Manuel 2023-12-01 15:49:49 -06:00 committed by GitHub
parent f9f328107d
commit 3fee21c73a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 261 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/quo/components/tags/base_tag.cljs
View File

@ -17,30 +17,21 @@
{:width size})))
(defn base-tag
[_]
(fn
[{:keys [id
size
disabled?
border-color
border-width
background-color
on-press
accessibility-label
type
labelled?]
:or {size 32}} children]
[rn/touchable-without-feedback
(merge {:disabled disabled?
:accessibility-label accessibility-label}
(when on-press
{:on-press #(on-press id)}))
[rn/view
{:style (merge (style-container size
disabled?
border-color
border-width
background-color
labelled?
type))}
children]]))
[{:keys [id size disabled? border-color border-width background-color on-press
accessibility-label type labelled?]
:or {size 32}}
children]
[rn/touchable-without-feedback
(merge {:disabled disabled?
:accessibility-label accessibility-label}
(when on-press
{:on-press #(on-press id)}))
[rn/view
{:style (merge (style-container size
disabled?
border-color
border-width
background-color
labelled?
type))}
children]])

63
src/quo/components/tags/tag.cljs
View File

@ -4,7 +4,7 @@
[quo.components.markdown.text :as text]
[quo.components.tags.base-tag :as base-tag]
[quo.foundations.colors :as colors]
[quo.theme :as theme]
[quo.theme]
[react-native.core :as rn]))
(def themes
@ -81,39 +81,30 @@
- `blurred` boolean: use to determine border color if the background is blurred
- `type` can be icon or emoji with or without a tag label
- `labelled` boolean: is true if tag has label else false"
[_ _]
(fn
[{:keys [id
on-press
disabled?
size
active
accessibility-label
label
resource
type
labelled?
blurred?
icon-color
override-theme]
:or {size 32}}]
(let [state (cond disabled? :disabled
active :active
:else :default)
{:keys [border-color blurred-border-color text-color]}
(get-in themes [(or override-theme (theme/get-theme)) state])]
[rn/view {:style {:align-items :center}}
[base-tag/base-tag
{:id id
:size size
:border-width 1
:border-color (if blurred?
blurred-border-color
border-color)
:on-press on-press
:accessibility-label accessibility-label
:disabled? disabled?
:type type
:labelled? (if (= type :label) true labelled?)}
[tag-resources size type resource icon-color label text-color labelled?]]])))
[{:keys [id on-press disabled? size active accessibility-label label resource type
labelled? blurred? icon-color theme]
:or {size 32}}]
(let [state (cond
disabled? :disabled
active :active
:else :default)
{:keys [border-color
blurred-border-color
text-color]} (get-in themes [theme state])]
[rn/view {:style {:align-items :center}}
[base-tag/base-tag
{:id id
:size size
:border-width 1
:border-color (if blurred?
blurred-border-color
border-color)
:on-press on-press
:accessibility-label accessibility-label
:disabled? disabled?
:type type
:labelled? (if (= type :label) true labelled?)}
[tag-resources size type resource icon-color label text-color labelled?]]]))
(def tag (quo.theme/with-theme tag))

51
src/quo/components/text_combinations/standard_title/component_spec.cljs Normal file
View File

@ -0,0 +1,51 @@
(ns quo.components.text-combinations.standard-title.component-spec
(:require [quo.components.text-combinations.standard-title.view :as standard-title]
[test-helpers.component :as h]))
(h/describe "Text combinations - Standard title"
(h/test "Default render"
(h/render [standard-title/view {:title "This is a title"}])
(h/is-truthy (h/get-by-text "This is a title")))
(h/test "Counter variant"
(h/render [standard-title/view
{:title "This is a title"
:right :counter
:counter-left 50
:counter-right 100}])
(h/is-truthy (h/get-by-text "50/100")))
(h/describe "Action variant"
(h/test "Default render"
(let [on-press-fn (h/mock-fn)]
(h/render [standard-title/view
{:title "This is a title"
:right :action
:on-press on-press-fn}])
(h/is-truthy (h/get-by-text "This is a title"))))
(h/test "Action fired"
(let [on-press-fn (h/mock-fn)]
(h/render [standard-title/view
{:title "This is a title"
:right :action
:on-press on-press-fn}])
(h/fire-event :on-press (h/get-by-label-text :standard-title-action))
(h/was-called-times on-press-fn 1))))
(h/describe "Tag variant"
(h/test "Default render"
(h/render [standard-title/view
{:title "This is a title"
:right :tag}])
(h/is-truthy (h/get-by-text "This is a title")))
(h/test "Tag callback fired"
(let [on-press-fn (h/mock-fn)]
(h/render [standard-title/view
{:title "This is a title"
:right :tag
:on-press on-press-fn}])
(h/fire-event :on-press (h/get-by-label-text :standard-title-tag))
(h/was-called-times on-press-fn 1)))))

24
src/quo/components/text_combinations/standard_title/style.cljs Normal file
View File

@ -0,0 +1,24 @@
(ns quo.components.text-combinations.standard-title.style
(:require [quo.foundations.colors :as colors]))
(def container
{:flex-direction :row
:justify-content :space-between})
(def right-container {:margin-left 20})
(def right-counter
{:padding-top 12
:padding-bottom 2})
(defn right-counter-text
[blur? theme]
{:color (if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme))})
(defn right-tag-icon-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)))

68
src/quo/components/text_combinations/standard_title/view.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns quo.components.text-combinations.standard-title.view
(:require [clojure.string :as string]
[quo.components.buttons.button.view :as button]
[quo.components.markdown.text :as text]
[quo.components.tags.tag :as tag]
[quo.components.text-combinations.standard-title.style :as style]
[quo.theme]
[react-native.core :as rn]
[utils.number]))
(defn- get-counter-number
[n]
(let [parsed-number (utils.number/parse-int n)]
(if (< n 10)
(str "0" parsed-number)
parsed-number)))
(defn- right-counter
[{:keys [blur? theme counter-left counter-right]}]
[rn/view {:style style/right-counter}
[text/text
{:size :paragraph-2
:weight :regular
:style (style/right-counter-text blur? theme)}
(str (get-counter-number counter-left)
"/"
(get-counter-number counter-right))]])
(defn- right-action
[{:keys [customization-color on-press icon]
:or {icon :i/placeholder}}]
[button/button
{:accessibility-label :standard-title-action
:size 32
:icon-only? true
:customization-color customization-color
:on-press on-press}
icon])
(defn- right-tag
[{:keys [theme blur? on-press icon label]
:or {icon :i/placeholder}}]
(let [labelled? (not (string/blank? label))]
[tag/tag
{:accessibility-label :standard-title-tag
:size 32
:type :icon
:resource icon
:on-press on-press
:labelled? labelled?
:label (when labelled? label)
:blurred? blur?
:icon-color (style/right-tag-icon-color blur? theme)}]))
(defn- view-internal
[{:keys [title right] :as props}]
[rn/view {:style style/container}
[text/text {:size :heading-1 :weight :semi-bold}
title]
(when right
[rn/view {:style style/right-container}
(case right
:counter [right-counter props]
:action [right-action props]
:tag [right-tag props]
nil)])])
(def view (quo.theme/with-theme view-internal))

4
src/quo/core.cljs
View File

@ -139,6 +139,7 @@
quo.components.tags.tiny-tag.view
quo.components.tags.token-tag.view
quo.components.text-combinations.channel-name.view
quo.components.text-combinations.standard-title.view
quo.components.text-combinations.view
quo.components.wallet.account-card.view
quo.components.wallet.account-origin.view
@ -375,8 +376,9 @@
(def token-tag quo.components.tags.token-tag.view/view)
;;;; Text combinations
(def text-combinations quo.components.text-combinations.view/view)
(def channel-name quo.components.text-combinations.channel-name.view/view)
(def standard-title quo.components.text-combinations.standard-title.view/view)
(def text-combinations quo.components.text-combinations.view/view)
;;;; Wallet
(def account-card quo.components.wallet.account-card.view/view)

5
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -164,6 +164,7 @@
channel-name]
[status-im2.contexts.quo-preview.text-combinations.preview :as
text-combinations]
[status-im2.contexts.quo-preview.text-combinations.standard-title :as standard-title]
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
[status-im2.contexts.quo-preview.wallet.account-origin :as account-origin]
[status-im2.contexts.quo-preview.wallet.account-overview :as
@ -453,7 +454,9 @@
:text-combinations [{:name :text-combinations
:component text-combinations/view}
{:name :channel-name
:component channel-name/view}]
:component channel-name/view}
{:name :standard-title
:component standard-title/view}]
:wallet [{:name :account-card :component account-card/view}
{:name :account-origin :component account-origin/view}
{:name :account-overview

66
src/status_im2/contexts/quo_preview/text_combinations/standard_title.cljs Normal file
View File

@ -0,0 +1,66 @@
(ns status-im2.contexts.quo-preview.text-combinations.standard-title
(:require [quo.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :title :type :text}
{:key :right
:type :select
:options [{:key nil
:value "Nothing (nil)"}
{:key :counter}
{:key :action}
{:key :tag}]}
{:key :blur? :type :boolean}])
(def counter-descriptor
[{:key :counter-left
:type :select
:options (mapv (fn [n] {:key n})
(range 0 101 25))}
{:key :counter-right
:type :select
:options (mapv (fn [n] {:key n})
(range 0 101 25))}])
(def action-descriptor
[(preview/customization-color-option)
{:key :icon
:type :select
:options [{:key :i/placeholder}
{:key :i/info}
{:key :i/key}]}])
(def tag-descriptor
[{:key :icon
:type :select
:options [{:key :i/placeholder}
{:key :i/info}
{:key :i/key}]}
{:key :label
:type :text}])
(defn view
[]
(let [state (reagent/atom {:title "Title"
:blur? true
:right :counter
:counter-left 50
:counter-right 100
:on-press #(js/alert "Button clicked!")
:customization-color :army
:icon :i/placeholder
:label ""})]
(fn []
(let [typed-descriptor (case (:right @state)
:counter counter-descriptor
:action action-descriptor
:tag tag-descriptor
nil)]
[preview/preview-container
{:state state
:descriptor (concat descriptor typed-descriptor)
:show-blur-background? true
:blur? (:blur? @state)}
[quo/standard-title @state]]))))