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

feat: add drawer buttons to quo2 (#15062) 

feat: add drawer buttons to quo2
This commit is contained in:
Jamie Caprani 2023-02-16 14:29:44 +00:00 committed by GitHub
parent 488db615c0
commit cbad7f4c87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 299 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
doc/new-guidelines.md
View File

@ -1,4 +1,4 @@
# Guidelines
# Code Style Guidelines
>The goal of this document is to help all contributors (core and external) to
>write code in _unison_ and help establish good practices that serve the Status
@ -77,7 +77,21 @@ Joshua Comeau.
[rn/view {:style {:padding-horizontal 20}}]
```
#### Styles def vs defn
### Don't prepend booleans with is-
It is a common practice in JavaScript and other languages to prepend boolean variable names with `is-*`.
In ClojureScript it is common practice to suffix boolean variable names with a `?`.
There is no need for both of these and so it is preferable to stick with the latter.
```clojure
;; bad
(let [is-open? true] ...)
;; good
(let [open? true] ...)
```
### Styles def vs defn
Always use `def` over `defn`, unless the style relies on dynamic values, such as
deref'ed atoms.
@ -170,7 +184,7 @@ Use the simple `defn` to declare components. Don't use `utils.views/defview` and
(do-something window-width)))
```
#### Use `[]` instead of `()` in Reagent components
### Use `[]` instead of `()` in Reagent components
- The `()` version [does NOT work with Form-2 and
Form-3](https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md#a-further-significant-why)

70
src/quo2/components/drawers/drawer_buttons/component_spec.cljs Normal file
View File

@ -0,0 +1,70 @@
(ns quo2.components.drawers.drawer-buttons.component-spec
(:require [quo2.components.drawers.drawer-buttons.view :as drawer-buttons]
[react-native.core :as rn]
[test-helpers.component :as h]))
(h/describe "drawer-buttons"
(h/test "the top heading and subheading render"
(h/render [drawer-buttons/view
{:top-card {:heading :top-heading}
:bottom-card {:heading :bottom-heading}}
:top-sub-heading
:bottom-sub-heading])
(-> (js/expect (h/get-by-text "top-heading"))
(.toBeTruthy))
(-> (js/expect (h/get-by-text "top-sub-heading"))
(.toBeTruthy)))
(h/test "the bottom heading and subheading render"
(h/render [drawer-buttons/view
{:top-card {:heading :top-heading}
:bottom-card {:heading :bottom-heading}}
:top-sub-heading
:bottom-sub-heading])
(-> (js/expect (h/get-by-text "bottom-heading"))
(.toBeTruthy))
(-> (js/expect (h/get-by-text "bottom-sub-heading"))
(.toBeTruthy)))
(h/test "it clicks the top card"
(let [event (h/mock-fn)]
(h/render [drawer-buttons/view
{:top-card {:on-press event
:heading :top-heading}
:bottom-card {:heading :bottom-heading}}
:top-sub-heading
:bottom-sub-heading])
(h/fire-event :press (h/get-by-text "top-heading"))
(-> (js/expect event)
(.toHaveBeenCalled))))
(h/test "it clicks the bottom card"
(let [event (h/mock-fn)]
(h/render [drawer-buttons/view
{:top-card {:heading :top-heading}
:bottom-card {:on-press event
:heading :bottom-heading}}
:top-sub-heading
:bottom-sub-heading])
(h/fire-event :press (h/get-by-text "bottom-heading"))
(-> (js/expect event)
(.toHaveBeenCalled))))
(h/test "the top card child renders with a render prop"
(h/render [drawer-buttons/view
{:top-card {:heading :top-heading}
:bottom-card {:heading :bottom-heading}}
[rn/text :top-render-fn]
:bottom-sub-heading])
(-> (js/expect (h/get-by-text "top-render-fn"))
(.toBeTruthy)))
(h/test "the bottom card child renders with a render prop"
(h/render [drawer-buttons/view
{:top-card {:heading :top-heading}
:bottom-card {:heading :bottom-heading}}
:top-sub-heading
[rn/text :bottom-render-fn]])
(-> (js/expect (h/get-by-text "bottom-render-fn"))
(.toBeTruthy))))

48
src/quo2/components/drawers/drawer_buttons/style.cljs Normal file
View File

@ -0,0 +1,48 @@
(ns quo2.components.drawers.drawer-buttons.style
(:require [quo2.foundations.colors :as colors]))
(def outer-container {:height 216})
(def top-card
{:flex 1
:padding-vertical 12
:padding-horizontal 20
:border-radius 20
:background-color colors/neutral-80})
(def bottom-card
{:position :absolute
:top 80
:left 0
:right 0
:bottom 0
:padding-vertical 12
:padding-horizontal 20
:border-radius 20
:background-color (colors/alpha colors/white 0.05)})
(def bottom-container
{:flex-direction :row
:justify-content :space-between})
(def bottom-icon
{:border-radius 40
:border-width 1
:margin-left 24
:height 28
:width 28
:justify-content :center
:align-items :center
:border-color (colors/alpha colors/white 0.05)})
(def bottom-text
{:flex 1
:color (colors/alpha colors/white 0.7)})
(def top-text
{:color (colors/alpha colors/white 0.7)})
(defn heading-text
[gap]
{:color colors/white
:margin-bottom gap})

80
src/quo2/components/drawers/drawer_buttons/view.cljs Normal file
View File

@ -0,0 +1,80 @@
(ns quo2.components.drawers.drawer-buttons.view
(:require [react-native.core :as rn]
[quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.components.drawers.drawer-buttons.style :as style]))
(defn render-bottom
[children]
[rn/view {:style style/bottom-container}
children
[rn/view
{:style style/bottom-icon}
[icon/icon :arrow-right
{:color colors/white
:size 20}]]])
(defn label? [el] (or (string? el) (keyword? el)))
(defn render-children-bottom
[children]
(if (label? children)
[render-bottom
[text/text
{:size :paragraph-2
:style style/bottom-text
:weight :semi-bold}
children]]
[render-bottom children]))
(defn render-children-top
[children]
(if (label? children)
[text/text
{:size :paragraph-2
:style style/top-text
:weight :semi-bold}
children]
children))
(defn card
[{:keys [on-press style heading gap top?]} children]
[rn/touchable-highlight
{:on-press on-press
:border-radius 20
:style style
:underlay-color (:background-color style)}
[rn/view {}
[text/text
{:size :heading-1
:style (style/heading-text gap)
:weight :semi-bold}
heading]
(if top?
[render-children-top children]
[render-children-bottom children])]])
(defn view
"[view opts]
opts
{:container-style style-object
:top-card { :on-press event
:heading string}
:bottom-card { :on-press event
:heading string}}
child-1 string, keyword or hiccup
child-2 string, keyword or hiccup
"
[{:keys [container-style top-card bottom-card]} child-1 child-2]
[rn/view
{:style (merge container-style style/outer-container)}
[card
(merge {:gap 4
:top? true
:style style/top-card}
top-card) child-1]
[card
(merge {:style style/bottom-card
:gap 20}
bottom-card) child-2]])

2
src/quo2/core.cljs
View File

@ -21,6 +21,7 @@
quo2.components.dividers.divider-label
quo2.components.dividers.new-messages
quo2.components.drawers.action-drawers.view
quo2.components.drawers.drawer-buttons.view
quo2.components.drawers.permission-context.view
quo2.components.dropdowns.dropdown
quo2.components.header
@ -126,6 +127,7 @@
;;;; DRAWERS
(def action-drawer quo2.components.drawers.action-drawers.view/action-drawer)
(def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
(def permission-context quo2.components.drawers.permission-context.view/view)
;;;; LIST ITEMS

1
src/quo2/core_spec.cljs
View File

@ -4,6 +4,7 @@
[quo2.components.counter.--tests--.counter-component-spec]
[quo2.components.dividers.--tests--.divider-label-component-spec]
[quo2.components.drawers.action-drawers.component-spec]
[quo2.components.drawers.drawer-buttons.component-spec]
[quo2.components.drawers.permission-context.component-spec]
[quo2.components.markdown.--tests--.text-component-spec]
[quo2.components.onboarding.small-option-card.component-spec]

74
src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs Normal file
View File

@ -0,0 +1,74 @@
(ns status-im2.contexts.quo-preview.drawers.drawer-buttons
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Top Heading"
:key :top-heading
:type :text}
{:label "Top Sub heading"
:key :top-sub-heading
:type :text}
{:label "Bottom heading"
:key :bottom-heading
:type :text}])
(defn text-with-link
[]
[quo/text
{:style {:flex 1
:flex-wrap :wrap}}
[quo/text
{:size :paragraph-2
:style {:flex 1
:color (colors/alpha colors/white 0.7)}
:weight :semi-bold}
"By continuing you accept our "]
[quo/text
{:on-press #(js/alert "Terms of use clicked")
:size :paragraph-2
:style {:flex 1
:color colors/white}
:weight :semi-bold}
"Terms of Use"]])
(defn render-drawer-buttons
[state]
[rn/view
{:height 300
:background-color (colors/theme-colors colors/white colors/neutral-95)}
[quo/drawer-buttons
{:container-style {:margin-left 40
:margin-right 24}
:top-card {:on-press #(js/alert "top card clicked")
:heading (:top-heading @state)}
:bottom-card {:on-press #(js/alert "bottom card clicked")
:heading (:bottom-heading @state)}}
(:top-sub-heading @state) [text-with-link]]])
(defn cool-preview
[]
(let [state (reagent/atom {:top-heading "Sign in "
:top-sub-heading "You already use Status"
:bottom-heading "I'm new to status"})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 400}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60}
[render-drawer-buttons state]]]])))
(defn preview-drawer-buttons
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:nestedScrollEnabled true
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn :id}]])

8
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -29,7 +29,8 @@
[status-im2.contexts.quo-preview.dividers.date :as divider-date]
[status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
[status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
[status-im2.contexts.quo-preview.drawers.action-drawers :as drawers]
[status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers]
[status-im2.contexts.quo-preview.drawers.drawer-buttons :as drawer-buttons]
[status-im2.contexts.quo-preview.drawers.permission-drawers :as permission-drawers]
[status-im2.contexts.quo-preview.dropdowns.dropdown :as dropdown]
[status-im2.contexts.quo-preview.foundations.shadows :as shadows]
@ -138,7 +139,10 @@
:component divider-date/preview-divider-date}]
:drawers [{:name :action-drawers
:insets {:top false}
:component drawers/preview-action-drawers}
:component action-drawers/preview-action-drawers}
{:name :drawer-buttons
:insets {:top false}
:component drawer-buttons/preview-drawer-buttons}
{:name :permission-drawers
:insets {:top false}
:component permission-drawers/preview-permission-drawers}]

2
test/jest/jest.config.js
View File

@ -12,7 +12,7 @@ module.exports = {
},
"testTimeout": 60000,
"transformIgnorePatterns": [
"/node_modules/(?!(@react-native|react-native-haptic-feedback|react-native-redash|react-native-image-crop-picker|@react-native-community|react-native-linear-gradient|react-native-background-timer|react-native|rn-emoji-keyboard|react-native-languages|react-native-shake|react-native-reanimated|react-native-redash|react-native-permissions)/).*/"
"/node_modules/(?!(@react-native|react-native-haptic-feedback|react-native-redash|react-native-image-crop-picker|@react-native-community|react-native-linear-gradient|react-native-background-timer|react-native|rn-emoji-keyboard|react-native-languages|react-native-shake|react-native-reanimated|react-native-redash|react-native-permissions|@react-native-community/blur)/).*/"
],
"globals": {
"__TEST__": true