quo2 documentation drawer component (#15674)

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

@@ -0,0 +1,30 @@
+(ns quo2.components.drawers.documentation-drawers.component-spec
+  (:require [quo2.components.drawers.documentation-drawers.view :as documentation-drawers]
+            [test-helpers.component :as h]))
+
+(h/describe "Documentation drawers component"
+  (h/test "render component without button"
+    (h/render [documentation-drawers/view {:title "Documentation"} "Content"])
+    (-> (h/expect (h/get-by-label-text :documentation-drawer-title))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-label-text :documentation-drawer-content))
+        (.toBeTruthy)))
+  (h/test "render component with button"
+    (h/render [documentation-drawers/view
+               {:title "Documentation" :show-button? true :button-label "Read more"} "Content"])
+    (-> (h/expect (h/get-by-label-text :documentation-drawer-title))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-label-text :documentation-drawer-content))
+        (.toBeTruthy))
+    (-> (h/expect (h/get-by-label-text :documentation-drawer-button))
+        (.toBeTruthy)))
+  (h/test "button is pressed"
+    (let [event (h/mock-fn)]
+      (h/render
+       [documentation-drawers/view
+        {:title "Documentation" :show-button? true :button-label "Read more" :on-press-button event}
+        "Content"])
+      (h/fire-event :press (h/get-by-label-text :documentation-drawer-button))
+      (-> (h/expect event)
+          (.toHaveBeenCalled)))))
+

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

@@ -0,0 +1,10 @@
+(ns quo2.components.drawers.documentation-drawers.style)
+
+(def container
+  {:align-items :flex-start
+   :padding     20})
+
+(def content
+  {:margin-top    12
+   :margin-bottom 16})
+

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

@@ -0,0 +1,40 @@
+(ns quo2.components.drawers.documentation-drawers.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.drawers.documentation-drawers.style :as style]
+            [react-native.core :as rn]
+            [react-native.gesture :as gesture]
+            [quo2.components.buttons.button :as button]
+            [quo2.foundations.colors :as colors]))
+
+(defn view
+  "Options
+   - `title` Title text
+   - `show-button?` Show button
+   - `button-label` button label
+   - `button-icon` button icon
+   - `on-press-button` On press handler for the button
+   - `shell?` use shell theme
+
+   `content` Content of the drawer
+   "
+  [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
+  [gesture/scroll-view
+   [rn/view {:style style/container}
+    [text/text
+     {:size                :heading-2
+      :accessibility-label :documentation-drawer-title
+      :style               {:color (colors/theme-colors colors/neutral-100
+                                                        colors/white
+                                                        (when shell? :dark))}
+      :weight              :semi-bold} title]
+    [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
+     content]
+    (when show-button?
+      [button/button
+       (merge {:size                24
+               :type                (if shell? :blur-bg-outline :outline)
+               :on-press            on-press-button
+               :accessibility-label :documentation-drawer-button
+               :after               button-icon}
+              (when shell? {:override-theme :dark})) button-label])]])
+

src/quo2/core.cljs

@@ -24,6 +24,7 @@
     quo2.components.dividers.new-messages
     quo2.components.dividers.strength-divider.view
     quo2.components.drawers.action-drawers.view
+    quo2.components.drawers.documentation-drawers.view
     quo2.components.drawers.drawer-buttons.view
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
@@ -151,6 +152,7 @@
 
 ;;;; DRAWERS
 (def action-drawer quo2.components.drawers.action-drawers.view/action-drawer)
+(def documentation-drawers quo2.components.drawers.documentation-drawers.view/view)
 (def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
 (def permission-context quo2.components.drawers.permission-context.view/view)
 

src/quo2/core_spec.cljs

@@ -9,6 +9,7 @@
     [quo2.components.dividers.--tests--.divider-label-component-spec]
     [quo2.components.dividers.strength-divider.component-spec]
     [quo2.components.drawers.action-drawers.component-spec]
+    [quo2.components.drawers.documentation-drawers.component-spec]
     [quo2.components.drawers.drawer-buttons.component-spec]
     [quo2.components.drawers.permission-context.component-spec]
     [quo2.components.inputs.input.component-spec]

src/status_im2/common/bottom_sheet/styles.cljs

@@ -12,7 +12,7 @@
    :margin-vertical  8})
 
 (defn sheet
-  [{:keys [top bottom]} window-height override-theme]
+  [{:keys [top bottom]} window-height override-theme shell?]
   {:position                :absolute
    :max-height              (- window-height top 20)
    :z-index                 1
@@ -21,9 +21,20 @@
    :right                   0
    :border-top-left-radius  20
    :border-top-right-radius 20
+   :overflow                :hidden
    :flex                    1
    :padding-bottom          (max 20 bottom)
-   :background-color        (colors/theme-colors colors/white colors/neutral-90 override-theme)})
+   :background-color        (if shell?
+                              :transparent
+                              (colors/theme-colors colors/white colors/neutral-90 override-theme))})
+
+(def shell-bg
+  {:position         :absolute
+   :background-color colors/white-opa-5
+   :left             0
+   :right            0
+   :top              0
+   :bottom           0})
 
 (defn selected-item
   [override-theme]

src/status_im2/common/bottom_sheet/view.cljs

@@ -6,7 +6,8 @@
             [status-im2.common.bottom-sheet.styles :as styles]
             [react-native.gesture :as gesture]
             [oops.core :as oops]
-            [react-native.hooks :as hooks]))
+            [react-native.hooks :as hooks]
+            [react-native.blur :as blur]))
 
 (def duration 450)
 (def timing-options #js {:duration duration})
@@ -49,7 +50,7 @@
            (hide translate-y bg-opacity window-height))))))
 
 (defn view
-  [{:keys [hide? insets]} {:keys [content override-theme selected-item]}]
+  [{:keys [hide? insets]} {:keys [content override-theme selected-item shell?]}]
   (let [{window-height :height} (rn/get-window)
         bg-opacity              (reanimated/use-shared-value 0)
         translate-y             (reanimated/use-shared-value window-height)
@@ -69,7 +70,11 @@
       [reanimated/view
        {:style (reanimated/apply-animations-to-style
                 {:transform [{:translateY translate-y}]}
-                (styles/sheet insets window-height override-theme))}
+                (styles/sheet insets window-height override-theme shell?))}
+
+       (when shell?
+         [blur/view
+          {:style styles/shell-bg}])
 
        (when selected-item
          [rn/view

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

@@ -0,0 +1,132 @@
+(ns status-im2.contexts.quo-preview.drawers.documentation-drawers
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [utils.re-frame :as rf]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Title"
+    :key   :title
+    :type  :text}
+   {:label "Show button"
+    :key   :show-button?
+    :type  :boolean}
+   {:label "Button label"
+    :key   :button-label
+    :type  :text}
+   {:label "Shell"
+    :key   :shell?
+    :type  :boolean}])
+
+(defn documentation-content
+  [override-theme]
+  [quo/text {:style {:color (colors/theme-colors colors/neutral-100 colors/white override-theme)}}
+   "Group chats are conversations of more than two people. To invite someone to a group chat, you need to have them on your Status contact list."])
+
+(defn documentation-content-full
+  [override-theme]
+  (let [text-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
+        text-style {:color text-color :margin-bottom 10}]
+    [rn/view
+     [quo/text {:style text-style}
+      "Group chats are conversations of more than two people. To invite someone to a group chat, you need to have them on your Status contact list."]
+     [quo/text {:style text-style}
+      "Group chats are different to communities, as they're meant to unite smaller groups of people or be centred around specific topics. For more information about group chats, see Understand group chats."]
+     [quo/text {:size :paragraph-1 :weight :semi-bold :style {:margin-top 16 :color text-color}}
+      "What to expect"]
+     [quo/text {:style text-style}
+      "You can invite up to 20 members to your group chat. If you need more, consider creating a community."]
+     [quo/text {:style text-style}
+      "Once you create your group chat, you can customize it and add members, as well as remove them."]
+     [quo/text {:style text-style}
+      "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]
+     [quo/text {:size :paragraph-1 :weight :semi-bold :style {:margin-top 16 :color text-color}}
+      "What to expect"]
+     [quo/text {:style text-style}
+      "You can invite up to 20 members to your group chat. If you need more, consider creating a community."]
+     [quo/text {:style text-style}
+      "Once you create your group chat, you can customize it and add members, as well as remove them."]
+     [quo/text {:style text-style}
+      "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]
+     [quo/text {:size :paragraph-1 :weight :semi-bold :style {:margin-top 16 :color text-color}}
+      "What to expect"]
+     [quo/text {:style text-style}
+      "You can invite up to 20 members to your group chat. If you need more, consider creating a community."]
+     [quo/text {:style text-style}
+      "Once you create your group chat, you can customize it and add members, as well as remove them."]
+     [quo/text {:style text-style}
+      "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]
+     [quo/text {:size :paragraph-1 :weight :semi-bold :style {:margin-top 16 :color text-color}}
+      "What to expect"]
+     [quo/text {:style text-style}
+      "You can invite up to 20 members to your group chat. If you need more, consider creating a community."]
+     [quo/text {:style text-style}
+      "Once you create your group chat, you can customize it and add members, as well as remove them."]
+     [quo/text {:style text-style}
+      "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]
+     [quo/text {:size :paragraph-1 :weight :semi-bold :style {:margin-top 16 :color text-color}}
+      "What to expect"]
+     [quo/text {:style text-style}
+      "You can invite up to 20 members to your group chat. If you need more, consider creating a community."]
+     [quo/text {:style text-style}
+      "Once you create your group chat, you can customize it and add members, as well as remove them."]
+     [quo/text {:style text-style}
+      "Group chats are always end-to-end encrypted with secure cryptographic keys. Only the group chat members will have access to the messages in it. Status doesn't have the keys and can't access any messages by design."]]))
+
+(defn render-documenation-drawer
+  [title show-button? button-label expanded? shell?]
+  [quo/documentation-drawers
+   {:title           title
+    :show-button?    (and show-button? (not @expanded?))
+    :button-label    button-label
+    :button-icon     :info
+    :shell?          shell?
+    :on-press-button #(swap! expanded? not)}
+   (if @expanded?
+     [documentation-content-full (when shell? :dark)]
+     [documentation-content (when shell? :dark)])])
+
+(defn cool-preview
+  []
+  (let
+    [state
+     (reagent/atom
+      {:title        "Create a group chat"
+       :button-label "Read more"})
+     title (reagent/cursor state [:title])
+     show-button? (reagent/cursor state [:show-button?])
+     button-label (reagent/cursor state [:button-label])
+     shell? (reagent/cursor state [:shell?])
+     expanded? (reagent/atom false)]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view {:padding-vertical 60}
+         [quo/button
+          {:style    {:margin-horizontal 40}
+           :on-press #(rf/dispatch [:show-bottom-sheet
+                                    {:content     (constantly [render-documenation-drawer @title
+                                                               @show-button?
+                                                               @button-label expanded? @shell?])
+                                     :expandable? @show-button?
+                                     :shell?      @shell?
+                                     :expanded?   @expanded?}])}
+          "Open drawer"]
+         [render-documenation-drawer @title @show-button? @button-label expanded?]]]])))
+
+(defn preview-documenation-drawers
+  []
+  [rn/view
+   {:background-color (colors/theme-colors
+                       colors/white
+                       colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])
+

src/status_im2/contexts/quo_preview/main.cljs

@@ -32,6 +32,7 @@
     [status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
     [status-im2.contexts.quo-preview.dividers.strength-divider :as strength-divider]
     [status-im2.contexts.quo-preview.drawers.action-drawers :as action-drawers]
+    [status-im2.contexts.quo-preview.drawers.documentation-drawers :as documenation-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]
@@ -166,6 +167,9 @@
    :drawers               [{:name      :action-drawers
                             :options   {:topBar {:visible true}}
                             :component action-drawers/preview-action-drawers}
+                           {:name      :documentation-drawer
+                            :insets    {:top false}
+                            :component documenation-drawers/preview-documenation-drawers}
                            {:name      :drawer-buttons
                             :options   {:topBar {:visible true}}
                             :component drawer-buttons/preview-drawer-buttons}