Buttons/Swap-Order-Button Component (#20119)

src/quo/components/buttons/swap_order_button/component_spec.cljs

@@ -0,0 +1,23 @@
+(ns quo.components.buttons.swap-order-button.component-spec
+  (:require [quo.components.buttons.swap-order-button.view :as swap-order-button]
+            [test-helpers.component :as h]))
+
+(h/describe "Buttons: Swap Order Button"
+  (h/test "should render correctly"
+    (h/render-with-theme-provider
+     [swap-order-button/view {:on-press identity}])
+    (h/is-truthy (h/get-by-label-text :swap-order-button)))
+
+  (h/test "should call on-press handler when pressed"
+    (let [on-press (h/mock-fn)]
+      (h/render-with-theme-provider
+       [swap-order-button/view {:on-press on-press}])
+      (h/fire-event :press (h/get-by-label-text :swap-order-button))
+      (h/was-called on-press)))
+
+  (h/test "should not call on-press handler when button is disabled"
+    (let [on-press (h/mock-fn)]
+      (h/render-with-theme-provider
+       [swap-order-button/view {:on-press on-press :disabled? true}])
+      (h/fire-event :press (h/get-by-label-text :swap-order-button))
+      (h/was-not-called on-press))))

src/quo/components/buttons/swap_order_button/schema.cljs

@@ -0,0 +1,11 @@
+(ns quo.components.buttons.swap-order-button.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:disabled? {:optional true} [:maybe :boolean]]
+      [:on-press fn?]
+      [:container-style {:optional true} [:maybe :any]]]]]
+   :any])

src/quo/components/buttons/swap_order_button/style.cljs

@@ -0,0 +1,18 @@
+(ns quo.components.buttons.swap-order-button.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn container
+  [pressed? disabled? theme]
+  {:width            32
+   :height           32
+   :border-radius    10
+   :border-width     1
+   :opacity          (if disabled? 0.3 1)
+   :align-items      :center
+   :justify-content  :center
+   :border-color     (if pressed?
+                       (colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+   :background-color (if pressed?
+                       (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
+                       (colors/theme-colors colors/neutral-2_5 colors/neutral-90 theme))})

src/quo/components/buttons/swap_order_button/view.cljs

@@ -0,0 +1,28 @@
+(ns quo.components.buttons.swap-order-button.view
+  (:require [quo.components.buttons.swap-order-button.schema :as swap-order-button.schema]
+            [quo.components.buttons.swap-order-button.style :as style]
+            [quo.components.icon :as icon]
+            [quo.foundations.colors :as colors]
+            quo.theme
+            [react-native.core :as rn]
+            [schema.core :as schema]))
+
+(defn view-internal
+  [{:keys [disabled? on-press container-style]}]
+  (let [theme                  (quo.theme/use-theme)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true) [])
+        on-press-out           (rn/use-callback #(set-pressed false) [])]
+    [rn/pressable
+     {:style               (merge (style/container pressed? disabled? theme)
+                                  container-style)
+      :accessibility-label :swap-order-button
+      :disabled            disabled?
+      :on-press            on-press
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out}
+     [icon/icon :i/arrow-down
+      {:size  20
+       :color (colors/theme-colors colors/neutral-100 colors/white theme)}]]))
+
+(def view (schema/instrument #'view-internal swap-order-button.schema/?schema))

src/quo/core.cljs

@@ -17,6 +17,7 @@
     quo.components.buttons.logout-button.view
     quo.components.buttons.predictive-keyboard.view
     quo.components.buttons.slide-button.view
+    quo.components.buttons.swap-order-button.view
     quo.components.buttons.wallet-button.view
     quo.components.buttons.wallet-ctas.view
     quo.components.calendar.calendar-day.view
@@ -202,6 +203,7 @@
 (def logout-button quo.components.buttons.logout-button.view/view)
 (def predictive-keyboard quo.components.buttons.predictive-keyboard.view/view)
 (def slide-button quo.components.buttons.slide-button.view/view)
+(def swap-order-button quo.components.buttons.swap-order-button.view/view)
 (def wallet-button quo.components.buttons.wallet-button.view/view)
 (def wallet-ctas quo.components.buttons.wallet-ctas.view/view)
 

src/quo/core_spec.cljs

@@ -9,6 +9,7 @@
     quo.components.buttons.logout-button.component-spec
     quo.components.buttons.predictive-keyboard.component-spec
     quo.components.buttons.slide-button.component-spec
+    quo.components.buttons.swap-order-button.component-spec
     quo.components.buttons.wallet-button.component-spec
     quo.components.buttons.wallet-ctas.component-spec
     quo.components.calendar.calendar-day.component-spec

src/status_im/contexts/preview/quo/buttons/swap_order_button.cljs

@@ -0,0 +1,21 @@
+(ns status-im.contexts.preview.quo.buttons.swap-order-button
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:type :boolean
+    :key  :disabled?}])
+
+(defn view
+  []
+  (let [[state set-state] (rn/use-state {:disabled? false})]
+    [preview/preview-container
+     {:state      state
+      :set-state  set-state
+      :descriptor descriptor}
+     [quo/swap-order-button
+      (assoc state
+             :on-press
+             #(js/alert "Pressed"))]]))

src/status_im/contexts/preview/quo/main.cljs

@@ -24,6 +24,7 @@
     [status-im.contexts.preview.quo.buttons.predictive-keyboard :as
      predictive-keyboard]
     [status-im.contexts.preview.quo.buttons.slide-button :as slide-button]
+    [status-im.contexts.preview.quo.buttons.swap-order-button :as swap-order-button]
     [status-im.contexts.preview.quo.buttons.wallet-button :as wallet-button]
     [status-im.contexts.preview.quo.buttons.wallet-ctas :as wallet-ctas]
     [status-im.contexts.preview.quo.calendar.calendar :as calendar]
@@ -241,6 +242,8 @@
                         :component dynamic-button/view}
                        {:name      :slide-button
                         :component slide-button/view}
+                       {:name      :swap-order-button
+                        :component swap-order-button/view}
                        {:name      :predictive-keyboard
                         :component predictive-keyboard/view}
                        {:name      :wallet-button