feat: add banner component to quo2 (#14608)

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

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

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

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)

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]

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

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}