From c8fd7121d3cecf5df8d85c438f6d20811a9e4131 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Wed, 22 Feb 2023 19:20:56 +0530 Subject: [PATCH] quo2 password-tips component (#15157) --- .../password/tips/component_spec.cljs | 20 +++++++++ src/quo2/components/password/tips/style.cljs | 18 ++++++++ src/quo2/components/password/tips/view.cljs | 24 +++++++++++ src/quo2/core.cljs | 4 ++ src/quo2/core_spec.cljs | 1 + src/status_im2/contexts/quo_preview/main.cljs | 4 ++ .../contexts/quo_preview/password/tips.cljs | 41 +++++++++++++++++++ 7 files changed, 112 insertions(+) create mode 100644 src/quo2/components/password/tips/component_spec.cljs create mode 100644 src/quo2/components/password/tips/style.cljs create mode 100644 src/quo2/components/password/tips/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/password/tips.cljs diff --git a/src/quo2/components/password/tips/component_spec.cljs b/src/quo2/components/password/tips/component_spec.cljs new file mode 100644 index 0000000000..63a37be4c2 --- /dev/null +++ b/src/quo2/components/password/tips/component_spec.cljs @@ -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)))) + diff --git a/src/quo2/components/password/tips/style.cljs b/src/quo2/components/password/tips/style.cljs new file mode 100644 index 0000000000..62a74e9ff4 --- /dev/null +++ b/src/quo2/components/password/tips/style.cljs @@ -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}) + diff --git a/src/quo2/components/password/tips/view.cljs b/src/quo2/components/password/tips/view.cljs new file mode 100644 index 0000000000..52a77beef7 --- /dev/null +++ b/src/quo2/components/password/tips/view.cljs @@ -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}])]) + diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 5e229d4b55..b52f786b5a 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -44,6 +44,7 @@ quo2.components.notifications.info-count quo2.components.notifications.notification-dot quo2.components.notifications.toast + quo2.components.password.tips.view quo2.components.profile.profile-card.view quo2.components.reactions.reaction quo2.components.selectors.disclaimer.view @@ -146,6 +147,9 @@ (def notification-dot quo2.components.notifications.notification-dot/notification-dot) (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer) +;;;; PASSWORD +(def tips quo2.components.password.tips.view/view) + ;;;; PROFILE (def profile-card quo2.components.profile.profile-card.view/profile-card) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 5b8c36025f..cd08698cca 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -9,6 +9,7 @@ [quo2.components.colors.color-picker.component-spec] [quo2.components.markdown.--tests--.text-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.soundtrack.--tests--.soundtrack-component-spec] [quo2.components.selectors.--tests--.selectors-component-spec] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 0cbbb28f88..289cbd3dcf 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -50,6 +50,7 @@ [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.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.profile.collectible :as collectible] [status-im2.contexts.quo-preview.profile.profile-card :as profile-card] @@ -201,6 +202,9 @@ :posts-and-attachments [{:name :messages-skeleton :insets {:top false} :component messages-skeleton/preview-messages-skeleton}] + :password [{:name :tips + :insets {:top false} + :component tips/preview-tips}] :profile [{:name :profile-card :insets {:top false} :component profile-card/preview-profile-card} diff --git a/src/status_im2/contexts/quo_preview/password/tips.cljs b/src/status_im2/contexts/quo_preview/password/tips.cljs new file mode 100644 index 0000000000..72ebe6c2de --- /dev/null +++ b/src/status_im2/contexts/quo_preview/password/tips.cljs @@ -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}]]) +