diff --git a/src/quo2/components/buttons/button/properties.cljs b/src/quo2/components/buttons/button/properties.cljs index dcf89f7a6c..0c4381888f 100644 --- a/src/quo2/components/buttons/button/properties.cljs +++ b/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?] diff --git a/src/quo2/components/drawers/bottom_actions/component_spec.cljs b/src/quo2/components/drawers/bottom_actions/component_spec.cljs new file mode 100644 index 0000000000..5700af48a5 --- /dev/null +++ b/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))))) diff --git a/src/quo2/components/drawers/bottom_actions/style.cljs b/src/quo2/components/drawers/bottom_actions/style.cljs new file mode 100644 index 0000000000..fe699ef05c --- /dev/null +++ b/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}) diff --git a/src/quo2/components/drawers/bottom_actions/view.cljs b/src/quo2/components/drawers/bottom_actions/view.cljs new file mode 100644 index 0000000000..acca89959c --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index ddd6bb89fb..36ed47140a 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 53d9f20c85..04805ee358 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/contexts/quo_preview/drawers/bottom_actions.cljs b/src/status_im2/contexts/quo_preview/drawers/bottom_actions.cljs new file mode 100644 index 0000000000..307d293ddf --- /dev/null +++ b/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]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 5e6b9e8bc7..44b27eca6c 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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