From 94ddbbcd2efb9cd9aba4bbc42086a5ffe701d603 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Mon, 27 Mar 2023 14:06:09 -0600 Subject: [PATCH] Add checked? property, dark blur variant & tests to disclaimer component Co-authored-by: Jamie Caprani --- doc/new-guidelines.md | 29 +++++++++ .../selectors/disclaimer/component_spec.cljs | 29 +++++++++ .../selectors/disclaimer/style.cljs | 18 +++--- .../components/selectors/disclaimer/view.cljs | 4 +- src/quo2/core_spec.cljs | 1 + .../quo_preview/selectors/disclaimer.cljs | 62 ++++++++++++++----- 6 files changed, 116 insertions(+), 27 deletions(-) create mode 100644 src/quo2/components/selectors/disclaimer/component_spec.cljs diff --git a/doc/new-guidelines.md b/doc/new-guidelines.md index 008005caf1..21998e2b58 100644 --- a/doc/new-guidelines.md +++ b/doc/new-guidelines.md @@ -61,6 +61,35 @@ the source file. For a real example, see [rn/view (do-something)]]) ``` +### Always add styles inside the `:style` key + +Although when compiling ReactNative for mobile some components are able work with +their styles in the top-level of the properties map, prefer to add them inside the +`:style` key in order to separate styles from properties: + +```clojure +;; bad +[rn/button {:flex 1 + :padding-vertical 10 + :padding-horizontal 20 + :on-press #(js/alert "Hi!") + :title "Button"}] + +;; good +[rn/button {:style {:flex 1 + :padding-vertical 10 + :padding-horizontal 20} + :on-press #(js/alert "Hi!") + :title "Button"}] + +;; better +;; (define them in a style ns & place them inside `:style` key) +[rn/button {:style (style/button) + :on-press #(js/alert "Hi!") + :title "Button"} + ] +``` + ### Don't use percents to define width/height In ReactNative, all layouts use the [flexbox diff --git a/src/quo2/components/selectors/disclaimer/component_spec.cljs b/src/quo2/components/selectors/disclaimer/component_spec.cljs new file mode 100644 index 0000000000..364df2c34d --- /dev/null +++ b/src/quo2/components/selectors/disclaimer/component_spec.cljs @@ -0,0 +1,29 @@ +(ns quo2.components.selectors.disclaimer.component-spec + (:require [quo2.components.selectors.disclaimer.view :as disclaimer] + [test-helpers.component :as h])) + +(h/describe "Disclaimer tests" + (h/test "Default render of toggle component" + (h/render [disclaimer/view {:on-change (h/mock-fn)} "test"]) + (h/is-truthy (h/get-by-label-text :checkbox-off))) + + (h/test "Renders its text" + (let [text "I accept this disclaimer"] + (h/render [disclaimer/view {} text]) + (h/is-truthy (h/get-by-text text)))) + + (h/test "On change event gets fire after press" + (let [mock-fn (h/mock-fn)] + (h/render [disclaimer/view {:on-change mock-fn} "test"]) + (h/fire-event :press (h/get-by-label-text :checkbox-off)) + (h/was-called mock-fn))) + + (h/describe "It's rendered according to its `checked?` property" + (h/test "checked? true" + (h/render [disclaimer/view {:checked? true} "test"]) + (h/is-null (h/query-by-label-text :checkbox-off)) + (h/is-truthy (h/query-by-label-text :checkbox-on))) + (h/test "checked? false" + (h/render [disclaimer/view {:checked? false} "test"]) + (h/is-null (h/query-by-label-text :checkbox-on)) + (h/is-truthy (h/query-by-label-text :checkbox-off))))) diff --git a/src/quo2/components/selectors/disclaimer/style.cljs b/src/quo2/components/selectors/disclaimer/style.cljs index 2e61358a15..938d804883 100644 --- a/src/quo2/components/selectors/disclaimer/style.cljs +++ b/src/quo2/components/selectors/disclaimer/style.cljs @@ -2,14 +2,16 @@ (:require [quo2.foundations.colors :as colors])) (defn container - [] - {:flex-direction :row - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40) - :padding 11 - :align-self :stretch - :border-radius 12 - :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-70)}) + [blur?] + (let [dark-background (if blur? colors/white-opa-5 colors/neutral-80-opa-40) + dark-border (if blur? colors/white-opa-10 colors/neutral-70)] + {:flex-direction :row + :background-color (colors/theme-colors colors/neutral-5 dark-background) + :padding 11 + :align-self :stretch + :border-radius 12 + :border-width 1 + :border-color (colors/theme-colors colors/neutral-20 dark-border)})) (def text {:margin-left 8}) diff --git a/src/quo2/components/selectors/disclaimer/view.cljs b/src/quo2/components/selectors/disclaimer/view.cljs index 8b33c243c5..9a0d7eee8a 100644 --- a/src/quo2/components/selectors/disclaimer/view.cljs +++ b/src/quo2/components/selectors/disclaimer/view.cljs @@ -5,9 +5,9 @@ [react-native.core :as rn])) (defn view - [{:keys [checked? on-change accessibility-label container-style]} label] + [{:keys [checked? blur? on-change accessibility-label container-style]} label] [rn/view - {:style (merge container-style (style/container))} + {:style (merge container-style (style/container blur?))} [selectors/checkbox {:accessibility-label accessibility-label :on-change on-change diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 66d48214b5..34f18e391c 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -19,5 +19,6 @@ [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec] [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec] [quo2.components.selectors.--tests--.selectors-component-spec] + [quo2.components.selectors.disclaimer.component-spec] [quo2.components.selectors.filter.component-spec] [quo2.components.tags.--tests--.status-tags-component-spec])) diff --git a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs index a7ca7c2cd9..9cdac7e698 100644 --- a/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs +++ b/src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs @@ -1,28 +1,56 @@ (ns status-im2.contexts.quo-preview.selectors.disclaimer (:require [quo2.components.buttons.button :as button] - [quo2.components.selectors.disclaimer.view :as quo] + [quo2.components.selectors.disclaimer.view :as disclaimer] [quo2.foundations.colors :as colors] + [quo2.theme :as theme] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Checked:" + :key :checked? + :type :boolean} + {:label "Blur (only for dark theme):" + :key :blur? + :type :boolean} + {:label "Text" + :key :text + :type :text}]) + +(defn blur-background + [blur?] + (when (and blur? (theme/dark?)) + [rn/view + {:style {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0}} + [preview/blur-view + {:style {:flex 1} + :show-blur-background? true}]])) (defn cool-preview [] - (let [checked? (reagent/atom false)] + (let [state (reagent/atom {:checked? false + :blur? true + :text "I agree with the community rules"})] (fn [] - [rn/view - {:margin-bottom 50 - :padding-vertical 16 - :padding-horizontal 20} - [rn/view - {:padding-vertical 60 - :align-items :center} - [quo/view - {:container-style {:margin-bottom 40} - :on-change #(swap! checked? not)} - "I agree with the community rules"] - [button/button - {:disabled (not @checked?)} - "submit"]]]))) + (let [{:keys [blur? checked? text]} @state] + [rn/view {:style {:flex 1}} + [rn/view {:style {:flex 1}} + [preview/customizer state descriptor]] + [rn/view {:style {:padding-horizontal 15}} + [blur-background blur?] + [rn/view {:style {:margin-vertical 50}} + [disclaimer/view + {:blur? blur? + :checked? checked? + :on-change #(swap! state update :checked? not)} + text]] + [button/button {:disabled (not checked?)} + "submit"]]])))) (defn preview-disclaimer []