status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add checked? property, dark blur variant & tests to disclaimer component 

Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>
This commit is contained in:
Ulises Manuel Cárdenas 2023-03-27 14:06:09 -06:00 committed by GitHub
parent ac27314547
commit 94ddbbcd2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
doc/new-guidelines.md
View File

@ -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

29
src/quo2/components/selectors/disclaimer/component_spec.cljs Normal file
View File

@ -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)))))

18
src/quo2/components/selectors/disclaimer/style.cljs
View File

@ -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})

4
src/quo2/components/selectors/disclaimer/view.cljs
View File

@ -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

1
src/quo2/core_spec.cljs
View File

@ -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]))

62
src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs
View File

@ -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
[]