quo2 password-tips component (#15157)

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

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

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

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)
 

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]

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}

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