quo2 counter component (#13182)

src/quo2/components/counter.cljs

@@ -0,0 +1,57 @@
+(ns quo2.components.counter
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
+            [quo2.components.text :as text]
+            [quo2.foundations.colors :as colors]))
+
+(def themes
+  {:light {:default    colors/primary-50
+           :secondary  colors/black-opa-5
+           :grey       colors/neutral-30}
+   :dark  {:default    colors/primary-60
+           :secondary  colors/white-opa-10
+           :grey       colors/neutral-70}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn counter
+  "type:    default, secondary, grey
+   outline: true, false
+   value:   integer"
+  [{:keys [type outline]} value]
+  (let [type       (or type :default)
+        text-color (if (or
+                        (= (theme/get-theme) :dark)
+                        (and
+                         (= type :default)
+                         (not outline)))
+                     colors/white
+                     colors/black)
+        value      (if (integer? value)
+                     value
+                     (js/parseInt value))
+        label      (if (> value 99)
+                     "99+"
+                     (str value))
+        width      (case (count label)
+                     1     16
+                     2     20
+                     28)]
+    [rn/view {:style (cond-> {:align-items     :center
+                              :justify-content :center
+                              :border-radius   6
+                              :width           width
+                              :height          16}
+                       outline
+                       (merge {:border-width 1
+                               :border-color (get-color (or type :default))})
+
+                       (not outline)
+                       (assoc :background-color (get-color (or type :default)))
+
+                       (> value 99)
+                       (assoc :padding-left 0.5))}
+     [text/text {:weight :medium
+                 :size   :label
+                 :style  {:color text-color}} label]]))

src/quo2/foundations/typography.cljs

@@ -18,7 +18,7 @@
 
 (def label {:font-size   11
             :line-height 15.62
-            :letter-spacing 0.5})
+            :letter-spacing -0.055})
 
 (def font-regular {:font-family "Inter-Regular"}) ; 400
 
@@ -28,4 +28,4 @@
 
 (def font-bold {:font-family "Inter-Bold"}) ; 700
 
-(def monospace {:font-family "InterStatus-Regular"})
+(def monospace {:font-family "InterStatus-Regular"})

src/quo2/screens/counter.cljs

@@ -0,0 +1,40 @@
+(ns quo2.screens.counter
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [quo2.components.counter :as quo2]
+            [quo.design-system.colors :as colors]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :secondary
+                             :value "Secondary"}
+                            {:key   :grey
+                             :value "Gray"}]}
+                 {:label "Outline?:"
+                  :key   :outline
+                  :type  :boolean}
+                 {:label "Value"
+                  :key   :value
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:value 5 :type :default})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/counter @state (:value @state)]]])))
+
+(defn preview-counter []
+  [rn/view {:background-color (:ui-background @colors/theme)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -6,6 +6,7 @@
             [quo2.screens.button :as button]
             [quo2.screens.text :as text]
             [quo2.screens.tabs :as tabs]
+            [quo2.screens.counter :as counter]
             [quo2.screens.segmented :as segmented]
             [quo.core :as quo]))
 
@@ -20,7 +21,10 @@
                :component tabs/preview-tabs}
               {:name      :quo2-segmented
                :insets    {:top false}
-               :component segmented/preview-segmented}])
+               :component segmented/preview-segmented}
+              {:name      :quo2-counter
+               :insets    {:top false}
+               :component counter/preview-counter}])
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row
@@ -60,4 +64,4 @@
 
 (def main-screens [{:name      :quo2-preview
                     :insets    {:top false}
-                    :component main-screen}])
+                    :component main-screen}])