diff --git a/resources/images/icons2/32x32/derivation-path@2x.png b/resources/images/icons2/32x32/derivation-path@2x.png new file mode 100644 index 0000000000..e859586968 Binary files /dev/null and b/resources/images/icons2/32x32/derivation-path@2x.png differ diff --git a/resources/images/icons2/32x32/derivation-path@3x.png b/resources/images/icons2/32x32/derivation-path@3x.png new file mode 100644 index 0000000000..81b1f0fd6d Binary files /dev/null and b/resources/images/icons2/32x32/derivation-path@3x.png differ diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs new file mode 100644 index 0000000000..e711a6e33a --- /dev/null +++ b/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)))) diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/style.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/style.cljs new file mode 100644 index 0000000000..3b9e029e1c --- /dev/null +++ b/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}) diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs new file mode 100644 index 0000000000..78fea9900b --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 60e235947f..2d1e6df19a 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 358d129089..e8f7597f36 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index a79c9a560d..2f72d20b3b 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.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}} diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/keyboard_key.cljs new file mode 100644 index 0000000000..81ba86a10b --- /dev/null +++ b/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}]])