Implement Quo2 Numbered-Keyboard / Keyboard Key component (#16723)

* Implement Quo2 Numbered-Keyboard / Keyboard Key component

* add tests

* fix lint issues

* add derivation-path icon

* add tests

* refactor preview

src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.numbered-keyboard.keyboard-key.component-spec
+  (:require [quo2.components.numbered-keyboard.keyboard-key.view :as component]
+            [test-helpers.component :as h]))
+
+(h/describe "Keyboard Key"
+  (h/test "render digit type"
+    (h/render [component/keyboard-key
+               {:disabled? false
+                :on-press  #(js/alert "pressed")
+                :blur?     false
+                :type      :digit} 1])
+    (h/is-truthy (h/query-by-label-text :text-label)))
+
+  (h/test "render key type"
+    (h/render [component/keyboard-key
+               {:disabled? false
+                :on-press  #(js/alert "pressed")
+                :blur?     false
+                :type      :key} :i/delete])
+    (h/is-truthy (h/query-by-label-text :icon-label)))
+
+  (h/test "render derivation path type"
+    (h/render [component/keyboard-key
+               {:disabled? false
+                :on-press  #(js/alert "pressed")
+                :blur?     false
+                :type      :derivation-path}])
+    (h/is-truthy (h/query-by-label-text :derivation-path-label)))
+
+  (h/test "Is pressable when disabled is false"
+    (let [on-press (h/mock-fn)]
+      (h/render [component/keyboard-key
+                 {:disabled? false
+                  :on-press  #(on-press)
+                  :blur?     false
+                  :type      :digit} 1])
+      (h/is-truthy (h/query-by-label-text :text-label))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/was-called on-press)))
+
+  (h/test "Is not pressable when disabled is true"
+    (let [on-press (h/mock-fn)]
+      (h/render [component/keyboard-key
+                 {:disabled? true
+                  :on-press  #(on-press)
+                  :blur?     false
+                  :type      :digit} 1])
+      (h/is-truthy (h/query-by-label-text :text-label))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key))
+      (h/was-not-called on-press))))

src/quo2/components/numbered_keyboard/keyboard_key/style.cljs

@@ -0,0 +1,28 @@
+(ns quo2.components.numbered-keyboard.keyboard-key.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-label-color
+  [disabled? theme blur?]
+  (cond
+    (and disabled? (or (= :dark theme) blur?))  colors/white-opa-30
+    (and disabled? (or (= :light theme) blur?)) colors/neutral-30
+    (or (= :dark theme) blur?)                  colors/white
+    :else                                       colors/neutral-100))
+
+(defn toggle-background-color
+  [pressed-in? blur? theme]
+  (if pressed-in?
+    (cond
+      blur?            colors/white-opa-10
+      (= :light theme) colors/neutral-10
+      (= :dark theme)  colors/neutral-80)
+    :transparent))
+
+(defn container
+  [color]
+  {:width            48
+   :height           48
+   :justify-content  :center
+   :align-items      :center
+   :border-radius    999
+   :background-color color})

src/quo2/components/numbered_keyboard/keyboard_key/view.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.numbered-keyboard.keyboard-key.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as quo.theme]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.icon :as icons]
+            [quo2.components.numbered-keyboard.keyboard-key.style :as style]
+            [reagent.core :as reagent]))
+
+(defn- keyboard-key-internal
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [disabled? theme blur? on-press type]} label]
+      (let [label-color      (style/get-label-color disabled? theme blur?)
+            background-color (style/toggle-background-color @pressed? blur? theme)]
+        [rn/pressable
+         {:accessibility-label :keyboard-key
+          :disabled            disabled?
+          :on-press            on-press
+          :on-press-in         #(reset! pressed? true)
+          :on-press-out        #(reset! pressed? false)
+          :style               (style/container background-color)}
+         (condp = type
+           :key             [icons/icon
+                             label
+                             {:color               label-color
+                              :accessibility-label :icon-label}]
+           :digit           [text/text
+                             {:accessibility-label :text-label
+                              :weight              :regular
+                              :size                :heading-1
+                              :style               {:color label-color}}
+                             label]
+           :derivation-path [icons/icon
+                             :i/derivation-path
+                             {:color               label-color
+                              :size                32
+                              :accessibility-label :derivation-path-label}])]))))
+
+(def keyboard-key (quo.theme/with-theme keyboard-key-internal))

src/quo2/core.cljs

@@ -74,6 +74,7 @@
     quo2.components.notifications.notification-dot
     quo2.components.notifications.notification.view
     quo2.components.notifications.toast.view
+    quo2.components.numbered-keyboard.keyboard-key.view
     quo2.components.onboarding.small-option-card.view
     quo2.components.password.tips.view
     quo2.components.profile.profile-card.view
@@ -200,6 +201,9 @@
 (def search-input quo2.components.inputs.search-input.view/search-input)
 (def title-input quo2.components.inputs.title-input.view/title-input)
 
+;;;; NUMBERED KEYBOARD
+(def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/keyboard-key)
+
 ;;;; LIST ITEMS
 (def channel-list-item quo2.components.list-items.channel/list-item)
 (def menu-item quo2.components.list-items.menu-item/menu-item)

src/quo2/core_spec.cljs

@@ -34,6 +34,7 @@
     [quo2.components.markdown.text-component-spec]
     [quo2.components.markdown.list.component-spec]
     [quo2.components.notifications.notification.component-spec]
+    [quo2.components.numbered-keyboard.keyboard-key.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]
     [quo2.components.password.tips.component-spec]
     [quo2.components.profile.select-profile.component-spec]

src/status_im2/contexts/quo_preview/main.cljs

@@ -50,6 +50,7 @@
     [status-im2.contexts.quo-preview.inputs.profile-input :as profile-input]
     [status-im2.contexts.quo-preview.inputs.search-input :as search-input]
     [status-im2.contexts.quo-preview.inputs.title-input :as title-input]
+    [status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key :as keyboard-key]
     [status-im2.contexts.quo-preview.links.url-preview :as url-preview]
     [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
     [status-im2.contexts.quo-preview.links.link-preview :as link-preview]
@@ -244,6 +245,10 @@
                        {:name      :title-input
                         :options   {:topBar {:visible true}}
                         :component title-input/preview-title-input}]
+   :numbered-keyboard [{:name      :keyboard-key
+                        :options   {:insets {:top? true}
+                                    :topBar {:visible true}}
+                        :component keyboard-key/preview-keyboard-key}]
    :links             [{:name      :url-preview
                         :options   {:insets {:top? true}
                                     :topBar {:visible true}}

src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs

@@ -0,0 +1,59 @@
+(ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Blur:"
+    :key   :blur?
+    :type  :boolean}
+   {:label "Disable:"
+    :key   :disabled?
+    :type  :boolean}
+   {:label   "Type"
+    :type    :select
+    :key     :type
+    :options [{:key   :digit
+               :value "Digit"}
+              {:key   :key
+               :value "Key"}
+              {:key   :derivation-path
+               :value "Derivation Path"}]}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:disabled? false
+                             :on-press  #(js/alert "pressed" %)
+                             :blur?     false
+                             :type      :digit})]
+    (fn []
+      (let [value (case (:type @state)
+                    :key             :i/delete
+                    :derivation-path nil
+                    :digit           1
+                    nil)]
+        [rn/view {:style {:padding-bottom 150}}
+         [rn/view {:style {:flex 1}}
+          [preview/customizer state descriptor]]
+         [preview/blur-view
+          {:style                 {:flex              1
+                                   :align-self        :center
+                                   :justify-self      :center
+                                   :margin-horizontal 20}
+           :show-blur-background? (:blur? @state)
+           :blur-view-props       (when (:blur? @state)
+                                    {:overlay-color colors/neutral-80-opa-80})}
+          [quo/keyboard-key @state value]]]))))
+
+(defn preview-keyboard-key
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])