implement bottom actions component (#17190)

src/quo2/components/buttons/button/properties.cljs

@@ -45,7 +45,9 @@
    :label-color      (colors/theme-colors colors/neutral-100 colors/white theme)
    :background-color (if pressed?
                        (colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
-                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+                       (colors/theme-colors colors/neutral-10
+                                            colors/neutral-90
+                                            theme))})
 
 (defn dark-grey
   [theme pressed?]

src/quo2/components/drawers/bottom_actions/component_spec.cljs

@@ -0,0 +1,22 @@
+(ns quo2.components.drawers.bottom-actions.component-spec
+  (:require [quo2.components.drawers.bottom-actions.view :as bottom-actions]
+            [test-helpers.component :as h]))
+
+(h/describe "bottom actions tests"
+  (h/test "default render with no description and single action button"
+    (h/render [bottom-actions/view {:button-one-label "Request to join"}])
+    (h/is-truthy (h/get-by-text "Request to join")))
+
+  (h/test "render with description"
+    (h/render [bottom-actions/view {:description "Sample description"}])
+    (h/is-truthy (h/get-by-text "Sample description")))
+
+  (h/test "render with 2 actions"
+    (let [button-one "Button One"
+          button-two "Button Two"]
+      (h/render [bottom-actions/view
+                 {:actions          :2-actions
+                  :button-one-label button-one
+                  :button-two-label button-two}])
+      (h/is-truthy (h/get-by-text button-one))
+      (h/is-truthy (h/get-by-text button-two)))))

src/quo2/components/drawers/bottom_actions/style.cljs

@@ -0,0 +1,34 @@
+(ns quo2.components.drawers.bottom-actions.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def buttons-container
+  {:flex-direction     :row
+   :justify-content    :space-around
+   :padding-vertical   12
+   :padding-horizontal 20})
+
+(def button-container
+  {:flex 1})
+
+(def button-container-2-actions
+  (assoc button-container :margin-right 12))
+
+(defn description
+  [theme scroll?]
+  {:color              (colors/theme-colors
+                        (if scroll?
+                          (colors/custom-color colors/neutral-80 70)
+                          colors/neutral-50)
+                        (if scroll?
+                          colors/white-opa-70
+                          colors/neutral-40)
+                        theme)
+   :text-align         :center
+   :padding-horizontal 40})
+
+(def scroll
+  {:margin-top        21
+   :margin-horizontal 120
+   :margin-bottom     8
+   :width             134
+   :height            5})

src/quo2/components/drawers/bottom_actions/view.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.drawers.bottom-actions.view
+  (:require [quo2.components.buttons.button.view :as button]
+            [quo2.components.drawers.bottom-actions.style :as style]
+            [quo2.theme :as quo.theme]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]))
+
+(def default-props
+  {:button-one-type :primary
+   :button-two-type :grey})
+
+(defn- view-internal
+  "Options:
+
+  :actions - keyword (default nil) - :1-action/:2-actions
+  :description - string (default nil) - Description to display below the title
+  :button-one-label - string (default nil) - Label for the first button
+  :button-two-label - string (default nil) - Label for the second button
+  :button-one-press - fn (default nil) - Function to call when the first button is pressed
+  :button-two-press - fn (default nil) - Function to call when the second button is pressed
+  :theme - :light/:dark
+  :scroll - bool (default false) - Whether the iOS Home Indicator should be rendered
+  :button-one-type - same as button/button :type
+  :button-two-type - same as button/button :type"
+  [props]
+  (let [{:keys [actions description button-one-label button-two-label
+                button-one-press button-two-press theme
+                scroll? button-one-type button-two-type]}
+        (merge default-props props)]
+    [:<>
+     [rn/view {:style style/buttons-container}
+      (when (= actions :2-actions)
+        [button/button
+         {:size            40
+          :background      (when scroll? :blur)
+          :container-style style/button-container-2-actions
+          :type            button-two-type
+          :on-press        button-two-press} button-two-label])
+      [button/button
+       {:size            40
+        :container-style style/button-container
+        :type            button-one-type
+        :background      (when scroll? :blur)
+        :on-press        button-one-press} button-one-label]]
+     (when description
+       [text/text
+        {:size  :paragraph-2
+         :style (style/description theme scroll?)} description])]))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -9,6 +9,7 @@
     quo2.components.avatars.user-avatar.view
     quo2.components.avatars.wallet-user-avatar
     quo2.components.banners.banner.view
+    quo2.components.browser.browser-input.view
     quo2.components.buttons.button.view
     quo2.components.buttons.composer-button.view
     quo2.components.buttons.dynamic-button.view
@@ -16,13 +17,12 @@
     quo2.components.buttons.slide-button.view
     quo2.components.buttons.wallet-button.view
     quo2.components.buttons.wallet-ctas.view
-    quo2.components.browser.browser-input.view
-    quo2.components.calendar.calendar.view
     quo2.components.calendar.calendar-day.view
     quo2.components.calendar.calendar-year.view
     quo2.components.code.snippet.view
     quo2.components.code.snippet-preview.view
     quo2.components.colors.color.view
+    quo2.components.calendar.calendar.view
     quo2.components.colors.color-picker.view
     quo2.components.common.notification-dot.view
     quo2.components.common.separator.view
@@ -41,6 +41,7 @@
     quo2.components.dividers.new-messages
     quo2.components.dividers.strength-divider.view
     quo2.components.drawers.action-drawers.view
+    quo2.components.drawers.bottom-actions.view
     quo2.components.drawers.documentation-drawers.view
     quo2.components.drawers.drawer-buttons.view
     quo2.components.drawers.drawer-top.view
@@ -109,6 +110,7 @@
     quo2.components.selectors.react-selector.view
     quo2.components.selectors.selectors.view
     quo2.components.settings.accounts.view
+    quo2.components.settings.category.view
     quo2.components.settings.data-item.view
     quo2.components.settings.privacy-option.view
     quo2.components.settings.reorder-item.view
@@ -220,6 +222,7 @@
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def drawer-top quo2.components.drawers.drawer-top.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)
+(def bottom-actions quo2.components.drawers.bottom-actions.view/view)
 
 ;;;; Dropdowns
 (def dropdown quo2.components.dropdowns.dropdown.view/view)

src/quo2/core_spec.cljs

@@ -10,16 +10,17 @@
     [quo2.components.buttons.slide-button.component-spec]
     [quo2.components.buttons.wallet-button.component-spec]
     [quo2.components.buttons.wallet-ctas.component-spec]
-    [quo2.components.calendar.calendar.component-spec]
     [quo2.components.calendar.calendar-day.component-spec]
-    [quo2.components.calendar.calendar.month-picker.component-spec]
     [quo2.components.calendar.calendar-year.component-spec]
+    [quo2.components.calendar.calendar.component-spec]
+    [quo2.components.calendar.calendar.month-picker.component-spec]
     [quo2.components.colors.color-picker.component-spec]
     [quo2.components.counter.counter.component-spec]
     [quo2.components.counter.step.component-spec]
     [quo2.components.dividers.divider-label.component-spec]
     [quo2.components.dividers.strength-divider.component-spec]
     [quo2.components.drawers.action-drawers.component-spec]
+    [quo2.components.drawers.bottom-actions.component-spec]
     [quo2.components.drawers.documentation-drawers.component-spec]
     [quo2.components.drawers.drawer-buttons.component-spec]
     [quo2.components.drawers.drawer-top.component-spec]
@@ -32,6 +33,7 @@
     [quo2.components.inputs.locked-input.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]
@@ -61,10 +63,10 @@
     [quo2.components.selectors.filter.component-spec]
     [quo2.components.selectors.reactions-selector.component-spec]
     [quo2.components.selectors.selectors.component-spec]
-    [quo2.components.settings.reorder-item.component-spec]
-    [quo2.components.settings.settings-item.component-spec]
     [quo2.components.settings.category.component-spec]
     [quo2.components.settings.data-item.component-spec]
+    [quo2.components.settings.reorder-item.component-spec]
+    [quo2.components.settings.settings-item.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.switchers.base-card.component-spec]
     [quo2.components.switchers.group-messaging-card.component-spec]

src/status_im2/contexts/quo_preview/drawers/bottom_actions.cljs

@@ -0,0 +1,58 @@
+(ns status-im2.contexts.quo-preview.drawers.bottom-actions
+  (:require [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [quo2.core :as quo]))
+
+(def button-two "Cancel")
+(def button-one "Request to join")
+(def description "Joining the community will reveal your public addresses to the node owner")
+(def button-options
+  [{:key :primary}
+   {:key :grey}
+   {:key :danger}
+   {:key :positive}])
+(defn button-press
+  [id]
+  #(js/alert (str "Button " id " Pressed")))
+
+(def descriptor
+  [{:type    :select
+    :key     :actions
+    :options [{:key :1-action}
+              {:key :2-actions}]}
+   {:type    :select
+    :key     :button-two-type
+    :options button-options}
+   {:type    :select
+    :key     :button-one-type
+    :options button-options}
+   {:key  :description
+    :type :text}
+   {:key  :button-one-label
+    :type :text}
+   {:key  :button-two-label
+    :type :text}
+   {:key  :scroll?
+    :type :boolean}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:actions          :2-actions
+                             :description      description
+                             :button-one-label button-one
+                             :button-two-label button-two
+                             :button-one-press (button-press 2)
+                             :button-two-press (button-press 1)
+                             :button-one-type  :primary
+                             :button-two-type  :grey
+                             :scroll?          false})]
+    (fn []
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :blur?                     (:scroll? @state)
+        :show-blur-background?     true
+        :blur-dark-only?           true
+        :component-container-style {:margin-top         40
+                                    :padding-horizontal 0}}
+       [quo/bottom-actions @state]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -52,8 +52,8 @@
     [status-im2.contexts.quo-preview.dividers.strength-divider :as
      strength-divider]
     [status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers]
-    [status-im2.contexts.quo-preview.drawers.documentation-drawers :as
-     documentation-drawers]
+    [status-im2.contexts.quo-preview.drawers.bottom-actions :as bottom-actions]
+    [status-im2.contexts.quo-preview.drawers.documentation-drawers :as documentation-drawers]
     [status-im2.contexts.quo-preview.drawers.drawer-buttons :as drawer-buttons]
     [status-im2.contexts.quo-preview.drawers.drawer-top :as drawer-top]
     [status-im2.contexts.quo-preview.drawers.permission-drawers :as
@@ -259,7 +259,10 @@
                        {:name      :drawer-top
                         :component drawer-top/view}
                        {:name      :permission-drawers
-                        :component permission-drawers/view}]
+                        :component permission-drawers/view}
+                       {:name :bottom-actions
+                        :component
+                        bottom-actions/view}]
    :dropdowns         [{:name      :dropdown
                         :component dropdown/view}
                        {:name      :network-dropdown