Info message component

src/quo2/components/info_message.cljs

@@ -0,0 +1,40 @@
+(ns quo2.components.info-message
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
+            [quo2.components.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as quo2.icons]))
+
+(def themes
+  {:light {:default      colors/neutral-40
+           :success      colors/success-50
+           :error        colors/danger-50}
+   :dark  {:default      colors/neutral-60
+           :success      colors/success-60
+           :error        colors/danger-60}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn info-message
+  "[info-message opts \"message\"]
+  opts
+  {:type       :default/:success/:error
+   :size       :default/:tiny
+   :icon       :main-icons/info ;; info message icon
+   :text-color colors/white     ;; text color override
+   :icon-color colors/white     ;; icon color override"
+  [{:keys [type size icon text-color icon-color]} message]
+  (let [weight      (if (= size :default) :regular :medium)
+        size        (if (= size :default) :paragraph-2 :label)
+        text-color  (or text-color (get-color type))
+        icon-color  (or icon-color text-color)]
+    [rn/view {:style {:flex-direction :row
+                      :flex           1}}
+     [quo2.icons/icon icon {:color           icon-color
+                            :size            12
+                            :container-style {:margin-top 3}}]
+     [text/text {:size   size
+                 :weight weight
+                 :style  {:color             text-color
+                          :margin-horizontal 8}} message]]))

src/quo2/screens/info_message.cljs

@@ -0,0 +1,47 @@
+(ns quo2.screens.info-message
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.info-message :as quo2]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :success
+                             :value "Success"}
+                            {:key   :error
+                             :value "Error"}]}
+                 {:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :tiny
+                             :value "Tiny"}]}
+                 {:label "Message"
+                  :key   :message
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:type    :default
+                             :size    :default
+                             :icon    :main-icons2/placeholder
+                             :message "This is a message"})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/info-message @state (:message @state)]]])))
+
+(defn preview-info-message []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])