Quo2: add tags/ tiny tag component (#17613)

Co-authored-by: Rende11 <artamonovn@gmail.com>

src/quo2/components/tags/tiny_tag/component_spec.cljs

@@ -0,0 +1,15 @@
+(ns quo2.components.tags.tiny-tag.component-spec
+  (:require [quo2.components.tags.tiny-tag.view :as tiny-tag]
+            [test-helpers.component :as h]))
+
+(h/describe "Tiny tag component test"
+  (h/test "1,000 SNT render"
+    (h/render [tiny-tag/view
+               {:label "1,000 SNT"
+                :blur? false}])
+    (h/is-truthy (h/get-by-text "1,000 SNT")))
+  (h/test "2,000 SNT render with blur"
+    (h/render [tiny-tag/view
+               {:label "2,000 SNT"
+                :blur? true}])
+    (h/is-truthy (h/get-by-text "2,000 SNT"))))

src/quo2/components/tags/tiny_tag/style.cljs

@@ -0,0 +1,33 @@
+(ns quo2.components.tags.tiny-tag.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-border-color
+  [blur? theme]
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
+    (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))
+
+(defn get-label-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)))
+
+(def main
+  {:justify-content :center
+   :align-items     :center
+   :height          16})
+
+(defn inner
+  [{:keys [blur? theme]}]
+  {:border-width    1
+   :border-radius   6
+   :border-color    (get-border-color blur? theme)
+   :justify-content :center
+   :align-items     :center
+   :padding-left    2
+   :padding-right   3})
+
+(defn label
+  [{:keys [blur? theme]}]
+  {:color (get-label-color blur? theme)})

src/quo2/components/tags/tiny_tag/view.cljs

@@ -0,0 +1,17 @@
+(ns quo2.components.tags.tiny-tag.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.theme :as quo.theme]
+            [quo2.components.tags.tiny-tag.style :as style]
+            [react-native.core :as rn]))
+
+(defn- view-internal
+  [{:keys [label] :as props}]
+  [rn/view {:style style/main}
+   [rn/view {:style (style/inner props)}
+    [text/text
+     {:style  (style/label props)
+      :weight :medium
+      :size   :label
+      :align  :center} label]]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -127,6 +127,7 @@
     quo2.components.tags.status-tags
     quo2.components.tags.tag
     quo2.components.tags.tags
+    quo2.components.tags.tiny-tag.view
     quo2.components.tags.token-tag
     quo2.components.text-combinations.view
     quo2.components.wallet.account-card.view
@@ -353,6 +354,7 @@
 (def status-tag quo2.components.tags.status-tags/status-tag)
 (def tag quo2.components.tags.tag/tag)
 (def tags quo2.components.tags.tags/tags)
+(def tiny-tag quo2.components.tags.tiny-tag.view/view)
 (def token-tag quo2.components.tags.token-tag/tag)
 
 ;;;; Text combinations

src/status_im2/contexts/quo_preview/main.cljs

@@ -146,6 +146,7 @@
     [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
     [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
     [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.preview :as
      text-combinations]
@@ -420,6 +421,8 @@
                         :component status-tags/preview-status-tags}
                        {:name      :tags
                         :component tags/preview-tags}
+                       {:name      :tiny-tag
+                        :component tiny-tag/preview-tiny-tag}
                        {:name      :token-tag
                         :component token-tag/preview-token-tag}]
    :text-combinations [{:name      :text-combinations

src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs

@@ -0,0 +1,26 @@
+(ns status-im2.contexts.quo-preview.tags.tiny-tag
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Blur?"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Label"
+    :key   :label
+    :type  :text}])
+
+(defn preview-tiny-tag
+  []
+  (let [state (reagent/atom {:blur? false
+                             :label "1,000 SNT"})]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [rn/view {:style {:align-items :center}}
+        [quo/tiny-tag @state]]])))