quo2 password-tips component (#15157)

This commit is contained in:
Ajay Sivan 2023-02-22 19:20:56 +05:30 committed by GitHub
parent 0c96661583
commit c8fd7121d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 112 additions and 0 deletions

View File

@ -0,0 +1,20 @@
(ns quo2.components.password.tips.component-spec
(:require [quo2.components.password.tips.view :as quo]
[test-helpers.component :as h]))
(h/describe "password tips component"
(h/test "render component"
(h/render [quo/view])
(-> (h/expect (h/get-by-label-text :password-tips))
(.toBeTruthy)))
(h/test "render component with proper text"
(h/render [quo/view {:completed? false} "Upper case"])
(-> (h/expect (h/get-by-text "Upper case"))
(.toBeTruthy)))
(h/test "render component with completed proper text & completed state"
(h/render [quo/view {:completed? true} "Numbers"])
(-> (h/expect (h/get-by-text "Numbers"))
(.toBeTruthy))
(-> (h/expect (h/get-by-label-text :password-tips-completed))
(.toBeTruthy))))

View File

@ -0,0 +1,18 @@
(ns quo2.components.password.tips.style
(:require [quo2.foundations.colors :as colors]))
(def container
{:align-self :flex-start})
(defn tip-text
[completed?]
{:color (if completed? colors/white-opa-40 colors/white-opa-70)})
(def strike-through
{:position :absolute
:background-color colors/white
:top 10
:left 0
:right 0
:height 0.8})

View File

@ -0,0 +1,24 @@
(ns quo2.components.password.tips.view
(:require [react-native.core :as rn]
[quo2.components.password.tips.style :as style]
[quo2.components.markdown.text :as text]))
(defn view
"Options
- `completed?` Password tip state
`text` Password tip string
"
[{:keys [completed?]} text]
[rn/view
{:style style/container
:accessibility-label :password-tips}
[text/text
{:style (style/tip-text completed?)
:weight :regular
:size :paragraph-2} text]
(when completed?
[rn/view
{:style style/strike-through
:accessibility-label :password-tips-completed}])])

View File

@ -44,6 +44,7 @@
quo2.components.notifications.info-count quo2.components.notifications.info-count
quo2.components.notifications.notification-dot quo2.components.notifications.notification-dot
quo2.components.notifications.toast quo2.components.notifications.toast
quo2.components.password.tips.view
quo2.components.profile.profile-card.view quo2.components.profile.profile-card.view
quo2.components.reactions.reaction quo2.components.reactions.reaction
quo2.components.selectors.disclaimer.view quo2.components.selectors.disclaimer.view
@ -146,6 +147,9 @@
(def notification-dot quo2.components.notifications.notification-dot/notification-dot) (def notification-dot quo2.components.notifications.notification-dot/notification-dot)
(def count-down-circle quo2.components.notifications.count-down-circle/circle-timer) (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
;;;; PASSWORD
(def tips quo2.components.password.tips.view/view)
;;;; PROFILE ;;;; PROFILE
(def profile-card quo2.components.profile.profile-card.view/profile-card) (def profile-card quo2.components.profile.profile-card.view/profile-card)

View File

@ -9,6 +9,7 @@
[quo2.components.colors.color-picker.component-spec] [quo2.components.colors.color-picker.component-spec]
[quo2.components.markdown.--tests--.text-component-spec] [quo2.components.markdown.--tests--.text-component-spec]
[quo2.components.onboarding.small-option-card.component-spec] [quo2.components.onboarding.small-option-card.component-spec]
[quo2.components.password.tips.component-spec]
[quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec] [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
[quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec] [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
[quo2.components.selectors.--tests--.selectors-component-spec] [quo2.components.selectors.--tests--.selectors-component-spec]

View File

@ -50,6 +50,7 @@
[status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs] [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
[status-im2.contexts.quo-preview.notifications.toast :as toast] [status-im2.contexts.quo-preview.notifications.toast :as toast]
[status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card] [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card]
[status-im2.contexts.quo-preview.password.tips :as tips]
[status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton] [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton]
[status-im2.contexts.quo-preview.profile.collectible :as collectible] [status-im2.contexts.quo-preview.profile.collectible :as collectible]
[status-im2.contexts.quo-preview.profile.profile-card :as profile-card] [status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
@ -201,6 +202,9 @@
:posts-and-attachments [{:name :messages-skeleton :posts-and-attachments [{:name :messages-skeleton
:insets {:top false} :insets {:top false}
:component messages-skeleton/preview-messages-skeleton}] :component messages-skeleton/preview-messages-skeleton}]
:password [{:name :tips
:insets {:top false}
:component tips/preview-tips}]
:profile [{:name :profile-card :profile [{:name :profile-card
:insets {:top false} :insets {:top false}
:component profile-card/preview-profile-card} :component profile-card/preview-profile-card}

View File

@ -0,0 +1,41 @@
(ns status-im2.contexts.quo-preview.password.tips
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Text"
:key :text
:type :text}
{:label "Completed"
:key :completed?
:type :boolean}])
(defn cool-preview
[]
(let [state (reagent/atom {:text "Lower case"
:completed? false})
text (reagent/cursor state [:text])
completed? (reagent/cursor state [:completed?])]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding 60 :background-color colors/neutral-95}
[quo/tips {:completed? @completed?} @text]]]])))
(defn preview-tips
[]
[rn/view
{:background-color (colors/theme-colors
colors/white
colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])