diff --git a/resources/images/icons/close12@2x.png b/resources/images/icons/close12@2x.png index c7bd9e2e95..bfbb29ac98 100644 Binary files a/resources/images/icons/close12@2x.png and b/resources/images/icons/close12@2x.png differ diff --git a/resources/images/icons/close12@3x.png b/resources/images/icons/close12@3x.png index 88fcaba0a7..16b2961268 100644 Binary files a/resources/images/icons/close12@3x.png and b/resources/images/icons/close12@3x.png differ 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