Quo: quiz item (#18306)

* Quo: quiz item

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))))

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))})

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))

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 quiz-item quo.components.list-items.quiz-item.view/view)
-(def community-list-item quo.components.list-items.community.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)

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

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")

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]])))

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

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"
 }