quo2 counter component

src/quo2/components/counter.cljs

@@ -0,0 +1,38 @@
+(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 [{:keys [type outline]} label]
+  (let [type       (or type :default)
+        text-color (if (or
+                        (= (theme/get-theme) :dark)
+                        (and
+                         (= type :default)
+                         (not outline)))
+                     colors/white
+                     colors/black)]
+    [rn/view {:style (merge
+                      (if outline
+                        {:border-width 1
+                         :border-color (get-color (or type :default))}
+                        {:background-color (get-color (or type :default))})
+                      {:border-radius      6
+                       :align-self         :center
+                       :padding-vertical   2
+                       :padding-horizontal 6})}
+     [text/text {:weight :medium
+                 :size   :label
+                 :style  {:color text-color}} label]]))

src/quo2/screens/counter.cljs

@@ -0,0 +1,39 @@
+(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 "Label"
+                  :key   :label
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:label 5 :type :default})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60}
+        [quo2/counter @state (:label @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}])