implement quo2 inputs - locked input component

Co-authored-by: tumanov-alex <uwontrememberthis@gmail.com>
Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>

src/quo2/components/inputs/locked_input/component_spec.cljs

@@ -0,0 +1,24 @@
+(ns quo2.components.inputs.locked-input.component-spec
+  (:require [quo2.components.inputs.locked-input.view :as locked-input]
+            [test-helpers.component :as h]))
+
+(h/describe "Locked Input"
+  (h/test "renders label, value and icon"
+    (h/render [locked-input/locked-input
+               {:label "Label"
+                :icon  :i/gas} "Value"])
+    (h/is-truthy (h/query-by-text "Label"))
+    (h/is-truthy (h/get-by-text "Value")))
+
+  (h/test "no value"
+    (h/render [locked-input/locked-input
+               {:label "Label"
+                :icon  :i/gas}])
+    (h/is-null (h/query-by-text "Value"))
+    (h/is-truthy (h/get-by-text "Label")))
+
+  (h/test "no emoji"
+    (h/render [locked-input/locked-input
+               {:label "Label"} "Value"])
+    (h/is-truthy (h/get-by-text "Label"))
+    (h/is-truthy (h/get-by-text "Value"))))

src/quo2/components/inputs/locked_input/style.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.inputs.locked-input.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn info-box-container
+  [theme]
+  {:flex-direction     :row
+   :border-radius      12
+   :align-items        :center
+   :background-color   (colors/theme-colors colors/neutral-10
+                                            colors/neutral-80-opa-80
+                                            theme)
+   :height             40
+   :padding-horizontal 12
+   :padding-vertical   9
+   :margin-top         4})
+
+(defn info-box-label
+  [theme]
+  {:color       (colors/theme-colors colors/black colors/white theme)
+   :margin-left 8})

src/quo2/components/inputs/locked_input/view.cljs

@@ -0,0 +1,43 @@
+(ns quo2.components.inputs.locked-input.view
+  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icons]
+            [quo2.components.inputs.locked-input.style :as style]
+            [quo2.theme :as quo.theme]
+            [quo2.components.markdown.text :as text]))
+
+(defn- info-box
+  [{:keys [icon value-text theme]}]
+  [rn/view
+   {:style (style/info-box-container theme)}
+   [rn/view
+    (when icon
+      [icons/icon icon
+       {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])]
+   [text/text
+    {:size  :paragraph-1
+     :style (style/info-box-label theme)} value-text]])
+
+(defn- locked-input-internal
+  [{:keys [label icon container-style theme]} value]
+  [rn/view {:style container-style}
+   [text/text
+    {:size   :paragraph-2
+     :weight :medium
+     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+    label]
+   [info-box
+    {:theme      theme
+     :icon       icon
+     :value-text value}]])
+
+(def locked-input
+  "Options:
+
+  :label - string (default nil) - Text to display above the input
+  :icon - keyword (default nil) - Icon to display in the info box
+  :container-style - style map (default nil) - Override style for the container
+  :theme - :light/:dark (passed from with-theme HOC)
+
+  :value - string (default nil) - value to display in the info box"
+  (quo.theme/with-theme locked-input-internal))

src/quo2/core.cljs

@@ -45,6 +45,7 @@
     quo2.components.info.info-message
     quo2.components.info.information-box.view
     quo2.components.inputs.input.view
+    quo2.components.inputs.locked-input.view
     quo2.components.inputs.profile-input.view
     quo2.components.inputs.recovery-phrase.view
     quo2.components.inputs.search-input.view
@@ -201,6 +202,7 @@
 
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
+(def locked-input quo2.components.inputs.locked-input.view/locked-input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)
 (def recovery-phrase-input quo2.components.inputs.recovery-phrase.view/recovery-phrase-input)
 (def search-input quo2.components.inputs.search-input.view/search-input)

src/quo2/core_spec.cljs

@@ -24,6 +24,7 @@
     [quo2.components.graph.wallet-graph.component-spec]
     [quo2.components.inputs.input.component-spec]
     [quo2.components.inputs.profile-input.component-spec]
+    [quo2.components.inputs.locked-input.component-spec]
     [quo2.components.inputs.recovery-phrase.component-spec]
     [quo2.components.inputs.title-input.component-spec]
     [quo2.components.keycard.component-spec]

src/status_im2/contexts/quo_preview/inputs/locked_input.cljs

@@ -0,0 +1,42 @@
+(ns status-im2.contexts.quo-preview.inputs.locked-input
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "show icon"
+    :key   :icon
+    :type  :boolean}
+   {:label "label"
+    :key   :label
+    :type  :text}
+   {:label "Value"
+    :key   :value
+    :type  :text}])
+
+(defn preview-locked-input
+  []
+  (let [state (reagent/atom {:value "$1,648.34"
+                             :label "Network fee"})]
+    (fn []
+      (let [{:keys [label value icon]} @state]
+        [rn/view
+         {:background-color (colors/theme-colors colors/white colors/neutral-90)
+          :flex             1
+          :flex-direction   :column
+          :padding-top      20
+          :padding-left     20}
+         [rn/view {:style {:height 200}}
+          [preview/customizer state descriptor]]
+         [rn/view
+          {:style {:margin-top     11
+                   :flex-direction :row}}
+          [quo/locked-input
+           {:icon            (when icon :i/gas)
+            :label           label
+            :container-style {:margin-right      20
+                              :margin-horizontal 20
+                              :flex              1}}
+           value]]]))))

src/status_im2/contexts/quo_preview/main.cljs

@@ -46,6 +46,7 @@
     [status-im2.contexts.quo-preview.info.info-message :as info-message]
     [status-im2.contexts.quo-preview.info.information-box :as information-box]
     [status-im2.contexts.quo-preview.inputs.input :as input]
+    [status-im2.contexts.quo-preview.inputs.locked-input :as locked-input]
     [status-im2.contexts.quo-preview.inputs.recovery-phrase-input :as recovery-phrase-input]
     [status-im2.contexts.quo-preview.inputs.profile-input :as profile-input]
     [status-im2.contexts.quo-preview.inputs.search-input :as search-input]
@@ -240,6 +241,9 @@
    :inputs            [{:name      :input
                         :options   {:topBar {:visible true}}
                         :component input/preview-input}
+                       {:name      :locked-input
+                        :options   {:topBar {:visible true}}
+                        :component locked-input/preview-locked-input}
                        {:name      :profile-input
                         :options   {:topBar {:visible true}}
                         :component profile-input/preview-profile-input}

translations/en.json

@@ -738,6 +738,7 @@
     "join-decentralised-communities": "Join Decentralized Communities",
     "http-gateway-error": "Oops, request failed!",
     "sign-request-failed": "Could not sign message",
+    "simple": "Simple",
     "invite-friends": "Invite friends",
     "invite-people": "Invite people",
     "invite-people-from-contacts": "Invite people from contact list",
@@ -784,6 +785,7 @@
     "dapp-starter-pack-title": "Starter Pack",
     "dapp-starter-pack-description": "Here’s some crypto to get you started! Use it to get stickers, an ENS name and try dapps",
     "dapp-starter-pack-accept": "Accept and Open",
+    "duration-estimate": "Duration estimate",
     "starter-pack-coming": "Starter Pack coming your way",
     "starter-pack-coming-description": "Can take a few minutes to hours",
     "starter-pack-received": "Starter Pack received",