diff --git a/src/quo2/components/banners/__tests__/banner_component_spec.cljs b/src/quo2/components/banners/__tests__/banner_component_spec.cljs new file mode 100644 index 0000000000..d0eaf2bb2a --- /dev/null +++ b/src/quo2/components/banners/__tests__/banner_component_spec.cljs @@ -0,0 +1,17 @@ +(ns quo2.components.banners.--tests--.banner-component-spec + (:require ["@testing-library/react-native" :as rtl] + [quo2.components.banners.banner.view :as banner] + [reagent.core :as reagent])) + +(defn render-banner + [opts] + (rtl/render (reagent/as-element [banner/banner opts]))) + +(js/global.test "basic render of banner component" + (fn [] + (render-banner {:pins-count "5" + :latest-pin-text "this message"}) + (-> (js/expect (rtl/screen.getByText "this message")) + (.toBeTruthy)) + (-> (js/expect (rtl/screen.getByText "5")) + (.toBeTruthy)))) diff --git a/src/quo2/components/banners/banner/style.cljs b/src/quo2/components/banners/banner/style.cljs new file mode 100644 index 0000000000..fae09bfe35 --- /dev/null +++ b/src/quo2/components/banners/banner/style.cljs @@ -0,0 +1,19 @@ +(ns quo2.components.banners.banner.style + (:require [quo2.foundations.colors :as colors])) + + +(def container + {:width "100%" + :height 50 + :background-color colors/primary-50-opa-20 + :flex-direction :row + :align-items :center + :padding-horizontal 20 + :padding-vertical 10}) + +(def counter + {:padding-right 22 + :height 20 + :width 20 + :justify-content :center + :align-items :center}) \ No newline at end of file diff --git a/src/quo2/components/banners/banner/view.cljs b/src/quo2/components/banners/banner/view.cljs new file mode 100644 index 0000000000..cc31584134 --- /dev/null +++ b/src/quo2/components/banners/banner/view.cljs @@ -0,0 +1,24 @@ +(ns quo2.components.banners.banner.view + (:require [quo2.components.banners.banner.style :as style] + [quo2.components.counter.counter :as counter] + [quo2.components.icon :as icons] + [quo2.components.markdown.text :as text] + [react-native.core :as rn])) + +(defn banner + [{:keys [show-pin? latest-pin-text pins-count on-press]}] + [rn/touchable-opacity + {:accessibility-label :pinned-banner + :style style/container + :active-opacity 1 + :on-press on-press} + (when show-pin? [icons/icon :i/pin {:size 20}]) + [text/text + {:number-of-lines 1 + :size :paragraph-2 + :style {:margin-left 10 :margin-right 50}} + latest-pin-text] + [rn/view + {:accessibility-label :pins-count + :style style/counter} + (when (pos? pins-count) [counter/counter {:type :secondary} pins-count])]]) \ No newline at end of file diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 4c54ac7f6d..366e613160 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -6,6 +6,7 @@ quo2.components.avatars.icon-avatar quo2.components.avatars.user-avatar quo2.components.avatars.wallet-user-avatar + quo2.components.banners.banner.view quo2.components.buttons.button quo2.components.buttons.dynamic-button quo2.components.community.community-card-view @@ -85,6 +86,9 @@ (def user-avatar quo2.components.avatars.user-avatar/user-avatar) (def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar) +;;;; BANNER +(def banner quo2.components.banners.banner.view/banner) + ;;;; COMMUNITY (def community-card-view-item quo2.components.community.community-card-view/community-card-view-item) (def communities-list-view-item quo2.components.community.community-list-view/communities-list-view-item) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index fcd6706797..492e7a335f 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -1,5 +1,6 @@ (ns quo2.core-spec (:require + [quo2.components.banners.--tests--.banner-component-spec] [quo2.components.buttons.--tests--.buttons-component-spec] [quo2.components.counter.--tests--.counter-component-spec] [quo2.components.dividers.--tests--.divider-label-component-spec] diff --git a/src/status_im2/contexts/quo_preview/banners/banner.cljs b/src/status_im2/contexts/quo_preview/banners/banner.cljs new file mode 100644 index 0000000000..a4f539afda --- /dev/null +++ b/src/status_im2/contexts/quo_preview/banners/banner.cljs @@ -0,0 +1,45 @@ +(ns status-im2.contexts.quo-preview.banners.banner + (:require [quo2.core :as quo2] + [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 "message" + :key :latest-pin-text + :type :text} + {:label "number of messages" + :key :pins-count + :type :text} + {:label "show pin icon?" + :key :show-pin? + :type :boolean} + ]) + +(defn cool-preview + [] + (let [state (reagent/atom {:show-pin? true + :pins-count 2 + :latest-pin-text "Be respectful of fellow community member..."})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view + {:padding-vertical 60 + :flex-direction :row + :justify-content :center} + [quo2/banner @state]]]]))) + +(defn preview-banner + [] + [rn/view + {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list + {:flex 1 + :keyboardShouldPersistTaps :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 aa28bb8923..b7edf0e3b1 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -13,6 +13,7 @@ [status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar] [status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar] [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as wallet-user-avatar] + [status-im2.contexts.quo-preview.banners.banner :as banner] [status-im2.contexts.quo-preview.buttons.button :as button] [status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button] [status-im2.contexts.quo-preview.code.snippet :as code-snippet] @@ -81,6 +82,9 @@ {:name :account-avatar :insets {:top false} :component account-avatar/preview-account-avatar}] + :banner [{:name :banner + :insets {:top false} + :component banner/preview-banner}] :buttons [{:name :button :insets {:top false} :component button/preview-button}