From 94e728bdf31632625b679751f429ce017d5672ad Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Tue, 11 Jun 2024 11:16:01 +0100 Subject: [PATCH] Icon added to disclaimer component (#20309) --- .../selectors/disclaimer/component_spec.cljs | 6 +++ .../selectors/disclaimer/style.cljs | 4 ++ .../components/selectors/disclaimer/view.cljs | 18 +++++++-- .../components/selectors/selectors/style.cljs | 24 ++++-------- .../components/selectors/selectors/view.cljs | 4 +- .../preview/quo/selectors/disclaimer.cljs | 37 +++++++++++++------ 6 files changed, 61 insertions(+), 32 deletions(-) diff --git a/src/quo/components/selectors/disclaimer/component_spec.cljs b/src/quo/components/selectors/disclaimer/component_spec.cljs index 25b8b54503..c5c90892bb 100644 --- a/src/quo/components/selectors/disclaimer/component_spec.cljs +++ b/src/quo/components/selectors/disclaimer/component_spec.cljs @@ -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)))) + diff --git a/src/quo/components/selectors/disclaimer/style.cljs b/src/quo/components/selectors/disclaimer/style.cljs index fa648a4715..f0531fae3d 100644 --- a/src/quo/components/selectors/disclaimer/style.cljs +++ b/src/quo/components/selectors/disclaimer/style.cljs @@ -16,3 +16,7 @@ (def text {:margin-left 8}) + +(def icon-container + {:align-items :flex-end + :flex 1}) diff --git a/src/quo/components/selectors/disclaimer/view.cljs b/src/quo/components/selectors/disclaimer/view.cljs index 89057038ac..40cdc7972b 100644 --- a/src/quo/components/selectors/disclaimer/view.cljs +++ b/src/quo/components/selectors/disclaimer/view.cljs @@ -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))}]])]])) diff --git a/src/quo/components/selectors/selectors/style.cljs b/src/quo/components/selectors/selectors/style.cljs index c41eebe189..c945f567e2 100644 --- a/src/quo/components/selectors/selectors/style.cljs +++ b/src/quo/components/selectors/selectors/style.cljs @@ -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]}] diff --git a/src/quo/components/selectors/selectors/view.cljs b/src/quo/components/selectors/selectors/view.cljs index fd46077f55..ca342caf85 100644 --- a/src/quo/components/selectors/selectors/view.cljs +++ b/src/quo/components/selectors/selectors/view.cljs @@ -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? diff --git a/src/status_im/contexts/preview/quo/selectors/disclaimer.cljs b/src/status_im/contexts/preview/quo/selectors/disclaimer.cljs index 354197f618..51268f3f4a 100644 --- a/src/status_im/contexts/preview/quo/selectors/disclaimer.cljs +++ b/src/status_im/contexts/preview/quo/selectors/disclaimer.cljs @@ -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"]]))))