From faaf6d5f94597617e58bc2b339b8c410d1c2481b Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 29 Sep 2022 16:28:32 +0100 Subject: [PATCH] feat: add disclaimer component to quo 2 library (#14084) * feat: add disclaimer component to quo 2 library * chore: move state of selectors to be internal --- src/quo2/components/selectors/disclaimer.cljs | 31 +++ src/quo2/components/selectors/selectors.cljs | 210 ++++++++++-------- src/quo2/screens/main.cljs | 6 +- src/quo2/screens/selectors/disclaimer.cljs | 31 +++ src/quo2/screens/selectors/selectors.cljs | 19 +- 5 files changed, 185 insertions(+), 112 deletions(-) create mode 100644 src/quo2/components/selectors/disclaimer.cljs create mode 100644 src/quo2/screens/selectors/disclaimer.cljs diff --git a/src/quo2/components/selectors/disclaimer.cljs b/src/quo2/components/selectors/disclaimer.cljs new file mode 100644 index 0000000000..ff96b3882b --- /dev/null +++ b/src/quo2/components/selectors/disclaimer.cljs @@ -0,0 +1,31 @@ +(ns quo2.components.selectors.disclaimer + (:require [quo.react-native :as rn] + [quo2.foundations.colors :as colors] + [quo2.components.markdown.text :as text] + [quo2.components.selectors.selectors :as selectors])) + +(defn disclaimer [{:keys [on-change accessibility-label container-style]} label] + [rn/view + {:style + (merge + container-style + {:flex 1 + :flex-direction :row + :background-color (colors/theme-colors + colors/neutral-5 + colors/neutral-80-opa-40) + :padding 11 + :align-self :stretch + :border-radius 12 + :border-width 1 + :border-color (colors/theme-colors + colors/neutral-20 + colors/neutral-70)})} + [selectors/checkbox + {:on-change on-change}] + [text/text + {:accessibility-label accessibility-label + :size :paragraph-2 + :style {:margin-left 8}} + label]]) + diff --git a/src/quo2/components/selectors/selectors.cljs b/src/quo2/components/selectors/selectors.cljs index 2e6586b91c..a635953e05 100644 --- a/src/quo2/components/selectors/selectors.cljs +++ b/src/quo2/components/selectors/selectors.cljs @@ -2,6 +2,7 @@ (:require [quo.react-native :as rn] [quo2.foundations.colors :as colors] [quo.theme :as theme] + [reagent.core :as reagent] [quo2.components.icon :as icons])) (defn- get-color [checked? disabled?] @@ -12,105 +13,120 @@ (colors/alpha colors/neutral-20 (if disabled? 0.4 1)) (colors/alpha colors/neutral-70 (if disabled? 0.3 1))))) -(defn checkbox-prefill [{:keys [checked? on-change disabled? container-style]}] - [rn/touchable-without-feedback - {:on-press (when (and on-change (not disabled?)) on-change)} - [rn/view - {:style (merge - container-style - {:height 21 - :width 21 - :border-radius 6 - :background-color (colors/theme-colors - (colors/alpha colors/neutral-20 (if disabled? 0.3 1)) - (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))}) - :accessibility-label (str "checkbox-" (if checked? "on" "off")) - :accessibility-role :checkbox} - (when checked? - [rn/view {:style - {:height 20 - :width 20}} - [icons/icon :main-icons2/check - {:size 20 - :color (colors/theme-colors - (colors/alpha colors/neutral-100 (if disabled? 0.3 1)) - (colors/alpha colors/white (if disabled? 0.3 1)))}]])]]) +(defn- handle-press [disabled? on-change checked?] + (when (not disabled?) + (fn [] + (swap! checked? not) + (when on-change (on-change @checked?))))) -(defn checkbox [{:keys [checked? on-change disabled? container-style]}] - [rn/touchable-without-feedback - {:on-press (when (and on-change (not disabled?)) on-change)} - [rn/view - {:style (merge - container-style - {:height (if checked? 20 21) - :width (if checked? 20 21) - :border-radius 6 - :border-width (if checked? 0 1) - :background-color (if checked? - (get-color checked? disabled?) - (colors/theme-colors - colors/white - colors/neutral-80-opa-40)) - :border-color (if checked? :none - (get-color checked? disabled?))}) +(defn checkbox-prefill [{:keys [default-checked?]}] + (let [checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? container-style]}] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change checked?)} + [rn/view + {:style (merge + container-style + {:height 21 + :width 21 + :border-radius 6 + :background-color (colors/theme-colors + (colors/alpha colors/neutral-20 (if disabled? 0.3 1)) + (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))}) + :accessibility-label (str "checkbox-" (if @checked? "on" "off")) + :accessibility-role :checkbox} + (when @checked? + [rn/view {:style + {:height 20 + :width 20}} + [icons/icon :main-icons2/check + {:size 20 + :color (colors/theme-colors + (colors/alpha colors/neutral-100 (if disabled? 0.3 1)) + (colors/alpha colors/white (if disabled? 0.3 1)))}]])]]))) - :accessibility-label (str "checkbox-" (if checked? "on" "off")) - :accessibility-role :checkbox} - (when checked? - [rn/view {:style - {:height 20 - :width 20}} - [icons/icon :main-icons2/check - {:size 20 - :color (colors/alpha colors/white (if disabled? 0.3 1))}]])]]) +(defn checkbox [{:keys [default-checked?]}] + (let [checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? container-style]}] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change checked?)} + [rn/view + {:style (merge + container-style + {:height 21 + :width 21})} + [rn/view + {:style {:flex 1 + :border-radius 6 + :border-width (if @checked? 0 1) + :background-color (if @checked? + (get-color @checked? disabled?) + (colors/theme-colors + colors/white + colors/neutral-80-opa-40)) + :border-color (if @checked? :none + (get-color @checked? disabled?))} + :accessibility-label (str "checkbox-" (if @checked? "on" "off")) + :accessibility-role :checkbox} + (when @checked? + [rn/view {:style + {:height 20 + :width 20}} + [icons/icon :main-icons2/check + {:size 20 + :color (colors/alpha colors/white (if disabled? 0.3 1))}]])]]]))) -(defn radio [{:keys [checked? on-change disabled? container-style]}] - [rn/touchable-without-feedback - {:on-press (when (and on-change (not disabled?)) on-change)} - [rn/view - {:style (merge - container-style - {:height 20 - :width 20 - :border-radius 20 - :border-width 1 - :border-color (get-color checked? disabled?) - :background-color (colors/theme-colors colors/white - (colors/alpha colors/neutral-80 0.4))}) - :accessibility-label (str "radio-" (if checked? "on" "off")) - :accessibility-role :checkbox} +(defn radio [{:keys [default-checked?]}] + (let [checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? container-style]}] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change checked?)} + [rn/view + {:style (merge + container-style + {:height 20 + :width 20 + :border-radius 20 + :border-width 1 + :border-color (get-color @checked? disabled?) + :background-color (colors/theme-colors colors/white + (colors/alpha colors/neutral-80 0.4))}) + :accessibility-label (str "radio-" (if @checked? "on" "off")) + :accessibility-role :checkbox} - [rn/view {:style - {:margin-left :auto - :height 14 - :width 14 - :background-color (when checked? (get-color checked? disabled?)) - :border-radius 20 - :margin-right :auto - :margin-top :auto - :margin-bottom :auto}}]]]) + [rn/view {:style + {:margin-left :auto + :height 14 + :width 14 + :background-color (when @checked? (get-color @checked? disabled?)) + :border-radius 20 + :margin-right :auto + :margin-top :auto + :margin-bottom :auto}}]]]))) -(defn toggle [{:keys [checked? on-change disabled? container-style]}] - [rn/touchable-without-feedback - {:on-press (when (and on-change (not disabled?)) on-change)} - [rn/view - {:style (merge - container-style - {:height 20 - :width 30 - :border-radius 20 - :background-color (get-color checked? disabled?)}) - :accessibility-label (str "toggle-" (if checked? "on" "off")) - :accessibility-role :checkbox} - [rn/view {:style - {:margin-left (if checked? 12 2) - :height 16 - :width 16 - :background-color (colors/alpha colors/white - (if (theme/dark?) - (if disabled? 0.3 1) - 1)) - :border-radius 20 - :margin-right :auto - :margin-top :auto - :margin-bottom :auto}}]]]) +(defn toggle [{:keys [default-checked?]}] + (let [checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? container-style]}] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change checked?)} + [rn/view + {:style (merge + container-style + {:height 20 + :width 30 + :border-radius 20 + :background-color (get-color @checked? disabled?)}) + :accessibility-label (str "toggle-" (if @checked? "on" "off")) + :accessibility-role :checkbox} + [rn/view {:style + {:margin-left (if @checked? 12 2) + :height 16 + :width 16 + :background-color (colors/alpha colors/white + (if (theme/dark?) + (if disabled? 0.3 1) + 1)) + :border-radius 20 + :margin-right :auto + :margin-top :auto + :margin-bottom :auto}}]]]))) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 45e2876e54..7817adc890 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -27,6 +27,7 @@ [quo2.screens.messages.gap :as messages-gap] [quo2.screens.notifications.activity-logs :as activity-logs] [quo2.screens.reactions.react :as react] + [quo2.screens.selectors.disclaimer :as disclaimer] [quo2.screens.selectors.selectors :as selectors] [quo2.screens.switcher.switcher-cards :as switcher-cards] [quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab] @@ -107,7 +108,10 @@ :switcher [{:name :switcher-cards :insets {:top false} :component switcher-cards/preview-switcher-cards}] - :selectors [{:name :selectors + :selectors [{:name :disclaimer + :insets {:top false} + :component disclaimer/preview-disclaimer} + {:name :selectors :insets {:top false} :component selectors/preview-selectors}] :tabs [{:name :segmented diff --git a/src/quo2/screens/selectors/disclaimer.cljs b/src/quo2/screens/selectors/disclaimer.cljs new file mode 100644 index 0000000000..54d0a8f57d --- /dev/null +++ b/src/quo2/screens/selectors/disclaimer.cljs @@ -0,0 +1,31 @@ +(ns quo2.screens.selectors.disclaimer + (:require [quo.react-native :as rn] + [reagent.core :as reagent] + [quo2.components.buttons.button :as button] + [quo2.components.selectors.disclaimer :as quo2] + [quo2.foundations.colors :as colors])) + +(defn cool-preview [] + (let [checked? (reagent/atom false)] + (fn [] + [rn/view {:margin-bottom 50 + :padding-vertical 16 + :padding-horizontal 20} + [rn/view {:padding-vertical 60 + :align-items :center} + [quo2/disclaimer + {:checked? @checked? + :container-style {:margin-bottom 40} + :on-change #(swap! checked? not)} + "I agree with the community rules"] + [button/button + {:disabled (not @checked?)} + "submit"]]]))) + +(defn preview-disclaimer [] + [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}]]) diff --git a/src/quo2/screens/selectors/selectors.cljs b/src/quo2/screens/selectors/selectors.cljs index 1678c03f7b..a1c071e0c2 100644 --- a/src/quo2/screens/selectors/selectors.cljs +++ b/src/quo2/screens/selectors/selectors.cljs @@ -11,8 +11,7 @@ :type :boolean}]) (defn cool-preview [] - (let [state (reagent/atom {:disabled false}) - checked? (reagent/atom false)] + (let [state (reagent/atom {:disabled false})] (fn [] [rn/view {:margin-bottom 50 :padding 16} @@ -21,24 +20,16 @@ :align-items :center} [text/text {:size :heading-2} "Toggle"] [quo2/toggle {:container-style {:margin-top 0} - :disabled? (:disabled? @state) - :checked? @checked? - :on-change #(swap! checked? not)}] + :disabled? (:disabled? @state)}] [text/text {:size :heading-2} "Radio"] [quo2/radio {:container-style {:margin-top 0} - :disabled? (:disabled? @state) - :checked? @checked? - :on-change #(swap! checked? not)}] + :disabled? (:disabled? @state)}] [text/text {:size :heading-2} "Checkbox"] [quo2/checkbox {:container-style {:margin-top 0} - :disabled? (:disabled? @state) - :checked? @checked? - :on-change #(swap! checked? not)}] + :disabled? (:disabled? @state)}] [text/text {:size :heading-2} "Checkbox Prefill"] [quo2/checkbox-prefill {:container-style {:margin-top 0} - :disabled? (:disabled? @state) - :checked? @checked? - :on-change #(swap! checked? not)}]]]))) + :disabled? (:disabled? @state)}]]]))) (defn preview-selectors [] [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)