Add checked? property, dark blur variant & tests to disclaimer component
Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>
This commit is contained in:
parent
ac27314547
commit
94ddbbcd2e
|
@ -61,6 +61,35 @@ the source file. For a real example, see
|
||||||
[rn/view (do-something)]])
|
[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
|
### Don't use percents to define width/height
|
||||||
|
|
||||||
In ReactNative, all layouts use the [flexbox
|
In ReactNative, all layouts use the [flexbox
|
||||||
|
|
|
@ -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)))))
|
|
@ -2,14 +2,16 @@
|
||||||
(:require [quo2.foundations.colors :as colors]))
|
(:require [quo2.foundations.colors :as colors]))
|
||||||
|
|
||||||
(defn container
|
(defn container
|
||||||
[]
|
[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
|
{:flex-direction :row
|
||||||
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)
|
:background-color (colors/theme-colors colors/neutral-5 dark-background)
|
||||||
:padding 11
|
:padding 11
|
||||||
:align-self :stretch
|
:align-self :stretch
|
||||||
:border-radius 12
|
:border-radius 12
|
||||||
:border-width 1
|
:border-width 1
|
||||||
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-70)})
|
:border-color (colors/theme-colors colors/neutral-20 dark-border)}))
|
||||||
|
|
||||||
(def text
|
(def text
|
||||||
{:margin-left 8})
|
{:margin-left 8})
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
[react-native.core :as rn]))
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[{:keys [checked? on-change accessibility-label container-style]} label]
|
[{:keys [checked? blur? on-change accessibility-label container-style]} label]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge container-style (style/container))}
|
{:style (merge container-style (style/container blur?))}
|
||||||
[selectors/checkbox
|
[selectors/checkbox
|
||||||
{:accessibility-label accessibility-label
|
{:accessibility-label accessibility-label
|
||||||
:on-change on-change
|
:on-change on-change
|
||||||
|
|
|
@ -19,5 +19,6 @@
|
||||||
[quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
|
[quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
|
||||||
[quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
|
[quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
|
||||||
[quo2.components.selectors.--tests--.selectors-component-spec]
|
[quo2.components.selectors.--tests--.selectors-component-spec]
|
||||||
|
[quo2.components.selectors.disclaimer.component-spec]
|
||||||
[quo2.components.selectors.filter.component-spec]
|
[quo2.components.selectors.filter.component-spec]
|
||||||
[quo2.components.tags.--tests--.status-tags-component-spec]))
|
[quo2.components.tags.--tests--.status-tags-component-spec]))
|
||||||
|
|
|
@ -1,28 +1,56 @@
|
||||||
(ns status-im2.contexts.quo-preview.selectors.disclaimer
|
(ns status-im2.contexts.quo-preview.selectors.disclaimer
|
||||||
(:require [quo2.components.buttons.button :as button]
|
(: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.foundations.colors :as colors]
|
||||||
|
[quo2.theme :as theme]
|
||||||
[react-native.core :as rn]
|
[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
|
(defn cool-preview
|
||||||
[]
|
[]
|
||||||
(let [checked? (reagent/atom false)]
|
(let [state (reagent/atom {:checked? false
|
||||||
|
:blur? true
|
||||||
|
:text "I agree with the community rules"})]
|
||||||
(fn []
|
(fn []
|
||||||
[rn/view
|
(let [{:keys [blur? checked? text]} @state]
|
||||||
{:margin-bottom 50
|
[rn/view {:style {:flex 1}}
|
||||||
:padding-vertical 16
|
[rn/view {:style {:flex 1}}
|
||||||
:padding-horizontal 20}
|
[preview/customizer state descriptor]]
|
||||||
[rn/view
|
[rn/view {:style {:padding-horizontal 15}}
|
||||||
{:padding-vertical 60
|
[blur-background blur?]
|
||||||
:align-items :center}
|
[rn/view {:style {:margin-vertical 50}}
|
||||||
[quo/view
|
[disclaimer/view
|
||||||
{:container-style {:margin-bottom 40}
|
{:blur? blur?
|
||||||
:on-change #(swap! checked? not)}
|
:checked? checked?
|
||||||
"I agree with the community rules"]
|
:on-change #(swap! state update :checked? not)}
|
||||||
[button/button
|
text]]
|
||||||
{:disabled (not @checked?)}
|
[button/button {:disabled (not checked?)}
|
||||||
"submit"]]])))
|
"submit"]]]))))
|
||||||
|
|
||||||
(defn preview-disclaimer
|
(defn preview-disclaimer
|
||||||
[]
|
[]
|
||||||
|
|
Loading…
Reference in New Issue