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

* Simplify tag components by turning them to from-1

* Add standard-title component, preview screen and tests

src/quo/components/tags/base_tag.cljs

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

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"
-  [_ _]
+  [{:keys [id on-press disabled? size active accessibility-label label resource type
-  (fn
+           labelled? blurred? icon-color theme]
-    [{:keys [id
+    :or   {size 32}}]
-             on-press
+  (let [state                (cond
-             disabled?
+                               disabled? :disabled
-             size
+                               active    :active
-             active
+                               :else     :default)
-             accessibility-label
+        {:keys [border-color
-             label
+                blurred-border-color
-             resource
+                text-color]} (get-in themes [theme state])]
-             type
+    [rn/view {:style {:align-items :center}}
-             labelled?
+     [base-tag/base-tag
-             blurred?
+      {:id                  id
-             icon-color
+       :size                size
-             override-theme]
+       :border-width        1
-      :or   {size 32}}]
+       :border-color        (if blurred?
-    (let [state (cond disabled? :disabled
+                              blurred-border-color
-                      active    :active
+                              border-color)
-                      :else     :default)
+       :on-press            on-press
-          {:keys [border-color blurred-border-color text-color]}
+       :accessibility-label accessibility-label
-          (get-in themes [(or override-theme (theme/get-theme)) state])]
+       :disabled?           disabled?
-      [rn/view {:style {:align-items :center}}
+       :type                type
-       [base-tag/base-tag
+       :labelled?           (if (= type :label) true labelled?)}
-        {:id                  id
+      [tag-resources size type resource icon-color label text-color labelled?]]]))
-         :size                size
+
-         :border-width        1
+(def tag (quo.theme/with-theme tag))
-         :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?]]])))
 

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)))))

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)))

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))

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)

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

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]]))))