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 channel-name component (#17903)

This commit is contained in:
Ulises Manuel 2023-11-22 15:54:52 -06:00 committed by GitHub
parent 0c1a18b444
commit 279993b658
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 135 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/quo/components/text_combinations/channel_name/component_spec.cljs Normal file
View File

@ -0,0 +1,28 @@
(ns quo.components.text-combinations.channel-name.component-spec
(:require [quo.components.text-combinations.channel-name.view :as channel-name]
[test-helpers.component :as h]))
(h/describe "Channel name"
(h/test "Renders Default"
(h/render [channel-name/view {:channel-name "Test channel"}])
(h/is-truthy (h/get-by-text "# Test channel")))
(h/test "Renders unlocked icon"
(h/render [channel-name/view
{:channel-name "Test channel"
:unlocked? true}])
(h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon)))
(h/test "Renders muted icon"
(h/render [channel-name/view
{:channel-name "Test channel"
:muted? true}])
(h/is-truthy (h/get-by-label-text :channel-name-muted-icon)))
(h/test "Renders muted and unlocked icon"
(h/render [channel-name/view
{:channel-name "Test channel"
:muted? true
:unlocked? true}])
(h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon))
(h/is-truthy (h/get-by-label-text :channel-name-muted-icon))))

30
src/quo/components/text_combinations/channel_name/style.cljs Normal file
View File

@ -0,0 +1,30 @@
(ns quo.components.text-combinations.channel-name.style
(:require [quo.foundations.colors :as colors]))
(def container {:flex-direction :row})
(def icons-container
{:flex-direction :row
:padding-top 8
:padding-bottom 4
:margin-left 6})
(def icon {:width 20 :height 20})
(def icons-gap {:width 4})
(defn- blur-icon-color
[theme]
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme))
(defn unlocked-icon-color
[theme blur?]
(if blur?
(blur-icon-color theme)
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(defn muted-icon-color
[theme blur?]
(if blur?
(blur-icon-color theme)
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))

40
src/quo/components/text_combinations/channel_name/view.cljs Normal file
View File

@ -0,0 +1,40 @@
(ns quo.components.text-combinations.channel-name.view
(:require [quo.components.icon :as icon]
[quo.components.markdown.text :as text]
[quo.components.text-combinations.channel-name.style :as style]
[quo.theme]
[react-native.core :as rn]))
(defn icons
[{:keys [theme unlocked? muted? blur?]}]
[rn/view {:style style/icons-container}
(when unlocked?
[rn/view
{:style style/icon
:accessibility-label :channel-name-unlocked-icon}
[icon/icon :i/unlocked
{:color (style/unlocked-icon-color theme blur?)
:size 20}]])
(when (and unlocked? muted?)
[rn/view {:style style/icons-gap}])
(when muted?
[rn/view
{:style style/icon
:accessibility-label :channel-name-muted-icon}
[icon/icon :i/muted
{:color (style/muted-icon-color theme blur?)
:size 20}]])])
(defn- view-internal
[{:keys [unlocked? muted? channel-name] :as props}]
[rn/view {:style style/container}
[text/text
{:size :heading-1
:weight :semi-bold}
(str "# " channel-name)]
(when (or unlocked? muted?)
[icons props])])
(def view (quo.theme/with-theme view-internal))

2
src/quo/core.cljs
View File

@ -136,6 +136,7 @@
quo.components.tags.tags
quo.components.tags.tiny-tag.view
quo.components.tags.token-tag.view
quo.components.text-combinations.channel-name.view
quo.components.text-combinations.view
quo.components.wallet.account-card.view
quo.components.wallet.account-origin.view
@ -369,6 +370,7 @@
;;;; Text combinations
(def text-combinations quo.components.text-combinations.view/view)
(def channel-name quo.components.text-combinations.channel-name.view/view)
;;;; Wallet
(def account-card quo.components.wallet.account-card.view/view)

1
src/quo/core_spec.cljs
View File

@ -75,6 +75,7 @@
[quo.components.tags.status-tags-component-spec]
[quo.components.tags.summary-tag.component-spec]
[quo.components.tags.tiny-tag.component-spec]
[quo.components.text-combinations.channel-name.component-spec]
[quo.components.wallet.account-card.component-spec]
[quo.components.wallet.account-origin.component-spec]
[quo.components.wallet.account-overview.component-spec]

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

@ -158,6 +158,8 @@
[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.text-combinations.channel-name :as
channel-name]
[status-im2.contexts.quo-preview.text-combinations.preview :as
text-combinations]
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
@ -445,7 +447,9 @@
{:name :token-tag
:component token-tag/view}]
:text-combinations [{:name :text-combinations
:component text-combinations/view}]
:component text-combinations/view}
{:name :channel-name
:component channel-name/view}]
:wallet [{:name :account-card :component account-card/view}
{:name :account-origin :component account-origin/view}
{:name :account-overview

29
src/status_im2/contexts/quo_preview/text_combinations/channel_name.cljs Normal file
View File

@ -0,0 +1,29 @@
(ns status-im2.contexts.quo-preview.text-combinations.channel-name
(:require [quo.core :as quo]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :channel-name
:type :text}
{:key :unlocked?
:type :boolean}
{:key :muted?
:type :boolean}
{:key :blur?
:type :boolean}])
(defn view
[]
(let [state (reagent/atom {:channel-name "random"
:unlocked? true
:muted? true
:blur? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:show-blur-background? true
:blur? (:blur? @state)}
[quo/channel-name @state]])))