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

chore: move button into view and style files (#16442) 

* chore: move button into view and style files
This commit is contained in:
Jamie Caprani 2023-07-07 08:20:37 +01:00 committed by GitHub
parent 3395baa966
commit 25b088833d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 259 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/quo2/components/buttons/__tests__/buttons_component_spec.cljs
View File

@ -1,28 +0,0 @@
(ns quo2.components.buttons.--tests--.buttons-component-spec
(:require ["@testing-library/react-native" :as rtl]
[quo2.components.buttons.button :as button]
[reagent.core :as reagent]))
(defn render-button
([options label]
(rtl/render (reagent/as-element [button/button options label]))))
(js/global.test "default render of button component"
(fn []
(render-button {:accessibility-label "test-button"} "")
(-> (js/expect (rtl/screen.getByLabelText "test-button"))
(.toBeTruthy))))
(js/global.test "button renders with a label"
(fn []
(render-button {} "test-label")
(-> (js/expect (rtl/screen.getByText "test-label"))
(.toBeTruthy))))
(js/global.test "button on-press works"
(let [event (js/jest.fn)]
(fn []
(render-button {:on-press event} "test-label")
(rtl/fireEvent.press (rtl/screen.getByText "test-label"))
(-> (js/expect event)
(.toHaveBeenCalledTimes 1)))))

18
src/quo2/components/buttons/button/component_spec.cljs Normal file
View File

@ -0,0 +1,18 @@
(ns quo2.components.buttons.button.component-spec
(:require [quo2.components.buttons.button.view :as button]
[test-helpers.component :as h]))
(h/describe "button tests"
(h/test "default render of button component"
(h/render [button/button {:accessibility-label "test-button"} ""])
(h/is-truthy (h/get-by-label-text "test-button")))
(h/test "button renders with a label"
(h/render [button/button {} "test-label"])
(h/is-truthy (h/get-by-text "test-label")))
(h/test "button on-press works"
(let [event (h/mock-fn)]
(h/render [button/button {:on-press event} "test-label"])
(h/fire-event :press (h/get-by-text "test-label"))
(h/was-called event))))

183
src/quo2/components/buttons/button.cljs → src/quo2/components/buttons/button/style.cljs
View File

@ -1,12 +1,46 @@
(ns quo2.components.buttons.button
(:require [quo2.components.icon :as quo2.icons]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]
[react-native.blur :as blur]
[reagent.core :as reagent]
[quo2.components.buttons.style :as style]))
(ns quo2.components.buttons.button.style
(:require [quo2.foundations.colors :as colors]))
(def blur-view
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0})
(defn before-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left)
(if (= size 40) 12 8))
:margin-right (or (get override-margins :right) 4)
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))
(defn after-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left) 4)
:margin-right (or (get override-margins :right)
(if (= size 40) 12 8))
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))
(defn themes
[customization-color]
@ -179,7 +213,7 @@
24 8))})
(defn style-container
[type size disabled background-color border-color icon above width before after blur-active?]
[{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
(merge {:height size
:align-items :center
:justify-content :center
@ -228,132 +262,3 @@
:border-width 1})
(when disabled
{:opacity 0.3})))
(defn- button-internal
"with label
[button opts \"label\"]
opts
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
:danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
:size 40 [default] /32/24
:icon true/false
:community-color '#FFFFFF'
:community-text-color '#000000'
:before :icon-keyword
:after :icon-keyword}
only icon
[button {:icon true} :i/close-circle]"
[_ _]
(let [pressed-in (reagent/atom false)]
(fn
[{:keys [on-press disabled type size before after above icon-secondary-no-color
width customization-color theme override-background-color pressed
on-long-press accessibility-label icon icon-no-color style inner-style test-ID
blur-active? override-before-margins override-after-margins icon-size icon-container-size
icon-container-rounded?]
:or {type :primary
size 40
customization-color :primary
blur-active? true}}
children]
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
blur-overlay-color icon-background-color]}
(get-in (themes customization-color)
[theme type])
state (cond disabled :disabled
(or @pressed-in pressed) :pressed
:else :default)
blur-state (if blur-active? :blurred :default)
icon-size (or icon-size (when (= 24 size) 12))
icon-secondary-color (or icon-secondary-color icon-color)]
[rn/touchable-without-feedback
(merge {:test-ID test-ID
:disabled disabled
:accessibility-label accessibility-label
:on-press-in #(reset! pressed-in true)
:on-press-out #(reset! pressed-in nil)}
(when on-press
{:on-press on-press})
(when on-long-press
{:on-long-press on-long-press}))
[rn/view
{:style (merge
(shape-style-container type icon size)
{:width width}
style)}
[rn/view
{:style (merge
(style-container
type
size
disabled
(or override-background-color (get background-color state))
(get border-color state)
icon
above
width
before
after
blur-active?)
(when (= state :pressed) {:opacity 0.9})
inner-style)}
(when (and (= type :blurred)
blur-active?)
[blur/view
{:blur-radius 20
:blur-type blur-type
:overlay-color blur-overlay-color
:style style/blur-view}])
(when above
[rn/view
[quo2.icons/icon above
{:container-style {:margin-bottom 2}
:color icon-secondary-color
:size icon-size}]])
(when before
[rn/view
{:style (style/before-icon-style
{:override-margins override-before-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon before
{:color icon-secondary-color
:size icon-size}]])
[rn/view
(cond
(or icon icon-no-color)
[quo2.icons/icon children
{:color icon-color
:no-color icon-no-color
:size icon-size}]
(string? children)
[text/text
{:size (when (#{56 24} size) :paragraph-2)
:weight :medium
:number-of-lines 1
:style {:color label-color}}
children]
(vector? children)
children)]
(when after
[rn/view
{:style (style/after-icon-style
{:override-margins override-after-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon after
{:no-color icon-secondary-no-color
:color icon-secondary-color
:size icon-size}]])]]]))))
(def button (theme/with-theme button-internal))

138
src/quo2/components/buttons/button/view.cljs Normal file
View File

@ -0,0 +1,138 @@
(ns quo2.components.buttons.button.view
(:require [quo2.components.icon :as quo2.icons]
[quo2.components.markdown.text :as text]
[quo2.theme :as theme]
[react-native.core :as rn]
[react-native.blur :as blur]
[reagent.core :as reagent]
[quo2.components.buttons.button.style :as style]))
(defn- button-internal
"with label
[button opts \"label\"]
opts
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
:danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
:size 40 [default] /32/24
:icon true/false
:community-color '#FFFFFF'
:community-text-color '#000000'
:before :icon-keyword
:after :icon-keyword}
only icon
[button {:icon true} :i/close-circle]"
[_ _]
(let [pressed-in (reagent/atom false)]
(fn
[{:keys [on-press disabled type size before after above icon-secondary-no-color
width customization-color theme override-background-color pressed
on-long-press accessibility-label icon icon-no-color style inner-style test-ID
blur-active? override-before-margins override-after-margins icon-size icon-container-size
icon-container-rounded?]
:or {type :primary
size 40
customization-color :primary
blur-active? true}}
children]
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
blur-overlay-color icon-background-color]}
(get-in (style/themes customization-color)
[theme type])
state (cond disabled :disabled
(or @pressed-in pressed) :pressed
:else :default)
blur-state (if blur-active? :blurred :default)
icon-size (or icon-size (when (= 24 size) 12))
icon-secondary-color (or icon-secondary-color icon-color)]
[rn/touchable-without-feedback
(merge {:test-ID test-ID
:disabled disabled
:accessibility-label accessibility-label
:on-press-in #(reset! pressed-in true)
:on-press-out #(reset! pressed-in nil)}
(when on-press
{:on-press on-press})
(when on-long-press
{:on-long-press on-long-press}))
[rn/view
{:style (merge
(style/shape-style-container type icon size)
{:width width}
style)}
[rn/view
{:style (merge
(style/style-container {:type type
:size size
:disabled disabled
:background-color
(or override-background-color (get background-color state))
:border-color
(get border-color state)
:icon icon
:above above
:width width
:before before
:after after
:blur-active? blur-active?})
(when (= state :pressed) {:opacity 0.9})
inner-style)}
(when (and (= type :blurred)
blur-active?)
[blur/view
{:blur-radius 20
:blur-type blur-type
:overlay-color blur-overlay-color
:style style/blur-view}])
(when above
[rn/view
[quo2.icons/icon above
{:container-style {:margin-bottom 2}
:color icon-secondary-color
:size icon-size}]])
(when before
[rn/view
{:style (style/before-icon-style
{:override-margins override-before-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon before
{:color icon-secondary-color
:size icon-size}]])
[rn/view
(cond
(or icon icon-no-color)
[quo2.icons/icon children
{:color icon-color
:no-color icon-no-color
:size icon-size}]
(string? children)
[text/text
{:size (when (#{56 24} size) :paragraph-2)
:weight :medium
:number-of-lines 1
:style {:color label-color}}
children]
(vector? children)
children)]
(when after
[rn/view
{:style (style/after-icon-style
{:override-margins override-after-margins
:size size
:icon-container-size icon-container-size
:icon-background-color (get icon-background-color blur-state)
:icon-container-rounded? icon-container-rounded?
:icon-size icon-size})}
[quo2.icons/icon after
{:no-color icon-secondary-no-color
:color icon-secondary-color
:size icon-size}]])]]]))))
(def button (theme/with-theme button-internal))

2
src/quo2/components/buttons/predictive_keyboard/view.cljs
View File

@ -5,7 +5,7 @@
[quo2.theme :as theme]
[react-native.linear-gradient :as linear-gradient]
[quo2.foundations.colors :as colors]
[quo2.components.buttons.button :as button]))
[quo2.components.buttons.button.view :as button]))
(def ^:private gradients
{:light [(colors/alpha colors/neutral-40 0.05) (colors/alpha colors/neutral-40 0)]

42
src/quo2/components/buttons/style.cljs
View File

@ -1,42 +0,0 @@
(ns quo2.components.buttons.style)
(def blur-view
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0})
(defn before-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left)
(if (= size 40) 12 8))
:margin-right (or (get override-margins :right) 4)
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))
(defn after-icon-style
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
icon-size]}]
(merge
{:margin-left (or (get override-margins :left) 4)
:margin-right (or (get override-margins :right)
(if (= size 40) 12 8))
:align-items :center
:justify-content :center}
(when icon-container-size
{:width icon-container-size
:height icon-container-size})
(when icon-background-color
{:background-color icon-background-color})
(when icon-container-rounded?
{:border-radius (/ (or icon-container-size icon-size) 2)})))

2
src/quo2/components/code/snippet.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.components.code.snippet
(:require [cljs-bean.core :as bean]
[clojure.string :as string]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.code.code.style :as style]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]

2
src/quo2/components/drawers/documentation_drawers/view.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.components.drawers.documentation-drawers.view
(:require [quo2.components.buttons.button :as button]
(:require [quo2.components.buttons.button.view :as button]
[quo2.components.drawers.documentation-drawers.style :as style]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]

2
src/quo2/components/dropdowns/dropdown.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.components.dropdowns.dropdown
(:require [quo2.components.buttons.button :as button]))
(:require [quo2.components.buttons.button.view :as button]))
(defn dropdown
[_ _]

2
src/quo2/components/empty_state/empty_state/view.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.components.empty-state.empty-state.view
(:require [quo2.components.buttons.button :as button]
(:require [quo2.components.buttons.button.view :as button]
[quo2.components.empty-state.empty-state.styles :as styles]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]

2
src/quo2/components/header.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.header
(:require [oops.core :refer [oget]]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]

2
src/quo2/components/info/information_box/view.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.info.information-box.view
(:require [clojure.string :as string]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.icon :as icons]
[quo2.components.info.information-box.style :as style]
[quo2.components.markdown.text :as text]

2
src/quo2/components/inputs/profile_input/view.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.inputs.profile-input.view
(:require
[quo2.components.buttons.button :as buttons]
[quo2.components.buttons.button.view :as buttons]
[quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.inputs.profile-input.style :as style]
[quo2.components.inputs.title-input.view :as title-input]

2
src/quo2/components/links/link_preview/view.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.components.links.link-preview.view
(:require [quo2.components.buttons.button :as button]
(:require [quo2.components.buttons.button.view :as button]
[quo2.components.links.link-preview.style :as style]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]))

2
src/quo2/components/navigation/page_nav.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.components.navigation.page-nav
(:require [clojure.string :as string]
[quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]

2
src/quo2/components/notifications/activity_log/view.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.components.notifications.activity-log.view
(:require [clojure.string :as string]
[quo.core :as quo]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.components.notifications.activity-log.style :as style]

2
src/quo2/components/profile/profile_card/view.cljs
View File

@ -6,7 +6,7 @@
[quo2.foundations.colors :as colors]
[react-native.hole-view :as hole-view]
[quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.profile.profile-card.style :as style]
[quo2.components.avatars.user-avatar.view :as user-avatar]))

2
src/quo2/components/record_audio/record_audio/buttons/record_button.cljs
View File

@ -4,7 +4,7 @@
[quo2.foundations.colors :as colors]
[react-native.core :as rn :refer [use-effect]]
[react-native.reanimated :as reanimated]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.record-audio.record-audio.helpers :as helpers]))
(defn f-record-button

2
src/quo2/components/settings/accounts/view.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.settings.accounts.view
(:require [quo2.components.avatars.account-avatar :as account-avatar]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text]
[quo2.components.settings.accounts.style :as style]
[react-native.core :as rn]))

2
src/quo2/components/settings/settings_list/view.cljs
View File

@ -2,7 +2,7 @@
(:require [quo2.components.settings.settings-list.style :as style]
[quo2.components.icon :as icons]
[quo2.components.selectors.selectors.view :as selectors]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text]
[quo2.components.tags.status-tags :as status-tag]
[quo2.foundations.colors :as colors]

2
src/quo2/components/share/share_qr_code/view.cljs
View File

@ -4,7 +4,7 @@
[react-native.blur :as blur]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.components.buttons.button :as button]
[quo2.components.buttons.button.view :as button]
[react-native.core :as rn]))
(defn view

8
src/quo2/core.cljs
View File

@ -8,10 +8,11 @@
quo2.components.avatars.user-avatar.view
quo2.components.avatars.wallet-user-avatar
quo2.components.banners.banner.view
quo2.components.buttons.button
quo2.components.buttons.button.view
quo2.components.buttons.dynamic-button
quo2.components.buttons.predictive-keyboard.view
quo2.components.buttons.slide-button.view
quo2.components.code.snippet
quo2.components.colors.color-picker.view
quo2.components.community.community-card-view
quo2.components.community.community-list-view
@ -130,11 +131,14 @@
(def banner quo2.components.banners.banner.view/banner)
;;;; BUTTONS
(def button quo2.components.buttons.button/button)
(def button quo2.components.buttons.button.view/button)
(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
(def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
(def slide-button quo2.components.buttons.slide-button.view/view)
;;;; CODE
(def snippet quo2.components.code.snippet/snippet)
;;;; CARDS
(def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card)
(def keycard quo2.components.keycard.view/keycard)

2
src/quo2/core_spec.cljs
View File

@ -2,7 +2,7 @@
(:require
[quo2.components.avatars.user-avatar.component-spec]
[quo2.components.banners.banner.component-spec]
[quo2.components.buttons.--tests--.buttons-component-spec]
[quo2.components.buttons.button.component-spec]
[quo2.components.buttons.predictive-keyboard.component-spec]
[quo2.components.buttons.slide-button.component-spec]
[quo2.components.colors.color-picker.component-spec]

10
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -3,7 +3,7 @@
[quo.core :as quo]
[quo.design-system.colors :as colors]
[quo.design-system.spacing :as spacing]
[quo2.components.buttons.button :as quo2.button]
[quo2.core :as quo2]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.tabs.tabs :as quo2.tabs]
[quo2.foundations.colors :as quo2.colors]
@ -293,14 +293,14 @@
[react/view
[react/scroll-view {:horizontal true :margin-bottom 32 :showsHorizontalScrollIndicator false}
[react/view {:width 20}]
[quo2.button/button {:size 56 :width button-width :above :i/placeholder} "Buy"]
[quo2/button {:size 56 :width button-width :above :i/placeholder} "Buy"]
[react/view {:width 12}]
[quo2.button/button {:size 56 :width button-width :type :secondary :above :i/placeholder} "Send"]
[quo2/button {:size 56 :width button-width :type :secondary :above :i/placeholder} "Send"]
[react/view {:width 12}]
[quo2.button/button {:size 56 :width button-width :type :secondary :above :i/placeholder}
[quo2/button {:size 56 :width button-width :type :secondary :above :i/placeholder}
"Receive"]
[react/view {:width 12}]
[quo2.button/button {:size 56 :width button-width :type :secondary :above :i/placeholder} "Swap"]
[quo2/button {:size 56 :width button-width :type :secondary :above :i/placeholder} "Swap"]
[react/view {:width 20}]]]
[assets-and-collections-new selected-account]]))

8
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -2,7 +2,7 @@
(:require [quo.animated :as reanimated]
[quo.core :as quo]
[quo.design-system.colors :as colors]
[quo2.components.buttons.button :as quo2.button]
[quo2.core :as quo2]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.tabs.tabs :as quo2.tabs]
[quo2.foundations.colors :as quo2.colors]
@ -287,7 +287,7 @@
{:default-active (:address (first accounts))
:on-change #(reset! selected-account-atom %)
:data accounts-data}]
[quo2.button/button
[quo2/button
{:type :grey
:size 32
:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet-old
@ -307,7 +307,7 @@
quo2.colors/neutral-95)}}
[react/view {:padding-horizontal 20}
[react/view {:flex-direction :row :height 56 :align-items :center :justify-content :flex-end}
[quo2.button/button
[quo2/button
{:icon true
:size 32
:type :grey
@ -317,7 +317,7 @@
{:handler :wallet.send/qr-scanner-result}])}
:i/placeholder]
[react/view {:width 12}]
[quo2.button/button
[quo2/button
{:icon true
:size 32
:type :grey

4
src/status_im2/common/plus_button/view.cljs
View File

@ -1,9 +1,9 @@
(ns status-im2.common.plus-button.view
(:require [quo2.components.buttons.button :as quo2.button]))
(:require [quo2.core :as quo]))
(defn plus-button
[{:keys [on-press accessibility-label customization-color]}]
[quo2.button/button
[quo/button
{:type :primary
:size 32
:icon true

9
src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.bottom-sheet.bottom-sheet
(:require [quo2.components.buttons.button :as button]
[quo2.components.markdown.text :as text]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[re-frame.core :as re-frame]
[react-native.core :as rn]
@ -26,9 +25,9 @@
[rn/view
{:style {:justify-content :center
:align-items :center}}
[button/button {:on-press #(do (re-frame/dispatch [:hide-bottom-sheet]))} "Close bottom sheet"]
[quo/button {:on-press #(do (re-frame/dispatch [:hide-bottom-sheet]))} "Close bottom sheet"]
[text/text {:style {:padding-top 20}} "Hello world!"]])
[quo/text {:style {:padding-top 20}} "Hello world!"]])
(defn cool-preview
[]
@ -51,7 +50,7 @@
{:style {:align-items :center
:padding 16}}
[button/button {:on-press on-bottom-sheet-open} "Open bottom sheet"]]]])))
[quo/button {:on-press on-bottom-sheet-open} "Open bottom sheet"]]]])))
(defn preview-bottom-sheet
[]

4
src/status_im2/contexts/quo_preview/buttons/button.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.buttons.button
(:require [quo2.components.buttons.button :as quo2]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -73,7 +73,7 @@
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/button
[quo/button
(merge (dissoc @state
:theme
:before

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

@ -1,8 +1,7 @@
(ns status-im2.contexts.quo-preview.main
(:refer-clojure :exclude [filter])
(:require
[quo2.components.buttons.button :as quo2-button]
[quo2.components.markdown.text :as quo2-text]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[re-frame.core :as re-frame]
[react-native.core :as rn]
@ -387,8 +386,8 @@
[rn/view
{:style {:flex-direction :row
:margin-vertical 8}}
[quo2-button/button {:on-press #(theme/set-theme :light)} "Set light theme"]
[quo2-button/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])
[quo/button {:on-press #(theme/set-theme :light)} "Set light theme"]
[quo/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])
(defn main-screen
[]
@ -399,18 +398,18 @@
:padding-horizontal 16
:background-color (colors/theme-colors colors/white colors/neutral-90)}
[theme-switcher]
[quo2-text/text {:size :heading-1} "Preview Quo2 Components"]
[quo/text {:size :heading-1} "Preview Quo2 Components"]
[rn/view
(map (fn [category]
^{:key (get category 0)}
[rn/view {:style {:margin-vertical 8}}
[quo2-text/text
[quo/text
{:weight :semi-bold
:size :heading-2}
(clojure.core/name (key category))]
(for [{:keys [name]} (val category)]
^{:key name}
[quo2-button/button
[quo/button
{:test-ID (str "quo2-" name)
:style {:margin-vertical 8}
:on-press #(re-frame/dispatch [:navigate-to name])}

17
src/status_im2/contexts/quo_preview/notifications/notification.cljs
View File

@ -1,8 +1,5 @@
(ns status-im2.contexts.quo-preview.notifications.notification
(:require [quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.buttons.button :as button]
[quo2.components.code.snippet :as snippet]
[quo2.components.info.info-message :as info-message]
(:require [quo2.core :as quo]
[react-native.core :as rn]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.code.snippet :as snippet-preview]
@ -16,7 +13,7 @@
notification! #(rf/dispatch [:toasts/upsert (assoc opts :id id)])
dismissed? (not notification-opts)]
[rn/view {:style {:margin-bottom 10}}
[button/button
[quo/button
{:size 32
:on-press #(if dismissed? (notification!) (dismiss!))}
(if dismissed? text (str "DISMISS " text))]])))
@ -32,7 +29,7 @@
[]
[notification-button
"Notification: with title(header)"
{:avatar [user-avatar/user-avatar
{:avatar [quo/user-avatar
{:full-name "A Y"
:status-indicator? true
:online? true
@ -48,7 +45,7 @@
[]
[notification-button
"with title and body"
{:avatar [user-avatar/user-avatar
{:avatar [quo/user-avatar
{:full-name "A Y"
:status-indicator? true
:online? true
@ -64,7 +61,7 @@
[]
[notification-button
"with anything as header & body"
{:avatar [user-avatar/user-avatar
{:avatar [quo/user-avatar
{:full-name "A Y"
:status-indicator? true
:online? true
@ -72,12 +69,12 @@
:customization-color :blue
:ring-background (resources/get-mock-image :ring)}]
:header [rn/view
[info-message/info-message
[quo/info-message
{:type :success
:size :tiny
:icon :i/placeholder}
"info-message as title"]]
:body [snippet/snippet {:language :clojure :max-lines 15 :syntax true}
:body [quo/snippet {:language :clojure :max-lines 15 :syntax true}
snippet-preview/clojure-example]
:duration 3000
:type :notification}])

6
src/status_im2/contexts/quo_preview/notifications/toast.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.notifications.toast
(:require [quo2.components.buttons.button :as button]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -13,7 +13,7 @@
toast! #(rf/dispatch [:toasts/upsert (assoc opts :id id)])
dismissed? (not toast-opts)]
[rn/view {:style {:margin-bottom 10}}
[button/button
[quo/button
{:size 32
:on-press #(if dismissed? (toast!) (dismiss!))}
(if dismissed? text (str "DISMISS " text))]])))
@ -73,7 +73,7 @@
(let [toast-opts (rf/sub [:toasts/toast "Toast: 30s duration"])]
(when toast-opts
[rn/view {:style {:margin-bottom 10}}
[button/button
[quo/button
{:size 32
:on-press
#(rf/dispatch

7
src/status_im2/contexts/quo_preview/selectors/disclaimer.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.quo-preview.selectors.disclaimer
(:require [quo2.components.buttons.button :as button]
[quo2.components.selectors.disclaimer.view :as disclaimer]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]
@ -44,12 +43,12 @@
[rn/view {:style {:padding-horizontal 15}}
[blur-background blur?]
[rn/view {:style {:margin-vertical 50}}
[disclaimer/view
[quo/disclaimer
{:blur? blur?
:checked? checked?
:on-change #(swap! state update :checked? not)}
text]]
[button/button {:disabled (not checked?)}
[quo/button {:disabled (not checked?)}
"submit"]]]))))
(defn preview-disclaimer