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

quo2 documentation drawer component (#15674)

This commit is contained in:
Ajay Sivan 2023-05-04 19:15:13 +05:30 committed by GitHub
parent d7db401cb2
commit 0226a92c07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 240 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/quo2/components/drawers/documentation_drawers/component_spec.cljs Normal file
View File

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

10
src/quo2/components/drawers/documentation_drawers/style.cljs Normal file
View File

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

40
src/quo2/components/drawers/documentation_drawers/view.cljs Normal file
View File

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

2
src/quo2/core.cljs
View File

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

1
src/quo2/core_spec.cljs
View File

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

15
src/status_im2/common/bottom_sheet/styles.cljs
View File

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

11
src/status_im2/common/bottom_sheet/view.cljs
View File

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

132
src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs Normal file
View File

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

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

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