diff --git a/src/quo/components/tags/base_tag.cljs b/src/quo/components/tags/base_tag.cljs index 70a0e9ac4c..92a578460a 100644 --- a/src/quo/components/tags/base_tag.cljs +++ b/src/quo/components/tags/base_tag.cljs @@ -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]]) diff --git a/src/quo/components/tags/tag.cljs b/src/quo/components/tags/tag.cljs index 9ecf5559d1..b989e4f010 100644 --- a/src/quo/components/tags/tag.cljs +++ b/src/quo/components/tags/tag.cljs @@ -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)) diff --git a/src/quo/components/text_combinations/standard_title/component_spec.cljs b/src/quo/components/text_combinations/standard_title/component_spec.cljs new file mode 100644 index 0000000000..c690299359 --- /dev/null +++ b/src/quo/components/text_combinations/standard_title/component_spec.cljs @@ -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))))) diff --git a/src/quo/components/text_combinations/standard_title/style.cljs b/src/quo/components/text_combinations/standard_title/style.cljs new file mode 100644 index 0000000000..18672e5af7 --- /dev/null +++ b/src/quo/components/text_combinations/standard_title/style.cljs @@ -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))) diff --git a/src/quo/components/text_combinations/standard_title/view.cljs b/src/quo/components/text_combinations/standard_title/view.cljs new file mode 100644 index 0000000000..9633f9fc97 --- /dev/null +++ b/src/quo/components/text_combinations/standard_title/view.cljs @@ -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)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 88ab14de0f..9517b127da 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -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) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 9323f2e6d3..5cebbb7a8d 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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 diff --git a/src/status_im2/contexts/quo_preview/text_combinations/standard_title.cljs b/src/status_im2/contexts/quo_preview/text_combinations/standard_title.cljs new file mode 100644 index 0000000000..87e249a9aa --- /dev/null +++ b/src/status_im2/contexts/quo_preview/text_combinations/standard_title.cljs @@ -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]]))))