Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#17897] Add channel-name component #17903

Merged
merged 1 commit into from
Nov 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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 changes: 30 additions & 0 deletions src/quo/components/text_combinations/channel_name/style.cljs
Original file line number Diff line number Diff line change
@@ -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 changes: 40 additions & 0 deletions src/quo/components/text_combinations/channel_name/view.cljs
Original file line number Diff line number Diff line change
@@ -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)]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if we should put the hashtag symbol at the end for RTL languages. We should revisit this in the future when we start adding new languages to the app.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, interesting.

All the channel names should change if so 🤔 I'm wondering the same.

(when (or unlocked? muted?)
[icons props])])

(def view (quo.theme/with-theme view-internal))
2 changes: 2 additions & 0 deletions src/quo/core.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down
1 change: 1 addition & 0 deletions src/quo/core_spec.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
6 changes: 5 additions & 1 deletion src/status_im2/contexts/quo_preview/main.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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]])))