diff --git a/src/quo/components/text_combinations/channel_name/component_spec.cljs b/src/quo/components/text_combinations/channel_name/component_spec.cljs new file mode 100644 index 00000000000..5cb10886741 --- /dev/null +++ b/src/quo/components/text_combinations/channel_name/component_spec.cljs @@ -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)))) diff --git a/src/quo/components/text_combinations/channel_name/style.cljs b/src/quo/components/text_combinations/channel_name/style.cljs new file mode 100644 index 00000000000..86fd9455d17 --- /dev/null +++ b/src/quo/components/text_combinations/channel_name/style.cljs @@ -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))) diff --git a/src/quo/components/text_combinations/channel_name/view.cljs b/src/quo/components/text_combinations/channel_name/view.cljs new file mode 100644 index 00000000000..f50c1c9286e --- /dev/null +++ b/src/quo/components/text_combinations/channel_name/view.cljs @@ -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)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 4ca0c950530..38f1600d423 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -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) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index 90f00aea16f..a96fe3cc6ad 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -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] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index c495ec8ead6..64dc8d70248 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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 diff --git a/src/status_im2/contexts/quo_preview/text_combinations/channel_name.cljs b/src/status_im2/contexts/quo_preview/text_combinations/channel_name.cljs new file mode 100644 index 00000000000..f4976b26945 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/text_combinations/channel_name.cljs @@ -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]])))