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

feat: add banner component to quo2 (#14608)

This commit is contained in:
Jamie Caprani 2022-12-22 13:20:38 +00:00 committed by GitHub
parent e9252f5025
commit 9937914594
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 114 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/quo2/components/banners/__tests__/banner_component_spec.cljs Normal file
View File

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

19
src/quo2/components/banners/banner/style.cljs Normal file
View File

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

24
src/quo2/components/banners/banner/view.cljs Normal file
View File

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

4
src/quo2/core.cljs
View File

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

1
src/quo2/core_spec.cljs
View File

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

45
src/status_im2/contexts/quo_preview/banners/banner.cljs Normal file
View File

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

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

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