diff --git a/src/quo2/components/drawers/documentation_drawers/component_spec.cljs b/src/quo2/components/drawers/documentation_drawers/component_spec.cljs new file mode 100644 index 0000000000..58645e3069 --- /dev/null +++ b/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))))) + diff --git a/src/quo2/components/drawers/documentation_drawers/style.cljs b/src/quo2/components/drawers/documentation_drawers/style.cljs new file mode 100644 index 0000000000..804bf0d006 --- /dev/null +++ b/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}) + diff --git a/src/quo2/components/drawers/documentation_drawers/view.cljs b/src/quo2/components/drawers/documentation_drawers/view.cljs new file mode 100644 index 0000000000..605573b247 --- /dev/null +++ b/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])]]) + diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 3074d0cca2..3308369b91 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index d1af5f7652..c37286c5e5 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/common/bottom_sheet/styles.cljs b/src/status_im2/common/bottom_sheet/styles.cljs index 8d10ac1a5f..fe25521239 100644 --- a/src/status_im2/common/bottom_sheet/styles.cljs +++ b/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] diff --git a/src/status_im2/common/bottom_sheet/view.cljs b/src/status_im2/common/bottom_sheet/view.cljs index 363f35a3af..330668745c 100644 --- a/src/status_im2/common/bottom_sheet/view.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/documentation_drawers.cljs new file mode 100644 index 0000000000..b940caea94 --- /dev/null +++ b/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}]]) + diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 5396b69bde..b584f4e1b9 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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}