[19159] Implement drawer action component

Base component with styles

Add schema

Add component-spec

Clean up

Fix issues

Fix issues

Fix schema

Fix styles

src/quo/components/drawers/drawer_action/component_spec.cljs

@@ -0,0 +1,54 @@
+(ns quo.components.drawers.drawer-action.component-spec
+  (:require
+    [quo.components.drawers.drawer-action.view :as drawer-action]
+    [quo.foundations.colors :as colors]
+    [test-helpers.component :as h]))
+
+(h/describe "Drawers: drawer-action"
+  (h/test "default render"
+    (h/render-with-theme-provider [drawer-action/view {}])
+    (h/is-truthy (h/query-by-label-text :container)))
+
+  (h/test "on-press-in changes internal state to :pressed"
+    (h/render-with-theme-provider [drawer-action/view {}])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/wait-for #(h/has-style (h/query-by-label-text :container)
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))
+
+  (h/test "render default action with state :selected"
+    (h/render-with-theme-provider [drawer-action/view {:state :selected}])
+    (h/has-style (h/query-by-label-text :container)
+                 {:backgroundColor (colors/resolve-color :blue :light 5)})
+    (h/is-truthy (h/query-by-label-text :check-icon)))
+
+  (h/test "call on-press"
+    (let [on-press (h/mock-fn)]
+      (h/render-with-theme-provider [drawer-action/view {:on-press on-press}])
+      (h/fire-event :on-press (h/get-by-label-text :container))
+      (h/was-called on-press)))
+
+
+  (h/test "render :arrow action"
+    (h/render-with-theme-provider [drawer-action/view {:action :arrow}])
+    (h/is-truthy (h/query-by-label-text :arrow-icon)))
+
+  (h/test "render :toggle action"
+    (h/render-with-theme-provider [drawer-action/view {:action :toggle}])
+    (h/is-truthy (h/query-by-label-text "toggle-off")))
+
+  (h/test "render :toggle action with state :selected"
+    (h/render-with-theme-provider [drawer-action/view
+                                   {:action :toggle
+                                    :state  :selected}])
+    (h/is-truthy (h/query-by-label-text "toggle-on"))
+    (h/has-style (h/query-by-label-text :container)
+                 {:backgroundColor :transparent}))
+
+  (h/test "render default action with icon, title, description"
+    (h/render-with-theme-provider [drawer-action/view
+                                   {:icon        :i/contact
+                                    :title       "Check contact"
+                                    :description "Just a small desc"}])
+    (h/is-truthy (h/query-by-label-text :left-icon))
+    (h/is-truthy (h/query-by-text "Check contact"))
+    (h/is-truthy (h/query-by-text "Just a small desc"))))

src/quo/components/drawers/drawer_action/schema.cljs

@@ -0,0 +1,16 @@
+(ns quo.components.drawers.drawer-action.schema)
+
+(def ?schema
+  [:=>
+   [:cat
+    [:map {:closed true}
+     [:action {:optional true} [:maybe [:enum :arrow :toggle]]]
+     [:icon {:optional true} [:maybe :keyword]]
+     [:description {:optional true} [:maybe :string]]
+     [:state {:optional true} [:maybe [:enum :selected]]]
+     [:title {:optional true} :string]
+     [:on-press {:optional true} [:maybe fn?]]
+     [:customization-color {:optional true}
+      [:maybe :schema.common/customization-color]]
+     [:blur? {:optional true} [:maybe :boolean]]]]
+   :any])

src/quo/components/drawers/drawer_action/style.cljs

@@ -0,0 +1,55 @@
+(ns quo.components.drawers.drawer-action.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn- background-color
+  [{:keys [state action customization-color theme pressed? blur?]}]
+  (let [checked? (and (= :selected state) (nil? action))]
+    (cond
+      (and (or checked? pressed?) blur?)
+      colors/white-opa-5
+
+      (or pressed? checked?)
+      (colors/resolve-color customization-color theme 5)
+
+      :else :transparent)))
+
+(defn container
+  [{:keys [description?] :as props}]
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-vertical   (if description? 8 13)
+   :padding-horizontal 13
+   :border-radius      12
+   :background-color   (background-color props)})
+
+(defn text-container
+  []
+  {:flex         1
+   :margin-right 12})
+
+(defn- neutral-color
+  [theme blur?]
+  (if blur?
+    colors/white-70-blur
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+
+(defn left-icon
+  []
+  {:align-self   :flex-start
+   :margin-right 13
+   :margin-top  1})
+
+(defn icon-color
+  [{:keys [theme blur?]}]
+  (neutral-color theme blur?))
+
+(defn desc
+  [{:keys [theme blur?]}]
+  {:color (neutral-color theme blur?)})
+
+(defn check-color
+  [{:keys [theme blur? customization-color]}]
+  (if blur?
+    colors/white-70-blur
+    (colors/resolve-color customization-color theme)))

src/quo/components/drawers/drawer_action/view.cljs

@@ -0,0 +1,73 @@
+(ns quo.components.drawers.drawer-action.view
+  (:require
+    [quo.components.drawers.drawer-action.schema :as component-schema]
+    [quo.components.drawers.drawer-action.style :as style]
+    [quo.components.icon :as icon]
+    [quo.components.markdown.text :as text]
+    [quo.components.selectors.selectors.view :as selectors]
+    [quo.theme :as theme]
+    [react-native.core :as rn]
+    [schema.core :as schema]))
+
+(defn view-internal
+  [{:keys [action icon description state title on-press
+           customization-color blur?]
+    :or   {customization-color :blue
+           blur?               false}}]
+  (let [theme                  (theme/use-theme-value)
+        [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
+     {:on-press            on-press
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :style               (style/container {:state               state
+                                             :action              action
+                                             :customization-color customization-color
+                                             :theme               theme
+                                             :pressed?            pressed?
+                                             :description?        (not-empty description)
+                                             :blur?               blur?})
+      :accessibility-label :container}
+     (when icon
+       [icon/icon icon
+        {:accessibility-label :left-icon
+         :container-style     (style/left-icon)
+         :color               (style/icon-color {:theme theme
+                                                 :blur? blur?})}])
+
+     [rn/view {:style (style/text-container)}
+      [text/text {:weight :medium}
+       title]
+
+      (when (seq description)
+        [text/text
+         {:size  :paragraph-2
+          :style (style/desc {:theme theme
+                              :blur? blur?})}
+         description])]
+
+     (cond
+       (= action :toggle)
+       [selectors/view
+        {:theme               theme
+         :label-prefix        "toggle"
+         :customization-color customization-color
+         :type                :toggle
+         :checked?            (= state :selected)}]
+
+       (= action :arrow)
+       [icon/icon :i/chevron-right
+        {:accessibility-label :arrow-icon
+         :color               (style/icon-color {:theme theme
+                                                 :blur? blur?})}]
+
+       (= state :selected)
+       [icon/icon :i/check
+        {:accessibility-label :check-icon
+         :color               (style/check-color {:theme               theme
+                                                  :blur?               blur?
+                                                  :customization-color customization-color})}])]))
+
+(def view (schema/instrument #'view-internal component-schema/?schema))

src/quo/core.cljs

@@ -48,6 +48,7 @@
     quo.components.drawers.action-drawers.view
     quo.components.drawers.bottom-actions.view
     quo.components.drawers.documentation-drawers.view
+    quo.components.drawers.drawer-action.view
     quo.components.drawers.drawer-buttons.view
     quo.components.drawers.drawer-top.view
     quo.components.drawers.permission-context.view
@@ -250,6 +251,7 @@
 
 ;;;; Drawers
 (def action-drawer quo.components.drawers.action-drawers.view/action-drawer)
+(def drawer-action quo.components.drawers.drawer-action.view/view)
 (def documentation-drawers quo.components.drawers.documentation-drawers.view/view)
 (def drawer-buttons quo.components.drawers.drawer-buttons.view/view)
 (def drawer-top quo.components.drawers.drawer-top.view/view)

src/quo/core_spec.cljs

@@ -25,6 +25,7 @@
     quo.components.drawers.action-drawers.component-spec
     quo.components.drawers.bottom-actions.component-spec
     quo.components.drawers.documentation-drawers.component-spec
+    quo.components.drawers.drawer-action.component-spec
     quo.components.drawers.drawer-buttons.component-spec
     quo.components.drawers.drawer-top.component-spec
     quo.components.drawers.permission-context.component-spec

src/status_im/contexts/preview/quo/drawers/drawer_action.cljs

@@ -0,0 +1,41 @@
+(ns status-im.contexts.preview.quo.drawers.drawer-action
+  (:require
+    [quo.core :as quo]
+    [reagent.core :as reagent]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key  :title
+    :type :text}
+   {:key     :state
+    :type    :select
+    :options [{:key :selected}]}
+   {:key     :icon
+    :type    :select
+    :options [{:key :i/placeholder}
+              {:key :i/info}
+              {:key :i/browser}]}
+   {:key     :action
+    :type    :select
+    :options [{:key :arrow}
+              {:key :toggle}]}
+   {:key  :description
+    :type :text}
+   {:key  :blur?
+    :type :boolean}
+   (preview/customization-color-option)])
+
+(defn view
+  []
+  (let [state (reagent/atom {:title               "Action"
+                             :description         "This is a description"
+                             :customization-color :blue
+                             :on-press            #(js/alert "Pressed!")})]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :blur-dark-only?       true}
+       [quo/drawer-action @state]])))

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

@@ -58,6 +58,7 @@
     [status-im.contexts.preview.quo.drawers.bottom-actions :as bottom-actions]
     [status-im.contexts.preview.quo.drawers.documentation-drawers :as
      documentation-drawers]
+    [status-im.contexts.preview.quo.drawers.drawer-action :as drawer-action]
     [status-im.contexts.preview.quo.drawers.drawer-buttons :as drawer-buttons]
     [status-im.contexts.preview.quo.drawers.drawer-top :as drawer-top]
     [status-im.contexts.preview.quo.drawers.permission-drawers :as
@@ -294,6 +295,8 @@
                         :component action-drawers/view}
                        {:name      :documentation-drawer
                         :component documentation-drawers/view}
+                       {:name      :drawer-action
+                        :component drawer-action/view}
                        {:name      :drawer-buttons
                         :component drawer-buttons/view}
                        {:name      :drawer-top