From c1ca92959cdbb57be016a4d505168ba13a916057 Mon Sep 17 00:00:00 2001
From: Parvesh Monu <parvesh.dhullmonu@gmail.com>
Date: Thu, 11 Aug 2022 21:48:05 +0530
Subject: [PATCH] Information box component

---
 resources/images/icons/close12@2x.png    | Bin 335 -> 225 bytes
 resources/images/icons/close12@3x.png    | Bin 468 -> 271 bytes
 src/quo2/components/information_box.cljs |  91 +++++++++++++++++++++++
 src/quo2/screens/information_box.cljs    |  51 +++++++++++++
 src/quo2/screens/main.cljs               |  10 ++-
 5 files changed, 151 insertions(+), 1 deletion(-)
 create mode 100644 src/quo2/components/information_box.cljs
 create mode 100644 src/quo2/screens/information_box.cljs

diff --git a/resources/images/icons/close12@2x.png b/resources/images/icons/close12@2x.png
index c7bd9e2e9533dc6f91b8b4c44fd8cebb407dc8fc..bfbb29ac987090f21154a748a495018be6aae27a 100644
GIT binary patch
delta 147
zcmV;E0Brxy0^tFWR)2O$L_t(|0qvAa4uBvKLmN-h8{&;U3bG)^7^1B>h6OK~4RqRs
z&j6EASxeE-v-Zg5xzq+NgjJg%hMXIoLL9B#sAyh?-0gLTwAQ-d#qd+}R)}T3U;v1~
zBO(GXnFxHQMBqnr8XfIH&#+4nN$|(DY(Dvy9dqbQILM^u7YqOZ002ovPDHLkV1f^?
BLH+;$

delta 257
zcmV+c0sj8s0nY-ER)6G4L_t(|0qvAQ4uUWcMW<Eo!Bx0{TbG^yj=~LyaiI|x?v3eH
zxQ9B}0Zk00?S~Z$e!^xt|Gxx2C0aB~9j+!TPbNY4W%qb7+0dDGma9ij4HtUD27$<q
z?6TsbJX>!JKrelxhHCpHF~~1mb~}&t_N2VVl{G4BR8;d*r+WKcT8F~<?e2I1F$fwS
z1o$8_N5i9lAxJv}!y$kJ=>Sl;NE0eO$pyZm|0;GaZ@WeThT0<YScM@#sEWvc5(FSU
zM<HrT_!x-Whc$1}p37PLUA}i0DeFa4R`-1DbuAuRG)sK|SLy6t*&O_Z00000NkvXX
Hu0mjfsUL9O

diff --git a/resources/images/icons/close12@3x.png b/resources/images/icons/close12@3x.png
index 88fcaba0a7d95b9a17b4c622a494ddc09b1ad1cd..16b2961268f4b7c58304630e990bfdcc72d620f3 100644
GIT binary patch
delta 194
zcmV;z06qWI1CIibReu1aNkl<ZcmeH~TMB?65JfMopdHo@bO*M>mShG75t8YQI>a29
z-#Z820*a!HXAL!j&Y59BWDDg(?Vw4`F~i5qDr^k!M5(*XRSPOe1(iy1WUvLY%TR)w
z$<#DxE>qH|o6MJn-DPr8LuB5hhRNilNHP<Cf~YAIwWvjHdpl7Fqo}Jx)a5Gb`62Fs
wwlW2!qzo!?U>NF$lmih1zHiV1MNtNG06f37!`w`0SpWb407*qoM6N<$g82$lvj6}9

delta 393
zcmV;40e1e60@MSLReu3#Nkl<ZcmeI#F;2rU6b9h;Oc#`eo6sW=^#ZUU#`*;G2B;^X
zHwdU(Gr*22bA)n}E@gse?189KW5<54RTuwL>)Os&NA^nqN=i!3oMyG2HjTLgVf-A+
zm3bWMr(!?8w&qD8G^(;jg7RZk_4`Rki=~@0))#}5wCkDEK7V%&7B{rRTI+fX3=AM%
z|F@9^t?wr<ef`5LG*WH=Zo2Pi$GI!jhjE%O*s1r>7>rK%<|h2H#x2jdYfN0J5Qe@l
zZenAjATElFNdo1fB$#ASDoTpU0u7=3M=2&76hpbIqZGpe1yTE9V%VT4N`UcEz>UA0
zrNcjj%7P%gTYuKKoA$#jGd|fX6f6hAGQ$GJ&KVl{tuIHVAB+iyo}~6=fpSh@DQdX5
zGRlDjg~!H7QFscB1Qp(872Qf}lfJ9BeY+1XX&M?61o>xP0-AF%VHC~v!(;*6H0{Ui
nD6c{8_W4&TC@Cp9bN&DmW10zU$q%Lg0000<MNUMnLIPldlAyEJ

diff --git a/src/quo2/components/information_box.cljs b/src/quo2/components/information_box.cljs
new file mode 100644
index 0000000000..e08ce06a01
--- /dev/null
+++ b/src/quo2/components/information_box.cljs
@@ -0,0 +1,91 @@
+(ns quo2.components.information-box
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
+            [clojure.string :as string]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as quo2.icons]
+            [quo2.components.button :as quo2.button]
+            [quo2.components.info-message :as info-message]))
+
+(def themes
+  {:light {:default     {:bg     colors/white
+                         :border colors/neutral-20
+                         :icon   colors/neutral-50
+                         :text   colors/black}
+           :informative {:bg     colors/primary-50-opa-5
+                         :border colors/primary-50-opa-10
+                         :icon   colors/primary-50
+                         :text   colors/black}
+           :error       {:bg     colors/danger-50-opa-5
+                         :border colors/danger-50-opa-10
+                         :icon   colors/danger-50
+                         :text   colors/danger-50}
+           :close-button colors/black}
+   :dark  {:default     {:bg     colors/neutral-90
+                         :border colors/neutral-70
+                         :icon   colors/neutral-40
+                         :text   colors/white}
+           :informative {:bg     colors/primary-50-opa-5
+                         :border colors/primary-50-opa-10
+                         :icon   colors/white
+                         :text   colors/white}
+           :error       {:bg     colors/danger-50-opa-5
+                         :border colors/danger-50-opa-10
+                         :icon   colors/danger-50
+                         :text   colors/danger-50}
+           :close-button colors/white}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn get-color-by-type [type key]
+  (get-in themes [(theme/get-theme) type key]))
+
+(defn information-box
+  "[information-box opts \"message\"]
+   opts
+   {:type            :default/:informative/:error
+    :closable?       true/false          ;; allow information box to be closed?
+    :closed?         true/false          ;; information box's state
+    :id              :information-box-id ;; unique id (required for closable? information box)
+    :icon            :main-icons/info    ;; information box icon
+    :style           style
+    :button-label    \"PressMe\"         ;; add action button with label
+    :on-button-press action              ;; (required for information box with button-label)
+    :on-close        on-close            ;; (optional on-close call)"
+  [{:keys [type closable? closed? id icon style button-label on-button-press on-close]} message]
+  (let [background-color (get-color-by-type type :bg)
+        border-color     (get-color-by-type type :border)
+        icon-color       (get-color-by-type type :icon)
+        text-color       (get-color-by-type type :text)
+        include-button?  (not (string/blank? button-label))]
+    (when-not closed?
+      [rn/view {:accessibility-label (or id :information-box)
+                :style               (merge {:background-color   background-color
+                                             :border-color       border-color
+                                             :border-width       1
+                                             :border-radius      12
+                                             :padding-top        (if include-button? 10 11)
+                                             :padding-bottom     (if include-button? 12 11)
+                                             :padding-horizontal 16} style)}
+       [rn/view {:style {:flex-direction :row
+                         :align-self     :flex-start}}
+        [info-message/info-message {:size        :default
+                                    :icon        icon
+                                    :text-color  text-color
+                                    :icon-color  icon-color} message]
+        (when closable?
+          [rn/touchable-opacity
+           {:on-press            on-close
+            :accessibility-label (str (or id "information-box") "-close-button")}
+           [quo2.icons/icon :main-icons2/close {:size            12
+                                                :color           (get-color :close-button)
+                                                :container-style {:margin-top  4
+                                                                  :margin-left 8}}]])]
+       (when include-button?
+         [quo2.button/button {:type     :primary
+                              :size     24
+                              :on-press on-button-press
+                              :style    {:margin-left 20
+                                         :margin-top  8
+                                         :align-self :flex-start}} button-label])])))
diff --git a/src/quo2/screens/information_box.cljs b/src/quo2/screens/information_box.cljs
new file mode 100644
index 0000000000..371ee25c4a
--- /dev/null
+++ b/src/quo2/screens/information_box.cljs
@@ -0,0 +1,51 @@
+(ns quo2.screens.information-box
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.information-box :as quo2]))
+
+(def descriptor [{:label   "Type:"
+                  :key     :type
+                  :type    :select
+                  :options [{:key   :default
+                             :value "Default"}
+                            {:key   :informative
+                             :value "Informative"}
+                            {:key   :error
+                             :value "Error"}]}
+                 {:label "Closable?:"
+                  :key   :closable?
+                  :type  :boolean}
+                 {:label "Message"
+                  :key   :message
+                  :type  :text}
+                 {:label "Button Label"
+                  :key   :button-label
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state    (reagent/atom {:type        :default
+                                :closable?    true
+                                :icon         :main-icons2/placeholder
+                                :message      "This is an information box This is an information"
+                                :button-label "Press Me"
+                                :style         {:width 335}
+                                :id            (keyword (str "id-" (rand-int 10000)))})
+        closed?  (reagent/cursor state [:closed?])
+        on-close #(reset! closed? true)]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/information-box (merge @state {:on-close on-close}) (:message @state)]]])))
+
+(defn preview-information-box []
+  [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}]])
diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs
index f01ecc74bc..2f6d19dac2 100644
--- a/src/quo2/screens/main.cljs
+++ b/src/quo2/screens/main.cljs
@@ -12,6 +12,8 @@
             [quo2.screens.activity-logs :as activity-logs]
             [quo2.screens.counter :as counter]
             [quo2.screens.segmented :as segmented]
+            [quo2.screens.info-message :as info-message]
+            [quo2.screens.information-box :as information-box]
             [quo.components.safe-area :as safe-area]
             [quo.core :as quo]))
 
@@ -41,7 +43,13 @@
                :component segmented/preview-segmented}
               {:name      :quo2-counter
                :insets    {:top false}
-               :component counter/preview-counter}])
+               :component counter/preview-counter}
+              {:name      :info-message
+               :insets    {:top false}
+               :component info-message/preview-info-message}
+              {:name      :information-box
+               :insets    {:top false}
+               :component information-box/preview-information-box}])
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row