From 1b348943be0b491f103a1731d4f0ad186d294ed6 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 12 Oct 2023 13:49:02 +0200 Subject: [PATCH] Quo2: add tags/ tiny tag component (#17613) Co-authored-by: Rende11 --- .../tags/tiny_tag/component_spec.cljs | 15 +++++++++ src/quo2/components/tags/tiny_tag/style.cljs | 33 +++++++++++++++++++ src/quo2/components/tags/tiny_tag/view.cljs | 17 ++++++++++ src/quo2/core.cljs | 2 ++ src/status_im2/contexts/quo_preview/main.cljs | 3 ++ .../contexts/quo_preview/tags/tiny_tag.cljs | 26 +++++++++++++++ 6 files changed, 96 insertions(+) create mode 100644 src/quo2/components/tags/tiny_tag/component_spec.cljs create mode 100644 src/quo2/components/tags/tiny_tag/style.cljs create mode 100644 src/quo2/components/tags/tiny_tag/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs diff --git a/src/quo2/components/tags/tiny_tag/component_spec.cljs b/src/quo2/components/tags/tiny_tag/component_spec.cljs new file mode 100644 index 0000000000..641e8b4b3e --- /dev/null +++ b/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")))) diff --git a/src/quo2/components/tags/tiny_tag/style.cljs b/src/quo2/components/tags/tiny_tag/style.cljs new file mode 100644 index 0000000000..422fcb3d61 --- /dev/null +++ b/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)}) diff --git a/src/quo2/components/tags/tiny_tag/view.cljs b/src/quo2/components/tags/tiny_tag/view.cljs new file mode 100644 index 0000000000..834b56f9a2 --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index c6c5378af9..42cda56b2f 100644 --- a/src/quo2/core.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 72e95a832e..e85ffcd436 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs b/src/status_im2/contexts/quo_preview/tags/tiny_tag.cljs new file mode 100644 index 0000000000..b20368b014 --- /dev/null +++ b/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]]])))