status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Quo: quiz item (#18306) 

* Quo: quiz item
This commit is contained in:
Omar Basem 2024-01-03 15:36:17 +04:00 committed by GitHub
parent f016a9c33c
commit 006b637b1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 140 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/quo/components/list_items/quiz_item/component_spec.cljs Normal file
View File

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

45
src/quo/components/list_items/quiz_item/style.cljs Normal file
View File

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

30
src/quo/components/list_items/quiz_item/view.cljs Normal file
View File

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

6
src/quo/core.cljs
View File

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

1
src/quo/core_spec.cljs
View File

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

3
src/quo/foundations/colors.cljs
View File

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

28
src/status_im/contexts/preview/quo/list_items/quiz_item.cljs Normal file
View File

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

3
src/status_im/contexts/preview/quo/main.cljs
View File

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

3
translations/en.json
View File

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