feat: add drawer buttons to quo2 (#15062)

feat: add drawer buttons to quo2

doc/new-guidelines.md

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

src/quo2/components/drawers/drawer_buttons/component_spec.cljs

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

src/quo2/components/drawers/drawer_buttons/style.cljs

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

src/quo2/components/drawers/drawer_buttons/view.cljs

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

src/quo2/core.cljs

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

src/quo2/core_spec.cljs

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

src/status_im2/contexts/quo_preview/drawers/drawer_buttons.cljs

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

src/status_im2/contexts/quo_preview/main.cljs

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

test/jest/jest.config.js

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