diff --git a/src/quo/components/list_items/quiz_item/component_spec.cljs b/src/quo/components/list_items/quiz_item/component_spec.cljs new file mode 100644 index 0000000000..6429f24b22 --- /dev/null +++ b/src/quo/components/list_items/quiz_item/component_spec.cljs @@ -0,0 +1,24 @@ +(ns quo.components.list-items.quiz-item.component-spec + (:require + [quo.components.list-items.quiz-item.view :as quiz-item] + [test-helpers.component :as h])) + +(h/describe "List Items: Token Value" + (h/test "Number label renders" + (h/render [quiz-item/view + {:state :empty + :word "collapse" + :number 2}]) + (h/is-truthy (h/get-by-label-text :number-container))) + (h/test "Success icon renders" + (h/render [quiz-item/view + {:state :success + :word "collapse" + :number 2}]) + (h/is-truthy (h/get-by-label-text :success-icon))) + (h/test "Error icon renders" + (h/render [quiz-item/view + {:state :error + :word "collapse" + :number 2}]) + (h/is-truthy (h/get-by-label-text :error-icon)))) diff --git a/src/quo/components/list_items/quiz_item/style.cljs b/src/quo/components/list_items/quiz_item/style.cljs new file mode 100644 index 0000000000..9efad1f7b5 --- /dev/null +++ b/src/quo/components/list_items/quiz_item/style.cljs @@ -0,0 +1,45 @@ +(ns quo.components.list-items.quiz-item.style + (:require [quo.foundations.colors :as colors])) + +(defn container + [{:keys [blur? theme state]}] + {:flex 1 + :flex-direction :row + :justify-content :space-between + :align-items :center + :max-height 56 + :padding 12 + :border-radius 12 + :opacity (if (= state :disabled) 0.3 1) + :border-width (if (and blur? (or (= state :empty) (= state :disabled))) 0 1) + :border-color (case state + :success colors/success-50-opa-20 + :error colors/danger-50-opa-20 + (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)) + :background-color (case state + :empty (if blur? + colors/white-opa-5 + (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)) + :disabled (if blur? + colors/white-opa-5 + (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40 theme)) + :success (colors/resolve-color :success theme 10) + :error (colors/resolve-color :danger theme 10))}) + +(defn num-container + [{:keys [blur? theme]}] + {:width 32 + :height 32 + :justify-content :center + :align-items :center + :border-radius 10 + :border-width 1 + :border-color (if blur? + colors/white-opa-10 + (colors/theme-colors colors/neutral-20 colors/neutral-70 theme))}) + +(defn text + [{:keys [theme state]}] + {:color (case state + :success (colors/theme-colors colors/success-50 colors/success-60 theme) + :error (colors/theme-colors colors/danger-50 colors/danger-60 theme))}) diff --git a/src/quo/components/list_items/quiz_item/view.cljs b/src/quo/components/list_items/quiz_item/view.cljs new file mode 100644 index 0000000000..1aef7b8347 --- /dev/null +++ b/src/quo/components/list_items/quiz_item/view.cljs @@ -0,0 +1,30 @@ +(ns quo.components.list-items.quiz-item.view + (:require + [quo.components.icon :as icon] + [quo.components.list-items.quiz-item.style :as style] + [quo.components.markdown.text :as text] + [quo.foundations.colors :as colors] + [quo.theme :as quo.theme] + [react-native.core :as rn] + [utils.i18n :as i18n])) + +(defn- view-internal + [{:keys [state theme number word] :as props}] + [rn/view {:style (style/container props)} + (if (or (= state :empty) (= state :disabled)) + [rn/view + {:style (style/num-container props) + :accessibility-label :number-container} + [text/text {:weight :semi-bold} number]] + [text/text {:style (style/text props)} + (if (= state :success) word (i18n/label :t/oops-wrong-word))]) + (when (= state :success) + [icon/icon :i/check + {:color (colors/theme-colors colors/success-50 colors/success-60 theme) + :accessibility-label :success-icon}]) + (when (= state :error) + [icon/icon :i/incorrect + {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme) + :accessibility-label :error-icon}])]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index ff6404ba4f..6db877dd43 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -80,6 +80,7 @@ quo.components.list-items.dapp.view quo.components.list-items.menu-item quo.components.list-items.preview-list.view + quo.components.list-items.quiz-item.view quo.components.list-items.saved-address.view quo.components.list-items.saved-contact-address.view quo.components.list-items.token-network.view @@ -296,15 +297,16 @@ (def account-list-card quo.components.list-items.account-list-card.view/view) (def address quo.components.list-items.address.view/view) (def channel quo.components.list-items.channel.view/view) +(def community-list-item quo.components.list-items.community.view/view) (def dapp quo.components.list-items.dapp.view/view) (def menu-item quo.components.list-items.menu-item/menu-item) (def preview-list quo.components.list-items.preview-list.view/view) -(def user-list quo.components.list-items.user-list/user-list) -(def community-list-item quo.components.list-items.community.view/view) +(def quiz-item quo.components.list-items.quiz-item.view/view) (def saved-address quo.components.list-items.saved-address.view/view) (def saved-contact-address quo.components.list-items.saved-contact-address.view/view) (def token-network quo.components.list-items.token-network.view/view) (def token-value quo.components.list-items.token-value.view/view) +(def user-list quo.components.list-items.user-list/user-list) ;;;; Loaders (def skeleton-list quo.components.loaders.skeleton-list.view/view) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index ad872532c3..8852a132ed 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -47,6 +47,7 @@ quo.components.list-items.channel.component-spec quo.components.list-items.community.component-spec quo.components.list-items.dapp.component-spec + quo.components.list-items.quiz-item.component-spec quo.components.list-items.saved-address.component-spec quo.components.list-items.saved-contact-address.component-spec quo.components.list-items.token-network.component-spec diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index 3d809509e1..4d1c61f71c 100644 --- a/src/quo/foundations/colors.cljs +++ b/src/quo/foundations/colors.cljs @@ -203,6 +203,9 @@ (def danger-50-opa-30 (alpha danger-50 0.3)) (def danger-50-opa-40 (alpha danger-50 0.4)) +;;60 with transparency +(def danger-60-opa-10 (alpha danger-60 0.1)) + ;;;;Warning (def warning-50 "#FF7D46") (def warning-60 "#CC6438") diff --git a/src/status_im/contexts/preview/quo/list_items/quiz_item.cljs b/src/status_im/contexts/preview/quo/list_items/quiz_item.cljs new file mode 100644 index 0000000000..687aea9c97 --- /dev/null +++ b/src/status_im/contexts/preview/quo/list_items/quiz_item.cljs @@ -0,0 +1,28 @@ +(ns status-im.contexts.preview.quo.list-items.quiz-item + (:require [quo.core :as quo] + [reagent.core :as reagent] + [status-im.contexts.preview.quo.preview :as preview])) + +(def descriptor + [{:key :state + :type :select + :options [{:key :empty} + {:key :disabled} + {:key :success} + {:key :error}]} + {:key :blur? :type :boolean}]) + +(defn view + [] + (let [state (reagent/atom {:state :empty + :word "collapse" + :number 8 + :blur? false})] + (fn [] + [preview/preview-container + {:state state + :descriptor descriptor + :blur? (:blur? @state) + :show-blur-background? true + :blur-dark-only? true} + [quo/quiz-item @state]]))) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 743fef1d7f..d83f56a2e0 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -95,6 +95,7 @@ community-list] [status-im.contexts.preview.quo.list-items.dapp :as dapp] [status-im.contexts.preview.quo.list-items.preview-lists :as preview-lists] + [status-im.contexts.preview.quo.list-items.quiz-item :as quiz-item] [status-im.contexts.preview.quo.list-items.saved-address :as saved-address] [status-im.contexts.preview.quo.list-items.saved-contact-address :as saved-contact-address] @@ -349,6 +350,8 @@ :component dapp/preview} {:name :preview-lists :component preview-lists/view} + {:name :quiz-item + :component quiz-item/view} {:name :saved-address :component saved-address/view} {:name :saved-contact-address diff --git a/translations/en.json b/translations/en.json index 2bca9c7618..7af4a4d75e 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2445,5 +2445,6 @@ "transacation-finalised": "Transaction finalised!", "no-relevant-tokens": "No relevant tokens", "from-label": "From", - "to-label": "To" + "to-label": "To", + "oops-wrong-word": "Oops! Wrong word" }