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

Icon added to disclaimer component (#20309)

This commit is contained in:
Volodymyr Kozieiev 2024-06-11 11:16:01 +01:00 committed by GitHub
parent 402e67d199
commit 94e728bdf3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 61 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo/components/selectors/disclaimer/component_spec.cljs
View File

@ -28,3 +28,9 @@
(h/render [disclaimer/view {:checked? false} "test"])
(h/is-null (h/query-by-label-text :checkbox-on))
(h/is-truthy (h/query-by-label-text :checkbox-off)))))
(h/test "Renders icon"
(let [text "I accept this disclaimer"]
(h/render [disclaimer/view {:icon :i/locked} text])
(h/is-truthy (h/query-by-label-text :disclaimer-icon))))

4
src/quo/components/selectors/disclaimer/style.cljs
View File

@ -16,3 +16,7 @@
(def text
{:margin-left 8})
(def icon-container
{:align-items :flex-end
:flex 1})

18
src/quo/components/selectors/disclaimer/view.cljs
View File

@ -1,13 +1,15 @@
(ns quo.components.selectors.disclaimer.view
(:require
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.components.selectors.disclaimer.style :as style]
[quo.components.selectors.selectors.view :as selectors]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]))
(defn view
[{:keys [checked? blur? accessibility-label container-style on-change]} label]
[{:keys [checked? blur? accessibility-label container-style on-change icon customization-color]} label]
(let [theme (quo.theme/use-theme)]
[rn/touchable-without-feedback
{:on-press on-change
@ -18,8 +20,18 @@
:accessibility-label accessibility-label
:blur? blur?
:checked? checked?
:on-change on-change}]
:on-change on-change
:customization-color customization-color}]
[text/text
{:size :paragraph-2
:style style/text}
label]]]))
label]
(when icon
[rn/view {:style style/icon-container}
[icons/icon icon
{:accessibility-label :disclaimer-icon
:color (if blur?
(colors/white-opa-70)
(colors/theme-colors colors/neutral-50
colors/neutral-40
theme))}]])]]))

24
src/quo/components/selectors/selectors/style.cljs
View File

@ -6,18 +6,14 @@
[customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}
:blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme)
colors/white-opa-70
theme)
:blur {:checked (colors/resolve-color customization-color :light)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
(defn- radio-border-color
[customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}
:blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme)
colors/white
theme)
:blur {:checked (colors/resolve-color customization-color :light)
:unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
(defn- radio-background-unchecked-color
@ -28,11 +24,9 @@
(defn- checkbox-background-color
[customization-color theme]
{:normal {:checked (colors/resolve-color customization-color theme)
:unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}
:blur {:checked (colors/theme-colors (colors/resolve-color customization-color theme)
colors/white
theme)
:unchecked colors/white-opa-5}})
:unchecked nil}
:blur {:checked (colors/resolve-color customization-color :light)
:unchecked nil}})
(defn- checkbox-border-unchecked-color
[theme]
@ -42,7 +36,7 @@
(defn- filled-checkbox-background-color
[theme]
{:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)
:blur (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)})
:blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)})
(defn- get-color
[color-map & [blur? checked?]]
@ -114,11 +108,9 @@
{:height size :width size}))
(defn checkbox-check
[_checked? blur? theme]
[_checked? _blur? _theme]
{:size 20
:color (if blur?
(colors/theme-colors colors/white colors/neutral-100 theme)
colors/white)})
:color colors/white})
(defn filled-checkbox
[{:keys [disabled? blur? container-style theme]}]

4
src/quo/components/selectors/selectors/view.cljs
View File

@ -7,9 +7,9 @@
(defn- base-selector
[{:keys [default-checked? checked? disabled? blur? customization-color on-change container-style
label-prefix outer-style-fn inner-style-fn icon-style-fn]
:or {customization-color :blue}}]
label-prefix outer-style-fn inner-style-fn icon-style-fn]}]
(let [theme (quo.theme/use-theme)
customization-color (if customization-color customization-color :blue)
controlled-component? (some? checked?)
[internal-checked?
set-internal-checked?] (rn/use-state (when-not controlled-component?

37
src/status_im/contexts/preview/quo/selectors/disclaimer.cljs
View File

@ -1,33 +1,48 @@
(ns status-im.contexts.preview.quo.selectors.disclaimer
(:require
[quo.core :as quo]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:key :checked? :type :boolean}
{:key :blur? :type :boolean}
{:key :text :type :text}])
{:key :text :type :text}
{:key :icon :type :boolean}
(preview/customization-color-option)])
(defn view
[]
(let [state (reagent/atom {:checked? false
:blur? true
:text "I agree with the community rules"})]
(let [state (reagent/atom {:checked? false
:blur? false
:text "I agree with the community rules"
:icon false
:customization-color :blue})]
(fn []
(let [{:keys [blur? checked? text]} @state]
(let [{:keys [blur? checked? text icon customization-color]} @state
theme (quo.theme/use-theme)
blur? (if (= :light theme) false blur?)]
[preview/preview-container
{:state state
:descriptor descriptor
:descriptor (if (= :light theme)
descriptor
(vec (conj descriptor {:key :blur? :type :boolean})))
:blur? blur?
:show-blur-background? true
:component-container-style {:padding 20}}
[rn/view {:style {:margin-bottom 20}}
[quo/disclaimer
{:blur? blur?
:checked? checked?
:on-change #(swap! state update :checked? not)}
{:blur? blur?
:checked? checked?
:icon (when icon
(if checked?
:i/locked
:i/unlocked))
:on-change #(swap! state update :checked? not)
:customization-color customization-color}
text]]
[quo/button {:disabled? (not checked?)}
[quo/button
{:disabled? (not checked?)
:customization-color customization-color}
"submit"]]))))