diff --git a/src/quo2/components/tags/number_tag/component_spec.cljs b/src/quo2/components/tags/number_tag/component_spec.cljs new file mode 100644 index 0000000000..44de6e69ea --- /dev/null +++ b/src/quo2/components/tags/number_tag/component_spec.cljs @@ -0,0 +1,20 @@ +(ns quo2.components.tags.number-tag.component-spec + (:require [quo2.components.tags.number-tag.view :as number-tag] + [test-helpers.component :as h])) + +(h/describe + "number tag component test" + (h/test "+3 render" + (h/render [number-tag/view + {:type :rounded + :number "3" + :size :size/s-32 + :blur? false}]) + (h/is-truthy (h/get-by-text "+3"))) + (h/test "+48 render" + (h/render [number-tag/view + {:type :squared + :number "48" + :size :size/s-24 + :blur? true}]) + (h/is-truthy (h/get-by-text "+48")))) diff --git a/src/quo2/components/tags/number_tag/style.cljs b/src/quo2/components/tags/number_tag/style.cljs new file mode 100644 index 0000000000..b8ea4303bd --- /dev/null +++ b/src/quo2/components/tags/number_tag/style.cljs @@ -0,0 +1,64 @@ +(ns quo2.components.tags.number-tag.style + (:require [quo2.foundations.colors :as colors])) + +(def sizes + {:size/s-32 {:size 32 + :width-extra 40 + :border-radius {:rounded 16 :squared 10} + :icon-size 20} + :size/s-24 {:size 24 + :width-extra 32 + :border-radius {:rounded 12 :squared 8} + :icon-size 16} + :size/s-20 {:size 20 + :width-extra 24 + :border-radius {:rounded 10 :squared 8} + :icon-size 12} + :size/s-16 {:size 16 + :width-extra 20 + :border-radius {:rounded 8 :squared 8} + :icon-size 12} + :size/s-14 {:size 14 + :width-extra 16 + :border-radius {:rounded 7 :squared 7} + :icon-size 12}}) + +(defn get-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))) + +(defn get-bg-color + [blur? theme] + (if blur? + (colors/theme-colors colors/neutral-80-opa-5 + colors/white-opa-5 + theme) + (colors/theme-colors colors/neutral-20 + colors/neutral-90 + theme))) + +(defn get-shape-value + [size attribute shape] + (let [shapes (get-in sizes [size attribute])] + (when shapes (or (shape shapes) (first (vals shapes)))))) + +(defn get-width + [size number] + (let [size-value (get-in sizes [size :size]) + widen? (and (> size-value 20) (= (count number) 2))] + (get-in sizes [size (if widen? :width-extra :size)]))) + +(defn container + [{:keys [type number size blur? theme]}] + {:style {:width (get-width size number) + :height (get-in sizes [size :size]) + :border-radius (get-shape-value size :border-radius type) + :justify-content :center + :align-items :center + :background-color (get-bg-color blur? theme)}}) diff --git a/src/quo2/components/tags/number_tag/view.cljs b/src/quo2/components/tags/number_tag/view.cljs new file mode 100644 index 0000000000..a3b06f0192 --- /dev/null +++ b/src/quo2/components/tags/number_tag/view.cljs @@ -0,0 +1,25 @@ +(ns quo2.components.tags.number-tag.view + (:require [quo2.components.icon :as icons] + [quo2.components.markdown.text :as text] + [react-native.core :as rn] + [quo2.components.tags.number-tag.style :as style] + [quo2.theme :as quo.theme])) + +(defn view-internal + [{:keys [number size blur? theme] :as props}] + (let [size-value (get-in style/sizes [size :size]) + icon-size (get-in style/sizes [size :icon-size])] + [rn/view (style/container props) + (if (and (> size-value 20) (< (count number) 3)) + [text/text + {:size (if (= size :size/s-32) + :paragraph-2 + :label) + :weight :medium + :style {:color (style/get-color blur? theme)}} + (str "+" number)] + [icons/icon :i/options + {:size icon-size + :color (style/get-color blur? theme)}])])) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 5a9cf70b9e..0018764f56 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -107,6 +107,7 @@ quo2.components.tabs.segmented-tab quo2.components.tabs.tabs.view quo2.components.tags.context-tag.view + quo2.components.tags.number-tag.view quo2.components.tags.permission-tag quo2.components.tags.status-tags quo2.components.tags.tag @@ -315,8 +316,8 @@ (def permission-tag quo2.components.tags.permission-tag/tag) (def status-tag quo2.components.tags.status-tags/status-tag) (def token-tag quo2.components.tags.token-tag/tag) - (def context-tag quo2.components.tags.context-tag.view/view) +(def number-tag quo2.components.tags.number-tag.view/view) ;;;; Title (def title quo2.components.text-combinations.title.view/title) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 91b6f3679e..6baaedc336 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -104,6 +104,7 @@ [status-im2.contexts.quo-preview.tabs.tabs :as tabs] [status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state] [status-im2.contexts.quo-preview.tags.context-tags :as context-tags] + [status-im2.contexts.quo-preview.tags.number-tag :as number-tag] [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] @@ -337,6 +338,8 @@ :component account-selector/preview-this}] :tags [{:name :context-tags :component context-tags/preview-context-tags} + {:name :number-tag + :component number-tag/preview} {:name :tags :component tags/preview-tags} {:name :permission-tag diff --git a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs new file mode 100644 index 0000000000..2634c8006a --- /dev/null +++ b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs @@ -0,0 +1,41 @@ +(ns status-im2.contexts.quo-preview.tags.number-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 + [{:key :type + :type :select + :options [{:key :rounded} + {:key :squared}]} + {:key :number + :type :text} + {:key :size + :type :select + :options [{:key :size/s-32 + :value "32"} + {:key :size/s-24 + :value "24"} + {:key :size/s-20 + :value "20"} + {:key :size/s-16 + :value "16"} + {:key :size/s-14 + :value "14"}]} + {:key :blur? + :type :boolean}]) + +(defn preview + [] + (let [state (reagent/atom {:type :squared + :number "148" + :size :size/s-32 + :blur? false})] + (fn [] + [preview/preview-container {:state state :descriptor descriptor} + [rn/view + {:padding-vertical 60 + :flex-direction :row + :justify-content :center} + [quo/number-tag @state]]])))