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
This commit is contained in:
parent
0e3b645695
commit
faaf6d5f94
|
@ -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]])
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
(:require [quo.react-native :as rn]
|
(:require [quo.react-native :as rn]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[quo.theme :as theme]
|
[quo.theme :as theme]
|
||||||
|
[reagent.core :as reagent]
|
||||||
[quo2.components.icon :as icons]))
|
[quo2.components.icon :as icons]))
|
||||||
|
|
||||||
(defn- get-color [checked? disabled?]
|
(defn- get-color [checked? disabled?]
|
||||||
|
@ -12,9 +13,17 @@
|
||||||
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
|
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
|
||||||
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
|
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
|
||||||
|
|
||||||
(defn checkbox-prefill [{:keys [checked? on-change disabled? container-style]}]
|
(defn- handle-press [disabled? on-change checked?]
|
||||||
|
(when (not disabled?)
|
||||||
|
(fn []
|
||||||
|
(swap! checked? not)
|
||||||
|
(when on-change (on-change @checked?)))))
|
||||||
|
|
||||||
|
(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
|
[rn/touchable-without-feedback
|
||||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
{:on-press (handle-press disabled? on-change checked?)}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge
|
{:style (merge
|
||||||
container-style
|
container-style
|
||||||
|
@ -24,9 +33,9 @@
|
||||||
:background-color (colors/theme-colors
|
:background-color (colors/theme-colors
|
||||||
(colors/alpha colors/neutral-20 (if disabled? 0.3 1))
|
(colors/alpha colors/neutral-20 (if disabled? 0.3 1))
|
||||||
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))})
|
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))})
|
||||||
:accessibility-label (str "checkbox-" (if checked? "on" "off"))
|
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
|
||||||
:accessibility-role :checkbox}
|
:accessibility-role :checkbox}
|
||||||
(when checked?
|
(when @checked?
|
||||||
[rn/view {:style
|
[rn/view {:style
|
||||||
{:height 20
|
{:height 20
|
||||||
:width 20}}
|
:width 20}}
|
||||||
|
@ -34,39 +43,44 @@
|
||||||
{:size 20
|
{:size 20
|
||||||
:color (colors/theme-colors
|
:color (colors/theme-colors
|
||||||
(colors/alpha colors/neutral-100 (if disabled? 0.3 1))
|
(colors/alpha colors/neutral-100 (if disabled? 0.3 1))
|
||||||
(colors/alpha colors/white (if disabled? 0.3 1)))}]])]])
|
(colors/alpha colors/white (if disabled? 0.3 1)))}]])]])))
|
||||||
|
|
||||||
(defn checkbox [{:keys [checked? on-change disabled? container-style]}]
|
(defn checkbox [{:keys [default-checked?]}]
|
||||||
|
(let [checked? (reagent/atom (or default-checked? false))]
|
||||||
|
(fn [{:keys [on-change disabled? container-style]}]
|
||||||
[rn/touchable-without-feedback
|
[rn/touchable-without-feedback
|
||||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
{:on-press (handle-press disabled? on-change checked?)}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge
|
{:style (merge
|
||||||
container-style
|
container-style
|
||||||
{:height (if checked? 20 21)
|
{:height 21
|
||||||
:width (if checked? 20 21)
|
:width 21})}
|
||||||
|
[rn/view
|
||||||
|
{:style {:flex 1
|
||||||
:border-radius 6
|
:border-radius 6
|
||||||
:border-width (if checked? 0 1)
|
:border-width (if @checked? 0 1)
|
||||||
:background-color (if checked?
|
:background-color (if @checked?
|
||||||
(get-color checked? disabled?)
|
(get-color @checked? disabled?)
|
||||||
(colors/theme-colors
|
(colors/theme-colors
|
||||||
colors/white
|
colors/white
|
||||||
colors/neutral-80-opa-40))
|
colors/neutral-80-opa-40))
|
||||||
:border-color (if checked? :none
|
:border-color (if @checked? :none
|
||||||
(get-color checked? disabled?))})
|
(get-color @checked? disabled?))}
|
||||||
|
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
|
||||||
:accessibility-label (str "checkbox-" (if checked? "on" "off"))
|
|
||||||
:accessibility-role :checkbox}
|
:accessibility-role :checkbox}
|
||||||
(when checked?
|
(when @checked?
|
||||||
[rn/view {:style
|
[rn/view {:style
|
||||||
{:height 20
|
{:height 20
|
||||||
:width 20}}
|
:width 20}}
|
||||||
[icons/icon :main-icons2/check
|
[icons/icon :main-icons2/check
|
||||||
{:size 20
|
{:size 20
|
||||||
:color (colors/alpha colors/white (if disabled? 0.3 1))}]])]])
|
:color (colors/alpha colors/white (if disabled? 0.3 1))}]])]]])))
|
||||||
|
|
||||||
(defn radio [{:keys [checked? on-change disabled? container-style]}]
|
(defn radio [{:keys [default-checked?]}]
|
||||||
|
(let [checked? (reagent/atom (or default-checked? false))]
|
||||||
|
(fn [{:keys [on-change disabled? container-style]}]
|
||||||
[rn/touchable-without-feedback
|
[rn/touchable-without-feedback
|
||||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
{:on-press (handle-press disabled? on-change checked?)}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge
|
{:style (merge
|
||||||
container-style
|
container-style
|
||||||
|
@ -74,36 +88,38 @@
|
||||||
:width 20
|
:width 20
|
||||||
:border-radius 20
|
:border-radius 20
|
||||||
:border-width 1
|
:border-width 1
|
||||||
:border-color (get-color checked? disabled?)
|
:border-color (get-color @checked? disabled?)
|
||||||
:background-color (colors/theme-colors colors/white
|
:background-color (colors/theme-colors colors/white
|
||||||
(colors/alpha colors/neutral-80 0.4))})
|
(colors/alpha colors/neutral-80 0.4))})
|
||||||
:accessibility-label (str "radio-" (if checked? "on" "off"))
|
:accessibility-label (str "radio-" (if @checked? "on" "off"))
|
||||||
:accessibility-role :checkbox}
|
:accessibility-role :checkbox}
|
||||||
|
|
||||||
[rn/view {:style
|
[rn/view {:style
|
||||||
{:margin-left :auto
|
{:margin-left :auto
|
||||||
:height 14
|
:height 14
|
||||||
:width 14
|
:width 14
|
||||||
:background-color (when checked? (get-color checked? disabled?))
|
:background-color (when @checked? (get-color @checked? disabled?))
|
||||||
:border-radius 20
|
:border-radius 20
|
||||||
:margin-right :auto
|
:margin-right :auto
|
||||||
:margin-top :auto
|
:margin-top :auto
|
||||||
:margin-bottom :auto}}]]])
|
:margin-bottom :auto}}]]])))
|
||||||
|
|
||||||
(defn toggle [{:keys [checked? on-change disabled? container-style]}]
|
(defn toggle [{:keys [default-checked?]}]
|
||||||
|
(let [checked? (reagent/atom (or default-checked? false))]
|
||||||
|
(fn [{:keys [on-change disabled? container-style]}]
|
||||||
[rn/touchable-without-feedback
|
[rn/touchable-without-feedback
|
||||||
{:on-press (when (and on-change (not disabled?)) on-change)}
|
{:on-press (handle-press disabled? on-change checked?)}
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (merge
|
{:style (merge
|
||||||
container-style
|
container-style
|
||||||
{:height 20
|
{:height 20
|
||||||
:width 30
|
:width 30
|
||||||
:border-radius 20
|
:border-radius 20
|
||||||
:background-color (get-color checked? disabled?)})
|
:background-color (get-color @checked? disabled?)})
|
||||||
:accessibility-label (str "toggle-" (if checked? "on" "off"))
|
:accessibility-label (str "toggle-" (if @checked? "on" "off"))
|
||||||
:accessibility-role :checkbox}
|
:accessibility-role :checkbox}
|
||||||
[rn/view {:style
|
[rn/view {:style
|
||||||
{:margin-left (if checked? 12 2)
|
{:margin-left (if @checked? 12 2)
|
||||||
:height 16
|
:height 16
|
||||||
:width 16
|
:width 16
|
||||||
:background-color (colors/alpha colors/white
|
:background-color (colors/alpha colors/white
|
||||||
|
@ -113,4 +129,4 @@
|
||||||
:border-radius 20
|
:border-radius 20
|
||||||
:margin-right :auto
|
:margin-right :auto
|
||||||
:margin-top :auto
|
:margin-top :auto
|
||||||
:margin-bottom :auto}}]]])
|
:margin-bottom :auto}}]]])))
|
||||||
|
|
|
@ -27,6 +27,7 @@
|
||||||
[quo2.screens.messages.gap :as messages-gap]
|
[quo2.screens.messages.gap :as messages-gap]
|
||||||
[quo2.screens.notifications.activity-logs :as activity-logs]
|
[quo2.screens.notifications.activity-logs :as activity-logs]
|
||||||
[quo2.screens.reactions.react :as react]
|
[quo2.screens.reactions.react :as react]
|
||||||
|
[quo2.screens.selectors.disclaimer :as disclaimer]
|
||||||
[quo2.screens.selectors.selectors :as selectors]
|
[quo2.screens.selectors.selectors :as selectors]
|
||||||
[quo2.screens.switcher.switcher-cards :as switcher-cards]
|
[quo2.screens.switcher.switcher-cards :as switcher-cards]
|
||||||
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
|
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
|
||||||
|
@ -107,7 +108,10 @@
|
||||||
:switcher [{:name :switcher-cards
|
:switcher [{:name :switcher-cards
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component switcher-cards/preview-switcher-cards}]
|
:component switcher-cards/preview-switcher-cards}]
|
||||||
:selectors [{:name :selectors
|
:selectors [{:name :disclaimer
|
||||||
|
:insets {:top false}
|
||||||
|
:component disclaimer/preview-disclaimer}
|
||||||
|
{:name :selectors
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component selectors/preview-selectors}]
|
:component selectors/preview-selectors}]
|
||||||
:tabs [{:name :segmented
|
:tabs [{:name :segmented
|
||||||
|
|
|
@ -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}]])
|
|
@ -11,8 +11,7 @@
|
||||||
:type :boolean}])
|
:type :boolean}])
|
||||||
|
|
||||||
(defn cool-preview []
|
(defn cool-preview []
|
||||||
(let [state (reagent/atom {:disabled false})
|
(let [state (reagent/atom {:disabled false})]
|
||||||
checked? (reagent/atom false)]
|
|
||||||
(fn []
|
(fn []
|
||||||
[rn/view {:margin-bottom 50
|
[rn/view {:margin-bottom 50
|
||||||
:padding 16}
|
:padding 16}
|
||||||
|
@ -21,24 +20,16 @@
|
||||||
:align-items :center}
|
:align-items :center}
|
||||||
[text/text {:size :heading-2} "Toggle"]
|
[text/text {:size :heading-2} "Toggle"]
|
||||||
[quo2/toggle {:container-style {:margin-top 0}
|
[quo2/toggle {:container-style {:margin-top 0}
|
||||||
:disabled? (:disabled? @state)
|
:disabled? (:disabled? @state)}]
|
||||||
:checked? @checked?
|
|
||||||
:on-change #(swap! checked? not)}]
|
|
||||||
[text/text {:size :heading-2} "Radio"]
|
[text/text {:size :heading-2} "Radio"]
|
||||||
[quo2/radio {:container-style {:margin-top 0}
|
[quo2/radio {:container-style {:margin-top 0}
|
||||||
:disabled? (:disabled? @state)
|
:disabled? (:disabled? @state)}]
|
||||||
:checked? @checked?
|
|
||||||
:on-change #(swap! checked? not)}]
|
|
||||||
[text/text {:size :heading-2} "Checkbox"]
|
[text/text {:size :heading-2} "Checkbox"]
|
||||||
[quo2/checkbox {:container-style {:margin-top 0}
|
[quo2/checkbox {:container-style {:margin-top 0}
|
||||||
:disabled? (:disabled? @state)
|
:disabled? (:disabled? @state)}]
|
||||||
:checked? @checked?
|
|
||||||
:on-change #(swap! checked? not)}]
|
|
||||||
[text/text {:size :heading-2} "Checkbox Prefill"]
|
[text/text {:size :heading-2} "Checkbox Prefill"]
|
||||||
[quo2/checkbox-prefill {:container-style {:margin-top 0}
|
[quo2/checkbox-prefill {:container-style {:margin-top 0}
|
||||||
:disabled? (:disabled? @state)
|
:disabled? (:disabled? @state)}]]])))
|
||||||
:checked? @checked?
|
|
||||||
:on-change #(swap! checked? not)}]]])))
|
|
||||||
|
|
||||||
(defn preview-selectors []
|
(defn preview-selectors []
|
||||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||||
|
|
Loading…
Reference in New Issue