feat: add privacy options component (#14500)

src/quo2/components/settings/privacy_option.cljs

@@ -0,0 +1,63 @@
+(ns quo2.components.settings.privacy-option
+  (:require [react-native.core :as rn]
+            [quo2.components.icon :as icons]
+            [quo2.components.selectors.selectors :as selectors]
+            [quo2.components.settings.style :as style]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]))
+
+(defn- bullet
+  []
+  [rn/view {:style style/bullet-container}
+   [rn/view {:style (style/bullet)}]])
+
+(defn- unordered-list
+  [container-style list-items]
+  [rn/view {:style (merge style/list-container container-style)}
+   (for [item list-items]
+     ^{:key (hash item)}
+     [rn/view {:style style/list-item}
+      [bullet]
+      [text/text {:size :paragraph-2} item]])])
+
+(defn- card-footer
+  [{:keys [active? label on-toggle]}]
+  [rn/touchable-without-feedback
+   [rn/view {:style (style/card-footer)}
+    [rn/view {:style style/card-footer-label-container}
+     [text/text {:size :paragraph-2} label]]
+    [rn/view {:style style/card-footer-toggle-container}
+     [selectors/toggle {:disabled? (not active?)
+                        :on-change on-toggle}]]]])
+
+(defn- selection-indicator
+  [active?]
+  [rn/view {:style (style/selection-indicator-container active?)}
+   [rn/view {:style (style/selection-indicator active?)}]])
+
+(defn- card-header
+  [{:keys [icon label active?]}]
+  [rn/view {:style style/card-header-container}
+   [icons/icon icon {:size  20
+                     :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
+   [rn/view {:style style/card-header-label-container}
+    [text/text {:weight :semi-bold} label]]
+   [selection-indicator active?]])
+
+(defn card
+  [{:keys [active? header footer list-items icon on-select on-toggle]
+    :or   {icon    :i/world
+           active? false}}]
+  [rn/touchable-without-feedback
+   {:on-press            on-select
+    :accessibility-label :privacy-option-card
+    :testID              :privacy-option-card}
+   [rn/view (style/privacy-option-card active?)
+    [card-header {:active? active?
+                  :icon    icon
+                  :label   header}]
+    [unordered-list (when-not footer {:margin-bottom 8}) list-items]
+    (when footer
+      [card-footer {:active?   active?
+                    :label     footer
+                    :on-toggle on-toggle}])]])

src/quo2/components/settings/style.cljs

@@ -0,0 +1,93 @@
+(ns quo2.components.settings.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def bullet-container
+  {:width        20
+   :height       20
+   :margin-right 8
+   :align-self   :flex-start})
+
+(defn bullet
+  []
+  {:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
+   :border-radius    100
+   :width            8
+   :height           8
+   :position         :absolute
+   :left             6
+   :top              6})
+
+(def list-container
+  {:margin-right 12})
+
+(def list-item
+  {:flex               1
+   :flex-direction     :row
+   :align-items        :center
+   :padding-vertical   6
+   :padding-horizontal 12})
+
+(defn selection-indicator-container
+  [active?]
+  {:height        20
+   :width         20
+   :border-radius 20
+   :border-width  1
+   :border-color  (if active?
+                    (colors/theme-colors colors/primary-50 colors/primary-60)
+                    (colors/theme-colors colors/neutral-20 colors/neutral-80))})
+
+(defn selection-indicator
+  [active?]
+  {:margin-left      :auto
+   :height           14
+   :width            14
+   :background-color (if active?
+                       (colors/theme-colors colors/primary-50 colors/primary-60)
+                       (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
+   :border-radius    20
+   :margin-right     :auto
+   :margin-top       :auto
+   :margin-bottom    :auto})
+
+(def card-footer-label-container
+  {:flex        0.9
+   :margin-left 16})
+
+(def card-footer-toggle-container
+  {:flex              0.1
+   :margin-horizontal 12
+   :align-self        :center})
+
+(defn card-footer
+  []
+  {:flex              1
+   :flex-direction    :row
+   :justify-content   :space-between
+   :margin-horizontal 12
+   :margin-top        8
+   :margin-bottom     12
+   :padding-vertical  12
+   :border-radius     12
+   :border-width      1
+   :background-color  (colors/theme-colors colors/neutral-5 colors/neutral-90)
+   :border-color      (colors/theme-colors colors/neutral-10 colors/neutral-80)})
+
+(def card-header-container
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-top        12
+   :padding-bottom     8
+   :padding-horizontal 12})
+
+(def card-header-label-container
+  {:flex        1
+   :margin-left 4})
+
+(defn privacy-option-card
+  [active?]
+  {:border-radius 16
+   :border-width  1
+   :border-color  (if active?
+                    (colors/theme-colors colors/primary-50 colors/primary-60)
+                    (colors/theme-colors colors/neutral-10 colors/neutral-80))})

src/quo2/core.cljs

@@ -42,6 +42,7 @@
             quo2.components.navigation.page-nav
             quo2.components.selectors.disclaimer
             quo2.components.selectors.selectors
+            quo2.components.settings.privacy-option
             quo2.components.loaders.skeleton))
 
 (def button quo2.components.buttons.button/button)
@@ -106,3 +107,6 @@
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def info-count quo2.components.notifications.info-count/info-count)
 (def notification-dot quo2.components.notifications.notification-dot/notification-dot)
+
+;;;; SETTINGS
+(def privacy-option quo2.components.settings.privacy-option/card)

src/status_im2/contexts/quo_preview/main.cljs

@@ -37,6 +37,7 @@
             [status-im2.contexts.quo-preview.reactions.react :as react]
             [status-im2.contexts.quo-preview.selectors.disclaimer :as disclaimer]
             [status-im2.contexts.quo-preview.selectors.selectors :as selectors]
+            [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option]
             [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards]
             [status-im2.contexts.quo-preview.navigation.top-nav :as top-nav]
             [status-im2.contexts.quo-preview.navigation.bottom-nav-tab :as bottom-nav-tab]
@@ -172,6 +173,9 @@
                {:name :selectors
                 :insets {:top false}
                 :component selectors/preview-selectors}]
+   :settings [{:name :privacy-option
+               :insets {:top false}
+               :component privacy-option/preview-options}]
    :tabs [{:name      :segmented
            :insets    {:top false}
            :component segmented/preview-segmented}

src/status_im2/contexts/quo_preview/settings/privacy_option.cljs

@@ -0,0 +1,94 @@
+(ns status-im2.contexts.quo-preview.settings.privacy-option
+  (:require [reagent.core :as reagent]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.core :as quo]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Header:"
+    :key   :header
+    :type  :text}
+   {:label "Footer:"
+    :key   :footer
+    :type  :text}
+   {:label "Line 1:"
+    :key   :li1
+    :type  :text}
+   {:label "Line 2:"
+    :key   :li2
+    :type  :text}
+   {:label "Line 3:"
+    :key   :li3
+    :type  :text}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:selected :contacts
+                             :header   "header"
+                             :footer   "footer"
+                             :li1      "line item 1"
+                             :li2      "line item 2"
+                             :li3      "line item 3"})]
+    (fn []
+      (let [header     (:header @state)
+            footer     (:footer @state)
+            list-items (->> (select-keys @state [:li1 :li2 :li3])
+                            vals
+                            (remove empty?))]
+        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+         [rn/view {:margin-horizontal 20
+                   :padding           16
+                   :flex              1}
+          [rn/view {:margin-vertical 2}
+           [quo/text {:size :paragraph-2} "Dynamic sample"]]
+          [rn/view {:flex 1}
+           [preview/customizer state descriptor]]
+          [rn/view {:margin-vertical 8}
+           [quo/privacy-option
+            (cond-> {:on-select  #(swap! state assoc :selected :preview)
+                     :on-toggle  #(js/alert "dynamic card toggled")
+                     :active?    (= :preview (:selected @state))}
+              (not-empty header)     (assoc :header header)
+              (not-empty footer)     (assoc :footer footer)
+              (not-empty list-items) (assoc :list-items list-items))]]
+
+          [rn/view {:margin-vertical 2}
+           [quo/text {:size :paragraph-2} "Static samples"]]
+          [rn/view {:margin-vertical 8}
+           [quo/privacy-option {:header     "Contacts only"
+                                :icon       :i/contact-book
+                                :on-select  #(swap! state assoc :selected :contacts)
+                                :active?    (= :contacts (:selected @state))
+                                :list-items ["Only add people from your contact list"
+                                             "Added members can add their own contacts"
+                                             "There is no link or QR for this group"
+                                             "No public information available"]}]]
+          [rn/view {:margin-vertical 8}
+           [quo/privacy-option {:icon       :i/world
+                                :header     "Anyone can request to join"
+                                :on-select  #(swap! state assoc :selected :anyone)
+                                :on-toggle  #(js/alert "card toggled")
+                                :active?    (= :anyone (:selected @state))
+                                :footer     "Members can approve join requests"
+                                :list-items ["Add people from your contact list"
+                                             "Invite prople from outside your contact list"
+                                             "Group is shareable via link"
+                                             "Group name and number of people is public"]}]]
+          [rn/view {:margin-vertical 8}
+           [quo/privacy-option {:icon       :i/world
+                                :header     "Sample card with very long text to test proper overflow behavior"
+                                :on-select  #(swap! state assoc :selected :overflow)
+                                :on-toggle  #(js/alert "card toggled")
+                                :active?    (= :overflow (:selected @state))
+                                :footer     "This footer is exceedingly long to test the overflowing behavior of text in it"
+                                :list-items ["A very, very very long text line that serves to test the overflow behavior of this component"]}]]]]))))
+
+(defn preview-options
+  []
+  [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}]])